/* ══════════════════════════════════════════════════════════════════════════════
   KURA — gemeinsame Handschrift aller öffentlichen Seiten
   ──────────────────────────────────────────────────────────────────────────────
   Bis hierher trug jede Seite ihre eigenen Stile im Kopf: sieben Dateien, sieben
   Paletten, sieben Mal dieselben Knöpfe leicht anders. Diese Datei ist die eine
   Wahrheit — Farben, Schrift, Knöpfe, Karten, Bewegung. Die Seiten bringen nur
   noch mit, was wirklich nur sie betrifft.

   Die Farbwelt ist die gewohnte: Pink, Violett, Cyan auf tiefem Nachtblau. Sie
   wurde nicht ersetzt, sondern geschärft — mehr Kontrast, sattere Verläufe,
   klarere Abstufungen.

   Zwei Regeln, die hier alles bestimmen:
   1. Bewegung kostet nichts, solange sie über `transform` und `opacity` läuft.
      Alles andere — Weichzeichner auf bewegten Flächen, viele Ebenen mit
      Mischmodus — bremst jede Seite spürbar aus. Das haben wir teuer gelernt.
   2. Über allem liegt die Saison-Ebene. Deshalb reagieren die Akzentfarben auf
      die Jahreszeit, statt gegen sie zu arbeiten.
   ════════════════════════════════════════════════════════════════════════════ */

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

:root{
  /* Grund */
  --nacht:#06080e; --nacht2:#0b1020; --nacht3:#111a2e; --nacht4:#18243d;
  --flaeche:rgba(255,255,255,.035); --flaeche2:rgba(255,255,255,.06);

  /* Die drei Farben des Hauses */
  --pink:#f472b6; --pink2:#ec4899; --pink3:#fbcfe8;
  --lila:#a855f7; --lila2:#c084fc; --lila3:#ddd0fb;
  --cyan:#22d3ee; --cyan2:#06b6d4;
  --gold:#e8c87a; --gruen:#4ade80; --rot:#f87171;

  /* Schrift */
  --tx:#eef1f8; --tx2:#9fa9bd; --tx3:#6b768f;

  /* Linien */
  --rand:rgba(255,255,255,.08); --rand2:rgba(244,114,182,.28); --rand3:rgba(168,85,247,.34);

  /* Der Signaturverlauf — er zieht sich durch die ganze Seite */
  --strom:linear-gradient(115deg,var(--pink) 0%,var(--lila) 48%,var(--cyan) 100%);
  --strom-weich:linear-gradient(115deg,rgba(244,114,182,.18),rgba(168,85,247,.18),rgba(34,211,238,.14));

  --breite:1200px; --kopf:70px;
  --schwung:cubic-bezier(.22,.9,.28,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--nacht); color:var(--tx);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;overflow-x:hidden;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
::selection{background:rgba(168,85,247,.35);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--nacht2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink),var(--lila));border-radius:99px}

/* ── Die Leinwand hinter allem ────────────────────────────────────────────────
   Das Nordlicht wird auf eine kleine Leinwand gemalt und vom Browser
   hochskaliert. Dadurch kostet es fast nichts, sieht aber weicher aus, als es
   CSS mit Weichzeichnern je hinbekäme — und ein Weichzeichner auf einer bewegten
   Vollbildfläche ist das Teuerste, was man einer Seite antun kann. */
/* Achtung: eine Leinwand ist ein ersetztes Element. `inset:0` allein streckt sie
   NICHT — sie bleibt auf ihrer eigenen Bildgroesse von 160x100 stehen und liegt
   dann als kleines Rechteck in der Ecke. Breite und Hoehe muessen explizit sein. */
#nordlicht{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.5}
#sterne{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.5}
/* Eine ruhende Abschattung ueber dem Nordlicht. Ohne sie faerbt das Licht die
   ganze Seite flaechig violett ein und der Text verliert seinen Grund; damit
   bleibt die Mitte hell und die Raender dunkel. Sie bewegt sich nie, kostet
   also nichts. */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% 38%,transparent,
    rgba(6,8,14,.55) 62%,rgba(6,8,14,.9) 100%)}
/* Inhalt liegt ueber den Hintergrund-Leinwaenden.
   ACHTUNG beim Aendern: hier stand einmal `*:not(#nordlicht):not(#sterne)`.
   `:not()` zaehlt die Spezifitaet seines Arguments mit — die Regel hatte damit
   die Wucht von ZWEI Kennungen und ueberstimmte jede spaetere Regel, die ein
   Element am Koerper per eigener Kennung festsetzen wollte. Nach Elementnamen
   auszuschliessen kostet fast nichts. */
body > :not(canvas){position:relative;z-index:1}

.rand{max-width:var(--breite);margin:0 auto;padding:0 28px}
@media(max-width:640px){ .rand{padding:0 18px} }

/* ── Schrift ─────────────────────────────────────────────────────────────── */
.laut{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.02em;
  line-height:.92}
.zahl{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Text im Signaturverlauf — die Auszeichnung des Hauses */
.strom{background:var(--strom);-webkit-background-clip:text;background-clip:text;
  color:transparent}
/* Derselbe Verlauf, aber als wanderndes Streiflicht */
.strom-licht{
  background:linear-gradient(100deg,var(--tx) 0%,var(--tx) 32%,var(--pink) 42%,
    var(--lila2) 50%,var(--cyan) 58%,var(--tx) 68%,var(--tx) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:stromLicht 8s ease-in-out infinite}
@keyframes stromLicht{0%,58%{background-position:130% 0}100%{background-position:-30% 0}}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
#mainNav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--kopf);
  display:flex;align-items:center;background:rgba(6,8,14,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
#mainNav.scrolled{background:rgba(6,8,14,.92);border-bottom-color:var(--rand)}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:0 28px;width:100%;
  display:flex;align-items:center;gap:24px}
.marke{display:flex;align-items:center;gap:11px;flex:none}
.marke .zeichen{width:34px;height:34px;flex:none}
.marke b{font-family:'Bebas Neue',sans-serif;font-size:25px;letter-spacing:.12em;
  line-height:1;display:block}
.marke small{display:block;font-size:8px;letter-spacing:.32em;color:var(--pink);
  text-transform:uppercase;margin-top:2px;font-weight:600}
.kopf-weg{display:flex;gap:1px;margin-left:auto;align-items:center}
.kopf-weg a{padding:9px 13px;font-size:13.5px;color:var(--tx2);position:relative;
  transition:color .18s}
.kopf-weg a::after{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--strom);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--schwung)}
.kopf-weg a:hover{color:var(--tx)}
.kopf-weg a:hover::after,.kopf-weg a.hier::after{transform:scaleX(1)}
.kopf-weg a.hier{color:var(--tx)}
.kopf-tasten{display:flex;align-items:center;gap:10px;flex:none}
.mob-taste{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  border:1px solid var(--rand);border-radius:10px;font-size:18px;color:var(--tx2)}
#mobMenu{position:fixed;inset:var(--kopf) 0 auto 0;z-index:890;background:rgba(6,8,14,.985);
  border-bottom:1px solid var(--rand);display:none;flex-direction:column;padding:8px 0 16px;
  max-height:calc(100vh - var(--kopf));overflow-y:auto}
#mobMenu.open{display:flex}
#mobMenu a{padding:13px 28px;font-size:15px;color:var(--tx2);
  border-bottom:1px solid rgba(255,255,255,.05)}
#mobMenu a:last-child{border-bottom:0}
@media(max-width:1000px){ .kopf-weg{display:none} .mob-taste{display:flex} }
/* Auf dem Handy passen Portal-Knopf, Anmeldung und Menue nicht nebeneinander —
   der Weg ins Portal steht ohnehin im aufgeklappten Menue. */
@media(max-width:600px){
  .kopf-innen{padding:0 18px;gap:12px}
  #navPortalBtn{display:none}
  .nav-login-btn{padding:8px 12px}
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.taste{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;font-size:14.5px;font-weight:700;border-radius:12px;
  letter-spacing:.01em;position:relative;overflow:hidden;
  transition:transform .2s var(--schwung),box-shadow .25s,border-color .2s,color .2s}
.taste svg{width:18px;height:18px;flex:none}
.taste.voll{background:var(--strom);color:#fff;
  box-shadow:0 12px 34px -14px rgba(236,72,153,.95),0 0 0 1px rgba(255,255,255,.08) inset}
.taste.voll::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-130%)}
.taste.voll:hover{transform:translateY(-3px);
  box-shadow:0 20px 46px -14px rgba(236,72,153,1),0 0 0 1px rgba(255,255,255,.14) inset}
.taste.voll:hover::after{transform:translateX(130%);transition:transform .7s var(--schwung)}
.taste.leer{border:1px solid var(--rand2);color:var(--tx);background:rgba(244,114,182,.05)}
.taste.leer:hover{transform:translateY(-3px);border-color:var(--pink);
  background:rgba(244,114,182,.12);box-shadow:0 14px 32px -16px rgba(244,114,182,.8)}
.taste.klein{padding:9px 17px;font-size:13px;border-radius:9px}
.nav-login-btn{display:flex;align-items:center;gap:8px;padding:9px 17px;font-size:13px;
  font-weight:700;border-radius:9px;border:1px solid var(--rand2);color:var(--tx);
  transition:background .2s,border-color .2s}
.nav-login-btn:hover{background:rgba(244,114,182,.12);border-color:var(--pink)}
.nav-login-btn svg{width:16px;height:16px}
.nav-user{display:flex;align-items:center;gap:9px}
.nav-av{width:28px;height:28px;border-radius:50%;border:1px solid var(--rand2)}
.nav-uname{font-size:13px;color:var(--tx2);max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nav-logout{font-size:13px;color:var(--tx3);padding:2px 6px}
.nav-logout:hover{color:var(--rot)}
@media(max-width:480px){ .nav-uname{display:none} }

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
.abschnitt{padding:96px 0;position:relative}
.abschnitt + .abschnitt{border-top:1px solid rgba(255,255,255,.05)}
.ueber{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:18px}
.ueber::before{content:'';width:26px;height:2px;background:var(--strom);border-radius:2px}
h2.gross{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,6vw,64px);line-height:1.02;
  letter-spacing:.015em;text-wrap:balance;margin-bottom:16px}
.vorspann{max-width:62ch;color:var(--tx2);font-size:16.5px}
.vorspann b{color:var(--tx);font-weight:600}

/* ── Karten ──────────────────────────────────────────────────────────────── */
.gitter{display:grid;gap:18px}
.gitter.zwei{grid-template-columns:repeat(2,1fr)}
.gitter.drei{grid-template-columns:repeat(3,1fr)}
.gitter.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){ .gitter.vier{grid-template-columns:repeat(2,1fr)}
  .gitter.drei{grid-template-columns:repeat(2,1fr)} }
@media(max-width:660px){ .gitter.zwei,.gitter.drei,.gitter.vier{grid-template-columns:1fr} }

.karte{position:relative;border-radius:18px;padding:28px 26px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--rand);
  transition:transform .3s var(--schwung),border-color .3s,box-shadow .3s}
/* Der Lichtsaum folgt dem Mauszeiger — gesetzt wird er von kura-web.js über
   zwei Variablen, gezeichnet nur mit einem Verlauf. Kein Weichzeichner. */
.karte::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    rgba(244,114,182,.16),transparent 62%)}
.karte::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--strom);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--schwung)}
.karte:hover{transform:translateY(-6px);border-color:var(--rand2);
  box-shadow:0 26px 60px -30px rgba(168,85,247,.9)}
.karte:hover::before{opacity:1}
.karte:hover::after{transform:scaleX(1)}
.karte h3{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.03em;
  margin-bottom:9px;line-height:1.1}
.karte p{font-size:14.5px;color:var(--tx2);line-height:1.7}
.karte .kennz{display:inline-block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--lila2);margin-bottom:12px}
.karte .riese{font-family:'Bebas Neue',sans-serif;font-size:46px;line-height:1;
  margin:0 0 6px;display:block}

/* ── Zahlenband ──────────────────────────────────────────────────────────── */
.zahlenband{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.zahlenband div{padding:22px 18px;border-radius:14px;border:1px solid var(--rand);
  background:rgba(255,255,255,.025);position:relative;overflow:hidden}
.zahlenband div::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--strom);transform:translateX(-100%);animation:bandLinie 3.4s ease-in-out infinite}
.zahlenband div:nth-child(2)::after{animation-delay:.35s}
.zahlenband div:nth-child(3)::after{animation-delay:.7s}
.zahlenband div:nth-child(4)::after{animation-delay:1.05s}
.zahlenband div:nth-child(5)::after{animation-delay:1.4s}
@keyframes bandLinie{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.zahlenband b{display:block;font-family:'Bebas Neue',sans-serif;
  font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:.02em}
.zahlenband span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
@media(prefers-reduced-motion:reduce){ .zahlenband div::after{animation:none;transform:none;opacity:.5} }

/* ── Liste mit Haken ─────────────────────────────────────────────────────── */
.haken{list-style:none;display:grid;gap:10px;margin-top:16px}
.haken li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:14.5px;
  color:var(--tx2);line-height:1.6}
.haken li::before{content:'';width:10px;height:10px;margin-top:7px;
  border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);border-radius:1px}
.haken li b{color:var(--tx);font-weight:600}

/* ── Jahreszeit-Band ─────────────────────────────────────────────────────── */
.saisonband{display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 12px;
  border:1px solid var(--rand2);border-radius:999px;font-size:13px;color:var(--tx2);
  background:rgba(244,114,182,.07)}
.saisonband .punkt{width:9px;height:9px;border-radius:50%;background:var(--pink);
  animation:punktPuls 2.4s ease-in-out infinite}
@keyframes punktPuls{0%,100%{box-shadow:0 0 0 4px rgba(244,114,182,.18)}
  50%{box-shadow:0 0 0 10px rgba(244,114,182,.02)}}
.saisonband b{color:var(--tx);font-weight:700}
.saisonband .sym{font-size:16px;line-height:1}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rand);padding:56px 0 34px;background:rgba(6,8,14,.5)}
.fuss-gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){ .fuss-gitter{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .fuss-gitter{grid-template-columns:1fr} }
.fuss-gitter h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--pink);
  margin-bottom:14px;font-weight:700}
.fuss-gitter a{display:block;font-size:13.5px;color:var(--tx2);padding:4px 0;transition:color .18s}
.fuss-gitter a:hover{color:var(--pink)}
.fuss-satz{font-size:13.5px;color:var(--tx3);max-width:40ch;line-height:1.7}
.fuss-unten{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.05);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--tx3)}
.fuss-unten a:hover{color:var(--pink)}

/* ── Erscheinen beim Scrollen ────────────────────────────────────────────────
   Die Startwerte setzt erst kura-web.js. Ohne JavaScript ist alles sichtbar. */
.taucht.da{opacity:1;transform:none;
  transition:opacity .65s ease,transform .7s var(--schwung)}
@media(prefers-reduced-motion:reduce){ .taucht{opacity:1!important;transform:none!important} }

#copyToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--nacht3);border:1px solid var(--rand2);padding:12px 22px;font-size:13.5px;
  border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1000}
#copyToast.an{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════════════════════════════════════════════
   Bausteine der Unterseiten
   ──────────────────────────────────────────────────────────────────────────────
   Kreditkarte, Business Card, Für Clans, Community, Familie, Dienstleistungen
   und Struktur hatten bis hierher sieben eigene Stilblöcke mit sieben Varianten
   derselben Sache. Ab hier teilen sie sich diese.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Kopf einer Unterseite ─────────────────────────────────────────────────── */
.uk{padding:calc(var(--kopf) + 74px) 0 66px;position:relative;overflow:hidden}
.uk-gitter{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;
  align-items:center}
.uk.einspaltig .uk-gitter{grid-template-columns:1fr}
@media(max-width:940px){
  .uk-gitter{grid-template-columns:1fr;gap:34px}
  .uk{padding-top:calc(var(--kopf) + 40px)}
}
.uk-marke{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:999px;
  border:1px solid var(--rand2);background:rgba(244,114,182,.08);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--pink3);
  margin-bottom:22px}
.uk h1{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(46px,8.6vw,104px);
  line-height:.9;letter-spacing:.012em;margin-bottom:20px;text-wrap:balance}
.uk h1 span{display:block}
.uk-satz{font-size:17px;color:var(--tx2);max-width:56ch;line-height:1.72}
.uk-satz b{color:var(--tx);font-weight:600}
.uk-tasten{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── Hinweiskasten ─────────────────────────────────────────────────────────── */
.hinweis{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:18px 22px;
  border-radius:14px;border:1px solid rgba(251,191,36,.3);
  background:rgba(251,191,36,.07);font-size:14px;color:var(--tx2);line-height:1.68}
.hinweis .zei{font-size:19px;line-height:1.3}
.hinweis b{color:var(--gold);font-weight:700}
.hinweis.wichtig{border-color:var(--rand2);background:rgba(244,114,182,.07)}
.hinweis.wichtig b{color:var(--pink3)}

/* ── Nummerierte Schritte ──────────────────────────────────────────────────── */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;
  counter-reset:sr}
.schritt{position:relative;padding:26px 22px 22px;border-radius:16px;
  border:1px solid var(--rand);background:rgba(255,255,255,.025);counter-increment:sr;
  transition:transform .28s var(--schwung),border-color .28s}
.schritt::before{content:counter(sr,decimal-leading-zero);position:absolute;top:-12px;left:20px;
  font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;padding:3px 9px;
  border-radius:8px;background:var(--nacht);border:1px solid var(--rand2);
  color:transparent;background-image:var(--strom);-webkit-background-clip:text;
  background-clip:text}
.schritt:hover{transform:translateY(-6px);border-color:var(--rand2)}
.schritt h4{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.03em;
  margin:6px 0 7px}
.schritt p{font-size:13.5px;color:var(--tx2);line-height:1.65}

/* ── Fragen und Antworten ──────────────────────────────────────────────────── */
.fragen{display:grid;gap:10px;max-width:880px}
.frage{border:1px solid var(--rand);border-radius:13px;background:rgba(255,255,255,.022);
  overflow:hidden;transition:border-color .25s,background .25s}
.frage[open]{border-color:var(--rand2);background:rgba(244,114,182,.05)}
.frage summary{padding:16px 46px 16px 20px;cursor:pointer;font-size:15.5px;font-weight:600;
  list-style:none;position:relative;transition:color .2s}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(45deg);transition:transform .25s var(--schwung)}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.frage summary:hover{color:var(--pink3)}
.frage .antw{padding:0 20px 18px;font-size:14.5px;color:var(--tx2);line-height:1.74;
  max-width:70ch}
.frage .antw a{color:var(--pink3);text-decoration:underline;text-underline-offset:3px}
.frage .antw p + p{margin-top:10px}

/* ── Menschen: Mitglieder, Creator, Team ───────────────────────────────────── */
.kopfreihe{display:flex;align-items:center;gap:14px;margin:34px 0 16px;flex-wrap:wrap}
.kopfreihe h3{font-family:'Bebas Neue',sans-serif;font-size:25px;letter-spacing:.04em}
.kopfreihe .anz{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);
  padding:3px 10px;border:1px solid var(--rand);border-radius:99px}
.kopfreihe .linie{flex:1;height:1px;background:linear-gradient(90deg,var(--rand),transparent);
  min-width:24px}

.leute{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:11px}
.person{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;
  border:1px solid var(--rand);background:rgba(255,255,255,.025);position:relative;
  overflow:hidden;min-width:0;
  transition:transform .26s var(--schwung),border-color .26s,box-shadow .26s}
.person::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .28s;
  background:radial-gradient(240px circle at 10% 0%,rgba(244,114,182,.16),transparent 62%)}
.person:hover{transform:translateY(-4px);border-color:var(--rand2);
  box-shadow:0 20px 44px -26px rgba(168,85,247,.9)}
.person:hover::before{opacity:1}
.person img,.person .platz{width:40px;height:40px;border-radius:50%;flex:none;
  border:1.5px solid var(--rand2);object-fit:cover;background:var(--nacht3);
  display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--tx3)}
.person .txt{min-width:0;position:relative}
.person b{font-size:13.5px;font-weight:600;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.person small{font-size:10.5px;color:var(--tx3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── Rangliste ─────────────────────────────────────────────────────────────── */
.rangliste{display:grid;gap:7px}
.rang{display:grid;grid-template-columns:34px 32px 1fr auto;gap:13px;align-items:center;
  padding:9px 15px;border-radius:11px;border:1px solid var(--rand);
  background:rgba(255,255,255,.022);
  transition:transform .22s var(--schwung),border-color .22s}
.rang:hover{transform:translateX(6px);border-color:var(--rand2)}
.rang .pl{font-family:'Bebas Neue',sans-serif;font-size:21px;color:var(--tx3);text-align:center}
.rang.podest .pl{background:var(--strom);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.rang.erster{border-color:rgba(251,191,36,.34);background:rgba(251,191,36,.06)}
.rang img{width:32px;height:32px;border-radius:50%;border:1px solid var(--rand2)}
.rang .nm{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.rang .wt{font-family:'JetBrains Mono',monospace;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--pink3)}

/* ── Werteleiste ───────────────────────────────────────────────────────────── */
.balken{display:grid;gap:13px}
.balken .oben{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;
  gap:12px}
.balken .oben b{font-weight:600}
.balken .oben span{font-family:'JetBrains Mono',monospace;color:var(--tx3);font-size:12px}
.balken .spur{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.balken .fuell{height:100%;border-radius:99px;background:var(--strom);
  transform-origin:left;animation:balkenAuf .9s var(--schwung) both}
@keyframes balkenAuf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){ .balken .fuell{animation:none} }

/* ── Ein Diagramm mit seinem Rahmen ────────────────────────────────────────── */
.diagramm{position:relative;border-radius:16px;border:1px solid var(--rand);
  background:rgba(255,255,255,.022);padding:20px}
.diagramm canvas{width:100%;display:block}
.dia-hinweis{position:absolute;pointer-events:none;opacity:0;transition:opacity .15s;
  background:var(--nacht3);border:1px solid var(--rand2);border-radius:9px;padding:7px 11px;
  font-size:12px;white-space:nowrap;z-index:5;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9)}
.dia-schalter{display:flex;gap:6px;flex-wrap:wrap}
.dia-schalter button{padding:6px 14px;font-size:12px;font-weight:600;border-radius:8px;
  border:1px solid var(--rand);color:var(--tx3);transition:all .2s}
.dia-schalter button.an{border-color:var(--rand2);color:var(--tx);
  background:rgba(244,114,182,.1)}

/* ── Kleine Marke im Text ──────────────────────────────────────────────────── */
code,.befehl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em;
  padding:2px 7px;border-radius:6px;background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.24);color:var(--lila3)}

/* ── Das Kartenmotiv (Kreditkarte / Business Card) ─────────────────────────────
   Eine echte Karte in Schräglage. Die Neigung folgt dem Zeiger über zwei
   Variablen, gesetzt von der Seite — bewegt wird nur `transform`, also kostet
   die Karte nichts. */
.kartenbuehne{perspective:1400px;display:grid;place-items:center;padding:20px}
.geldkarte{width:min(100%,400px);aspect-ratio:1.586;border-radius:19px;position:relative;
  overflow:hidden;transform-style:preserve-3d;
  transform:rotateY(var(--ky,-16deg)) rotateX(var(--kx,9deg));
  transition:transform .32s var(--schwung);
  background:linear-gradient(140deg,#1b1030 0%,#2d1348 38%,#3b1156 62%,#141626 100%);
  box-shadow:0 44px 90px -34px rgba(168,85,247,.9),0 0 0 1px rgba(255,255,255,.1) inset}
/* Der Schimmer über dem Kartenlack. */
.geldkarte::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 46%,
    rgba(244,114,182,.2) 52%,transparent 66%);
  background-size:260% 100%;animation:kartenLack 6.5s ease-in-out infinite}
@keyframes kartenLack{0%,56%{background-position:135% 0}100%{background-position:-35% 0}}
@media(prefers-reduced-motion:reduce){ .geldkarte::before{animation:none} }
.geldkarte::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 82% 8%,rgba(244,114,182,.3),transparent 58%)}
.gk-inhalt{position:absolute;inset:0;padding:26px 28px;display:flex;flex-direction:column;
  justify-content:space-between;z-index:2}
.gk-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.gk-name{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.14em;line-height:1}
.gk-art{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--pink3);
  font-weight:700;margin-top:4px}
.gk-chip{width:44px;height:33px;border-radius:7px;flex:none;
  background:linear-gradient(140deg,#f3d891,#c9a227 46%,#8a6b12);position:relative}
.gk-chip::before,.gk-chip::after{content:'';position:absolute;left:5px;right:5px;height:1px;
  background:rgba(0,0,0,.34)}
.gk-chip::before{top:11px}
.gk-chip::after{top:21px}
.gk-nr{font-family:'JetBrains Mono',monospace;font-size:clamp(12px,3.4vw,16px);
  letter-spacing:.14em;color:rgba(255,255,255,.9)}
.gk-unten{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.gk-unten b{display:block;font-size:12px;letter-spacing:.09em;color:#fff;text-transform:none}

/* ── Zwei Spalten, Text neben Bild ─────────────────────────────────────────── */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.zweispalt.schmal-rechts{grid-template-columns:1.2fr .8fr}
@media(max-width:900px){
  .zweispalt,.zweispalt.schmal-rechts{grid-template-columns:1fr;gap:32px}
}

/* ── Ladezustand ───────────────────────────────────────────────────────────── */
.laedt{padding:32px;text-align:center;color:var(--tx3);font-size:14px}
.laedt::after{content:'';display:inline-block;width:13px;height:13px;margin-left:9px;
  vertical-align:-2px;border-radius:50%;border:2px solid var(--rand2);
  border-top-color:var(--pink);animation:drehLade .8s linear infinite}
@keyframes drehLade{to{transform:rotate(360deg)}}