/* [hidden] muss gewinnen.
   Ein eigenes display:flex oder display:grid ist staerker als das
   Standardverhalten von [hidden], und dann steht ein Element sichtbar
   da, obwohl das Skript es ausgeblendet hat. Genau das ist hier schon
   einmal beim Admin-Login passiert. */
[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════
   Pet Teh Pigeons – Gildenseite

   Umgebaut am 05.10.2026: die 3D-Buehne ist raus. Zu viele Leute
   hatten damit Leistungsprobleme, und wer keine Grafikbeschleunigung
   hatte, sah gar nichts. Die Seite laeuft jetzt rein mit CSS.

   Grundsatz fuer alles hier drin: bewegt wird nur transform und
   opacity. Beides rechnet die Grafikkarte nebenbei mit, ohne dass
   der Browser das Seitenlayout neu aufbauen muss. Kein width, kein
   top, kein margin in einer Animation. Darum laeuft das auch auf
   schwachen Rechnern fluessig.
   ══════════════════════════════════════════════════════════════ */

/* ── Anzeigeschrift ──
   Cinzel, eine Kapitalschrift mit roemischen Formen. Liegt bei uns
   auf dem Server, nicht bei Google: so geht beim Aufruf der Seite
   nichts an Dritte, und die Schrift ist sofort da. "swap" heisst,
   dass bis dahin die Systemschrift einspringt statt leerer Flaechen. */
@font-face{
  font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;
  src:url("schrift/cinzel-400.woff2") format("woff2");
}
@font-face{
  font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url("schrift/cinzel-600.woff2") format("woff2");
}
@font-face{
  font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;
  src:url("schrift/cinzel-700.woff2") format("woff2");
}

@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("schrift/inter-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("schrift/inter-500.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("schrift/inter-600.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("schrift/inter-700.woff2") format("woff2");
}

:root{
  --anzeige:"Cinzel",Georgia,"Times New Roman",serif;
  /* Barlow laeuft etwas schmaler als die ueblichen Systemschriften.
     Der Satz wird dadurch dichter und wirkt gesetzt statt
     voreingestellt. Vorher stand hier schlicht Segoe UI, also das,
     was Windows ohnehin nimmt. */
  --text-schrift:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Grundfarben */
  --tinte:#0b0710;
  --tinte-2:#140b1c;
  --tinte-3:#1a1026;

  /* Schrift */
  --text:#ece7f2;
  --text-leise:#cfc6dd;
  --text-still:#9a8fae;

  /* Akzente. Pink traegt, Violett begleitet, Gold setzt Spitzen. */
  --akzent:#e8306b;
  --akzent-2:#ff6aa2;
  --violett:#c06bff;
  --violett-tief:#7b3fd4;
  --aether:#5ad8ff;
  --gold:#e8b95a;
  --gold-hell:#f7dca0;
  --gruen:#7fe0a8;

  /* Flaechen */
  --rand:rgba(255,255,255,.09);
  --rand-hell:rgba(255,255,255,.16);
  --glas:rgba(20,13,28,.62);
  --glas-hell:rgba(28,19,40,.78);

  --breite:1180px;
  --schmal:900px;
  --rund:16px;

  /* Eine Kurve, die weich auslaeuft statt abrupt zu stoppen. */
  --weich:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  /* Damit ein Sprungziel nicht unter der Kopfzeile landet. */
  scroll-padding-top:92px;
}

body{
  background:var(--tinte);
  color:var(--text);
  font:400 16.5px/1.62 var(--text-schrift);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit}

/* Auswahlfarbe passend zum Rest */
::selection{background:rgba(192,107,255,.35);color:#fff}

/* Sichtbarer Fokusring fuer Tastaturbedienung. Ohne den ist die
   Seite mit der Tab-Taste nicht benutzbar. */
:focus-visible{
  outline:2px solid var(--violett);
  outline-offset:3px;
  border-radius:6px;
}

/* ══════════════════════════════════════════════
   Atmosphaere

   Drei grosse, weich auslaufende Farbwolken, die langsam
   gegeneinander treiben. Das ersetzt die 3D-Szene als
   Hintergrund und kostet praktisch nichts: es sind drei
   Farbverlaeufe auf einer Ebene, die nur verschoben wird.
   ══════════════════════════════════════════════ */
.aether{
  position:fixed;inset:-8%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(46% 42% at 22% 28%, rgba(192,107,255,.30), transparent 68%),
    radial-gradient(40% 38% at 78% 22%, rgba(232,48,107,.24), transparent 66%),
    radial-gradient(52% 46% at 56% 88%, rgba(90,216,255,.16), transparent 70%);
  /* Bewusst OHNE filter:blur(). Die Wolken sind schon weiche
     Farbverlaeufe, eine zusaetzliche Weichzeichnung brachte optisch
     fast nichts, musste aber bei jedem einzelnen Bild neu gerechnet
     werden, weil die Ebene sich ja bewegt. Auf schwaecheren Rechnern
     blieb die Seite dadurch stellenweise schwarz. */
  /* Statischer Verlauf: kein dauerhaftes Neuzeichnen im Hintergrund. */
}

/* Eine zweite, gegenlaeufige Ebene. Dadurch wirkt die Bewegung
   nicht wie ein simples Hin und Her. */
.aether::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(38% 34% at 72% 62%, rgba(232,185,90,.14), transparent 66%),
    radial-gradient(44% 40% at 18% 76%, rgba(123,63,212,.22), transparent 68%);
}

/* Nur noch verschieben, nicht mehr skalieren. */
@keyframes treiben{
  from{transform:translate3d(-2.5%,-2%,0)}
  to  {transform:translate3d(3%,2.5%,0)}
}
@keyframes treiben2{
  from{transform:translate3d(2.5%,2%,0)}
  to  {transform:translate3d(-3%,-2.5%,0)}
}

/* Feine Koernung darueber, damit die Farbverlaeufe nicht in
   sichtbaren Streifen abstufen. */
.koernung{
  display:none;
}

/* Abdunklung zu den Raendern, damit der Text in der Mitte traegt. */
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(5,3,9,.72) 100%);
}

/* ══════════════════════════════════════════════
   Lesefortschritt ganz oben
   ══════════════════════════════════════════════ */
.fortschrittsleiste{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  background:rgba(255,255,255,.06);
}
.fortschrittsleiste i{
  display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--violett),var(--akzent),var(--gold));
  box-shadow:0 0 12px rgba(192,107,255,.6);
}

/* ══════════════════════════════════════════════
   Kopfzeile
   ══════════════════════════════════════════════ */
.kopf{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:14px;
  padding:14px clamp(14px,3vw,36px);
  transition:padding .3s var(--weich),background .3s,border-color .3s,box-shadow .3s;
  border-bottom:1px solid transparent;
}

/* Sobald gescrollt wird, zieht sich die Leiste zusammen und
   legt sich milchig ueber den Inhalt. */
.kopf.klein{
  padding:9px clamp(14px,4vw,40px);
  background:rgba(9,6,14,.94);
  border-bottom-color:var(--rand);
  box-shadow:0 10px 40px -22px #000;
}

.marke{
  display:flex;align-items:center;gap:12px;flex:none;
  font-weight:700;letter-spacing:.13em;font-size:.92rem;
  text-transform:uppercase;
}
.marke img{
  width:40px;height:40px;border-radius:50%;flex:none;
  box-shadow:0 0 0 2px rgba(232,185,90,.55), 0 0 26px -6px var(--gold);
  transition:transform .4s var(--weich),box-shadow .4s;
}
.marke:hover img{
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 0 0 2px var(--gold), 0 0 34px -4px var(--gold);
}
.kopf.klein .marke img{width:34px;height:34px}

/* ── Hauptnavigation ──
   Der Punkt des gerade sichtbaren Abschnitts bekommt "an".
   Das setzt das Skript ueber einen IntersectionObserver. */
.kapitelnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.kapitelnav a{
  position:relative;
  padding:9px 12px;border-radius:8px;white-space:nowrap;
  color:var(--text-leise);
  font-size:.8rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  transition:color .22s,background .22s;
}
.kapitelnav a:hover{color:var(--text);background:rgba(255,255,255,.055)}

/* Der Strich unter dem aktiven Punkt waechst aus der Mitte heraus. */
.kapitelnav a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--violett),var(--akzent));
  transform:scaleX(0);transform-origin:center;
  transition:transform .32s var(--weich);
}
.kapitelnav a.an{color:var(--text)}
.kapitelnav a.an::after{transform:scaleX(1)}

.kopfrechts{display:flex;align-items:center;gap:10px;flex:none}

/* Menuknopf fuers Handy, am Schreibtisch versteckt */
.menueknopf{
  display:none;width:40px;height:40px;flex:none;cursor:pointer;
  border:1px solid var(--rand);border-radius:11px;
  background:rgba(255,255,255,.05);color:var(--text);
  padding:0;place-items:center;
  transition:background .2s,border-color .2s;
}
.menueknopf:hover{background:rgba(192,107,255,.16);border-color:rgba(192,107,255,.45)}
.menueknopf i{
  display:block;width:17px;height:2px;border-radius:2px;background:currentColor;
  position:relative;transition:transform .3s var(--weich),background .2s;
}
.menueknopf i::before,.menueknopf i::after{
  content:"";position:absolute;left:0;width:17px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s var(--weich);
}
.menueknopf i::before{top:-6px}
.menueknopf i::after{top:6px}
.menueknopf.an i{background:transparent}
.menueknopf.an i::before{transform:translateY(6px) rotate(45deg)}
.menueknopf.an i::after{transform:translateY(-6px) rotate(-45deg)}

/* ══════════════════════════════════════════════
   Knoepfe
   ══════════════════════════════════════════════ */
.knopf{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(135deg,var(--akzent),var(--violett-tief));
  color:#fff;
  font-weight:600;font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(232,48,107,.85);
  transition:transform .26s var(--weich),box-shadow .26s,filter .26s;
}
.knopf:hover{
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow:0 20px 42px -14px rgba(232,48,107,.9);
}
.knopf:active{transform:translateY(-1px)}

/* Ein Lichtstreif wischt beim Ueberfahren einmal durch. */
.knopf::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.28) 50%,transparent 72%);
  transform:translateX(-120%);
  transition:transform .7s var(--weich);
}
.knopf:hover::before{transform:translateX(120%)}

.knopf.geist{
  background:rgba(255,255,255,.045);
  border-color:var(--rand-hell);
  box-shadow:none;
  color:var(--text);
}
.knopf.geist:hover{
  background:rgba(192,107,255,.14);
  border-color:rgba(192,107,255,.5);
  box-shadow:0 14px 34px -18px var(--violett);
}
.knopf.gold{
  background:linear-gradient(170deg,var(--gold-hell) 0%,var(--gold) 46%,#c08f2d 100%);
  color:#1a1206;
  border-color:rgba(255,232,180,.5);
  box-shadow:0 12px 30px -14px rgba(232,185,90,.8);
}
.knopf.gold:hover{box-shadow:0 20px 42px -14px rgba(232,185,90,.9)}

/* Der zweite Knopf aus dem Entwurf: dunkel, nur eine duenne Linie. */
.knopf.umriss{
  background:rgba(10,7,15,.6);
  border-color:rgba(255,255,255,.22);
  color:var(--text);
  box-shadow:none;
}
.knopf.umriss:hover{
  background:rgba(232,185,90,.1);
  border-color:rgba(232,185,90,.6);
  box-shadow:0 14px 34px -18px rgba(232,185,90,.7);
}
.knopf.gross{padding:16px 34px;font-size:1.03rem;border-radius:14px}
.knopf.klein{padding:9px 18px;font-size:.87rem;border-radius:10px}

/* ══════════════════════════════════════════════
   Kopfbereich der Seite
   ══════════════════════════════════════════════ */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:min(700px, calc(100svh - 70px));
  overflow:hidden;
  border-bottom:1px solid var(--rand);
}

/* ── Das Bild ──
   Es liegt ueber die volle Breite und wird nach links hin
   abgedunkelt, statt an einer Kante aufzuhoeren. Dadurch gibt
   es keine sichtbare Naht, und auf jeder Fensterbreite bleibt
   die Figur rechts im Bild stehen.

   Es ist ein echtes <img> und kein Hintergrundbild: nur so kann
   der Browser es vorrangig laden und die kleinere WebP-Fassung
   waehlen. */
.heldbild{
  position:absolute;top:0;right:0;bottom:0;
  width:min(100%, 1672px);
  z-index:0;
}
.heldbild img{
  width:100%;height:100%;
  object-fit:cover;object-position:72% 36%;
  display:block;
}
.heldbild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* Die ersten 20 Prozent muessen VOLL deckend sein, nicht
       96-prozentig. Auf breiten Bildschirmen endet das Bild vor
       dem linken Seitenrand; schimmerten dort noch vier Prozent
       durch, stand genau an der Bildkante eine sichtbare Naht. */
    linear-gradient(90deg,
      var(--tinte) 0%,
      var(--tinte) 20%,
      rgba(11,7,16,.85) 36%,
      rgba(11,7,16,.45) 52%,
      rgba(11,7,16,.12) 68%,
      transparent 82%),
    linear-gradient(0deg,  var(--tinte) 0%, transparent 26%),
    linear-gradient(180deg, rgba(11,7,16,.62) 0%, transparent 20%);
}

.heldtext{
  position:relative;z-index:2;
  width:min(560px, 52vw);
  padding:clamp(34px,4vw,58px) 0;
  margin-left:clamp(18px,6vw,80px);
}

/* Glutpartikel. Reine Deko, zwoelf Stueck, nur verschoben. */
.glut{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.glut i{
  position:absolute;bottom:-20px;
  width:3px;height:3px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px 1px rgba(232,185,90,.7);
  opacity:0;
  animation:steigen linear infinite;
  will-change:transform,opacity;
}
@keyframes steigen{
  0%  {transform:translate3d(0,0,0) scale(.6);opacity:0}
  12% {opacity:.85}
  80% {opacity:.5}
  100%{transform:translate3d(var(--drift,14px),-104vh,0);opacity:0}
}

.hero .ueber{
  display:inline-flex;align-items:center;gap:11px;
  margin-bottom:18px;
  color:var(--text-still);
  font-size:.76rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
}
.hero .ueber::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--gruen);box-shadow:0 0 10px var(--gruen);
  animation:puls 2.4s ease-in-out infinite;
}

.hero .ueber{opacity:0;animation:aufblenden .8s .15s var(--weich) forwards}
.hero h1{
  font-family:var(--anzeige);
  font-size:clamp(2.2rem,4.9vw,4.3rem);
  line-height:1.04;font-weight:700;letter-spacing:.01em;
  margin-bottom:12px;
  opacity:0;animation:aufblenden 1s .3s var(--weich) forwards;
}
/* Das letzte Wort traegt die Goldfarbe, wie im Entwurf. */
.hero h1 .gold{
  background:linear-gradient(165deg,var(--gold-hell) 10%,var(--gold) 55%,#c9912c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Die gesperrte Zeile unter dem Titel */
.heldunter{
  margin-bottom:26px;
  font-size:clamp(.78rem,1.4vw,.95rem);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-leise);
  opacity:0;animation:aufblenden .9s .55s var(--weich) forwards;
}
/* Ein feiner goldener Strich darunter, wie eine Wappenlinie. */
.heldstrich{
  width:clamp(120px,14vw,190px);height:1px;margin-bottom:22px;
  background:linear-gradient(90deg,var(--gold),rgba(232,185,90,.1));
  opacity:0;animation:aufblenden .9s .65s var(--weich) forwards;
}

/* Die Buchstaben fahren einzeln hoch, aus einer Maske heraus.
   Die Verzoegerung setzt das Skript als --vz je Buchstabe. */
.zeichenhuelle{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .012em .1em}
.zeichenhuelle i{
  display:inline-block;font-style:normal;
  transform:translateY(105%) rotate(5deg);
  background:linear-gradient(170deg,#fff 18%,var(--gold-hell) 56%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:zeichenauf .9s var(--weich) forwards;
  animation-delay:var(--vz,0s);
}
@keyframes zeichenauf{to{transform:none}}
.luecke{display:inline-block;width:.26em}

.hero .lead{
  max-width:44ch;margin:0 0 28px;
  color:var(--text-leise);
  font-size:clamp(1rem,1.9vw,1.14rem);line-height:1.68;
  opacity:0;animation:aufblenden .9s .75s var(--weich) forwards;
}
.reihe{display:flex;gap:14px;flex-wrap:wrap}
.block.mitte .reihe{justify-content:center}
.hero .reihe{opacity:0;animation:aufblenden .9s .95s var(--weich) forwards}
@keyframes aufblenden{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Zahlenreihe unter den Knoepfen */
.herozahlen{
  display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;
  margin-top:34px;padding-top:22px;
  border-top:1px solid var(--rand);
  opacity:0;animation:aufblenden .9s 1.15s var(--weich) forwards;
}
.herozahlen b{font-size:clamp(1.5rem,3vw,2.1rem)}

/* Hinweis zum Scrollen, verschwindet nach dem ersten Scrollen */
.scrollhinweis{
  position:absolute;left:clamp(20px,6vw,80px);bottom:22px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  color:var(--text-still);
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  opacity:0;animation:aufblenden .8s 1.6s forwards;
  transition:opacity .5s;
}
.scrollhinweis.weg{opacity:0!important;pointer-events:none}
.scrollhinweis i{
  display:block;width:1px;height:46px;
  background:linear-gradient(180deg,var(--violett),transparent);
}
.scrollhinweis i::after{
  content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--violett);margin-left:-2px;
  animation:rutschen 2.1s ease-in-out infinite;
}
@keyframes rutschen{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  100%{transform:translateY(42px);opacity:0}
}

/* ══════════════════════════════════════════════
   Schnellband unter dem Kopfbereich

   Drei Tafeln nebeneinander: das naechste Rift, wer wir sind,
   wer gerade im Voice sitzt. Das Wichtigste also, ohne dass
   man erst scrollen muss.
   ══════════════════════════════════════════════ */
.schnellband{
  display:grid;gap:1px;
  grid-template-columns:repeat(3,1fr);
  background:var(--rand);
  border-bottom:1px solid var(--rand);
}
.schnelltafel{
  display:flex;flex-direction:column;
  padding:26px clamp(18px,2.4vw,30px) 28px;
  background:rgba(8,5,13,.72);
  transition:background .3s;
}
.schnelltafel:hover{background:rgba(16,10,24,.82)}

.schnellkopf{
  display:flex;align-items:center;gap:11px;
  margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--rand);
}
.schnellkopf .zeichen{
  font-size:1.15rem;line-height:1;flex:none;
  filter:drop-shadow(0 0 10px rgba(232,185,90,.45));
}
.schnellkopf h2{
  margin:0;
  font-size:.86rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:none;color:var(--text);
}
.schnellkopf a{
  margin-left:auto;flex:none;
  color:var(--gold);font-size:.82rem;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.schnellkopf a:hover{border-bottom-color:var(--gold)}

/* Die Timerkarte sitzt hier randlos in der Tafel. */
.schnelltafel .timerkarte{
  max-width:none;padding:0;border:0;background:none;box-shadow:none;
}
.schnelltafel .timerkarte::after{display:none}
.schnelltafel .uhr{font-size:clamp(2rem,3.4vw,2.7rem);margin:10px 0 16px}
.schnelltafel .timerfuss{font-size:.86rem}

/* Die drei Merkmale in der mittleren Tafel */
.merkmale{display:flex;gap:18px;margin:18px 0 20px;flex-wrap:wrap}
.merkmal{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1 1 72px}
.merkmal span:first-child{font-size:1.45rem;line-height:1}
.merkmal span:last-child{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-still);text-align:center;
}
.schnelltafel p{color:var(--text-leise);font-size:.94rem;line-height:1.65;margin:0}
.schnelltafel .knopf{margin-top:auto;align-self:flex-start}
.schnelltafel .voiceliste{margin:0}

@media (max-width:1000px){
  .schnellband{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════
   Gildenband

   Die Visitenkarte der Gilde, kurz vor dem Fuss: Wappen,
   Name, die harten Eckdaten und der Weg hinein.
   ══════════════════════════════════════════════ */
.gildenband{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(232,185,90,.26);
  border-bottom:1px solid rgba(232,185,90,.26);
  background:
    linear-gradient(90deg,rgba(11,7,16,.94),rgba(22,14,32,.88),rgba(11,7,16,.94));
}
/* Die kleine Raute in der Mitte der oberen Linie */
.gildenband::before{
  content:"";position:absolute;top:-5px;left:50%;
  width:9px;height:9px;margin-left:-4px;
  transform:rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 14px rgba(232,185,90,.8);
}
.gildeninhalt{
  max-width:var(--breite);margin:0 auto;
  display:flex;align-items:center;gap:clamp(24px,4vw,52px);flex-wrap:wrap;
  padding:34px clamp(16px,4vw,32px);
}
.gildenwappen{display:flex;align-items:center;gap:20px;flex:1 1 320px;min-width:0}
.gildenwappen img{
  width:72px;height:72px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(232,185,90,.55),0 0 36px -8px rgba(232,185,90,.7);
}
.gildenname{min-width:0}
.gildenname .ueber{
  margin-bottom:6px;color:var(--text-still);
  font-size:.64rem;letter-spacing:.3em;
}
.gildenname b{
  display:block;
  font-family:var(--anzeige);
  font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:700;
  letter-spacing:.09em;line-height:1.1;
  background:linear-gradient(170deg,#fff 20%,var(--gold-hell) 70%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gildenname span{
  display:block;margin-top:7px;
  font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-still);
}

.gildenwerte{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap}
.gildenwert{display:flex;align-items:center;gap:11px}
.gildenwert .zeichen{font-size:1.2rem;line-height:1;flex:none;opacity:.9}
.gildenwert u{
  display:block;text-decoration:none;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-still);
}
.gildenwert b{display:block;font-size:.98rem;font-weight:600;margin-top:2px}
.gildenband .knopf{margin-left:auto;flex:none}

@media (max-width:900px){
  .gildeninhalt{gap:24px}
  .gildenband .knopf{margin-left:0;width:100%}
  .gildenwerte{width:100%}
}
/* ══════════════════════════════════════════════
   Abschnitte

   Durchgehendes Gestaltungsmittel ab hier ist die Haarlinie,
   nicht der Kasten. Sechs gleich grosse Kacheln mit Emoji darin
   sahen nach Baukasten aus; eine Liste mit Nummern, Linien und
   klarer Spaltenordnung wirkt gesetzt.
   ══════════════════════════════════════════════ */
.block{
  position:relative;
  max-width:var(--breite);
  margin:0 auto;
  padding:clamp(66px,8vw,104px) clamp(16px,4vw,32px);
}
.block.weit{max-width:1480px}

/* ── Abschnittskopf ──
   Nummer und Bereich in einer Zeile mit Linie, darunter der
   Titel links und die Einleitung rechts daneben. Beides unten
   buendig, damit die Grundlinien eine Kante bilden. */
.blockkopf{margin-bottom:clamp(34px,4vw,54px)}

.ueber{
  display:flex;align-items:center;gap:16px;
  margin-bottom:22px;
  color:var(--gold);
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
/* Die Linie laeuft vom Text bis zum rechten Rand aus. */
.ueber::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,185,90,.45),transparent 70%);
}

.kopfpaar{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,4vw,64px);
  align-items:end;
  padding-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--rand);
}

.block h2{
  font-family:var(--anzeige);
  font-size:clamp(1.75rem,3.9vw,2.85rem);
  line-height:1.12;font-weight:700;letter-spacing:.012em;
  color:#f3eefa;
}
.lead{
  color:var(--text-leise);
  font-size:1.02rem;line-height:1.68;
  max-width:54ch;
}
.lead strong{color:var(--text);font-weight:600}
.klein{color:var(--text-still);font-size:.88rem;line-height:1.6;margin-top:16px}

/* Zwischenueberschrift */
.block h3{
  display:flex;align-items:baseline;gap:14px;
  margin:clamp(46px,5vw,66px) 0 22px;
  font-size:.88rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-leise);
}
.block h3::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--rand-hell),transparent 60%);
}

/* ── Einblenden beim Scrollen ──
   Ohne Javascript bleibt alles sichtbar, deshalb steht die
   Ausgangsstellung nur unter .js am html-Element. */
.js .zeigt{opacity:0;transform:translateY(22px)}
.js .zeigt.sichtbar{
  opacity:1;transform:none;
  transition:opacity .66s var(--weich),transform .66s var(--weich);
  transition-delay:var(--vz,0s);
}

/* ══════════════════════════════════════════════
   Merkmalliste

   Nummeriert, durch Linien getrennt, ohne Flaeche. Beim
   Ueberfahren laeuft die obere Linie golden aus.
   ══════════════════════════════════════════════ */
.merkmalliste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0 clamp(26px,3.4vw,52px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.merkmalliste > li{
  position:relative;
  padding:24px 0 28px;
}
/* Die Linie gehoert zum Eintrag, nicht zum Raster: so steht sie
   auch ueber der ersten Zeile jeder Spalte. */
.merkmalliste > li::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rand);
  transform-origin:left;
  transition:background .35s;
}
.merkmalliste > li:hover::before{
  background:linear-gradient(90deg,var(--gold),rgba(232,185,90,.12) 75%,transparent);
}

.mnr{
  display:block;margin-bottom:11px;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--text-still);
  transition:color .3s;
}
.merkmalliste > li:hover .mnr{color:var(--gold)}

.merkmalliste h3{
  display:block;margin:0 0 9px;
  font-size:1.06rem;font-weight:600;letter-spacing:-.005em;text-transform:none;
  color:var(--text);
}
.merkmalliste h3::after{display:none}
.merkmalliste p{
  margin:0;
  color:var(--text-leise);
  font-size:.95rem;line-height:1.66;
}
.merkmalliste strong{color:var(--text);font-weight:600}

@media (max-width:900px){
  .merkmalliste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .merkmalliste{grid-template-columns:1fr}
}

/* ── Zweispaltige Fassung fuer kurze Eintraege ──
   Begriff links, Erklaerung rechts, wie ein Glossar. */
.begriffliste{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rand);
}
.begriffliste > li{
  display:grid;
  grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(14px,3vw,46px);
  align-items:baseline;
  padding:19px 0;
  border-bottom:1px solid var(--rand);
  transition:background .3s;
}
.begriffliste > li:hover{background:rgba(255,255,255,.022)}
.begriffliste dt,.begriffliste h3,.begriffliste b{
  margin:0;
  font-size:.97rem;font-weight:600;letter-spacing:.01em;
  color:var(--text);
}
.begriffliste h3::after{display:none}
.begriffliste p{
  margin:0;color:var(--text-leise);
  font-size:.95rem;line-height:1.62;
}
.begriffliste strong{color:var(--text);font-weight:600}
@media (max-width:640px){
  .begriffliste > li{grid-template-columns:1fr;gap:7px}
}

/* ══════════════════════════════════════════════
   Zahlen
   ══════════════════════════════════════════════ */
.zahlen{display:flex;gap:clamp(24px,5vw,60px);flex-wrap:wrap}
.zahlen div{display:flex;flex-direction:column;gap:6px}
.zahlen b{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--gold-hell);
}
.zahlen span{
  color:var(--text-still);
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}

/* ══════════════════════════════════════════════
   Rift

   Eine durchgehende Tafel ueber die ganze Breite: links die Uhr
   auf dunklerem Grund, rechts der Tagesplan als Schiene und die
   beiden Hinweise. Vorher stand die Uhr allein in der linken
   Haelfte und rechts war nichts.
   ══════════════════════════════════════════════ */
.riftband{
  display:grid;
  grid-template-columns:minmax(0,370px) minmax(0,1fr);
  border:1px solid var(--rand-hell);
  background:rgba(10,7,15,.5);
}

.riftuhr{
  position:relative;overflow:hidden;
  padding:clamp(26px,3vw,38px);
  background:linear-gradient(165deg,rgba(32,20,48,.75),rgba(12,8,19,.75));
  border-right:1px solid var(--rand-hell);
}
/* Ein Schimmer wandert langsam ueber die Uhr. */
.riftuhr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(192,107,255,.11) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:schimmer 8s ease-in-out infinite;
}
@keyframes schimmer{
  0%,66%{transform:translateX(-100%)}
  100%  {transform:translateX(100%)}
}

.timerkopf{
  color:var(--violett);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.uhr{
  margin:16px 0 22px;
  font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.005em;
  color:#fbf7ff;
}
.uhr.offen{
  color:var(--gold-hell);
  animation:pochen 1.7s ease-in-out infinite;
}
@keyframes pochen{50%{opacity:.6}}

.fortschritt{height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.fortschritt i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--violett),var(--akzent),var(--gold));
  transition:width .9s linear;
}
.timerfuss{
  margin-top:18px;
  color:var(--text-leise);font-size:.9rem;
}
.timerfuss strong{color:var(--text);font-variant-numeric:tabular-nums}
.punkt{opacity:.3;margin:0 9px}

.riftplan{padding:clamp(26px,3vw,38px)}
.riftplan > h3:first-child{margin-top:0}

/* ── Tagesschiene ──
   Acht Zeiten auf einer Linie, jede mit einem Strich nach oben.
   Die naechste bekommt einen gefuellten Punkt. */
.zeitliste{
  list-style:none;margin:0 0 6px;padding:22px 0 0;
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  position:relative;
}
.zeitliste::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rand-hell);
}
.zeitliste li{
  position:relative;
  padding-top:16px;
  text-align:center;
  color:var(--text-still);
  font-size:.92rem;font-variant-numeric:tabular-nums;
  transition:color .25s;
}
/* Der Strich vom Zeitpunkt hinauf zur Linie */
.zeitliste li::before{
  content:"";position:absolute;top:0;left:50%;width:1px;height:9px;
  background:var(--rand-hell);
  transition:background .25s,height .25s;
}
.zeitliste li:hover{color:var(--text)}
.zeitliste li.jetzt{
  color:var(--gold-hell);font-weight:600;
}
.zeitliste li.jetzt::before{background:var(--gold);height:14px}
/* Punkt auf der Linie fuer die naechste Oeffnung */
.zeitliste li.jetzt::after{
  content:"";position:absolute;top:-3px;left:50%;
  width:7px;height:7px;margin-left:-3px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(232,185,90,.9);
}

.riftnotizen{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(30px,3.4vw,44px);
}
.riftnotizen h4{
  margin:0 0 8px;
  font-size:.93rem;font-weight:600;letter-spacing:0;
  color:var(--text);
}
.riftnotizen p{margin:0;color:var(--text-leise);font-size:.92rem;line-height:1.64}

@media (max-width:1000px){
  .riftband{grid-template-columns:1fr}
  .riftuhr{border-right:0;border-bottom:1px solid var(--rand-hell)}
}
@media (max-width:720px){
  .zeitliste{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}
  .riftnotizen{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════
   Klassen

   Kein Kaestchen je Klasse mehr, sondern ein gleichmaessiges
   Raster mit Trennlinien. Das Wappen steht links neben dem
   Namen statt darueber, dadurch wird die Zeile ruhiger.
   ══════════════════════════════════════════════ */
.klassengitter{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--rand);
  border-left:1px solid var(--rand);
}
.klasse{
  display:flex;align-items:center;gap:15px;
  padding:17px 20px;
  border-right:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
  transition:background .28s;
}
.klasse:hover{background:rgba(255,255,255,.03)}
.klasse img,.klasse .zeichen{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px var(--rand);
  transition:box-shadow .3s;
}
.klasse:hover img,.klasse:hover .zeichen{
  box-shadow:0 0 0 1px rgba(232,185,90,.5);
}
.klasse b{
  display:block;
  font-size:.97rem;font-weight:600;letter-spacing:0;
}
.klasse span{
  display:block;margin-top:2px;
  color:var(--text-still);
  font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}
.klasse.tank span{color:#8fb8ff}
.klasse.heiler span{color:var(--gruen)}
.klasse.support span{color:var(--gold)}

@media (max-width:860px){.klassengitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.klassengitter{grid-template-columns:1fr}}

/* Schmales Band aus Pillen, falls seite.js es irgendwo setzt */
.klassenband{display:flex;gap:9px;flex-wrap:wrap}
.klassenband a{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 7px;border-radius:99px;
  border:1px solid var(--rand);
  font-size:.88rem;
  transition:border-color .26s,background .26s;
}
.klassenband a:hover{border-color:rgba(232,185,90,.5);background:rgba(232,185,90,.08)}
.klassenband img,.klassenband span.zeichen{
  width:27px;height:27px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-size:14px;background:rgba(255,255,255,.06);
}

/* ══════════════════════════════════════════════
   Schritte zum Mitmachen

   Drei Stationen auf einer durchgehenden Linie. Die Ziffer
   sitzt auf der Linie, nicht in einem Kasten darueber.
   ══════════════════════════════════════════════ */
.schritte{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
  counter-reset:s;
}
/* Die Ziffer steht UNTER der Linie, nicht auf ihr.
   Vorher lag sie auf der Linie und musste sie mit der
   Hintergrundfarbe ueberdecken. Der Seitenhintergrund ist aber
   nicht einfarbig, sondern ein Farbverlauf, und so stand hinter
   jeder Ziffer ein sichtbarer dunkler Kasten. */
.schritt{
  position:relative;
  padding-top:20px;
  border-top:1px solid var(--rand);
  transition:border-color .35s;
}
.schritt:hover{border-top-color:rgba(232,185,90,.55)}
.schritt::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;margin-bottom:14px;
  font-family:var(--anzeige);
  font-size:1.45rem;font-weight:700;line-height:1;
  letter-spacing:.04em;
  color:var(--gold);
}
.schritt h3{
  display:block;margin:0 0 10px;
  font-size:1.06rem;font-weight:600;letter-spacing:-.005em;text-transform:none;
}
.schritt h3::after{display:none}
.schritt p{color:var(--text-leise);font-size:.95rem;line-height:1.66;margin:0}
.schritt strong{color:var(--text);font-weight:600}

@media (max-width:820px){
  .schritte{grid-template-columns:1fr;gap:0}
  .schritt{padding:20px 0 26px}
}

/* ── Abschluss eines Abschnitts: Linie und Aufruf ── */
.abschluss{
  margin-top:clamp(40px,4.6vw,62px);
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rand);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.abschluss .klein{margin:0;flex:1 1 280px}

/* ══════════════════════════════════════════════
   Fuss
   ══════════════════════════════════════════════ */
.fuss{
  position:relative;
  border-top:1px solid var(--rand);
  background:rgba(6,4,10,.6);
  padding:46px clamp(16px,4vw,32px) 40px;
}
.fussinhalt{
  max-width:var(--breite);margin:0 auto;
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.fussmarke{display:flex;align-items:center;gap:12px;font-weight:800}
.fussmarke img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px var(--rand-hell)}
.fusslinks{display:flex;gap:18px;flex-wrap:wrap}
.fusslinks a{color:var(--text-still);font-size:.9rem;transition:color .2s}
.fusslinks a:hover{color:var(--gold)}
.fussklein{
  max-width:var(--breite);margin:28px auto 0;padding-top:22px;
  border-top:1px solid var(--rand);
  color:var(--text-still);font-size:.82rem;line-height:1.6;
}

/* Nach oben */
.hochknopf{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:75;
  width:44px;height:44px;border-radius:14px;cursor:pointer;padding:0;
  display:grid;place-items:center;
  background:rgba(14,9,22,.8);border:1px solid var(--rand-hell);color:var(--text);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s var(--weich),background .2s,border-color .2s;
}
.hochknopf.an{opacity:1;transform:none;pointer-events:auto}
.hochknopf:hover{background:rgba(192,107,255,.25);border-color:rgba(192,107,255,.55)}
.hochknopf svg{width:18px;height:18px}

/* ══════════════════════════════════════════════
   Gemeinsames
   ══════════════════════════════════════════════ */
@keyframes puls{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.45;transform:scale(.85)}
}

/* ── Handy und Tablet ── */
/* Ab hier wird die Navigation zum Klappmenü. Die Grenze liegt
   bewusst hoch: mit sieben Punkten in Kapitalschrift plus den
   beiden Knöpfen rechts wird die Leiste sonst zu eng. */
@media (max-width:1500px){
  html{scroll-padding-top:78px}
  .menueknopf{display:grid}

  /* Die Navigation klappt als Tafel unter der Kopfzeile auf. */
  .kapitelnav{
    position:fixed;top:68px;left:12px;right:12px;
    flex-direction:column;align-items:stretch;gap:4px;margin:0;
    padding:12px;border-radius:16px;
    background:rgba(12,8,18,.96);border:1px solid var(--rand-hell);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 30px 70px -30px #000;
    opacity:0;transform:translateY(-14px) scale(.98);pointer-events:none;
    transition:opacity .28s var(--weich),transform .28s var(--weich);
  }
  .kapitelnav.auf{opacity:1;transform:none;pointer-events:auto}
  .kapitelnav a{padding:13px 16px;font-size:1rem;border-radius:11px}
  .kapitelnav a::after{display:none}
  .kapitelnav a.an{background:rgba(192,107,255,.16);color:var(--text)}
  .kopfrechts .knopf span{display:none}
}

/* ── Schmale Bildschirme ──
   Nebeneinander ist hier kein Platz. Das Bild rueckt deshalb
   hinter den Text und wird nach unten hin abgedunkelt, damit
   die Schrift lesbar bleibt. */
@media (max-width:900px){
  .hero{min-height:0}
  .heldbild img{object-position:70% 24%}
  /* Hochkant steht das Bild hinter dem Text. Der Verlauf laeuft
     deshalb von unten nach oben statt von links nach rechts,
     sonst stuende die Schrift auf dem hellsten Teil des Bildes. */
  .heldbild::after{
    background:
      linear-gradient(0deg, var(--tinte) 2%, rgba(11,7,16,.86) 46%, rgba(11,7,16,.5) 100%);
  }
  .heldtext{
    width:auto;margin:0;
    padding:clamp(150px,36vw,250px) clamp(18px,5vw,32px) 72px;
  }
  .heldstrich{width:120px}
  .scrollhinweis{display:none}
}

@media (max-width:640px){
  .hero .ueber{letter-spacing:.18em;font-size:.68rem}
  .heldunter{letter-spacing:.18em}
  .block{padding-top:60px;padding-bottom:60px}
  .block h3{margin-top:34px}
  .timerkarte{padding:24px 22px 26px}
  .zahlen{gap:22px}
  .fussinhalt{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ── Wer keine Bewegung moechte, bekommt keine ──
   Das betrifft auch die Hintergrundwolken: sie bleiben stehen,
   sind aber weiter sichtbar. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .zeigt{opacity:1;transform:none}
  .zeichenhuelle i{transform:none}
  .hero .ueber,.hero h1,.heldunter,.heldstrich,
  .hero .lead,.hero .reihe,.herozahlen,.scrollhinweis{opacity:1}
  .glut{display:none}
}


/* ══════════════════════════════════════════════════════════════
   Bauteile

   Ab hier folgen die Bausteine, die von den Skripten erzeugt
   werden: Lebendaten aus dem Discord, Guides, Klangpult, Karte,
   Anmeldung und die Charakterkarten. Ihr Aufbau hat sich beim
   Umbau nicht geaendert, deshalb bleiben diese Regeln bestehen.
   ══════════════════════════════════════════════════════════════ */

/* ── Lebendaten aus dem Discord ── */
.livezahlen{display:flex;gap:clamp(20px,5vw,52px);flex-wrap:wrap;margin-bottom:18px}
.livezahlen div{display:flex;flex-direction:column;gap:3px}
.livezahlen b{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;
  background:linear-gradient(120deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.livezahlen span{color:var(--text-leise);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}

.voiceliste{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
/* Nachbau der Discord-Kanalliste, an deren Farben angelehnt */
.voiceliste li.leer{
  color:var(--text-leise);text-align:center;font-style:italic;
  padding:11px 14px;border-radius:8px;background:rgba(16,21,29,.6);
  border:1px solid var(--rand);
}
.dcKanal{
  padding:6px;border-radius:8px;
  background:rgba(30,31,34,.72);border:1px solid rgba(255,255,255,.07);
}
.dcKopf{
  display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:4px;color:#949ba4;
  font-size:.98rem;font-weight:500;
}
.dcIcon{width:19px;height:19px;flex:none}
.dcKanalname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcKopf b{margin-left:auto;font-variant-numeric:tabular-nums;
  font-size:.8rem;color:#80848e;font-weight:600}

.dcLeute{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.dcPerson{
  display:flex;align-items:center;gap:9px;
  padding:4px 8px 4px 26px;border-radius:4px;
  transition:background .12s;
}
.dcPerson:hover{background:rgba(255,255,255,.045)}
.dcAvatar{
  width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;
  background:#232428;
}
.dcName{
  color:#dbdee1;font-size:.92rem;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Stumm- und Taubschaltung wie in Discord: ausgegraut */
.dcPerson.dcStumm .dcName,
.dcPerson.dcTaub .dcName{color:#80848e}
.dcPerson.dcStumm .dcAvatar,
.dcPerson.dcTaub .dcAvatar{opacity:.55}

.dcLive{
  margin-left:auto;flex:none;font-style:normal;
  padding:1px 6px;border-radius:4px;
  background:#f23f43;color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.06em;
}
.dcVideo{
  margin-left:auto;flex:none;font-style:normal;color:#949ba4;font-size:.8rem;
}
.dcLive + .dcVideo{margin-left:5px}
.punktan{width:8px;height:8px;border-radius:50%;flex:none;
  background:#4ade80;box-shadow:0 0 10px #4ade80;animation:puls 2.2s infinite}

.klassenbalken{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.balkenzeile{display:grid;grid-template-columns:104px 1fr 28px;gap:12px;align-items:center;font-size:.88rem}
.balkenzeile.null{opacity:.42}
.balkenzeile i{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.balkenzeile i b{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--akzent),var(--gold));transition:width .6s ease}
.balkenzeile em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-leise)}

.rangliste{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.rangzeile{display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:99px;
  background:rgba(16,21,29,.6);border:1px solid var(--rand);font-size:.86rem}
.rangzeile b{color:var(--gold);font-variant-numeric:tabular-nums}

.raidliste{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:8px}
.raidliste .leer{grid-column:1/-1;color:var(--text-leise);font-style:italic;margin:0}
.raidkarte{padding:16px 18px;border-radius:14px;
  background:rgba(16,21,29,.62);border:1px solid var(--rand)}
.raidkarte h4{margin:0 0 4px;font-size:1.04rem}
.raidzeit{margin:0 0 12px;color:var(--text-leise);font-size:.84rem}
.plaetze{display:flex;flex-wrap:wrap;gap:7px}
.platz{padding:4px 11px;border-radius:99px;font-size:.78rem;
  background:rgba(255,255,255,.06);border:1px solid var(--rand)}
.platz.sucht{border-color:var(--akzent);background:rgba(232,48,107,.16);color:var(--text)}
.platz.voll{opacity:.6}

/* Pulspunkt im Discord-Knopf: nur sichtbar, wenn jemand im Voice ist */
.knopf .js-live-puls{display:none}
.knopf .js-live-puls.an{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;
  background:#4ade80;box-shadow:0 0 10px #4ade80;animation:puls 2.2s infinite;
  vertical-align:middle;
}

/* ── Guides ── */
.guideband{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:22px;
  border-bottom:1px solid var(--rand);scrollbar-width:thin;
}
.guidewahl{
  display:flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  padding:8px 14px 8px 8px;border-radius:99px;font:inherit;font-size:.86rem;
  background:rgba(16,21,29,.6);border:1px solid var(--rand);color:var(--text-leise);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.guidewahl:hover{transform:translateY(-2px);color:var(--text);border-color:rgba(192,107,255,.5)}
.guidewahl.an{
  background:rgba(192,107,255,.2);border-color:#c06bff;color:var(--text);
}
.guidewahl img,.guidewahl .zeichen{
  width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-size:14px;background:rgba(255,255,255,.07);
}
.guidewahl em{
  font-style:normal;font-size:.7rem;padding:1px 7px;border-radius:99px;
  background:rgba(255,255,255,.1);font-variant-numeric:tabular-nums;
}
.guidewahl.an em{background:rgba(255,255,255,.2)}

.guideinhalt{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.guideleer{
  grid-column:1/-1;margin:0;padding:32px;text-align:center;border-radius:14px;
  color:var(--text-leise);font-style:italic;
  background:rgba(16,21,29,.5);border:1px dashed var(--rand);
}
.guidekarte{
  padding:18px 20px;border-radius:14px;
  background:rgba(16,21,29,.62);border:1px solid var(--rand);
  opacity:0;animation:guideauf .5s cubic-bezier(.16,1,.3,1) forwards;
}
.guidekarte.breit{grid-column:1/-1}
@keyframes guideauf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.guidekopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.guideart{
  padding:2px 10px;border-radius:99px;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:rgba(192,107,255,.2);border:1px solid rgba(192,107,255,.45);
}
.guidestand{margin-left:auto;font-size:.72rem;color:var(--text-leise)}
.guideklapp{
  margin-left:auto;width:26px;height:26px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--rand);
  color:var(--text-leise);cursor:pointer;transition:.2s;padding:0;
}
.guideklapp:hover{color:var(--text);border-color:rgba(192,107,255,.5);background:rgba(192,107,255,.12)}
.guideklapp svg{width:14px;height:14px;display:block;transition:transform .25s ease}
.guidekarte.zu .guideklapp svg{transform:rotate(-90deg)}
.guidekarte.zu .guidekoerper{display:none}

/* Die ganze Karte öffnet, nicht nur der Pfeil. Der Pfeil bleibt als
   sichtbarer Hinweis stehen, damit man sieht, dass da etwas aufgeht. */
.guidekarte.zu{cursor:pointer;transition:border-color .2s, background .2s}
.guidekarte.zu:hover{
  border-color:rgba(192,107,255,.42);background:rgba(22,28,39,.72);
}
.guidekarte.zu:hover .guideklapp{
  color:var(--text);border-color:rgba(192,107,255,.5);background:rgba(192,107,255,.12);
}
/* Im aufgeklappten Zustand nur der Kopfbereich, damit man den Text
   lesen und markieren kann, ohne dass die Karte zuklappt. */
.guidekarte:not(.zu) > .guidekopf,
.guidekarte:not(.zu) > h4,
.guidekarte:not(.zu) > .guideanriss{cursor:pointer}

/* Anriss bleibt auch zugeklappt stehen */
.guideanriss{margin:0 0 12px}
.guidekarte.zu .guideanriss{margin-bottom:0}
.guidekarte.zu .bossreihe{margin-top:12px;margin-bottom:0}
.guidekarte h4{margin:0 0 8px;font-size:1.08rem;line-height:1.3}
.guidekarte p{margin:0 0 12px;color:var(--text-leise);font-size:.92rem;line-height:1.6}
.guidepunkte{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.guidepunkte li{color:var(--text-leise);font-size:.9rem;line-height:1.55}
.guidepunkte li::marker{color:var(--akzent)}
.guidequelle{
  display:inline-block;margin-top:14px;font-size:.84rem;
  color:var(--akzent-2);border-bottom:1px solid transparent;transition:.2s;
}
.guidequelle:hover{border-bottom-color:var(--akzent-2)}

/* ── Boss- und Instanzkarten ──
   Schwierigkeitsgrad neben der Art, darunter die Bosse in der
   Reihenfolge, in der sie im Lauf drankommen. */
.guidestufe{
  padding:2px 10px;border-radius:99px;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  background:rgba(232,185,90,.12);border:1px solid rgba(232,185,90,.4);
}
.guidebild{
  margin:-18px -20px 14px;border-radius:14px 14px 0 0;overflow:hidden;
  aspect-ratio:16/7;background:rgba(0,0,0,.35);
}
.guidebild img{width:100%;height:100%;object-fit:cover;display:block}

.bossreihe{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.bosschild{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;border-radius:99px;
  font-size:.83rem;line-height:1;
  background:rgba(192,107,255,.09);border:1px solid rgba(192,107,255,.28);
}
.bosschild i{
  display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font-style:normal;font-size:.66rem;font-weight:700;
  color:#150c1e;background:var(--akzent-2);
}



.guidekoerper{
  padding:0 20px 20px;
  animation:guideauf .35s cubic-bezier(.16,1,.3,1);
}
/* Lesbare Zeilenlänge, auch wenn die Karte über die volle Breite geht */
.guidekoerper > .bbInhalt{max-width:74ch}
.guidekoerper .bbInhalt img{max-width:660px}
/* Die einfachen <article>-Guidekarten (Pfeil oben rechts, keine <details>)
   haben ihr Padding schon auf .guidekarte selbst, hier also zurücksetzen,
   sonst verdoppelt sich der Seitenabstand. */
article.guidekarte .guidekoerper{padding:0}

/* Platzhalter sichtbar zurücknehmen, damit man fertige Guides
   auf einen Blick von den noch leeren unterscheidet. */
.guidekarte.entwurf{border-style:dashed;background:rgba(16,21,29,.4)}
.entwurfnotiz{
  margin:2px 0 0!important;padding:10px 12px;border-radius:10px;
  font-size:.84rem!important;font-style:italic;
  background:rgba(255,255,255,.035);
}

@media (prefers-reduced-motion:reduce){
  .guidekarte{opacity:1;animation:none}
}

/* ── Klangpult ──
   Unten links, klein. Der Regler klappt beim Überfahren aus. */
.klangpult{
  position:fixed;left:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,26px);z-index:80;
  display:flex;align-items:center;gap:0;
  padding:6px;border-radius:99px;
  background:rgba(10,14,20,.55);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  transition:gap .28s ease,padding .28s ease,background .25s;
}
.klangpult:hover,.klangpult:focus-within{gap:10px;padding:6px 16px 6px 6px;background:rgba(10,14,20,.78)}

.klangknopf{
  width:34px;height:34px;flex:none;cursor:pointer;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.07);color:var(--text);transition:.2s;
}
.klangknopf:hover{background:rgba(192,107,255,.28);color:#fff}
.klangknopf svg{width:19px;height:19px}
.klangpult.stumm .klangknopf{color:var(--text-leise)}
.klangpult.stumm .welle1,.klangpult.stumm .welle2{opacity:.25}

/* Ein feiner Puls, solange Musik läuft */
.klangpult.aktiv:not(.stumm) .klangknopf::after{
  content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(192,107,255,.5);animation:klangpuls 2.6s ease-out infinite;
}
@keyframes klangpuls{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.klangknopf{position:relative;overflow:visible}

.klangregler{
  width:0;opacity:0;margin:0;padding:0;cursor:pointer;
  accent-color:var(--akzent);
  transition:width .28s ease,opacity .22s ease;
}
.klangpult:hover .klangregler,
.klangpult:focus-within .klangregler{width:96px;opacity:1}

/* Aufforderung, solange der Browser den Ton noch nicht freigibt.
   Scrollen zählt dort nicht als Zustimmung — es braucht einen
   Klick. Ohne diesen Hinweis wirkt die Seite einfach stumm. */
.klanghinweis{
  width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);transition:width .3s ease,opacity .25s ease;
}
.klangpult.wartet{
  gap:10px;padding:6px 16px 6px 6px;
  background:rgba(192,107,255,.22);border-color:rgba(192,107,255,.55);
  animation:klangwinken 2.8s ease-in-out infinite;
}
.klangpult.wartet .klanghinweis{width:auto;opacity:1;padding-right:2px}
.klangpult.wartet .klangregler{width:0;opacity:0}
@keyframes klangwinken{
  0%,100%{box-shadow:0 0 0 0 rgba(192,107,255,.4)}
  50%{box-shadow:0 0 0 9px rgba(192,107,255,0)}
}
.klangpult.wartet:hover{background:rgba(192,107,255,.34)}

@media (max-width:760px){
  .klangpult{bottom:auto;top:clamp(70px,12vw,86px);left:auto;right:12px}
  .klangpult .klangregler{width:70px;opacity:1}
  .klangpult{gap:9px;padding:6px 14px 6px 6px}
}


.bbInhalt{margin-top:12px;color:var(--text-leise);font-size:.92rem;line-height:1.65}
.bbInhalt p{margin:0 0 10px}
.bbInhalt h5{margin:16px 0 7px;font-size:.98rem;color:var(--gold)}
.bbInhalt ul{margin:0 0 10px;padding-left:19px}
.bbInhalt li{margin-bottom:5px}
.bbInhalt li::marker{color:var(--akzent)}
.bbInhalt blockquote{margin:0 0 10px;padding:8px 13px;border-left:3px solid var(--akzent);
  background:rgba(192,107,255,.08)}
.bbInhalt a{color:var(--akzent-2)}
/* Bilder und Schaubilder im Guide-Text. Ohne diese Regel bleibt ein
   SVG ohne eigene Masse auf 0 Breite stehen und ist unsichtbar. */
.bbInhalt img{
  display:block;width:100%;max-width:100%;height:auto;
  margin:12px 0 6px;border-radius:10px;cursor:zoom-in;
  background:rgba(0,0,0,.3);border:1px solid var(--rand);
  transition:border-color .18s;
}
.bbInhalt img:hover{border-color:rgba(232,185,90,.45)}

/* Bildlupe: Schaubild bildschirmfüllend, damit die Beschriftung
   auch auf dem Handy lesbar bleibt. */
.bildlupe{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:16px;background:rgba(6,9,14,.93);cursor:zoom-out;
  animation:lupeauf .18s ease-out;
}
@keyframes lupeauf{from{opacity:0}to{opacity:1}}
.bildlupe img{
  width:100%;max-width:1100px;height:auto;max-height:92vh;
  object-fit:contain;border-radius:12px;
}
/* Auf schmalen Bildschirmen bringt Einpassen nichts: das Schaubild
   wäre wieder so klein wie vorher. Also in Originalbreite stehen
   lassen und die Lupe seitlich schiebbar machen. */
@media (max-width:700px){
  .bildlupe{place-items:start center;overflow:auto;-webkit-overflow-scrolling:touch}
  .bildlupe img{
    width:auto;max-width:none;min-width:660px;
    max-height:none;margin:auto 0;cursor:default;
  }
  .bildlupe::after{
    content:"seitlich schieben zum Lesen";
    position:fixed;left:0;right:0;bottom:14px;
    text-align:center;font-size:.78rem;color:var(--text-leise);opacity:.75;
  }
}
.lupezu{
  position:absolute;top:14px;right:16px;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--text-leise);
  background:rgba(255,255,255,.07);border:1px solid var(--rand);
}
.lupezu:hover{background:rgba(255,255,255,.14)}
/* Bildunterschrift: das [i] direkt hinter einem Bild */
.bbInhalt img + em,
.bbInhalt p > em:only-child{display:block;font-size:.84rem;color:var(--text-leise);opacity:.8}
.bbBild{max-width:100%;height:auto;border-radius:10px;margin:6px 0;display:block}

/* ══════════════════════════════════════════════
   Gildenkarte
   ══════════════════════════════════════════════ */
.karteleer{
  padding:40px 28px;text-align:center;border-radius:14px;
  color:var(--text-leise);border:1px dashed var(--rand);
  background:rgba(16,21,29,.5);
}
.karteleer p{margin:0 0 8px;font-size:.94rem;line-height:1.6}
.karteleer p:last-child{margin:0}

.kartenfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kartenwahl{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:99px;cursor:pointer;
  font-size:.86rem;color:var(--text-leise);
  background:rgba(255,255,255,.04);border:1px solid var(--rand);
  transition:.18s;opacity:.45;
}
.kartenwahl.an{opacity:1;color:var(--text);border-color:rgba(192,107,255,.42);background:rgba(192,107,255,.1)}
.kartenwahl:hover{border-color:rgba(192,107,255,.6)}
.kartenzeichen{font-size:1rem;line-height:1}
.kartenwahl em{
  font-style:normal;font-size:.72rem;padding:1px 7px;border-radius:99px;
  background:rgba(255,255,255,.08);
}

.kartenbuehne{
  position:relative;overflow:hidden;border-radius:14px;
  aspect-ratio:16/10;cursor:grab;touch-action:none;
  background:#0a0e15;border:1px solid var(--rand);
}
.kartenbuehne.zieht{cursor:grabbing}
.kartenflaeche{
  position:absolute;inset:0;transform-origin:center center;
  will-change:transform;
}
.kartengrund{
  width:100%;height:100%;object-fit:contain;display:block;
  user-select:none;-webkit-user-drag:none;
}
.markerschicht{position:absolute;inset:0}

.marker{
  position:absolute;transform:translate(-50%,-50%) scale(var(--gegenzoom,1));
  width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:rgba(10,14,21,.82);
  border:2px solid var(--markerfarbe,#c06bff);
  box-shadow:0 0 0 4px rgba(0,0,0,.28), 0 0 14px -2px var(--markerfarbe,#c06bff);
  transition:box-shadow .18s;
}
.marker:hover,.marker.an{
  box-shadow:0 0 0 4px rgba(0,0,0,.28), 0 0 22px 2px var(--markerfarbe,#c06bff);
  z-index:3;
}
.marker[hidden]{display:none!important}

.kartenknoepfe{
  position:absolute;right:12px;top:12px;z-index:4;
  display:flex;flex-direction:column;gap:6px;
}
.kartenknopf{
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--text-leise);
  background:rgba(10,14,21,.82);border:1px solid var(--rand);
  backdrop-filter:blur(6px);transition:.18s;
}
.kartenknopf:hover{color:var(--text);border-color:rgba(192,107,255,.5);background:rgba(192,107,255,.14)}

.kartenhinweis{
  position:absolute;left:12px;bottom:10px;margin:0;z-index:4;
  padding:5px 11px;border-radius:99px;pointer-events:none;
  font-size:.74rem;color:var(--text-leise);
  background:rgba(10,14,21,.7);backdrop-filter:blur(6px);
}

.markerinfo{
  position:relative;margin-top:14px;padding:16px 18px;border-radius:14px;
  background:rgba(16,21,29,.82);border:1px solid rgba(192,107,255,.3);
  animation:guideauf .3s cubic-bezier(.16,1,.3,1);
}
.markerinfo h4{margin:0 0 8px;font-size:1.05rem}
.markerinfo p{margin:0 0 8px;color:var(--text-leise);font-size:.92rem;line-height:1.6}
.infoart{font-size:.72rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.infozu{
  position:absolute;top:10px;right:12px;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  font-size:1.1rem;line-height:1;color:var(--text-leise);
  background:rgba(255,255,255,.06);border:1px solid var(--rand);
}
.infozu:hover{background:rgba(255,255,255,.13)}

@media (max-width:640px){
  .kartenbuehne{aspect-ratio:4/5}
  .kartenhinweis{font-size:.7rem}
}

/* ── Karten-Reiter ── */
.kartenreiter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.kartenreiterknopf{
  padding:9px 18px;border-radius:99px;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--text-leise);
  background:rgba(255,255,255,.04);border:1px solid var(--rand);transition:.18s;
}
.kartenreiterknopf.an{
  color:var(--text);border-color:rgba(192,107,255,.5);background:rgba(192,107,255,.14);
}
.kartenreiterknopf:hover{border-color:rgba(192,107,255,.6)}
.kartenblatt{display:none}
.kartenblatt.an{display:block}

/* ── Eingebettete Fremdkarte ── */
.fremdrahmen{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--rand);background:#0a0e15;
  /* Volle Höhe minus Kopfzeile der Seite und Überschrift der Tafel */
  height:min(88vh,1100px);min-height:560px;
}
.fremdrahmen iframe{width:100%;height:100%;border:0;display:block}
.fremdnotiz{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:10px 2px 0;
  font-size:.84rem;color:var(--text-leise);
}
.fremdnotiz a{color:var(--akzent-2);border-bottom:1px solid transparent;transition:.18s}
.fremdnotiz a:hover{border-bottom-color:var(--akzent-2)}
/* Schmale Fenster: der Rahmen fällt unter 1024 px, questlog schaltet
   auf sein Handy-Layout und blendet oben eine 56 px hohe eigene
   Kopfleiste ein. Die schieben wir aus dem Ausschnitt heraus, der
   Rahmen schneidet sie ab. Auf breiten Fenstern passiert hier
   nichts, dort gibt es die Leiste gar nicht. */
@media (max-width:1130px){
  .fremdrahmen iframe{height:calc(100% + 56px);margin-top:-56px}
}
@media (max-width:640px){
  .fremdrahmen{height:min(78vh,620px);min-height:0}
}

/* ══════════════════════════════════════════════
   Anmeldung über Discord
   ══════════════════════════════════════════════ */
.kopfrechts{display:flex;align-items:center;gap:10px}

.dcAnmelden{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:10px;
  font-size:.9rem;font-weight:700;color:#fff;
  background:#5865F2;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px -12px #5865F2;
  transition:transform .18s,filter .18s;
}
.dcAnmelden:hover{transform:translateY(-2px);filter:brightness(1.1)}
.dcAnmelden svg{width:19px;height:15px;flex:none}

.dcKonto{position:relative}
.dcKontoKnopf{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:5px 12px 5px 5px;border-radius:99px;
  color:var(--text);font-size:.9rem;
  background:rgba(255,255,255,.05);border:1px solid var(--rand);transition:.18s;
}
.dcKontoKnopf:hover{background:rgba(255,255,255,.1);border-color:rgba(192,107,255,.45)}
.dcKontoKnopf img{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover}
.dcKontoName{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcAbzeichen{
  font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;
  color:#150c1e;background:var(--gold);
}
.dcKontoKlapp{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  width:min(300px,80vw);padding:14px 16px;border-radius:12px;
  background:rgba(14,18,26,.97);border:1px solid var(--rand);
  box-shadow:0 24px 60px -24px #000;backdrop-filter:blur(10px);
}
.dcKontoZeile{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:var(--text-leise)}
.dcKontoZeile a{color:var(--akzent-2)}
.dcAbmelden{
  width:100%;padding:9px;border-radius:9px;cursor:pointer;
  font-size:.86rem;color:var(--text-leise);
  background:rgba(255,255,255,.05);border:1px solid var(--rand);transition:.18s;
}
.dcAbmelden:hover{color:var(--text);background:rgba(232,48,107,.16);border-color:rgba(232,48,107,.45)}

/* Verschlossener Bereich */
.schlosskasten{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:30px 28px;border-radius:16px;
  background:rgba(16,21,29,.6);border:1px dashed var(--rand);
}
.schlosszeichen{font-size:2rem;line-height:1;flex:none}
.schlosskasten p{margin:0;color:var(--text-leise);font-size:.96rem;line-height:1.6}
.schlosskasten .knopf{margin-left:10px;padding:9px 18px;font-size:.9rem}

.anmeldemeldung{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  padding:11px 22px;border-radius:99px;font-size:.9rem;
  background:rgba(14,18,26,.96);border:1px solid var(--rand);
  box-shadow:0 18px 44px -20px #000;animation:guideauf .3s cubic-bezier(.16,1,.3,1);
}
.anmeldemeldung.gut{border-color:rgba(127,224,168,.5);color:#7fe0a8}
.anmeldemeldung.schlecht{border-color:rgba(232,48,107,.5);color:var(--akzent-2)}

@media (max-width:640px){
  .dcKontoName{display:none}
  .dcAnmelden{padding:9px 12px}
}

/* ══════════════════════════════════════════════
   Charaktere und Aufstellung
   ══════════════════════════════════════════════ */
.leerhinweis{
  margin:0;padding:22px;border-radius:12px;text-align:center;
  color:var(--text-leise);font-style:italic;font-size:.92rem;
  background:rgba(16,21,29,.5);border:1px dashed var(--rand);
}

.charzeile{
  display:grid;gap:8px;margin-bottom:10px;padding:12px;
  grid-template-columns:1.4fr 1fr 1fr .8fr .8fr auto;
  grid-template-areas:
    "name klasse rolle stufe kampf weg"
    "build build build build build weg"
    "notiz notiz notiz notiz notiz weg"
    "bild bild bild bild bild weg";
  border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--rand);
}
.cName{grid-area:name}.cKlasse{grid-area:klasse}.cRolle{grid-area:rolle}
.cStufe{grid-area:stufe}.cKampf{grid-area:kampf}
.cBuild{grid-area:build}.cNotiz{grid-area:notiz}
.charzeile input,.charzeile select,.charzeile textarea{
  width:100%;padding:9px 11px;border-radius:9px;
  color:var(--text);font:inherit;font-size:.9rem;
  background:rgba(0,0,0,.3);border:1px solid var(--rand);
}
.charzeile textarea{resize:vertical;line-height:1.5}
.charzeile input:focus,.charzeile select:focus,.charzeile textarea:focus{
  outline:none;border-color:rgba(192,107,255,.55);
}
.charweg{
  grid-area:weg;align-self:start;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  font-size:1.2rem;line-height:1;color:var(--text-leise);
  background:rgba(255,255,255,.05);border:1px solid var(--rand);transition:.18s;
}
.charweg:hover{color:#fff;background:rgba(232,48,107,.25);border-color:rgba(232,48,107,.5)}

.charfuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 8px}
.charmeldung{font-size:.86rem}
.charmeldung.gut{color:#7fe0a8}
.charmeldung.schlecht{color:var(--akzent-2)}

/* Zählung nach Rolle */
.rollenzaehler{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.rollenkarte{
  flex:1 1 110px;padding:14px 16px;border-radius:12px;text-align:center;
  background:rgba(16,21,29,.62);border:1px solid var(--rand);
  border-top:3px solid var(--rf,var(--rand));
}
.rollenkarte b{display:block;font-size:1.7rem;line-height:1;color:var(--rf,var(--text))}
.rollenkarte span{display:block;margin-top:5px;font-size:.78rem;color:var(--text-leise)}
.rollenkarte.gesamt{border-top-color:var(--akzent)}
.rollenkarte.gesamt b{color:var(--akzent-2)}

.charliste{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(276px,1fr))}
.charkarte{
  padding:16px 18px;border-radius:14px;
  background:rgba(16,21,29,.62);border:1px solid var(--rand);
  border-left:3px solid var(--rf,var(--rand));
}
.charkopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.charkopf img,.charkopf .zeichen{
  width:40px;height:40px;flex:none;display:grid;place-items:center;font-size:24px;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.charnamen{min-width:0;flex:1}
.charnamen b{display:block;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.charnamen span{display:block;font-size:.8rem;color:var(--text-leise)}
.rollenpille{
  font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;flex:none;
  color:#150c1e;background:var(--rf,var(--text-leise));
}
.charwerte{display:flex;gap:10px}
.charwerte div{
  flex:1;padding:9px 11px;border-radius:9px;text-align:center;
  background:rgba(0,0,0,.26);
}
.charwerte b{display:block;font-size:1.04rem;font-variant-numeric:tabular-nums}
.charwerte span{display:block;font-size:.7rem;color:var(--text-leise);margin-top:2px}
.charnotiz{margin:11px 0 0;font-size:.86rem;line-height:1.55;color:var(--text-leise)}
.charspieler{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:12px 0 0;padding-top:11px;
  font-size:.8rem;color:var(--text-leise);border-top:1px solid var(--rand);
}
.charspieler img{width:20px;height:20px;border-radius:50%;flex:none}
.charspieler a{margin-left:auto;color:var(--akzent-2)}

@media (max-width:760px){
  .charzeile{
    grid-template-columns:1fr 1fr auto;
    grid-template-areas:
      "name name weg" "klasse rolle weg"
      "stufe kampf ." "build build build" "notiz notiz notiz"
      "bild bild bild";
  }
}

/* Rang aus Discord, in der Farbe der Discord-Rolle */
.dcAbzeichen{background:var(--rangfarbe,var(--gold))!important;color:#150c1e!important}
.rangpille{
  font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;
  color:var(--rangfarbe,var(--text-leise));
  border:1px solid var(--rangfarbe,var(--rand));
  background:color-mix(in srgb, var(--rangfarbe,#888) 14%, transparent);
}
.dcKontoZeile.klein{font-size:.78rem;opacity:.75;margin-bottom:12px}

/* Bild und Sichtbarkeit am Charakter */
.cBildzeile{
  grid-area:bild;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:4px;
}
.cVorschau{
  width:64px;height:40px;object-fit:cover;border-radius:7px;flex:none;
  border:1px solid var(--rand);background:rgba(0,0,0,.3);
}
.cKeinBild{
  display:grid;place-items:center;width:64px;height:40px;border-radius:7px;flex:none;
  font-size:.66rem;color:var(--text-leise);
  border:1px dashed var(--rand);background:rgba(0,0,0,.2);
}
.knopf.klein{padding:7px 14px;font-size:.82rem}
label.knopf{cursor:pointer}
.bildweg{
  padding:7px 12px;border-radius:9px;cursor:pointer;font-size:.8rem;
  color:var(--text-leise);background:rgba(255,255,255,.05);
  border:1px solid var(--rand);transition:.18s;
}
.bildweg:hover{color:#fff;background:rgba(232,48,107,.22);border-color:rgba(232,48,107,.5)}
.csicht{
  display:flex;align-items:center;gap:7px;margin-left:auto;
  font-size:.8rem;color:var(--text-leise);
}
.csicht select{width:auto!important;padding:7px 10px!important}

/* Bild in der Aufstellung */
.charbild{
  display:block;width:100%;height:auto;margin:12px 0 0;
  border-radius:10px;cursor:zoom-in;
  border:1px solid var(--rand);background:rgba(0,0,0,.3);
}
.sichtmarke{
  display:inline-block;margin-top:8px;padding:2px 9px;border-radius:99px;
  font-size:.68rem;color:#7fe0a8;
  background:rgba(127,224,168,.12);border:1px solid rgba(127,224,168,.35);
}

/* Werkzeugreiter: bei acht Stück muss umgebrochen werden */
.kartenreiter{gap:7px}
.kartenreiterknopf{padding:8px 15px;font-size:.86rem}
.kartenreiterknopf.eigen{
  margin-left:auto;
  border-color:rgba(232,185,90,.4);color:var(--gold);
}
.kartenreiterknopf.eigen.an{
  background:rgba(232,185,90,.14);border-color:rgba(232,185,90,.6);color:var(--gold);
}
@media (max-width:900px){
  .kartenreiterknopf.eigen{margin-left:0}
}

/* ══════════════════════════════════════════════
   Flache Fassung ohne WebGL

   Greift, wenn der Browser keinen 3D-Kontext hergibt:
   abgeschaltete Hardwarebeschleunigung, alter Treiber,
   virtuelle Maschine, Fernwartung. Vorher blieb die
   Seite in dem Fall komplett schwarz.
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Feinschliff

   Steht bewusst ganz am Ende: diese Regeln sollen die weiter
   oben stehenden Bauteil-Regeln ueberschreiben, und in CSS
   gewinnt bei gleicher Staerke die spaetere.
   ══════════════════════════════════════════════════════════════ */

/* Das Tonpult sass unten links und lag damit genau auf der
   Mitgliederzahl im Kopfbereich. Es wandert nach rechts und
   stapelt sich dort mit dem Zurueck-nach-oben-Knopf. */
.klangpult{
  left:auto;
  right:clamp(14px,3vw,26px);
  bottom:clamp(14px,3vw,26px);
}
/* Sobald der Pfeil erscheint, rueckt das Pult eine Reihe hoch. */
.hochknopf.an ~ .klangpult,
body:has(.hochknopf.an) .klangpult{
  bottom:calc(clamp(14px,3vw,26px) + 56px);
}

/* Die Regler klappen jetzt nach links auf, sonst liefen sie
   aus dem Bild heraus. */
.klangpult{flex-direction:row-reverse}
.klangpult .klanghinweis{text-align:right}

@media (max-width:760px){
  /* Auf dem Handy sitzt es oben rechts unter der Kopfzeile,
     damit es die Knoepfe am unteren Rand nicht verdeckt. */
  .klangpult{top:clamp(66px,13vw,84px);bottom:auto;right:12px}
  body:has(.hochknopf.an) .klangpult{bottom:auto}
}

/* ── Kopfzeile auf schmalen Geraeten ──
   Auf 375 px war die Leiste 469 px breit: Schriftzug, Anmelde-
   knopf, Discord und Menuezeichen nebeneinander. Dadurch wurde
   das ganze Dokument breiter als der Bildschirm, und alles
   Festsitzende (Tonpult, Menue) rutschte nach rechts hinaus.

   Unter 560 px bleibt deshalb nur noch das Wappen stehen, und
   die Knoepfe zeigen nur ihr Zeichen. */
.kopf > *{min-width:0}
.marke{overflow:hidden}

@media (max-width:560px){
  .marke span{display:none}
  .marke{gap:0}

  /* font-size:0 faltet die Beschriftung weg. Das Zeichen hat
     eine eigene Groesse und bleibt davon unberuehrt. */
  .dcAnmelden{font-size:0;gap:0;padding:9px 13px}
  .dcAnmelden svg{width:20px;height:16px}

  .dcKontoKnopf{padding:5px 8px;gap:0}
  .dcKontoName{display:none}
  .dcKontoKnopf .dcAbzeichen{display:none}

  .kopfrechts{gap:7px}
  .knopf.klein{padding:9px 13px}
}

/* Offenes Klappmenue: das Tonpult tritt zur Seite. */
body.menueauf .klangpult{
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}

/* Die Linie hinter der Bereichsangabe gehoert nur in die
   Abschnittskoepfe, nicht in den Kopfbereich oder das Gildenband. */
.hero .ueber::after,
.gildenname .ueber::after,
.schnelltafel .ueber::after{display:none}
.hero .ueber,.gildenname .ueber{display:inline-flex}
.gildenname .ueber{color:var(--text-still)}

/* Vier- und zweispaltige Fassung der Merkmalliste */
.merkmalliste.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.merkmalliste.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){
  .merkmalliste.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .merkmalliste.vier,.merkmalliste.zwei{grid-template-columns:1fr}
}

/* ── Reste aus dem Emoji-Umbau ── */

/* Das Schloss ist jetzt eine Zeichnung statt eines Emoji. */
svg.schlosszeichen{
  width:30px;height:30px;flex:none;
  color:var(--gold);
  font-size:0;
}

/* Die drei Merkmale im Schnellband: durch senkrechte Linien
   getrennt statt mit Bildzeichen darueber. */
ul.merkmale{
  list-style:none;display:flex;gap:0;flex-wrap:wrap;
  margin:20px 0 22px;padding:0;
}
ul.merkmale li{
  padding:0 16px;
  border-left:1px solid var(--rand);
  color:var(--text-still);
  font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
}
ul.merkmale li:first-child{padding-left:0;border-left:0}

/* Die Eckdaten im Gildenband stehen jetzt ohne Bildzeichen da
   und bekommen stattdessen einen Strich als Anker. */
.gildenwert{padding-left:16px;border-left:1px solid rgba(232,185,90,.28)}
.gildenwert u{color:var(--text-still)}
.gildenwert b{letter-spacing:.01em;font-weight:600}

/* Die Koepfe des Schnellbands ohne Bildzeichen */
.schnellkopf h2{font-size:.95rem;letter-spacing:.14em}

/* Ersatzwappen (Brawler): Anfangsbuchstabe in der Anzeigeschrift. */
.zeichen.ersatz{
  font-weight:700;font-size:1rem!important;letter-spacing:.02em;
  color:var(--gold);
  background:rgba(232,185,90,.08)!important;
}

/* ══════════════════════════════════════════════════════════════
   Startband: Neuigkeiten · Ueber uns · Termine

   Drei Tafeln direkt unter dem Kopfbereich, nach dem Vorbild des
   Entwurfs. Jede Tafel ist eine eigene Flaeche mit Rahmen, der
   Kopf durch eine Linie abgesetzt.
   ══════════════════════════════════════════════════════════════ */
.schnellband{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  max-width:1560px;margin:0 auto;
  padding:clamp(20px,2.4vw,30px) clamp(14px,2.4vw,30px) clamp(26px,3vw,38px);
  background:none;border:0;
}
.schnelltafel{
  display:flex;flex-direction:column;
  padding:20px clamp(16px,1.5vw,22px) 22px;
  background:rgba(9,6,14,.74);
  border:1px solid var(--rand);
  transition:border-color .3s,background .3s;
}
.schnelltafel:hover{border-color:rgba(232,185,90,.26)}

.schnellkopf{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;padding-bottom:13px;
  border-bottom:1px solid var(--rand);
}
.schnellkopf h2{color:var(--text)}
.schnellkopf a{
  margin-left:auto;flex:none;
  color:var(--gold);
  font-size:.76rem;font-weight:500;letter-spacing:.06em;
  white-space:nowrap;
  transition:opacity .2s;
}
.schnellkopf a::after{content:" →"}
.schnellkopf a:hover{opacity:.72}

/* ── Zeilen in den beiden Listen ── */
.bandliste{display:flex;flex-direction:column}
.bandzeile{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  transition:background .22s;
}
.bandliste > :last-child{border-bottom:0;padding-bottom:0}
.bandliste > :first-child{padding-top:4px}
a.bandzeile:hover{background:rgba(255,255,255,.03)}

.bandbild{
  flex:none;width:108px;height:74px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.bandbild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--weich)}
a.bandzeile:hover .bandbild img{transform:scale(1.07)}

.bandtext{min-width:0;flex:1}
.bandtext time{
  display:block;margin-bottom:4px;
  color:var(--text-still);
  font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
}
.bandtext b{
  display:block;
  color:var(--text);
  font-size:.95rem;font-weight:600;line-height:1.35;
  letter-spacing:-.005em;
}
a.bandzeile:hover .bandtext b{color:var(--gold-hell)}
.bandtext span{
  display:block;margin-top:4px;
  color:var(--text-still);
  font-size:.83rem;line-height:1.5;
}

/* ── Datumsblatt bei den Terminen ── */
.terminblatt{
  flex:none;width:52px;
  display:flex;flex-direction:column;align-items:center;
  padding:7px 0 8px;
  border:1px solid rgba(232,185,90,.3);
  background:rgba(232,185,90,.06);
}
.terminblatt u{
  text-decoration:none;
  color:var(--gold);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.terminblatt b{
  margin-top:1px;
  color:var(--text);
  font-size:1.26rem;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.bandleer{
  margin:14px 0;
  color:var(--text-still);
  font-size:.88rem;font-style:italic;
}

/* ── Mittlere Tafel ── */
.bandtextblock{
  margin:0;
  color:var(--text-leise);
  font-size:.94rem;line-height:1.66;
}
.saeulen{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin:22px 0 20px;
}
.saeule{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.saeule svg{width:26px;height:26px;color:var(--gold);opacity:.9}
.saeule span{
  color:var(--text-still);
  font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.schnelltafel .knopf{margin-top:auto;align-self:stretch}

@media (max-width:1000px){
  .schnellband{grid-template-columns:1fr}
  .bandliste > :last-child{padding-bottom:0}
}

/* ══════════════════════════════════════════════
   Kopfzeile und Knoepfe nach dem Entwurf
   ══════════════════════════════════════════════ */

/* Der Discord-Knopf oben rechts: nur ein goldener Rahmen, wie
   das "Join us" im Entwurf, statt einer bunten Flaeche. */
.kopfrechts .knopf.klein{
  background:transparent;
  border:1px solid rgba(232,185,90,.55);
  color:var(--gold-hell);
  box-shadow:none;
  border-radius:3px;
  padding:10px 20px;
  letter-spacing:.16em;
}
.kopfrechts .knopf.klein:hover{
  background:rgba(232,185,90,.12);
  border-color:var(--gold);
  box-shadow:none;transform:none;
}
.kopfrechts .knopf.klein::before{display:none}

/* Kantigere Knoepfe: der Entwurf hat fast rechte Ecken. */
.knopf{border-radius:3px;padding:14px 28px}
.knopf.klein{border-radius:3px}
.knopf.gross{border-radius:3px;padding:16px 34px}
.hero .reihe .knopf{min-width:212px}

/* Kein Kopfbereich-Punkt mehr, der Eyebrow ist raus. */
.hero .ueber{display:none}
.heldtext{padding-top:clamp(40px,5vw,70px)}

/* Der Titel in Versalien, wie im Entwurf. */
.hero h1{
  text-transform:uppercase;
  letter-spacing:.015em;
  font-size:clamp(2.1rem,4.4vw,4rem);
}

/* ══════════════════════════════════════════════════════════════
   Ansichten

   Die Seite zeigt immer nur einen Bereich. Umgeschaltet wird von
   ansicht.js; hier steht nur, wie der Wechsel aussieht.
   ══════════════════════════════════════════════════════════════ */
.ansicht.eingeblendet{animation:ansichtAuf .34s var(--weich)}
@keyframes ansichtAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Auf der Startseite tragen Kopfbereich und Band schon genug
   Abstand; die Blockpolsterung der uebrigen Ansichten entfaellt. */
#start{padding:0;max-width:none}

/* ══════════════════════════════════════════════════════════════
   Kopfbereich: das Bild vollstaendig zeigen

   Vorher war es ein Ausschnitt (object-fit:cover), der oben und
   unten etwas abgeschnitten hat. Jetzt bestimmt das Bild selbst
   die Hoehe des Kopfbereichs, es ist also komplett zu sehen.
   Die Hoehenbremse sorgt dafuer, dass es auf flachen Fenstern
   nicht ueber den Bildschirm hinauswaechst: dann wird es
   kleiner statt beschnitten.
   ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  display:block;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid var(--rand);
  background:var(--tinte);
}
.heldbild{
  position:relative;top:auto;right:auto;bottom:auto;
  width:100%;
  z-index:0;
}
/* Der Kopfbereich ist immer vollstaendig gefuellt, nie mit
   schwarzen Balken daneben. Die Hoehe ergibt sich aus der
   Fensterbreite, hoert aber an der Fensterhoehe auf.

   Das Seitenverhaeltnis liegt bei etwa 2:1. Das ist die Form,
   die ein Browserfenster nach Abzug der Kopfzeile ueblicherweise
   hat. Liefert das Bild dieselbe Form, wird praktisch nichts
   abgeschnitten. */
.heldbild{
  width:100%;
  height:min(calc(100svh - 72px), 52vw);
  min-height:400px;
}
.heldbild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Die Figur sitzt ganz rechts im Bild. Der Ausschnitt haelt
     sich deshalb nach rechts, damit sie auf schmalen Fenstern
     nicht angeschnitten wird. */
  object-position:68% 45%;
}
.heldtext{
  position:absolute;z-index:2;
  left:clamp(18px,4.5vw,70px);
  top:50%;transform:translateY(-50%);
  width:min(520px,46%);
  margin:0;padding:0;
}

@media (max-width:900px){
  /* Hochkant passt kein Text neben das Bild. Es steht dann oben
     in voller Breite, der Text darunter. */
  .heldbild img{max-height:none}
  .heldbild::after{
    background:linear-gradient(0deg, var(--tinte) 1%, rgba(11,7,16,.35) 40%, transparent 70%);
  }
  .heldtext{
    position:static;transform:none;
    width:auto;
    padding:26px clamp(18px,5vw,30px) 40px;
  }
  .hero{display:flex;flex-direction:column}
}

/* Herkunft einer Fremdmeldung, klein hinter dem Datum. */
.bandtext time{display:flex;align-items:center;gap:9px}
.bandtext time .quelle{
  font-style:normal;
  padding:1px 7px;
  border:1px solid rgba(232,185,90,.3);
  color:var(--gold);
  font-size:.6rem;letter-spacing:.09em;text-transform:none;
}

/* ══════════════════════════════════════════════════════════════
   Guides: Klassenauswahl und Klassenkopf

   Eine Klasse aussuchen ist der haeufigste Einstieg. Sie steht
   deshalb als Raster da und nicht als neunter Reiter in einer
   Zeile, in der sie keiner findet.
   ══════════════════════════════════════════════════════════════ */
.klassenwahl{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr));
  gap:1px;
  margin:0 0 clamp(26px,3vw,38px);
  background:var(--rand);
  border:1px solid var(--rand);
}
.klassenkachel{
  display:flex;align-items:center;gap:13px;
  padding:13px 15px;
  background:rgba(9,6,14,.8);
  border:0;cursor:pointer;text-align:left;
  color:var(--text);font:inherit;
  transition:background .24s;
}
.klassenkachel:hover{background:rgba(24,16,36,.9)}
.klassenkachel.an{
  background:rgba(232,185,90,.1);
  box-shadow:inset 2px 0 0 var(--gold);
}
.kwWappen img,.kwWappen .zeichen{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px var(--rand);
}
.kwText{min-width:0;flex:1}
.kwText b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.kwText > span{
  display:block;margin-top:2px;
  color:var(--text-still);
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.klassenkachel.an .kwText b{color:var(--gold-hell)}
.kwZahl{
  flex:none;font-style:normal;
  padding:2px 8px;
  border:1px solid var(--rand);
  color:var(--text-still);
  font-size:.7rem;font-variant-numeric:tabular-nums;
}
.klassenkachel.an .kwZahl{border-color:rgba(232,185,90,.45);color:var(--gold)}

/* ── Kopf einer Klassenseite ── */
.klassenkopf{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
  padding:0 0 20px;margin-bottom:24px;
  border-bottom:1px solid var(--rand);
}
.kkWappen img,.kkWappen .zeichen{
  width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-size:1.3rem;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(232,185,90,.35),0 0 30px -10px rgba(232,185,90,.6);
}
.kkNamen b{
  display:block;
  font-family:var(--anzeige);
  font-size:1.5rem;font-weight:700;letter-spacing:.03em;
}
.kkNamen > span{
  display:block;margin-top:2px;
  color:var(--text-still);
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.kkMarken{display:flex;gap:8px;flex-wrap:wrap}
.kkRolle,.kkWaffe{
  padding:4px 11px;
  border:1px solid var(--rand);
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-leise);
}
.kkRolle{border-color:rgba(232,185,90,.4);color:var(--gold)}
.kkRolle.tank{border-color:rgba(143,184,255,.45);color:#8fb8ff}
.kkRolle.heiler{border-color:rgba(127,224,168,.45);color:var(--gruen)}
.kkRolle.support{border-color:rgba(232,185,90,.45);color:var(--gold)}
.kkZahl{
  margin-left:auto;
  color:var(--text-still);font-size:.8rem;
}

/* Die Guidekarten bleiben im Raster, jetzt in einem eigenen
   Behaelter, damit Kopf und Verweise darueber und darunter
   volle Breite behalten. */
.guideinhaltRaster{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}

/* ── Zum Nachschlagen ── */
.nachschlag{
  margin-top:clamp(30px,3.4vw,44px);
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--rand);
}
.nachschlag h4{
  margin:0 0 7px;
  font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-leise);
}
.nsText{margin:0 0 18px;color:var(--text-still);font-size:.88rem;line-height:1.6;max-width:62ch}
.nsReihe{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
.nsKarte{
  display:block;padding:14px 16px;
  border:1px solid var(--rand);
  transition:border-color .25s,background .25s,transform .25s var(--weich);
}
.nsKarte:hover{
  border-color:rgba(232,185,90,.45);
  background:rgba(232,185,90,.05);
  transform:translateY(-2px);
}
.nsKarte b{display:block;font-size:.95rem;font-weight:600}
.nsKarte span{display:block;margin-top:3px;color:var(--text-still);font-size:.84rem}
.nsKarte u{
  display:block;margin-top:9px;text-decoration:none;
  color:var(--gold);font-size:.74rem;letter-spacing:.06em;
}
.nsKarte u::after{content:" ↗"}

/* Die Reiter oben werden schmaler, die Klassen tragen jetzt
   das Gewicht. */
.guideband{border-bottom:1px solid var(--rand);margin-bottom:18px}
.guidewahl{border-radius:0;padding:9px 16px}

@media (max-width:560px){
  .klassenwahl{grid-template-columns:1fr}
  .kkZahl{margin-left:0;width:100%}
}

/* ══════════════════════════════════════════════════════════════
   Builds

   Die Darstellung lehnt sich an das an, was man im Spiel sieht:
   dunkle Felder mit feinem Rahmen, Zahlen rechtsbuendig, viel
   Ruhe. Die Knotenbilder aus dem Spiel verwenden wir nicht, die
   gehoeren NCSoft. Ein genommener Knoten bekommt stattdessen
   eine eigene Form und die Farbe seines Bretts.
   ══════════════════════════════════════════════════════════════ */

.bKopfzeile{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid var(--rand);
}
.bAktionen{margin-left:auto;display:flex;align-items:center;gap:10px}
.bMeldung{font-size:.85rem}
.bMeldung.gut{color:var(--gruen)}
.bMeldung.schlecht{color:var(--akzent-2)}

/* ── Filterleiste ── */
.bFilter{display:flex;gap:6px;flex-wrap:wrap}
.bFilterKnopf{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;cursor:pointer;
  background:transparent;border:1px solid var(--rand);
  color:var(--text-still);font:inherit;font-size:.82rem;
  transition:border-color .2s,color .2s,background .2s;
}
.bFilterKnopf:hover{color:var(--text);border-color:var(--rand-hell)}
.bFilterKnopf.an{color:var(--gold);border-color:rgba(232,185,90,.5);background:rgba(232,185,90,.07)}
.bFilterKnopf em{
  font-style:normal;font-size:.7rem;
  padding:1px 6px;background:rgba(255,255,255,.07);
  font-variant-numeric:tabular-nums;
}

/* ── Liste ── */
.bListe{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.bKarte{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px;
  background:rgba(9,6,14,.74);
  border:1px solid var(--rand);
  transition:border-color .25s,background .25s,transform .25s var(--weich);
}
.bKarte:hover{
  border-color:rgba(232,185,90,.4);
  background:rgba(18,12,27,.85);
  transform:translateY(-2px);
}
.bWappen{
  width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px var(--rand);
}
.bWappen.leer{background:rgba(255,255,255,.03)}
.bkText{min-width:0;flex:1}
.bkText b{display:block;font-size:1rem;font-weight:600;line-height:1.3}
.bkZeile{
  display:block;margin-top:3px;
  color:var(--text-still);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.bkAnriss{
  display:-webkit-box;margin-top:8px;
  color:var(--text-leise);font-size:.88rem;line-height:1.55;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bkFuss{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.bkFuss em,.bMarken em{
  font-style:normal;padding:2px 9px;
  border:1px solid var(--rand);
  color:var(--text-leise);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.bkZahlen{margin-left:auto;color:var(--text-still);font-size:.72rem;font-variant-numeric:tabular-nums}
.bkWer{
  flex:none;text-align:right;
  color:var(--text-leise);font-size:.8rem;
}
.bkWer u{display:block;text-decoration:none;color:var(--text-still);font-size:.7rem;margin-top:3px}

/* ── Kopf eines Builds ── */
.bSchau{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid var(--rand);
}
.bSchau .bWappen{width:60px;height:60px;box-shadow:0 0 0 1px rgba(232,185,90,.35)}
.bSchauText{min-width:0;flex:1}
.bSchauText h3{
  margin:0;font-family:var(--anzeige);
  font-size:1.45rem;font-weight:700;letter-spacing:.02em;
}
.bSchauZeile{display:flex;gap:9px;flex-wrap:wrap;margin:6px 0 0}
.bSchauZeile span{color:var(--text-still);font-size:.8rem}
.bMarken{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}
.bSicht{
  flex:none;padding:4px 11px;
  border:1px solid rgba(127,224,168,.45);color:var(--gruen);
  font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.bSicht.gilde{border-color:rgba(232,185,90,.45);color:var(--gold)}
.bText{margin:0 0 6px;color:var(--text-leise);line-height:1.68;max-width:72ch}

.bBlock{margin-top:clamp(30px,3.4vw,44px)}
.bBlock h4{
  margin:0 0 14px;
  font-size:.82rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-leise);
}
.bBlock h5{
  margin:18px 0 9px;
  font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-still);
}

/* ── Skill-Leiste ── */
.bLeisteRaster{
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:minmax(0,1fr) minmax(0,280px) minmax(0,260px);
}
.bLeiste{display:flex;gap:7px;flex-wrap:wrap;align-content:flex-start}
.bSlot{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  width:82px;min-height:72px;padding:7px 8px 8px;
  background:linear-gradient(170deg,rgba(32,22,46,.9),rgba(12,8,19,.9));
  border:1px solid var(--rand-hell);
}
.bSlot u{
  position:absolute;top:5px;left:7px;text-decoration:none;
  color:var(--gold);font-size:.66rem;font-weight:700;
}
.bSlot b{font-size:.74rem;font-weight:500;line-height:1.25;color:var(--text-leise)}
.bSlotNotizen{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.bSlotNotizen li{
  display:flex;gap:11px;
  color:var(--text-leise);font-size:.86rem;line-height:1.55;
}
.bSlotNotizen u{
  flex:none;min-width:30px;text-decoration:none;text-align:center;
  color:var(--gold);font-size:.7rem;font-weight:700;
  border:1px solid rgba(232,185,90,.3);height:fit-content;padding:1px 0;
}

/* ── Makro ── */
.bMakro{
  padding:14px 16px;
  background:rgba(9,6,14,.7);border:1px solid var(--rand);
}
.bMakro h5{margin-top:0;display:flex;align-items:center;gap:9px}
.bMakro h5 em{
  font-style:normal;padding:2px 8px;
  border:1px solid var(--rand-hell);color:var(--text);
  font-size:.66rem;letter-spacing:.08em;
}
.bMakro ol{list-style:none;margin:0;padding:0;counter-reset:m}
.bMakro li{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.bMakro li:last-child{border-bottom:0}
.bMakro li::before{
  counter-increment:m;content:counter(m);
  flex:none;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid rgba(232,185,90,.35);color:var(--gold);
  font-size:.68rem;font-weight:700;
}
.bMakro li b{flex:1;font-size:.88rem;font-weight:500}
.bMakro li span{color:var(--text-still);font-size:.76rem;font-variant-numeric:tabular-nums}

.bHinweise{list-style:none;margin:0;padding:0;counter-reset:h;display:flex;flex-direction:column;gap:9px}
.bHinweise li{
  counter-increment:h;
  display:flex;gap:11px;
  padding:11px 13px;
  background:rgba(9,6,14,.6);border:1px solid var(--rand);
  color:var(--text-leise);font-size:.85rem;line-height:1.55;
}
.bHinweise li::before{
  content:counter(h);
  flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:rgba(232,185,90,.16);color:var(--gold);
  font-size:.66rem;font-weight:700;
}

@media (max-width:1100px){
  .bLeisteRaster{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════
   Daevanion-Brett
   ══════════════════════════════════════════════ */
.dvReiter{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--rand);border:1px solid var(--rand);
}
.dvReiterKnopf{
  display:block;padding:11px 14px;cursor:pointer;text-align:left;
  background:rgba(9,6,14,.8);border:0;color:var(--text);font:inherit;
  transition:background .22s;
}
.dvReiterKnopf:hover{background:rgba(22,15,34,.9)}
.dvReiterKnopf.an{background:rgba(232,185,90,.1);box-shadow:inset 0 -2px 0 var(--gold)}
.dvReiterKnopf b{display:inline-block;font-size:.92rem;font-weight:600}
.dvReiterKnopf em{
  float:right;font-style:normal;
  color:var(--text-still);font-size:.8rem;font-variant-numeric:tabular-nums;
}
.dvReiterKnopf.an em{color:var(--gold)}
.dvReiterKnopf span{display:block;margin-top:2px;color:var(--text-still);font-size:.7rem}

.dvKoerper{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:1px;background:var(--rand);
  border:1px solid var(--rand);border-top:0;
}
.dvRaster{
  display:grid;grid-template-columns:repeat(10,1fr);
  gap:6px;padding:clamp(12px,1.6vw,20px);
  background:rgba(7,5,11,.8);
}
.dvFeld{
  aspect-ratio:1;padding:0;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.055);
  transition:background .18s,border-color .18s;
}
button.dvFeld{cursor:pointer}
button.dvFeld:hover{background:rgba(255,255,255,.08);border-color:var(--rand-hell)}

/* Ein genommener Knoten: gefuellt, mit Raute in der Mitte.
   Die Farbe kommt vom Brett, damit die vier sich unterscheiden. */
.dvFeld.an{
  position:relative;
  background:var(--dvFarbe,rgba(232,185,90,.16));
  border-color:var(--dvRand,rgba(232,185,90,.6));
  box-shadow:0 0 14px -4px var(--dvRand,rgba(232,185,90,.6));
}
.dvFeld.an::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:34%;height:34%;transform:rotate(45deg);
  background:var(--dvRand,var(--gold));
}
.dvRaster.stufe0{--dvFarbe:rgba(232,185,90,.16);--dvRand:rgba(232,185,90,.75)}
.dvRaster.stufe1{--dvFarbe:rgba(90,216,255,.14);--dvRand:rgba(90,216,255,.7)}
.dvRaster.stufe2{--dvFarbe:rgba(192,107,255,.16);--dvRand:rgba(192,107,255,.75)}
.dvRaster.stufe3{--dvFarbe:rgba(232,48,107,.16);--dvRand:rgba(255,106,162,.75)}

.dvPanel{padding:clamp(14px,1.6vw,20px);background:rgba(9,6,14,.8)}
.dvPanelKopf{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:11px;margin-bottom:12px;
  border-bottom:1px solid var(--rand);
}
.dvPanelKopf b{font-size:1.02rem;font-weight:600}
.dvPanelKopf span{margin-left:auto;color:var(--text-still);font-size:.78rem;font-variant-numeric:tabular-nums}
.dvGesamt{margin:0 0 4px;color:var(--text-leise);font-size:.85rem}
.dvGesamt b{color:var(--gold)}
.dvListe{list-style:none;margin:0;padding:0}
.dvListe li{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.045);
  font-size:.86rem;
}
.dvListe li:last-child{border-bottom:0}
.dvListe li span{flex:1;color:var(--text-leise)}
.dvListe li b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.dvLeer{margin:10px 0 0;color:var(--text-still);font-size:.85rem;font-style:italic}

@media (max-width:1000px){
  .dvKoerper{grid-template-columns:1fr}
  .dvReiter{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════
   Formular
   ══════════════════════════════════════════════ */
.bFormKopf{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:10px;
}
.bFeld{display:flex;flex-direction:column;gap:6px;min-width:0}
.bFeld.breit{grid-column:1/-1}
.bFeld.schmal{max-width:220px}
.bFeld > span{
  color:var(--text-still);
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.bFeld input,.bFeld select,.bFeld textarea,
.blZeile input,.bmZeile input,.bhZeile input,.pzZeile input{
  width:100%;padding:9px 11px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--rand);
  color:var(--text);font:inherit;font-size:.92rem;
  border-radius:0;
  transition:border-color .18s,background .18s;
}
.bFeld textarea{resize:vertical;line-height:1.55}
.bFeld input:focus,.bFeld select:focus,.bFeld textarea:focus,
.blZeile input:focus,.bmZeile input:focus,.bhZeile input:focus,.pzZeile input:focus{
  outline:0;border-color:rgba(232,185,90,.55);background:rgba(255,255,255,.06);
}

.bArten{display:flex;gap:7px;flex-wrap:wrap}
.bArt{
  padding:7px 13px;cursor:pointer;
  background:transparent;border:1px solid var(--rand);
  color:var(--text-still);font:inherit;font-size:.8rem;
  transition:border-color .2s,color .2s,background .2s;
}
.bArt:hover{color:var(--text);border-color:var(--rand-hell)}
.bArt.an{color:var(--gold);border-color:rgba(232,185,90,.55);background:rgba(232,185,90,.08)}

.bLeisteForm{display:grid;gap:8px}
.blZeile{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.5fr);gap:8px}
.bMakroForm,.bHinweisForm{display:grid;gap:8px;margin-bottom:12px}
.bmZeile{display:grid;grid-template-columns:28px minmax(0,1fr) 110px 28px 32px;gap:8px;align-items:center}
.bhZeile{display:grid;grid-template-columns:28px minmax(0,1fr) 32px;gap:8px;align-items:center}
.bmZeile > em,.bhZeile > em{
  font-style:normal;text-align:center;
  color:var(--gold);font-size:.8rem;font-weight:700;
}
.bmMs{color:var(--text-still);font-size:.78rem}
.pzListe{display:grid;gap:7px;margin-bottom:10px}
.pzZeile{display:grid;grid-template-columns:minmax(0,1fr) 80px 32px;gap:7px}
.pzWeg{
  cursor:pointer;padding:0;height:36px;
  background:transparent;border:1px solid var(--rand);
  color:var(--text-still);font:inherit;font-size:1.1rem;line-height:1;
  transition:color .18s,border-color .18s,background .18s;
}
.pzWeg:hover{color:#fff;border-color:rgba(232,48,107,.5);background:rgba(232,48,107,.18)}

@media (max-width:700px){
  .blZeile{grid-template-columns:62px minmax(0,1fr)}
  .blZeile .blNotiz{grid-column:1/-1}
  .bListe{grid-template-columns:1fr}
  .bkWer{text-align:left}
}

/* ══════════════════════════════════════════════════════════════
   Startband, Nachbesserung
   ══════════════════════════════════════════════════════════════ */

/* Die Zeilen hatten seitlich kein Polster. Beim Ueberfahren lag
   die Aufhellung deshalb genau auf der Textkante und sah aus, als
   wuerde die Zeile verrutschen. Jetzt reicht sie nach beiden
   Seiten ueber den Text hinaus, wie bei einer Listenauswahl. */
.bandzeile{
  padding:13px 10px;
  margin:0 -10px;
  border-bottom:1px solid transparent;
  position:relative;
}
/* Die Trennlinie gehoert an die Textkante, nicht an die
   Aufhellung. Darum als eigenes Element statt als Rahmen. */
.bandzeile::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:1px;
  background:rgba(255,255,255,.055);
}
.bandliste > :last-child::after{display:none}
.bandliste > :last-child{padding-bottom:4px}
.bandliste > :first-child{padding-top:6px}
a.bandzeile{transition:background .18s}
a.bandzeile:hover{background:rgba(255,255,255,.045)}

/* ── Die Tafeln fuellen ──
   "Ueber uns" hatte unten ein grosses Loch, weil der Knopf mit
   margin-top:auto nach ganz unten gedrueckt wurde und der ganze
   Rest oben klebte. Jetzt bekommt der mittlere Block den freien
   Platz und zentriert sich darin. */
.schnelltafel{min-height:100%}
.schnelltafel.mitte{display:flex;flex-direction:column}
.schnelltafel.mitte .bandtextblock{margin-bottom:0}
.saeulen{
  flex:1;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-content:center;
  gap:12px;
  margin:20px 0;
  padding:20px 0;
  border-top:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
}
.saeule svg{width:30px;height:30px}
.schnelltafel .knopf{margin-top:0}

/* Auch die beiden Listen sollen ihre Tafel ausfuellen, damit alle
   drei gleich wirken und unten buendig abschliessen. */
.bandliste{flex:1;display:flex;flex-direction:column;justify-content:space-between}

@media (max-width:1000px){
  .saeulen{flex:none}
  .bandliste{display:block}
}

/* ── Hoehen angleichen ──
   Die Tafeln sind gleich hoch, weil sie im selben Raster liegen.
   Damit darin keine Loecher entstehen, muessen die Inhalte
   aehnlich hoch sein. Deshalb laeuft der Anrisstext ueber
   hoechstens zwei Zeilen; danach wird abgeschnitten. */
.bandtext span{
  display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.bandtext b{
  display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Die Zeilen stehen oben, nicht ueber die ganze Hoehe verteilt.
   Verteilt sah es aus, als fehle zwischen den Terminen etwas. */
.bandliste{justify-content:flex-start}

/* Notbremse: wird gesetzt, wenn der Einblend-Beobachter nicht
   zum Zug kommt (Hintergrundtab, verdecktes Fenster, langsamer
   Rechner). Setzt hart sichtbar, ohne Ueberblendung - eine
   Ueberblendung braucht naemlich auch einen zeichnenden Browser. */
.js .zeigt.sofort{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* ══════════════════════════════════════════════════════════════
   Guide-Editor, direkt in der Seite

   Diese Regeln stehen bewusst in UNSEREM Stylesheet und nicht in
   studio-eingebettet.css: die Datei wird aus studio.css neu
   erzeugt, Aenderungen darin waeren beim naechsten Mal weg.
   ══════════════════════════════════════════════════════════════ */
.guidestudio{
  /* Kein eigener Hintergrund mehr: unsere Seite scheint durch. */
  background:none!important;
  font-family:var(--text-schrift)!important;
  font-size:15px!important;
  margin:0!important;
}

/* Der eigene Schriftzug des Studios wiederholt nur, was oben in
   unserer Kopfzeile steht. Die Bedienelemente daneben bleiben. */
.guidestudio .brand{display:none!important}
.guidestudio .app-header{
  background:none!important;
  border-bottom:1px solid var(--rand)!important;
  padding:0 0 16px!important;
  margin-bottom:22px!important;
}

/* Innerhalb der Seite braucht es keine eigene Umrandung und
   keinen eigenen Bildlauf mehr. */
.guidestudio .board-scroll{overflow:visible!important}

/* Das eingebettete Studio uebernimmt die Farben der Gildenseite.
   Die eigenstaendige Studio-Seite behält ihre eigenen Styles. */
#guides .guidestudio{
  --bg:transparent;
  --surface:#140d1d;
  --panel:#1b1228;
  --line:rgba(218,187,245,.18);
  --gold:#e8b95a;
  --muted:#b7a9c9;
  --text:#f2edf7;
  color:var(--text);
}
#guides .guidestudio .studio{
  min-height:0;
  background:transparent!important;
  border:0!important;
}
#guides .guidestudio .app-header{
  border-color:var(--rand-hell)!important;
  margin-bottom:16px!important;
}
#guides .guidestudio .header-actions{
  flex-wrap:wrap;
  gap:9px;
}
#guides .guidestudio .header-actions>button,
#guides .guidestudio .mode-switch,
#guides .guidestudio .visibility-label select{
  min-height:43px;
  background:rgba(27,17,40,.78);
  border:1px solid rgba(192,107,255,.28);
  border-radius:8px;
  color:var(--text);
  box-shadow:inset 0 1px rgba(255,255,255,.045);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
#guides .guidestudio .header-actions>button:hover,
#guides .guidestudio .visibility-label select:hover{
  background:rgba(47,27,66,.9);
  border-color:rgba(192,107,255,.65);
}
#guides .guidestudio .mode-switch{padding:3px}
#guides .guidestudio .mode-switch button{
  border:0;
  border-radius:5px;
  color:var(--text-leise);
}
#guides .guidestudio .mode-switch button:hover:not(:disabled){
  background:rgba(192,107,255,.13);
  color:var(--text);
}
#guides .guidestudio .mode-switch .active{
  background:linear-gradient(135deg,rgba(192,107,255,.32),rgba(232,48,107,.16));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(192,107,255,.24);
}
#guides .guidestudio .header-actions>.gold-button{
  background:linear-gradient(135deg,var(--gold-hell),var(--gold));
  color:#1a1123;
  border-color:var(--gold);
  font-weight:700;
}
#guides .guidestudio .header-actions>.gold-button:hover{
  background:var(--gold-hell);
  border-color:var(--gold-hell);
  box-shadow:0 0 18px rgba(232,185,90,.2);
}
#guides .guidestudio .count{color:var(--gold)}
#guides .guidestudio main{padding:24px 20px 36px}
#guides .guidestudio .intro p{color:var(--text-leise)}
#guides .guidestudio .class-picker button{
  background:linear-gradient(145deg,rgba(32,20,47,.82),rgba(16,10,25,.8));
  border-color:var(--rand-hell);
  border-radius:8px;
}
#guides .guidestudio .class-picker button:hover{
  background:rgba(60,32,80,.85);
  border-color:rgba(192,107,255,.6);
}
#guides .guidestudio .class-picker .active{
  background:linear-gradient(145deg,rgba(91,44,111,.72),rgba(38,21,53,.9));
  border-color:var(--violett);
  box-shadow:inset 0 -2px var(--gold),0 0 0 1px rgba(192,107,255,.16);
}
#guides .guidestudio .section-nav{border-color:var(--rand-hell)}
#guides .guidestudio .section-nav a{color:var(--text-leise)}
#guides .guidestudio .section-nav a:hover{color:var(--gold-hell)}
#guides .guidestudio .panel{
  background:linear-gradient(150deg,rgba(27,18,40,.94),rgba(13,9,21,.94));
  border-color:var(--rand-hell);
}
#guides .guidestudio .specialty-plan,
#guides .guidestudio .board,
#guides .guidestudio .slot-editor{
  background:rgba(12,8,21,.76);
  border-color:var(--rand-hell);
}
#guides .guidestudio .rationale,
#guides .guidestudio .role-notice,
#guides .guidestudio .notice{
  background:rgba(57,34,69,.6);
  border-color:rgba(192,107,255,.3);
}
#guides .guidestudio .board-tabs button,
#guides .guidestudio .plan-row{
  background:rgba(26,17,39,.8);
  border-color:var(--rand);
}
#guides .guidestudio .board-tabs .active{
  background:rgba(82,43,100,.55);
  border-color:var(--violett);
  box-shadow:0 0 10px rgba(192,107,255,.15);
}
#guides .guidestudio footer{border-color:var(--rand-hell);color:var(--text-still)}
@media (max-width:800px){
  #guides .guidestudio main{padding:18px 0 28px}
  #guides .guidestudio .header-actions{width:100%}
  #guides .guidestudio .header-actions>.gold-button{margin-left:0}
  #guides .guidestudio .hotbar-layout,
  #guides .guidestudio .hotbar-layout>*{min-width:0}
}

/* Kopfzeile: die Kapitel nutzen die gesamte Strecke zwischen Marke
   und Kontobereich, statt sich am rechten Rand zu sammeln. */
@media (min-width:1501px){
  .kopf{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(18px,2vw,38px);
  }
  .kapitelnav{
    margin:0;
    justify-content:space-evenly;
    gap:0;
  }
}
@media (max-width:1500px){
  .kopfrechts{margin-left:auto}
}

/* Das Wappen bleibt rund; der kleine rechteckige Kasten war ein
   Discord-Knopf ohne sichtbares Symbol bei schmalen Fenstern. */
.marke picture{display:block;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden}
.marke picture img{display:block}
.kopf.klein .marke picture{width:34px;height:34px}
.kopfrechts .knopf.klein{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.kopfrechts .knopf.klein .discord-symbol{display:block;width:20px;height:16px;flex:none}
@media (max-width:1500px){
  .kopfrechts .knopf.klein{min-width:43px;padding:10px 11px}
}

.fussklein .webseiten-credits{display:block;margin-top:8px;color:var(--gold-hell)}

/* Der Abschluss des Editors bleibt direkt unter dem Guide-Text. */
#guides .guidestudio .guide-save-row{
  display:flex;justify-content:flex-end;align-items:end;gap:14px;flex-wrap:wrap;
  margin:8px 0 28px;padding:18px 0;
  border-top:1px solid var(--rand-hell);
}
#guides .guidestudio .guide-save-row .save-state{margin-right:auto;color:var(--text-leise)}
#guides .guidestudio .guide-save-row .gold-button{
  background:linear-gradient(135deg,var(--gold-hell),var(--gold));
  color:#1a1123;border-color:var(--gold);font-weight:700;
}
#guides .guidestudio .guide-save-row .gold-button:hover{background:var(--gold-hell)}

/* Boss-Tracker: eigene Gebietsübersicht im Stil der Gildenseite. */
#bosse .blockkopf{margin-bottom:28px}
.boss-hinweis{display:flex;align-items:center;gap:11px;padding:13px 16px;margin-bottom:18px;border:1px solid rgba(232,185,90,.2);border-radius:10px;background:rgba(232,185,90,.055);color:var(--text-leise);font-size:.79rem}
.boss-livepunkt{width:8px;height:8px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(232,185,90,.55)}
.boss-hinweis time{margin-left:auto;white-space:nowrap;color:var(--gold-hell);font-weight:700;font-variant-numeric:tabular-nums}
.boss-layout{display:grid;grid-template-columns:minmax(390px,.82fr) minmax(0,1.18fr);gap:18px;align-items:start}
.boss-liste,.boss-kartenbereich{min-width:0;border:1px solid var(--rand-hell);border-radius:16px;background:linear-gradient(155deg,rgba(29,17,43,.94),rgba(11,8,19,.94));box-shadow:0 18px 60px rgba(0,0,0,.18);overflow:hidden}
.boss-listenkopf,.boss-kartenkopf{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;padding:17px 20px;border-bottom:1px solid var(--rand)}
#bosse .boss-listenkopf h3,#bosse .boss-kartenkopf h3{margin:0;color:var(--text);font:600 1rem var(--anzeige);letter-spacing:.03em}
#bosse .boss-listenkopf h3::after,#bosse .boss-kartenkopf h3::after{display:none}
.boss-listenkopf>span{font-size:.7rem;color:var(--text-still);white-space:nowrap}
.boss-eintrag{display:flex;align-items:center;width:100%;gap:13px;padding:15px 18px;text-align:left;color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--rand);cursor:pointer;transition:background .2s,box-shadow .2s}
.boss-eintrag:last-child{border-bottom:0}
.boss-eintrag:hover{background:rgba(192,107,255,.095)}
.boss-eintrag.an{background:linear-gradient(90deg,rgba(192,107,255,.18),rgba(232,185,90,.035));box-shadow:inset 3px 0 var(--gold)}
.boss-symbol{display:grid;place-items:center;width:38px;height:38px;flex:none;color:var(--gold);font-size:1.5rem;border-radius:10px;border:1px solid rgba(232,185,90,.32);background:rgba(232,185,90,.065)}
.boss-eintrag-mitte{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.boss-name{font-weight:700;font-size:.88rem}
.boss-meta{color:var(--text-still);font-size:.7rem;margin-top:5px}
.boss-termin{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;white-space:nowrap;line-height:1.25}
.boss-termin b{font-size:.91rem;font-variant-numeric:tabular-nums;color:var(--gold-hell)}
.boss-termin small{font-size:.68rem;color:var(--text-still);margin-top:5px}
.boss-plan{color:var(--gold);font-size:.66rem;margin-top:5px;line-height:1.25}
.boss-questlog-link{font-size:.72rem;color:var(--gold-hell);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.boss-questlog-link:hover{color:#fff}
.boss-questlog-frame{display:block;width:100%;height:900px;border:0;background:#111;overflow:auto}
.boss-questlog-frame[hidden],.boss-eigenkarte[hidden],.boss-karte-laden[hidden]{display:none}
.boss-karte-laden{display:grid;place-content:center;gap:10px;width:100%;min-height:280px;padding:24px;border:0;border-top:1px solid var(--rand);background:radial-gradient(circle at 50% 40%,rgba(192,107,255,.16),transparent 60%),#13101b;color:var(--text);font-weight:700;cursor:pointer;text-align:center}
.boss-karte-laden span{font-size:.8rem;font-weight:400;color:var(--text-leise)}
.boss-karte-laden:hover,.boss-karte-laden:focus-visible{background-color:#1d1728}
.boss-eigenkarte{padding:18px;background:#13101b}
.boss-eigenkarte-bild{position:relative;width:min(100%,640px);aspect-ratio:1;margin:auto;border:1px solid var(--rand-hell);border-radius:12px;overflow:hidden;background:#baa889}
.boss-eigenkarte-bild img{display:block;width:100%;height:100%;object-fit:contain}
.boss-kartenmarker{position:absolute;z-index:1;display:grid;place-items:center;width:27px;height:27px;padding:0;transform:translate(-50%,-50%);border:2px solid #fff4ce;border-radius:50%;background:#572d50;color:#fff4ce;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 10px #170b21b8}
.boss-kartenmarker:hover,.boss-kartenmarker:focus-visible,.boss-kartenmarker.an{z-index:2;border-color:#fff;background:#c28c2d;color:#fff;box-shadow:0 0 0 4px #2a1728bf,0 0 18px #ecc468}
.boss-kartenmarker.an::after{content:attr(data-label);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);min-width:max-content;padding:3px 7px;border:1px solid #eac36c;border-radius:5px;background:#1b1325;color:#fff;font:700 11px/1.2 Arial,sans-serif;box-shadow:0 2px 8px #0008}
.boss-kartenanleitung{margin:0;padding:12px 20px;color:var(--text-leise);font-size:.72rem;line-height:1.5;background:rgba(255,255,255,.025)}
.boss-kartenbereich .boss-karteninfo{border-top:0;border-bottom:1px solid var(--rand)}
.boss-kartenbereich .boss-kartennotiz{padding-top:13px}
.boss-karteninfo{display:flex;justify-content:space-between;gap:15px;padding:17px 20px;border-top:1px solid var(--rand)}
.boss-info-label{display:block;color:var(--gold);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700}
.boss-karteninfo strong{display:block;margin-top:2px;font-size:.95rem}
.boss-karteninfo p{max-width:55ch;color:var(--text-leise);font-size:.75rem;margin-top:4px;line-height:1.5}
.boss-info-anzahl{align-self:start;padding:5px 8px;border-radius:5px;border:1px solid rgba(232,185,90,.25);color:var(--gold);font-size:.64rem;white-space:nowrap}
.boss-kartennotiz{padding:0 20px 17px;color:var(--text-still);font-size:.65rem}
.boss-quellen{margin-top:18px;color:var(--text-still);font-size:.74rem}
.boss-quellen a{color:var(--gold-hell);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1080px){.boss-layout{grid-template-columns:1fr}}
@media(max-width:700px){.boss-hinweis{align-items:flex-start;flex-wrap:wrap}.boss-hinweis time{margin-left:19px}.boss-listenkopf,.boss-kartenkopf{padding:14px}.boss-kartenkopf{align-items:flex-start;flex-direction:column}.boss-eintrag{padding:12px;gap:9px}.boss-symbol{width:30px;height:30px;font-size:1.15rem}.boss-name{font-size:.78rem}.boss-meta,.boss-termin small{font-size:.61rem}.boss-termin b{font-size:.77rem}.boss-karteninfo{padding:14px;flex-wrap:wrap}.boss-kartenanleitung{padding:11px 14px}.boss-kartennotiz{padding:0 14px 14px}.boss-questlog-frame{height:800px}.boss-eigenkarte{padding:10px}.boss-kartenbereich .boss-kartennotiz{padding:13px 14px}}
@media(max-width:400px){.boss-termin small{white-space:normal;text-align:right}.boss-pinlabel{max-width:80px}}
/* Guild tool download card */
.ptp-meter-link{display:flex;align-items:center;gap:18px;margin:24px 0 0;padding:18px 22px;border:1px solid rgba(218,178,96,.5);border-radius:12px;background:linear-gradient(120deg,rgba(49,32,64,.82),rgba(25,26,43,.86));color:#f8f2f7;text-decoration:none;box-shadow:0 15px 32px rgba(0,0,0,.16)}
.ptp-meter-link img{flex:none;object-fit:contain}.ptp-meter-link span{display:grid;gap:5px}.ptp-meter-link b{font-size:1.1rem}.ptp-meter-link small{color:#d4c9d9}.ptp-meter-link strong{margin-left:auto;color:#ebc46e;white-space:nowrap;font-size:.9rem}.ptp-meter-link:hover{border-color:#ebc46e;background:linear-gradient(120deg,rgba(63,42,76,.94),rgba(30,34,53,.96))}
@media(max-width:650px){.ptp-meter-link{flex-wrap:wrap;padding:16px}.ptp-meter-link strong{width:100%;margin-left:74px}}

/* Eigenes Gildenwerkzeug in der Hauptnavigation. Das Gold greift die
   Akzentfarbe der Website auf, während die Kapitel weiter gleichmäßig stehen. */
.kapitelnav .nav-meter{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 11px;border:1px solid rgba(232,185,90,.5);border-radius:9px;
  background:linear-gradient(135deg,rgba(232,185,90,.16),rgba(192,107,255,.11));
  color:var(--gold-hell);font-weight:700;letter-spacing:.09em;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 25px rgba(232,185,90,.08);
}
.kapitelnav .nav-meter::after{display:none}
.kapitelnav .nav-meter:hover,.kapitelnav .nav-meter:focus-visible{
  color:#fff;border-color:var(--gold);
  background:linear-gradient(135deg,rgba(232,185,90,.26),rgba(192,107,255,.22));
}
.ptp-dungeon-link{display:flex;align-items:center;gap:17px;width:100%;margin:26px 0 24px;padding:19px 22px;border:1px solid rgba(232,185,90,.32);border-radius:13px;background:linear-gradient(110deg,rgba(71,45,89,.65),rgba(31,22,42,.78) 65%,rgba(61,39,50,.55));color:#f6effa;text-decoration:none;transition:transform .2s,border-color .2s,background .2s}
.ptp-dungeon-link:hover{transform:translateY(-2px);border-color:#ebc678;background:linear-gradient(110deg,rgba(85,52,105,.8),rgba(38,26,53,.9) 65%,rgba(77,44,55,.7))}
.ptp-dungeon-symbol{display:grid;place-items:center;width:54px;height:54px;flex:none;border:1px solid rgba(235,198,120,.5);border-radius:12px;background:radial-gradient(circle,rgba(233,189,111,.32),rgba(81,44,105,.3));color:#f0d194;font-size:31px}
.ptp-dungeon-link span:nth-child(2){display:grid;gap:5px}.ptp-dungeon-link b{font:700 1.15rem Cinzel,Georgia,serif}.ptp-dungeon-link small{color:#c9bbd0;font-size:.86rem}.ptp-dungeon-link strong{margin-left:auto;color:#f4d694;white-space:nowrap;font-size:.83rem;letter-spacing:.05em}
@media(max-width:650px){.ptp-dungeon-link{flex-wrap:wrap;padding:15px}.ptp-dungeon-link strong{width:100%;margin-left:71px}}
.ptp-raid-link{margin-bottom:24px;background:linear-gradient(110deg,rgba(85,49,97,.78),rgba(36,27,54,.87) 65%,rgba(82,49,59,.62))}
@media (min-width:1501px){
  .kapitelnav{min-width:0}
  .kapitelnav a{padding-left:clamp(6px,.47vw,12px);padding-right:clamp(6px,.47vw,12px);font-size:clamp(.7rem,.66vw,.8rem);letter-spacing:.1em}
}
@media (max-width:1500px){
  .kapitelnav .nav-meter{justify-content:flex-start;padding:13px 16px;border-radius:11px}
}

/* Serverkosten im eigenen Spendenbereich: ruhig animiert und ohne externe Bilder. */
.spendenansicht .spendenkarte{max-width:none;margin:0}
.spendenkarte{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 245px;
  gap:clamp(20px,3.5vw,55px);align-items:center;
  max-width:1500px;margin:clamp(18px,2.4vw,32px) auto 0;
  padding:clamp(24px,3.4vw,52px) clamp(20px,4vw,62px);
  overflow:hidden;border:1px solid rgba(232,185,90,.31);border-radius:18px;
  background:linear-gradient(108deg,rgba(26,15,38,.98),rgba(18,15,32,.97) 58%,rgba(29,17,41,.98));
  box-shadow:0 22px 65px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.055);
}
.spendenkarte::before{
  content:"";position:absolute;left:0;top:0;width:165px;height:3px;
  background:linear-gradient(90deg,var(--gold-hell),var(--gold),transparent);
}
.spendenkarte-glanz{
  position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 46%,rgba(192,107,255,.16),transparent 35%),radial-gradient(circle at 15% 0,rgba(232,185,90,.085),transparent 38%);
}
.spendenkarte-inhalt{min-width:0}
.spendenkarte-kopf{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.spendenkarte-signet{color:var(--gold);font-size:1.1rem;animation:spendenStern 5s ease-in-out infinite}
.spendenkarte-eyebrow{color:var(--gold);font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.spendenkarte h2{margin:0;color:var(--text);font:700 clamp(1.5rem,2.4vw,2.65rem)/1.19 var(--anzeige);letter-spacing:-.025em}
.spendenkarte h2 em{color:var(--gold-hell);font-style:normal}
.spendenkarte-lead{max-width:710px;margin:15px 0 24px;color:var(--text-leise);font-size:clamp(.88rem,1vw,.98rem);line-height:1.65}
.spendenfortschritt{max-width:735px;margin-bottom:22px}
.spendenfortschritt-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.spendenfortschritt-kopf>span{color:var(--text-leise);font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.spendenfortschritt-kopf strong{color:var(--gold-hell);font-size:1.25rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.spenden-von{font-size:.83rem;color:var(--text-still);font-weight:500}
.spendenbalken{position:relative;height:13px;overflow:visible;border-radius:99px;border:1px solid rgba(232,185,90,.27);background:rgba(7,5,13,.7);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
.spendenfuellung{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,#bc7eeb,#e8b95a 75%,#f7dca0);box-shadow:0 0 16px rgba(232,185,90,.38);transition:transform 1.15s cubic-bezier(.2,.7,.2,1)}
.spendenbalken-ziel{position:absolute;right:-4px;top:50%;transform:translateY(-50%);color:var(--gold-hell);font-size:1rem;text-shadow:0 0 12px var(--gold)}
.spendenhinweis{margin:8px 0 0;color:var(--text-still);font-size:.73rem;line-height:1.5}
.spendenaktion{max-width:790px}
.spendenbetraege{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;border:0;min-width:0}
.spendenbetraege legend{margin-bottom:9px;padding:0;color:var(--text-leise);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.spendenbetrag{
  min-width:70px;min-height:40px;padding:8px 15px;border:1px solid var(--rand-hell);border-radius:8px;
  background:rgba(255,255,255,.035);color:var(--text);font:700 .86rem var(--text-schrift);
  cursor:pointer;transition:transform .2s,border-color .2s,background .2s;
}
.spendenbetrag:hover{transform:translateY(-2px);border-color:var(--gold)}
.spendenbetrag.an{border-color:var(--gold);background:rgba(232,185,90,.16);color:var(--gold-hell)}
.spenden-eigen{display:flex;align-items:center;gap:6px;min-height:40px;margin-left:4px;padding:0 11px;border:1px solid var(--rand-hell);border-radius:8px;background:rgba(255,255,255,.035);color:var(--text-leise)}
.spenden-eigen>span:first-child{font-size:.75rem;white-space:nowrap}
.spenden-eigen input{width:58px;padding:0;border:0;outline:0;background:transparent;color:var(--text);font:700 .9rem var(--text-schrift);text-align:right;font-variant-numeric:tabular-nums}
.spenden-eigen:focus-within{border-color:var(--gold)}
.spenden-zahlwege{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.spenden-paypal,.spenden-klarna{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:47px;padding:11px 20px;border-radius:8px;font:700 .82rem var(--text-schrift);text-decoration:none;cursor:pointer;transition:transform .22s,box-shadow .22s,filter .22s}
.spenden-paypal{border:1px solid #f5d98d;background:linear-gradient(125deg,#f7dda1,#dfad4b);color:#1d1720;box-shadow:0 9px 25px rgba(213,155,59,.17)}
.spenden-paypal:hover,.spenden-paypal:focus-visible{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 13px 30px rgba(213,155,59,.25)}
.spenden-paypal-symbol{display:grid;place-items:center;width:23px;height:23px;border-radius:5px;background:#192d71;color:#fff;font:bold italic 1rem Arial,sans-serif}
.spenden-klarna{border:1px solid rgba(255,255,255,.25);background:#f5e0e7;color:#23151f}
.spenden-klarna:hover,.spenden-klarna:focus-visible{transform:translateY(-2px);filter:brightness(1.05)}
.spenden-zahlhinweis{margin:11px 0 0;color:var(--text-still);font-size:.7rem;line-height:1.5}
.spendenkarte-dekor{position:relative;display:grid;place-items:center;width:228px;height:228px;justify-self:center;pointer-events:none}
.spenden-dekor-ring{position:absolute;inset:0;border:1px solid rgba(232,185,90,.28);border-radius:50%;box-shadow:inset 0 0 24px rgba(232,185,90,.04)}
.spenden-dekor-ring.ring-eins{animation:spendenAtmen 5.5s ease-in-out infinite}
.spenden-dekor-ring.ring-zwei{inset:18px;border-color:rgba(192,107,255,.3);animation:spendenAtmen 5.5s 1s ease-in-out infinite}
.spenden-dekor-kern{display:flex;flex-direction:column;align-items:center;justify-content:center;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(240,196,112,.2),rgba(56,35,66,.85) 58%,rgba(20,12,34,.95));border:1px solid rgba(232,185,90,.43);box-shadow:0 0 50px rgba(232,185,90,.11),inset 0 0 24px rgba(232,185,90,.08);color:var(--gold-hell);font:700 2.8rem/1 var(--anzeige);font-variant-numeric:tabular-nums}
.spenden-dekor-kern span{margin-top:9px;color:var(--text-leise);font:700 .63rem var(--text-schrift);letter-spacing:.14em;text-transform:uppercase}
.spenden-dekor-stern{position:absolute;color:var(--gold-hell);font-size:1.3rem;text-shadow:0 0 15px var(--gold)}
.stern-eins{top:17px;right:28px;animation:spendenStern 4s ease-in-out infinite}.stern-zwei{bottom:26px;left:17px;animation:spendenStern 4s 1.5s ease-in-out infinite}
.spendenkarte.ziel-erreicht .spenden-dekor-kern{box-shadow:0 0 65px rgba(232,185,90,.27),inset 0 0 24px rgba(232,185,90,.08)}
@keyframes spendenAtmen{50%{transform:scale(1.045);opacity:.65}}
@keyframes spendenStern{50%{transform:scale(1.22);opacity:.6}}
@media(max-width:1570px){.spendenkarte{margin-left:clamp(14px,2.4vw,30px);margin-right:clamp(14px,2.4vw,30px)}}
@media(max-width:850px){.spendenkarte{grid-template-columns:minmax(0,1fr) 150px}.spendenkarte-dekor{width:150px;height:150px}.spenden-dekor-ring.ring-zwei{inset:12px}.spenden-dekor-kern{width:100px;height:100px;font-size:2rem}.spenden-dekor-kern span{font-size:.5rem}.stern-eins{top:6px;right:6px}.stern-zwei{bottom:8px;left:0}}
@media(max-width:650px){.spendenkarte{grid-template-columns:1fr;padding:26px 20px}.spendenkarte-dekor{display:none}.spendenkarte h2{font-size:1.7rem}.spendenkarte-lead{margin-bottom:20px}.spenden-eigen{margin-left:0}.spenden-paypal,.spenden-klarna{width:100%}}
@media(prefers-reduced-motion:reduce){.spendenkarte-signet,.spenden-dekor-ring,.spenden-dekor-stern{animation:none}.spendenfuellung{transition:none}.spendenbetrag,.spenden-paypal,.spenden-klarna{transition:none}}

/* ── Checkliste ───────────────────────────────── */
.js-check{max-width:var(--schmal);margin:0 auto}
.chk-tabs,.chk-spur{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chk-spur{margin:-6px 0 18px}
.chk-tab{font:inherit;font-size:.95rem;color:var(--text-leise);background:var(--glas);border:1px solid var(--rand);border-radius:999px;padding:9px 18px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chk-tab:hover{border-color:var(--rand-hell);color:var(--text)}
.chk-tab.an{color:var(--tinte);background:var(--gold);border-color:var(--gold)}
.chk-tab.klein{font-size:.85rem;padding:6px 14px}
.chk-sektion{background:var(--glas);border:1px solid var(--rand);border-radius:var(--rund);padding:18px 20px;margin:0 0 16px}
.chk-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px}
.chk-kopf h3{margin:0;font-size:1.05rem;color:var(--gold-hell)}
.chk-zahl{font-size:.85rem;color:var(--text-still);white-space:nowrap}
.chk-hinweis{margin:0 0 8px;font-size:.88rem;color:var(--text-still)}
.chk-zeile{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;border-top:1px solid var(--rand);cursor:pointer}
.chk-sektion .chk-liste .chk-zeile:first-child{border-top:0}
.chk-zeile input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--gold)}
.chk-text{display:flex;flex-direction:column;gap:3px}
.chk-titel{color:var(--text);line-height:1.45}
.chk-info{font-size:.88rem;color:var(--text-still);line-height:1.45}
.chk-tag{font-style:normal;font-size:.72rem;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(90,216,255,.14);color:var(--aether);white-space:nowrap}
.chk-tag.main{background:rgba(232,185,90,.16);color:var(--gold)}
.chk-zeile.fertig .chk-titel{text-decoration:line-through;color:var(--text-still)}
.chk-quelle{margin:16px 0 0;font-size:.85rem;color:var(--text-still)}
.chk-quelle a{color:var(--aether)}
@media (max-width:600px){.chk-sektion{padding:14px 14px}.chk-tab{padding:8px 14px}}