/* ============================================================
   AceDexxx — Farben aus dem Discord übernommen, damit Seite
   und Server nach demselben aussehen.

   Bewusst dunkel und zurückhaltend: Der Kanal lebt von RP,
   nicht von Neon. Akzente kommen sparsam, damit das Livezeichen
   auffällt, wenn es zählt.
   ============================================================ */

/* Outfit liegt bei uns im Ordner statt bei Google. Eingebunden
   ueber fonts.googleapis.com wuerde bei jedem Aufruf die IP des
   Besuchers dorthin gehen - genau dafuer gab es 2022 das Urteil
   des LG Muenchen. Eine variable Datei deckt 400 bis 800 ab. */
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/schrift/outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/schrift/outfit-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme: dark;

  --anzeige: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --grund:      #14121a;
  --karte:      #1d1a26;
  --karte-hoch: #232030;
  --kante:      #2c2836;
  --kante-hell: #3a3548;

  --text:       #efeaf2;
  --leise:      #b5adc2;
  --sehrleise:  #7b7389;

  /* Die Marke. Abgenommen vom Logo: oben am Kreis das warme
     Orange, rechts unten das Pink. Dazwischen laeuft der
     Verlauf, und genau so laufen auch die Verlaeufe auf der
     Seite - von warm nach pink, in derselben Richtung. */
  --flamme:  #fcad71;
  --glut:    #fa4f80;
  --magenta: #f2358a;

  /* Die alten Namen bleiben stehen: Sie stecken an knapp fuenfzig
     Stellen in dieser Datei und in den Overlays. Sie zeigen jetzt
     auf die neuen Toene. "lavendel" ist also kein Lavendel mehr -
     das umzubenennen waere ein Suchen und Ersetzen quer durch
     alle Seiten, mit einem passenderen Wort als einzigem Gewinn. */
  --altrosa:    var(--flamme);
  --lavendel:   var(--glut);
  --periwinkle: #a06bd8;   /* Bruecke zwischen Pink und Twitch-Lila */
  --gruen:      #4fbe86;   /* nur noch Zustandsfarbe: online, erledigt */
  --twitch:     #9146ff;
  --live:       #ff4d5e;

  --rund:   14px;
  --rund-l: 20px;
  --breite: 1120px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:84px;
  /* Safari auf dem iPhone vergroessert im Querformat eigenmaechtig
     die Schrift einzelner Bloecke. Sieht aus, als waere das Layout
     kaputt, ist aber nur diese Voreinstellung. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* Der graue Kasten, den Android und iOS beim Antippen ueber
   Verweise legen. Die Zustaende :hover, :active und :focus-visible
   geben ohnehin schon Rueckmeldung. */
a, button{-webkit-tap-highlight-color:transparent}

/* Muss ganz nach oben und braucht das !important: Der Browser
   versteckt [hidden] ueber eine eigene Regel mit sehr schwachem
   Gewicht. Jede Klasse mit eigenem display - und davon gibt es
   hier reichlich - wuerde sie sonst aushebeln, und das Element
   bliebe sichtbar, obwohl es versteckt sein soll. */
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* Kurze Seiten - etwa ein leeres Gewinnspiel - hoerten sonst
     mitten im Fenster auf, und darunter stand eine schwarze
     Flaeche. Der Inhalt dehnt sich, die Fusszeile sitzt unten.
     dvh statt vh wegen der Adressleiste auf dem Handy, die sich
     beim Scrollen wegschiebt. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body > main{ flex:1 0 auto }
body > .fuss{ flex:none; margin-top:auto }

/* Nur Ueberschriften und Zahlen bekommen die eigene Schrift.
   Fliesstext bleibt auf der Systemschrift: Die steht sofort,
   ohne Nachladen, und liest sich in laengeren Absaetzen ruhiger. */
h1,h2,h3,h4{
  margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:650;
  font-family:var(--anzeige);
}
.augenbraue, .fakten b, .kopf-marke, .fuss-marke, .knopf, .weg b, .zahl-gross{
  font-family:var(--anzeige);
}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
svg{width:18px; height:18px; fill:currentColor; flex:none}
code{
  font:.88em ui-monospace,"Cascadia Code",Consolas,monospace;
  background:#ffffff0f; padding:2px 6px; border-radius:6px; color:var(--lavendel);
}

.ueberspringen{position:absolute; left:-999px; top:0; z-index:100;
  background:var(--lavendel); color:#14121a; padding:10px 16px; border-radius:0 0 10px 0}
.ueberspringen:focus{left:0}

/* Markierter Text hatte bisher das Blau des Systems - auf dieser
   Seite ein Fremdkoerper */
::selection{background:#fa4f8055; color:var(--text)}

/* Wer mit der Tastatur unterwegs ist, sah bisher den weissen
   Standardrahmen des Browsers. :focus-visible statt :focus, damit
   er beim Klicken mit der Maus nicht aufblitzt. */
:focus-visible{
  outline:2px solid var(--lavendel);
  outline-offset:3px;
  border-radius:4px;
}
.knopf:focus-visible, .weg:focus-visible, .kachel:focus-visible{outline-offset:4px}

/* Die Bildlaufleiste blieb hell und stach aus der dunklen Seite
   heraus. Firefox versteht scrollbar-color, der Rest die
   -webkit-Regeln darunter. */
html{scrollbar-color:var(--kante-hell) var(--grund); scrollbar-width:thin}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:var(--grund)}
::-webkit-scrollbar-thumb{
  background:var(--kante-hell); border-radius:8px;
  border:3px solid var(--grund);
}
::-webkit-scrollbar-thumb:hover{background:#4a4459}

/* ---------------- Einblenden beim Scrollen ---------------- */
.zeigen{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.zeigen.da{opacity:1; transform:none}

/* ---------------- Kopfzeile ---------------- */
.kopf{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:20px;
  padding:14px max(20px, calc((100vw - var(--breite)) / 2));
  background:#14121ae6; backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kante);
}
.kopf-marke{display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.05rem}
.kopf-marke img{
  width:30px; height:30px; border-radius:9px; flex:none;
  border:1px solid var(--kante-hell); transition:border-color .2s, transform .2s;
}
.kopf-marke:hover img{border-color:var(--lavendel); transform:scale(1.05)}
.kopf-punkt{width:8px; height:8px; border-radius:50%; background:var(--sehrleise); flex:none}
.kopf-punkt[data-live="1"]{background:var(--live); animation:puls 2s infinite}
.kopf-nav{display:flex; gap:22px; margin-left:auto; font-size:.94rem}
.kopf-nav a{color:var(--leise); transition:color .15s}
.kopf-nav a:hover{color:var(--text)}

@keyframes puls{
  0%{box-shadow:0 0 0 0 #ff4d5e77}
  70%{box-shadow:0 0 0 9px #ff4d5e00}
  100%{box-shadow:0 0 0 0 #ff4d5e00}
}

/* ---------------- Knöpfe ---------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:12px; border:1px solid transparent;
  font-weight:600; font-size:.96rem; cursor:pointer;
  transition:filter .15s, transform .12s, background .15s, border-color .15s;
}
.knopf:hover{filter:brightness(1.12)}
.knopf:active{transform:translateY(1px)}
.knopf-klein{padding:9px 16px; font-size:.9rem}
/* Der Hauptknopf trug bisher Twitch-Lila. Neben dem neuen Pink
   sah er aus wie versehentlich stehengeblieben. Jetzt der
   Markenverlauf mit dem Twitch-Zeichen davor: Es bleibt klar, wo
   der Knopf hinfuehrt, gehoert aber sichtbar zu dieser Seite.
   Dunkle Schrift, weil Weiss auf dem hellen Orange absaeuft. */
.knopf-twitch{
  background:linear-gradient(112deg, var(--flamme) 0%, var(--glut) 56%, var(--magenta) 100%);
  color:#22121b; font-weight:700; border:none;
  box-shadow:0 2px 14px color-mix(in srgb, var(--glut) 30%, transparent);
}
.knopf-twitch:hover{filter:brightness(1.06)}
.knopf-rand{border-color:var(--kante-hell); color:var(--text); background:#ffffff08}
.knopf-rand:hover{background:#ffffff14; border-color:var(--lavendel)}
.knopf-voll{width:100%; background:var(--lavendel); color:#14121a; margin-top:auto}
.knopf-rand.knopf-voll{background:#ffffff08; color:var(--text)}

/* ---------------- Kopfbereich ---------------- */
.held{
  position:relative; max-width:var(--breite); margin:0 auto;
  padding:76px 20px 68px;
  display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center;
}
.held-glanz{
  position:absolute; inset:-140px -40% auto -40%; height:660px; pointer-events:none;
  background:
    radial-gradient(620px 340px at 22% 28%, #fa4f8033, transparent 65%),
    radial-gradient(540px 320px at 80% 62%, #fcad7120, transparent 65%);
  filter:blur(6px);
}
/* Das Kopfbild laeuft ueber die volle Fensterbreite, obwohl der
   Held selbst auf 1120px begrenzt ist - daher der Ausbruch ueber
   calc(50% - 50vw). Zwei Verlaeufe daueber, sonst kaempft die
   Schrift gegen das Neon und verliert. */
.held-bild{
  position:absolute; top:-90px; bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  pointer-events:none; overflow:hidden; z-index:0;
}
.held-bild::before{
  content:""; position:absolute; inset:0;
  background:url(/bilder/held.jpg) center 42%/cover no-repeat;
  /* Das Bild ist blau-violettes Neon und kaempfte gegen das
     Orange der Marke. Die Drehung schiebt den Farbkreis in
     Richtung Magenta - der Ort bleibt erkennbar, die Stimmung
     passt zum Rest. */
  opacity:.34; filter:saturate(1.15) hue-rotate(-34deg);
}
.held-bild::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, #14121a 0%, #14121a4d 24%, #14121aa6 66%, var(--grund) 100%),
    linear-gradient(90deg, #14121aeb 0%, #14121a63 48%, #14121a9e 100%);
}
@media (max-width:900px){
  .held-bild::before{background-image:url(/bilder/held-klein.jpg); opacity:.24}
}

.held-raster{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(#ffffff06 1px, transparent 1px),
    linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
}
.held-inhalt{position:relative}

.lage{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:#ffffff09; border:1px solid var(--kante-hell);
  font-size:.85rem; color:var(--leise); margin-bottom:22px;
}
.lage-punkt{width:7px; height:7px; border-radius:50%; background:var(--sehrleise); flex:none}
.lage[data-live="1"]{background:#ff4d5e14; border-color:#ff4d5e55; color:#ffb3ba}
.lage[data-live="1"] .lage-punkt{background:var(--live); animation:puls 2s infinite}

.held h1{
  font-size:clamp(2.6rem, 7vw, 4.2rem); margin-bottom:16px; letter-spacing:-.035em;
  background:linear-gradient(115deg, #fff 18%, var(--altrosa) 62%, var(--lavendel) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.held-unter{color:var(--leise); font-size:1.09rem; max-width:46ch; margin-bottom:28px}
.held-unter b{color:var(--text); font-weight:600}
.held-knoepfe{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px}

.fakten{display:flex; gap:32px; list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--kante)}
.fakten li{display:flex; flex-direction:column}
.fakten b{font-size:1.6rem; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fakten span{font-size:.83rem; color:var(--sehrleise)}

/* ---------------- Livekarte ---------------- */
.livekarte{
  position:relative; background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund-l); overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.livekarte[data-live="1"]{border-color:#ff4d5e4d; box-shadow:0 0 50px #ff4d5e17}
.livekarte-bild{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,#241f30,#1a1724) center/cover no-repeat;
  border-bottom:1px solid var(--kante);
}
.live-schild{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:7px;
  background:#ff4d5e; color:#fff; padding:5px 11px; border-radius:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
}
.live-punkt{width:6px; height:6px; border-radius:50%; background:#fff}

.livekarte-text{display:flex; gap:14px; padding:20px 22px}
.livekarte-avatar{border-radius:12px; border:1px solid var(--kante-hell); flex:none}
.livekarte-haupt{min-width:0}
.livekarte-marke{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sehrleise); margin-bottom:7px}
.livekarte[data-live="1"] .livekarte-marke{color:var(--live)}
.livekarte h2{font-size:1.1rem; margin-bottom:6px}
.livekarte p{color:var(--leise); font-size:.92rem}
.livekarte-zahlen{
  display:flex; gap:18px; flex-wrap:wrap; padding:14px 22px 18px;
  border-top:1px solid var(--kante); font-size:.87rem; color:var(--sehrleise);
}
.livekarte-zahlen b{color:var(--text); font-variant-numeric:tabular-nums}

/* ---------------- Blöcke ---------------- */
.block{max-width:var(--breite); margin:0 auto; padding:70px 20px}
.block + .block{border-top:1px solid var(--kante)}
.block-kopf{margin-bottom:32px}
.augenbraue{
  display:block; font-size:.73rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavendel); margin-bottom:10px;
}
.block-kopf h2{font-size:2rem; margin-bottom:7px}
.block-kopf p{color:var(--sehrleise)}

.karte{background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); padding:24px; display:flex; flex-direction:column}
.karte-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.karte h3{font-size:1.1rem}
.marke-klein{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gruen);
  border:1px solid #4fbe8655; border-radius:999px; padding:3px 9px;
}

/* Bild oben in einer Karte. Der Name ist auf .karte- gemünzt und
   vorher gegen das Stylesheet geprüft - .verlauf hat einmal
   gereicht. Negative Ränder, damit das Bild bündig mit dem
   Kartenrand abschließt statt in der Polsterung zu schwimmen. */
.karte-bild{
  display:block;
  /* .karte hat 24px Polsterung - das Bild wird um genau diese
     Strecke breiter gemacht und wieder herausgezogen, damit es
     bündig mit dem Kartenrand abschließt. */
  width:calc(100% + 48px); margin:-24px -24px 18px;
  /* Ohne diese beiden Zeilen greift das Verhältnis nicht:
     img{max-width:100%} weiter oben würde das Überstehen wieder
     einfangen, und das height-Attribut im HTML setzt eine feste
     Höhe, gegen die aspect-ratio nichts ausrichtet. */
  max-width:none; height:auto;
  aspect-ratio:16 / 9; object-fit:cover;
  border-radius:var(--rund) var(--rund) 0 0;
  border-bottom:1px solid var(--kante);
}

/* ---------------- Programmkacheln ---------------- */
.kachelgitter{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.kachel{
  background:var(--karte); border:1px solid var(--kante); border-radius:var(--rund);
  padding:26px; transition:transform .18s, border-color .18s, background .18s;
}
.kachel:hover{transform:translateY(-3px); border-color:var(--kante-hell); background:var(--karte-hoch)}
.kachel.gross{grid-column:span 3}
.kachel-zeichen{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:22px; margin-bottom:16px;
  background:color-mix(in srgb, var(--ton) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ton) 40%, transparent);
}
.kachel h3{font-size:1.12rem; margin-bottom:9px}
.kachel p{color:var(--leise); font-size:.95rem}
.kachel.gross p{max-width:72ch}

/* ---------------- Shop ----------------
   Karten statt Liste: Jeder Posten braucht Platz für seinen
   Text, und ein Preis in einer Tabelle liest sich wie eine
   Rechnung. Wer sich etwas nicht leisten kann, sieht die Karte
   gedämpft — ausblenden wäre schlechter, dann weiß niemand,
   worauf sich sparen lohnt. */
.shopgitter{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:22px}
.shopkarte{
  display:flex; flex-direction:column; gap:10px;
  background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); padding:20px;
  transition:border-color .16s, background .16s;
}
.shopkarte:hover{border-color:var(--kante-hell); background:var(--karte-hoch)}
.shopkarte.zuteuer{opacity:.62}
.shopkopf{display:flex; align-items:center; gap:14px}
.shopzeichen{
  font-size:26px; width:48px; height:48px; flex:none; border-radius:14px;
  display:grid; place-items:center;
  background:#fa4f8018; border:1px solid #fa4f8033;
}
.shopkopf b{display:block; font-size:1.05rem}
.shoppreis{font-size:.85rem; color:var(--lavendel); font-weight:650}
.shoppreis-alt{color:var(--sehrleise); font-weight:450; margin-right:4px}
.shop-happy{border-color:var(--altrosa)}
.shop-happy h3{color:var(--altrosa)}
.shopfuss{display:flex; gap:10px; align-items:center; margin-top:auto; flex-wrap:wrap}
.shopfuss .feld{flex:1; min-width:180px}
.shopfuss .knopf{flex:none}

.bestellliste{display:flex; flex-direction:column}
.bestellzeile{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--kante);
}
.bestellzeile:last-child{border-bottom:0}
.bestellzeile .klein{display:block}
.bestellmarke{
  flex:none; font-size:.72rem; font-weight:650; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px;
  color:var(--ton); border:1px solid color-mix(in srgb, var(--ton) 45%, transparent);
  background:color-mix(in srgb, var(--ton) 12%, transparent);
}

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

/* ---------------- Das Team ----------------
   Kacheln statt Liste: Ein Gesicht neben dem Namen macht aus
   Zuständigkeiten Personen. Die Rollenfarbe kommt als schmaler
   Streifen links, damit die Gruppen auch beim Überfliegen
   auseinanderzuhalten sind. */
.teamgitter{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.teamkarte{
  display:flex; align-items:center; gap:14px;
  background:var(--karte); border:1px solid var(--kante);
  border-left:3px solid var(--ton, var(--lavendel));
  border-radius:var(--rund); padding:14px 16px;
  transition:transform .16s, border-color .16s, background .16s;
}
.teamkarte:hover{transform:translateY(-2px); background:var(--karte-hoch)}
.teambild{
  width:56px; height:56px; border-radius:50%; flex:none;
  object-fit:cover; background:#231f2e;
  border:2px solid color-mix(in srgb, var(--ton, var(--lavendel)) 55%, transparent);
}
.teamtext{display:flex; flex-direction:column; min-width:0}
.teamtext b{font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

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

/* ---------------- Clips ---------------- */
.clipgitter{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.clip{background:var(--karte); border:1px solid var(--kante); border-radius:var(--rund);
  overflow:hidden; transition:transform .16s, border-color .16s}
.clip:hover{transform:translateY(-3px); border-color:var(--lavendel)}
.clip-bild{aspect-ratio:16/9; background:#231f2e center/cover no-repeat; position:relative}
.clip-dauer{position:absolute; right:8px; bottom:8px; background:#000000c2;
  padding:2px 7px; border-radius:6px; font-size:.74rem; font-variant-numeric:tabular-nums}
.clip-text{padding:14px 16px 16px}
.clip-text h3{font-size:.97rem; margin-bottom:6px; line-height:1.35}
.clip-meta{font-size:.8rem; color:var(--sehrleise)}

/* ---------------- Termine ---------------- */
.terminliste{display:flex; flex-direction:column; gap:12px}
.termin{display:flex; align-items:center; gap:20px; background:var(--karte);
  border:1px solid var(--kante); border-radius:var(--rund); padding:18px 22px;
  transition:border-color .16s, transform .16s}
.termin:hover{border-color:var(--periwinkle); transform:translateX(3px)}
.termin-datum{flex:none; width:64px; text-align:center; padding:8px 0;
  border-radius:10px; background:#ffffff08; border:1px solid var(--kante)}
.termin-datum b{display:block; font-size:1.3rem; line-height:1}
.termin-datum span{font-size:.72rem; color:var(--sehrleise); text-transform:uppercase; letter-spacing:.08em}
.termin-text{min-width:0; flex:1}
.termin-text h3{font-size:1.02rem; margin-bottom:4px}
.termin-text p{color:var(--sehrleise); font-size:.87rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.termin-jetzt{flex:none; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--live); border:1px solid #ff4d5e55; border-radius:999px; padding:4px 11px}

/* ---------------- Community ---------------- */
.zweispalt{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.rangliste{list-style:none; margin:0 0 16px; padding:0}
.rangliste li{display:flex; align-items:center; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--kante)}
.rangliste li:last-child{border-bottom:0}
.rangliste .platz{flex:none; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; font-size:.8rem; font-weight:650;
  background:#ffffff09; color:var(--sehrleise)}
.rangliste li:nth-child(1) .platz{background:#fcad7126; color:var(--altrosa)}
.rangliste li:nth-child(2) .platz{background:#fa4f8026; color:var(--lavendel)}
.rangliste li:nth-child(3) .platz{background:#a06bd826; color:var(--periwinkle)}
.rangliste .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rangliste .stufe{font-size:.84rem; color:var(--sehrleise); font-variant-numeric:tabular-nums}

.haken{list-style:none; margin:0 0 22px; padding:0}
.haken li{position:relative; padding:5px 0 5px 26px; color:var(--leise); font-size:.94rem}
.haken li::before{content:""; position:absolute; left:2px; top:13px; width:9px; height:5px;
  border-left:2px solid var(--gruen); border-bottom:2px solid var(--gruen); transform:rotate(-45deg)}
.einladung > p{color:var(--leise); margin-bottom:18px; font-size:.95rem}

/* ---------------- Subs ---------------- */
.subkarte{
  display:grid; grid-template-columns:1.5fr 1fr; gap:34px;
  background:
    radial-gradient(560px 300px at 12% 0%, #9146ff1f, transparent 62%),
    var(--karte);
  border:1px solid var(--kante); border-radius:var(--rund-l); padding:34px;
}
.schrittreihe{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.schrittreihe li{display:flex; gap:16px}
.schritt-nr{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#fa4f801f; border:1px solid var(--lavendel); color:var(--lavendel);
  font-size:.84rem; font-weight:650;
}
.schrittreihe h3{font-size:1rem; margin-bottom:4px}
.schrittreihe p{color:var(--leise); font-size:.92rem}

.subkarte-seite{display:flex; flex-direction:column; gap:16px;
  border-left:1px solid var(--kante); padding-left:30px}
.rollenschild{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:8px 15px; border-radius:999px;
  background:#9146ff1f; border:1px solid #9146ff66; color:#c9a9ff;
  font-weight:600; font-size:.92rem;
}
.rollenpunkt{width:9px; height:9px; border-radius:50%; background:var(--twitch)}

/* ---------------- Sozial ---------------- */
.sozialgitter{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.sozial{
  display:flex; flex-direction:column; gap:5px;
  background:var(--karte); border:1px solid var(--kante); border-radius:var(--rund);
  padding:22px; transition:transform .16s, border-color .16s, background .16s;
}
.sozial svg{width:24px; height:24px; color:var(--ton); margin-bottom:9px}
.sozial b{font-size:1rem}
.sozial span{font-size:.84rem; color:var(--sehrleise)}
.sozial:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--ton) 55%, transparent);
  background:color-mix(in srgb, var(--ton) 7%, var(--karte));
}

/* ---------------- Kleinkram ---------------- */
.klein{font-size:.83rem; color:var(--sehrleise); line-height:1.6}
.platzhalter{
  background:linear-gradient(100deg,#201d2a 30%,#2a2637 50%,#201d2a 70%);
  background-size:220% 100%; border-radius:var(--rund); min-height:190px;
  animation:schimmer 1.6s infinite;
}
.platzhalter.hoch{min-height:82px}
.platzhalter.zeile{min-height:44px; border-radius:8px; margin-bottom:8px; list-style:none}
@keyframes schimmer{to{background-position:-220% 0}}

/* ---------------- Fußzeile ---------------- */
.fuss{
  position:relative; border-top:1px solid var(--kante);
  background:linear-gradient(#16131e, #100e16);
  padding:52px max(20px, calc((100vw - var(--breite)) / 2)) 34px;
}
.fuss-gitter{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
  padding-bottom:32px; border-bottom:1px solid var(--kante);
}
.fuss-spalte{display:flex; flex-direction:column; gap:9px}
.fuss-spalte h4{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sehrleise); margin-bottom:4px}
.fuss-spalte a{color:var(--leise); font-size:.92rem; transition:color .15s; width:fit-content}
.fuss-spalte a:hover{color:var(--altrosa)}
.fuss-marke{display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.1rem; margin-bottom:6px}
.fuss-marke img{width:34px; height:34px; border-radius:10px; border:1px solid var(--kante-hell); flex:none}
.fuss-marke-block .klein{max-width:34ch}

.fuss-unten{display:flex; flex-wrap:wrap; gap:8px 28px; padding-top:22px; align-items:baseline}
.fuss-unten .klein:nth-child(2){max-width:52ch}
.fuss-unten .klein:last-child{margin-left:auto}

.nach-oben{
  position:absolute; right:max(20px, calc((100vw - var(--breite)) / 2)); top:-20px;
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--karte); border:1px solid var(--kante-hell); color:var(--leise);
  transition:color .15s, border-color .15s, transform .15s;
}
.nach-oben:hover{color:var(--text); border-color:var(--lavendel); transform:translateY(-2px)}

.listenkopf{
  margin:22px 0 8px; font-size:.78rem; letter-spacing:.6px;
  text-transform:uppercase; color:var(--leise); font-weight:600;
}

/* ---------------- Shopverwaltung ---------------- */
.shopfelder{
  display:grid; gap:10px 14px; margin-top:12px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.shopschalter{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-top:12px}
.shopfeld{display:flex; flex-direction:column; gap:5px; margin-top:10px}
.shopfeld > span{
  font-size:.74rem; letter-spacing:.4px; text-transform:uppercase; color:var(--leise);
}
.shopfeld input, .shopfeld textarea, .shopfeld select{
  padding:8px 11px; border-radius:9px; font:inherit; font-size:.88rem;
  border:1px solid var(--kante); background:var(--karte-hoch); color:var(--text);
}
.shopfeld textarea{min-height:76px; resize:vertical; line-height:1.5}
.shopfeld input:focus, .shopfeld textarea:focus, .shopfeld select:focus{
  outline:none; border-color:var(--lavendel);
}
.shopfeld input:disabled{opacity:.55}
/* Kontrollkästchen brauchen die Beschriftung daneben, nicht
   darüber - sonst steht ein Häkchen ohne erkennbaren Bezug da */
.shopschalter .shopfeld{flex-direction:row-reverse; align-items:center; gap:8px; margin-top:0}
.shopschalter .shopfeld input[type=checkbox]{width:17px; height:17px; padding:0; accent-color:var(--lavendel)}
.shopschalter .shopfeld > span{text-transform:none; font-size:.85rem; letter-spacing:0}
.shopschalter .shopfeld:has(select){flex-direction:column; align-items:stretch}
.shop-aus{opacity:.6}

/* ---------------- Rollen vergeben ---------------- */
.rollenwahl{display:flex; flex-direction:column; gap:18px; margin-top:14px}
.rollengruppe-kopf{
  font-size:.76rem; letter-spacing:.6px; text-transform:uppercase;
  color:var(--lavendel); font-weight:600;
}
.rollengruppe-text{font-size:.83rem; color:var(--leise); margin:3px 0 9px}
.rollenknoepfe{display:flex; flex-wrap:wrap; gap:7px}
.rollenknopf{
  --ton:var(--leise);
  font:inherit; font-size:.84rem; cursor:pointer;
  padding:6px 13px; border-radius:999px;
  background:transparent; color:var(--leise);
  border:1px solid var(--kante);
  transition:background .15s, color .15s, border-color .15s;
}
.rollenknopf:hover:not(:disabled){border-color:var(--ton); color:var(--text)}
/* Vergeben heisst gefuellt. Ein Haken oder ein Rahmen allein ist
   bei zwanzig Knoepfen nebeneinander nicht schnell genug zu
   erfassen. */
.rollenknopf.an{
  background:color-mix(in srgb, var(--ton) 20%, transparent);
  border-color:var(--ton); color:var(--text); font-weight:600;
}
.rollenknopf:disabled{opacity:.4; cursor:not-allowed}

/* ---------------- Ticketwerkzeuge ----------------
   Zweite Reihe unter Übernehmen/Schließen. Abgesetzt, weil das
   hier selten gebraucht wird und man beim schnellen Klicken
   sonst danebengreift. */
.ticket-werkzeug{
  display:flex; flex-direction:column; gap:10px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--kante);
}
.ticket-gruppe{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ticket-marke{
  flex:none; width:104px; font-size:.74rem; letter-spacing:.5px;
  text-transform:uppercase; color:var(--leise);
}
.ticket-id{
  flex:1; min-width:150px; max-width:230px;
  padding:7px 11px; border-radius:9px;
  border:1px solid var(--kante); background:var(--karte-hoch);
  color:var(--text); font:inherit; font-size:.86rem;
}
.ticket-id:focus{outline:none; border-color:var(--lavendel)}
.ticket-gruppe .knopf:disabled{opacity:.5; cursor:default; filter:none}

@media (max-width:560px){
  .ticket-marke{width:100%}
}

/* ---------------- Tafeln im Teambereich ----------------
   Eigenes Praefix, weil stil.css von allen Seiten geteilt wird. */
.tafelliste{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.tafel-zeile{
  display:flex; align-items:center; gap:14px;
  padding:11px 14px; border-radius:10px;
  background:var(--karte-hoch); border:1px solid transparent;
}
.tafel-zeile:hover{border-color:var(--kante)}
.tafel-kaputt{border-color:#d2596b55}
.tafel-text{flex:1; min-width:0}
.tafel-name{font-weight:600; font-size:.95rem}
/* Kanalnamen tragen Emoji und Rahmenzeichen und werden lang -
   abschneiden statt umbrechen, sonst springt die Zeilenhoehe */
.tafel-ziel{
  font-size:.8rem; color:var(--leise); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tafel-stand{
  flex:none; font-size:.72rem; letter-spacing:.4px; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid currentColor;
}
.tafel-stand.ist-da{color:#6bc79a}
.tafel-stand.ist-weg{color:var(--leise)}
.tafel-stand.ist-kaputt{color:#e0798a}
.knopf.klein{padding:7px 15px; font-size:.83rem; flex:none; min-width:92px}
.knopf.klein:disabled{opacity:.45; cursor:default; filter:none}

@media (max-width:560px){
  .tafel-zeile{flex-wrap:wrap; gap:9px}
  .tafel-text{flex-basis:100%}
}

/* ---------------- Partner und Sponsoren ----------------
   Eigenes Praefix, weil stil.css von allen Seiten geteilt wird -
   eine Klasse namens ".karte" mehr hat hier schon einmal eine
   ganze Seite zum Scrollen gebracht.
   auto-fit statt fester Spaltenzahl: Bei zwei Partnern sollen
   nicht zwei Karten und eine Luecke stehen. */
.partner-gitter{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.partner-karte{
  display:block; text-decoration:none; color:inherit;
  background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); padding:24px;
  border-top:2px solid var(--periwinkle);
  transition:transform .18s, border-color .18s, background .18s;
}
a.partner-karte:hover{
  transform:translateY(-3px); background:var(--karte-hoch);
  border-color:var(--kante-hell); border-top-color:var(--lavendel);
}
.partner-sponsor{border-top-color:#b0bccf}
a.partner-sponsor:hover{border-top-color:#dfe6f2}
.partner-bild{
  width:52px; height:52px; border-radius:12px;
  object-fit:cover; display:block; margin-bottom:14px;
}
.partner-monogramm{
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--periwinkle) 18%, transparent);
  color:var(--periwinkle); font-weight:700; font-size:1.35rem;
}
.partner-sponsor .partner-monogramm{
  background:color-mix(in srgb, #b0bccf 16%, transparent); color:#c9d3e2;
}
.partner-art{
  display:inline-block; font-size:.72rem; letter-spacing:.6px;
  text-transform:uppercase; color:var(--leise); margin-bottom:6px;
}
.partner-name{margin:0 0 8px; font-size:1.05rem}
.partner-text{margin:0; color:var(--leise); font-size:.92rem; line-height:1.55}

/* ---------------- Schmal ---------------- */
@media (max-width:960px){
  .held{grid-template-columns:1fr; gap:34px; padding-top:52px}
  .kachelgitter{grid-template-columns:repeat(2, 1fr)}
  .kachel.gross{grid-column:span 2}
  .sozialgitter{grid-template-columns:repeat(2, 1fr)}
  /* Fehlte bisher: Die Clips sprangen von drei Spalten direkt auf
     eine. Dazwischen - Tablet, Handy im Querformat - standen drei
     Karten nebeneinander, jede zu schmal fuer ihren Titel. */
  .clipgitter{grid-template-columns:repeat(2, 1fr)}
  .zweispalt{grid-template-columns:1fr}
  .subkarte{grid-template-columns:1fr; gap:26px}
  .subkarte-seite{border-left:0; border-top:1px solid var(--kante); padding-left:0; padding-top:24px}
  .kopf-nav{display:none}
  .fuss-gitter{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:600px){
  .clipgitter{grid-template-columns:1fr}
  .kachelgitter{grid-template-columns:1fr}
  .kachel.gross{grid-column:span 1}
  .fakten{gap:20px}
  .fakten b{font-size:1.3rem}
  .block{padding:52px 20px}
  .termin{gap:14px; padding:14px 16px}
  .subkarte{padding:24px}
  .fuss-gitter{grid-template-columns:1fr}
  .fuss-unten .klein:last-child{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .zeigen{opacity:1; transform:none}
}

/* ============================================================
   Unterseiten, Anmeldung, Tickets
   ============================================================ */

.unterseite{max-width:var(--breite); margin:0 auto; padding:52px 20px 20px}
/* Unterseiten fingen bisher uebergangslos mit einer Ueberschrift
   an. Ein schmales Band vom Kopfbild darunter bindet sie an die
   Startseite an, ohne von der Ueberschrift abzulenken. */
.seitenkopf{position:relative; margin-bottom:34px; padding-top:8px}
.seitenkopf::before{
  content:""; position:absolute; z-index:-1;
  top:-118px; height:290px;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:url(/bilder/held-klein.jpg) center 40%/cover no-repeat;
  opacity:.16;
  mask-image:linear-gradient(180deg, #000 0%, #0009 42%, transparent 88%);
}
.seitenkopf::after{
  content:""; position:absolute; z-index:-1;
  top:-118px; height:290px;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:linear-gradient(180deg, #14121abb 0%, #14121a66 40%, var(--grund) 92%);
}
.seitenkopf h1{font-size:clamp(1.9rem,4.6vw,2.6rem); margin-bottom:8px; letter-spacing:-.03em}
.seitenkopf > p{color:var(--leise); max-width:56ch}

.block-kopf.mit-knopf{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.fliess{color:var(--leise); margin-bottom:14px; font-size:.96rem}

/* ---- Klappmenü auf schmalen Geräten ---- */
.kopf-rechts{display:flex; align-items:center; gap:10px}
.kopf-nav a.jetzt{color:var(--text); position:relative}
.kopf-nav a.jetzt::after{content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--lavendel); border-radius:2px}
.kopf-schalter{display:none; flex-direction:column; gap:4px; background:0; border:0;
  padding:8px; cursor:pointer; margin-left:auto}
.kopf-schalter span{display:block; width:20px; height:2px; background:var(--text);
  border-radius:2px; transition:transform .2s, opacity .2s}
.kopf-schalter.offen span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.kopf-schalter.offen span:nth-child(2){opacity:0}
.kopf-schalter.offen span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.kopf-klapp{display:none; flex-direction:column; gap:2px;
  position:absolute; top:100%; left:0; right:0; background:#191622;
  border-bottom:1px solid var(--kante); padding:10px 20px 16px}
.kopf-klapp a{padding:11px 4px; color:var(--leise); border-bottom:1px solid var(--kante)}
.kopf-klapp a:last-child{border-bottom:0}

/* ---- Kontomenü ---- */
.konto{position:relative}
.konto-knopf{display:flex; align-items:center; gap:9px; background:#ffffff08;
  border:1px solid var(--kante-hell); color:var(--text); border-radius:11px;
  padding:6px 13px 6px 7px; font:inherit; font-size:.9rem; cursor:pointer}
.konto-knopf:hover{background:#ffffff14; border-color:var(--lavendel)}
.konto-knopf img{border-radius:50%}
.konto-klapp{position:absolute; right:0; top:calc(100% + 8px); min-width:230px;
  background:var(--karte); border:1px solid var(--kante-hell); border-radius:var(--rund);
  padding:8px; display:flex; flex-direction:column; z-index:60;
  box-shadow:0 18px 44px #00000066}
.konto-klapp a{padding:9px 11px; border-radius:9px; color:var(--leise); font-size:.92rem}
.konto-klapp a:hover{background:#ffffff0d; color:var(--text)}
.konto-kopf{padding:10px 11px; border-bottom:1px solid var(--kante); margin-bottom:6px;
  display:flex; flex-direction:column; gap:3px}
.konto-zeile{font-size:.86rem; color:var(--leise)}
.konto-zeile b{color:var(--sehrleise); font-weight:600; margin-right:6px; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em}
.konto-abo{font-size:.76rem; color:var(--gruen); margin-top:4px}
.konto-raus{color:var(--altrosa) !important; border-top:1px solid var(--kante); margin-top:6px; padding-top:11px !important}

/* ---- Wegweiser ---- */
.wegweiser{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.weg{display:flex; flex-direction:column; gap:5px; padding:24px;
  background:var(--karte); border:1px solid var(--kante); border-radius:var(--rund);
  transition:transform .16s, border-color .16s, background .16s}
.weg b{font-size:1.05rem}
.weg span:last-child{font-size:.86rem; color:var(--sehrleise)}
.weg:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--ton) 55%, transparent);
  background:color-mix(in srgb, var(--ton) 7%, var(--karte))}

/* ---- Banner ---- */
.banner{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
  background:radial-gradient(560px 300px at 8% 0%, #fa4f801f, transparent 62%), var(--karte);
  border:1px solid var(--kante); border-radius:var(--rund-l); padding:32px}
.banner h2{font-size:1.5rem; margin-bottom:8px}
.banner p{color:var(--leise); max-width:60ch}
.banner-knoepfe{display:flex; flex-direction:column; gap:10px; min-width:200px}
.banner-knoepfe .knopf{margin-top:0}

/* ---- Stufen ---- */
.stufenreihe{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stufe-karte{padding:20px; border-radius:var(--rund); text-align:center;
  background:color-mix(in srgb, var(--ton) 9%, var(--karte));
  border:1px solid color-mix(in srgb, var(--ton) 34%, transparent)}
.stufe-karte b{display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ton); margin-bottom:6px}
.stufe-karte span{font-size:1.05rem; font-weight:600}

/* ---- Fragen ---- */
.fragen{display:flex; flex-direction:column; gap:10px}
.frage{background:var(--karte); border:1px solid var(--kante); border-radius:var(--rund);
  padding:16px 20px}
.frage summary{cursor:pointer; font-weight:600; list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary::before{content:"+"; display:inline-block; width:20px; color:var(--lavendel); font-weight:700}
.frage[open] summary::before{content:"–"}
.frage[open]{border-color:var(--kante-hell)}
.frage p{color:var(--leise); font-size:.94rem; margin-top:10px; padding-left:20px}

/* ---- Anmeldung ---- */
.anmeldekarte{max-width:600px; background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund-l); padding:34px}
.anmelde-knoepfe{display:flex; flex-direction:column; gap:12px}
.knopf-gross{justify-content:flex-start; padding:17px 22px; gap:14px; text-align:left}
.knopf-gross svg{width:22px; height:22px}
.knopf-gross span{display:flex; flex-direction:column; line-height:1.35}
.knopf-gross small{font-weight:400; opacity:.82; font-size:.83rem}
.knopf-discord{background:#5865f2; color:#fff}
.anmelde-hinweis{background:#f2a53b12; border:1px solid #f2a53b3d; color:#f0cf9a;
  border-radius:12px; padding:14px 17px; margin-bottom:18px; font-size:.92rem}
.anmelde-hinweis.gut{background:#4fbe8617; border-color:#4fbe8655; color:#9fdcbb}
.anmelde-stand{margin-top:26px; padding-top:22px; border-top:1px solid var(--kante)}
.anmelde-stand h3{margin-bottom:12px}
.anmelde-stand .knopf{margin-top:8px}

/* ---- Tickets ---- */
.ticket-tor{max-width:600px; gap:14px}
.ticket-tor .knopf{align-self:flex-start; margin-top:6px}
#ticketBereich{display:flex; flex-direction:column; gap:18px; max-width:820px}

.ticketform{display:flex; flex-direction:column; gap:14px}
.artwahl{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.artknopf{display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  padding:14px; border-radius:12px; cursor:pointer; font:inherit;
  background:#ffffff06; border:1px solid var(--kante); color:var(--text);
  transition:border-color .15s, background .15s}
.artknopf:hover{border-color:var(--kante-hell); background:#ffffff0d}
.artknopf.aktiv{border-color:var(--lavendel); background:#fa4f8014}
.artknopf-zeichen{font-size:19px; margin-bottom:4px}
.artknopf b{font-size:.94rem}
.artknopf span:last-child{font-size:.78rem; color:var(--sehrleise); line-height:1.4}

.feld{width:100%; background:#ffffff06; border:1px solid var(--kante); color:var(--text);
  border-radius:11px; padding:13px 15px; font:inherit; font-size:.95rem; resize:vertical}
.feld:focus{outline:0; border-color:var(--lavendel); background:#ffffff0a}
.feld::placeholder{color:var(--sehrleise)}

.ticketzeile{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 4px; background:0; border:0; border-bottom:1px solid var(--kante);
  color:var(--text); font:inherit; cursor:pointer}
.ticketzeile:last-child{border-bottom:0}
.ticketzeile:hover{background:#ffffff05}
.ticketzeile-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ticketzeile-text b{font-size:.96rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ticketpunkt{width:9px; height:9px; border-radius:50%; flex:none}
.ticketpunkt.auf{background:var(--gruen)}
.ticketpunkt.zu{background:var(--sehrleise)}
.ticketstand{flex:none; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--kante)}
.ticketstand.auf{color:var(--gruen); border-color:#4fbe8655}
.ticketstand.zu{color:var(--sehrleise)}

.zurueck-knopf{align-self:flex-start; background:0; border:0; color:var(--lavendel);
  font:inherit; font-size:.92rem; cursor:pointer; padding:4px 0}
.ticketkopf{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--kante); margin-bottom:16px}
.ticketkopf h3{margin-bottom:4px}
.ticketkopf > div{display:flex; flex-direction:column; gap:3px; min-width:0}

.verlauf{display:flex; flex-direction:column; gap:14px; max-height:460px; overflow-y:auto;
  padding-right:6px; margin-bottom:16px}
.beitrag{background:#ffffff06; border:1px solid var(--kante); border-radius:12px; padding:13px 16px}
.beitrag.vom-bot{background:#a06bd80d; border-color:#a06bd833}
.beitrag-kopf{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.beitrag-kopf b{font-size:.9rem}
.beitrag p{color:var(--leise); font-size:.94rem; white-space:pre-wrap; overflow-wrap:anywhere}
.beitrag-titel{font-weight:600; font-size:.92rem; margin-bottom:5px; color:var(--lavendel)}
.beitrag-anhang{display:inline-block; margin-top:8px; font-size:.85rem; color:var(--periwinkle)}

.antwortform{display:flex; gap:10px; align-items:flex-end}
.antwortform .feld{flex:1}
.antwortform .knopf{background:var(--lavendel); color:#14121a; flex:none}

/* ---- 404 ---- */
.verirrt{max-width:520px; margin:0 auto; padding:90px 20px; text-align:center}
.verirrt h1{font-size:4rem; margin-bottom:8px; color:var(--kante-hell)}
.verirrt h2{font-size:1.5rem; margin-bottom:12px}
.verirrt p{color:var(--leise); margin-bottom:24px}
.verirrt .knopf{margin:0 6px}

@media (max-width:960px){
  .wegweiser{grid-template-columns:repeat(2,1fr)}
  .stufenreihe{grid-template-columns:repeat(2,1fr)}
  .artwahl{grid-template-columns:repeat(2,1fr)}
  .kopf-schalter{display:flex}
  .kopf-klapp{display:flex}
  .kopf-rechts{display:none}
  .banner{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wegweiser{grid-template-columns:1fr}
  .artwahl{grid-template-columns:1fr}
  .antwortform{flex-direction:column; align-items:stretch}
}
/* ---- Push, Filter, Abspieler, Profil ---- */
.livekarte-fuss{padding:0 22px 20px; display:flex; flex-direction:column; gap:8px}
.livekarte-fuss .knopf{margin-top:0}

.filterleiste{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px}
.filterleiste > div{display:flex; gap:18px; flex-wrap:wrap}
.filtergruppe{display:flex; gap:6px; background:#ffffff06; border:1px solid var(--kante);
  border-radius:11px; padding:4px}
.filterknopf{background:0; border:0; color:var(--sehrleise); font:inherit; font-size:.88rem;
  padding:7px 14px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s}
.filterknopf:hover{color:var(--text)}
.filterknopf.aktiv{background:#fa4f801f; color:var(--lavendel)}

.clip-bild{border:0; padding:0; width:100%; cursor:pointer; display:block}
.clip-abspielen{position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; color:#fff; text-shadow:0 2px 14px #000a; opacity:.85; transition:opacity .15s}
.clip:hover .clip-abspielen{opacity:1}
.clip-rahmen{width:100%; aspect-ratio:16/9; border:0; display:block;
  border-bottom:1px solid var(--kante)}
.clip-text h3 a:hover{color:var(--lavendel)}

.vodliste{display:flex; flex-direction:column; gap:14px}
.vod{display:flex; gap:18px; background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); overflow:hidden; transition:border-color .16s, transform .16s}
.vod:hover{border-color:var(--lavendel); transform:translateX(3px)}
.vod-bild{flex:none; width:220px; aspect-ratio:16/9; position:relative;
  background:#231f2e center/cover no-repeat}
.vod-text{padding:16px 18px 16px 0; display:flex; flex-direction:column; gap:5px;
  justify-content:center; min-width:0}
.vod-text h3{font-size:1rem; line-height:1.35}

.profilkopf{display:flex; align-items:center; gap:22px; margin-bottom:18px}
.profilbild{border-radius:20px; border:1px solid var(--kante-hell)}
.profilkopf-text{display:flex; flex-direction:column; gap:4px; min-width:0}
.profilkopf-text h2{font-size:1.6rem}
.profilmarken{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.marke{font-size:.76rem; padding:4px 11px; border-radius:999px;
  background:#ffffff09; border:1px solid var(--kante-hell); color:var(--leise)}
.marke.abo{background:#9146ff1f; border-color:#9146ff66; color:#c9a9ff}
.marke.folgt{background:#4fbe8617; border-color:#4fbe8655; color:#9fdcbb}

.balken{height:9px; border-radius:99px; background:#ffffff0d; overflow:hidden; margin-bottom:10px}
.balken-fuellung{height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--lavendel), var(--altrosa)); transition:width .6s ease}

.kennzahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;
  padding-top:18px; border-top:1px solid var(--kante)}
.kennzahlen.breit{margin-top:0; padding-top:0; border-top:0}
.kennzahl{display:flex; flex-direction:column; gap:2px}
.kennzahl b{font-size:1.35rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kennzahl span{font-size:.8rem; color:var(--sehrleise)}

.rollenmarken{display:flex; gap:8px; flex-wrap:wrap}
.rollenmarke{font-size:.84rem; padding:5px 12px; border-radius:999px;
  background:#ffffff09; border:1px solid var(--kante-hell); color:var(--leise)}
.rollenmarke.bunt{color:var(--ton); border-color:color-mix(in srgb, var(--ton) 45%, transparent);
  background:color-mix(in srgb, var(--ton) 12%, transparent)}

.kontozeile{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--kante)}
.kontozeile:last-of-type{border-bottom:0}
.kontozeile > div{display:flex; flex-direction:column; gap:2px}

.teamleiste{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.feldblock{display:flex; flex-direction:column; gap:6px}
.feldname{font-size:.86rem; color:var(--leise)}

@media (max-width:700px){
  .vod{flex-direction:column}
  .vod-bild{width:100%}
  .vod-text{padding:0 18px 16px}
  .kennzahlen{grid-template-columns:1fr 1fr}
  .profilkopf{gap:16px}
  .profilbild{width:64px; height:64px}
}
/* Kontopunkte im Klappmenue abheben */
.kopf-klapp .klapp-konto{color:var(--lavendel)}
.kopf-klapp .klapp-anmelden{font-weight:650}
.kopf-klapp .klapp-raus{color:var(--sehrleise)}
/* Zeigt im Klappmenü, als wer man unterwegs ist - auf dem Handy
   gibt es das Kontomenü der Kopfzeile ja nicht */
.klapp-wer{
  display:flex; align-items:center; gap:9px;
  padding:10px 4px 12px; margin-bottom:2px;
  border-bottom:1px solid var(--kante);
  font-weight:650; font-size:.95rem;
}
.klapp-wer img{border-radius:50%; flex:none}

/* ---------------- Als App installieren ---------------- */
.installbalken{
  position:fixed; z-index:60;
  left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; gap:13px;
  padding:13px 14px;
  background:var(--karte-hoch); border:1px solid var(--kante-hell);
  border-radius:var(--rund-l);
  box-shadow:0 18px 40px #0000007a;
  /* Faehrt von unten herein, sobald .da gesetzt wird */
  transform:translateY(140%); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .32s;
}
.installbalken.da{transform:none; opacity:1}
.installbalken img{border-radius:11px; border:1px solid var(--kante-hell); flex:none}
.installbalken-text{display:flex; flex-direction:column; min-width:0; flex:1}
.installbalken-text b{font-family:var(--anzeige); font-size:.97rem}
.installbalken-text span{color:var(--sehrleise); font-size:.83rem; line-height:1.45}
.installbalken .knopf{flex:none; background:var(--lavendel); color:#14121a}
.installbalken-zu{
  flex:none; width:30px; height:30px; align-self:flex-start;
  background:0; border:0; color:var(--sehrleise); cursor:pointer;
  font-size:.9rem; border-radius:8px; transition:color .15s, background .15s;
}
.installbalken-zu:hover{color:var(--text); background:#ffffff0f}

@media (min-width:620px){
  .installbalken{left:auto; right:20px; bottom:20px; max-width:420px}
}
/* Auf ganz schmalen Geraeten passt der Knopf nicht mehr daneben */
@media (max-width:400px){
  .installbalken{flex-wrap:wrap}
  .installbalken .knopf{width:100%; order:3}
}
.anmelde-weiter{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.anmelde-weiter .knopf{margin-top:0}
/* ---- Nächste Marke auf der Startseite ---- */
.marke-ziel{background:var(--karte); border:1px solid var(--kante); border-radius:16px;
  padding:22px 24px}
.marke-kopf{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:14px}
.marke-kopf h2{margin:2px 0 0; font-size:1.35rem}
.marke-zahl{color:var(--sehrleise); font-size:.95rem; white-space:nowrap}
.marke-schiene{height:10px; border-radius:99px; background:#ffffff12; overflow:hidden}
.marke-fuellung{height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--lavendel), var(--altrosa));
  transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.marke-ziel .klein{margin:10px 0 0}

/* ---- Statusseite ---- */
.statuszeile{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--kante)}
.statuszeile:last-of-type{border-bottom:0}
.statusname{flex:1; min-width:0; font-size:.96rem}
.statuspunkt{width:9px; height:9px; border-radius:50%; flex:none}
.statuspunkt.gruen{background:#6b8f86; box-shadow:0 0 0 3px #6b8f8626}
.statuspunkt.rot{background:#d2596b; box-shadow:0 0 0 3px #d2596b26}
.statuspunkt.grau{background:var(--sehrleise)}

/* ---- Teambereich ---- */
.reiterleiste{display:flex; gap:6px; flex-wrap:wrap; background:#ffffff06;
  border:1px solid var(--kante); border-radius:12px; padding:5px; margin-bottom:20px}
.reiter{background:0; border:0; color:var(--sehrleise); font:inherit; font-size:.92rem;
  padding:9px 16px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s}
.reiter:hover{color:var(--text)}
.reiter.aktiv{background:#fa4f801f; color:var(--lavendel)}
.reiter-leitung{margin-left:auto; color:var(--altrosa)}
.reiter-leitung.aktiv{background:#fcad711f; color:var(--altrosa)}
.reiterinhalt{display:flex; flex-direction:column; gap:18px}

.listenzeile{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--kante)}
.listenzeile:last-child{border-bottom:0}
.listenzeile > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.listenzeile b{font-size:.94rem}

.suchzeile{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.suchzeile .feld{flex:1; min-width:180px}
.suchzeile .knopf{flex:none; margin-top:0}
.listenbild{border-radius:50%; flex:none}
.marke.warnung{background:#f2a53b17; border-color:#f2a53b55; color:#f0cf9a}

#teamBereich{max-width:900px}
/* Abschnitte im Bewerbungsformular */
.formteil{display:flex; flex-direction:column; gap:3px; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--kante)}
.formteil:first-child{margin-top:6px; padding-top:0; border-top:0}
.formteil h4{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lavendel)}

/* ---------------- Chatbefehle ---------------- */
.befehlsleiste{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:26px;
}
.befehlsleiste .feld{flex:1; min-width:220px; max-width:420px}
.befehlsleiste .klein{color:var(--sehrleise); font-variant-numeric:tabular-nums}

.befehlsgruppe{margin-bottom:38px}
.befehlsgruppe-kopf{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.befehlsgruppe-kopf h2{font-size:1.15rem; flex:1; min-width:0}
/* Erbt Form und Maske vom Leerzustand, nur kleiner */
.befehlsgruppe-zeichen{
  width:38px; height:38px; border-radius:11px; margin-bottom:0; flex:none;
}
.befehlsgruppe-zeichen::before{width:20px; height:20px}

.befehlsgitter{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:13px}

.befehl{
  background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); padding:15px 17px;
  transition:border-color .16s, background .16s;
}
.befehl:hover{border-color:var(--kante-hell); background:var(--karte-hoch)}
.befehl-kopf{display:flex; align-items:center; gap:9px; margin-bottom:8px}

/* Der Name ist ein Knopf: Klick kopiert ihn in die Zwischenablage */
.befehl-name{
  font:inherit; font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:.95rem; font-weight:600;
  background:#fa4f8018; border:1px solid #fa4f8038; color:var(--lavendel);
  padding:4px 11px; border-radius:8px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.befehl-name:hover{background:#fa4f802b; border-color:var(--lavendel)}
.befehl-name.kopiert{
  background:#4fbe8630; border-color:#4fbe8677; color:#9fdcbb;
}
.befehl-name.kopiert::after{content:"  kopiert"; font-size:.78rem; opacity:.85}

.befehl-ebene{
  font-size:.72rem; letter-spacing:.04em; color:var(--sehrleise);
  background:#ffffff0c; border:1px solid var(--kante);
  padding:2px 9px; border-radius:999px; margin-left:auto; flex:none;
}
.befehl-antwort{color:var(--leise); font-size:.9rem; line-height:1.55}
/* Was der Bot spaeter einsetzt - kein Quelltext im Fliesstext */
.befehl-platzhalter{
  display:inline-block;
  background:#a06bd81f; border:1px dashed #a06bd855; color:#cbaaf0;
  padding:0 6px; border-radius:6px; font-size:.86em;
  margin:0 1px; cursor:help;
}
.befehl-alias{margin-top:9px; font-size:.8rem; color:var(--sehrleise)}

/* ---------------- Wer gerade im Sprachkanal sitzt ---------------- */
.sprachgitter{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px}
.sprachkanal{
  background:var(--karte); border:1px solid var(--kante);
  border-radius:var(--rund); padding:16px 18px;
  transition:border-color .25s;
}
.sprachkanal:hover{border-color:var(--kante-hell)}
.sprachkanal-kopf{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.sprachkanal-kopf b{font-family:var(--anzeige); font-size:.98rem; flex:1; min-width:0}
.sprachkanal-zahl{
  font-size:.76rem; color:var(--gruen); font-variant-numeric:tabular-nums;
  background:#4fbe8620; border:1px solid #4fbe8640;
  padding:2px 8px; border-radius:999px;
}

/* Zwei Balken, die sich bewegen - das einzige Element der Seite,
   das dauerhaft laeuft. Genau deshalb sparsam eingesetzt: nur
   hier, und nur solange wirklich jemand im Kanal sitzt. */
.sprachkanal-welle{
  display:flex; align-items:flex-end; gap:2px; height:14px; flex:none;
}
.sprachkanal-welle::before,
.sprachkanal-welle::after{
  content:""; width:3px; border-radius:2px; background:var(--gruen);
  transform-origin:bottom;
  animation:welle 1.1s ease-in-out infinite;
}
.sprachkanal-welle::before{height:14px}
.sprachkanal-welle::after{height:10px; animation-delay:.35s}
@keyframes welle{
  0%,100%{transform:scaleY(.35)}
  50%    {transform:scaleY(1)}
}
/* Wer Bewegung abgestellt hat, bekommt zwei ruhige Balken */
@media (prefers-reduced-motion:reduce){
  .sprachkanal-welle::before,
  .sprachkanal-welle::after{animation:none}
}

.sprachleute{display:flex; flex-wrap:wrap; gap:7px}
.sprachperson{
  display:inline-flex; align-items:center; gap:6px;
  background:#ffffff0a; border:1px solid var(--kante);
  border-radius:999px; padding:4px 11px 4px 4px;
  font-size:.85rem; color:var(--leise);
}
.sprachperson:not(:has(img)){padding-left:11px}
.sprachperson img{border-radius:50%; flex:none}

/* ---------------- Beruehrung ----------------
   Fusszeilenlinks und Filterknoepfe waren rund 24 bzw. 33 Pixel
   hoch - mit der Maus kein Problem, mit dem Daumen schon. 44
   Pixel gelten als Untergrenze. pointer:coarse trifft genau die
   Geraete, die es betrifft, und laesst die Maus in Ruhe. */
@media (pointer:coarse){
  .fuss-spalte a{padding:9px 0; width:auto}
  .filterknopf{padding:12px 16px}
  .kopf-nav a{padding:8px 0}
  .konto-klapp a{padding-top:12px; padding-bottom:12px}
  /* Auf Touchgeraeten gibt es kein Schweben - der Zustand bleibt
     sonst nach dem Antippen haengen */
  .weg:hover, .kachel:hover, .clip:hover{transform:none}
}

/* ---------------- Leerzustand ----------------
   Eine leere Seite ist der erste Eindruck fuer jeden, der zu
   frueh kommt. Vorher stand da eine graue Zeile in einem sonst
   leeren Gitter, was eher nach Fehler aussah als nach "noch
   nichts da". Der gestrichelte Rahmen sagt: hier gehoert etwas
   hin, es ist nur noch nicht da. */
.leer{
  grid-column:1 / -1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:52px 24px;
  border:1px dashed var(--kante-hell); border-radius:var(--rund-l);
  background:#ffffff04;
}
.leer-zeichen{
  --ton:var(--sehrleise);
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--lavendel) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--lavendel) 20%, transparent);
  margin-bottom:10px;
}
.leer-zeichen::before{width:26px; height:26px; background:var(--lavendel); opacity:.75}
/* Die Rangliste ist ein <ol>. Ein <div> waere darin ungueltig,
   also steckt der Leerzustand in einem <li> - das aber keine
   Zaehlung, keinen Rahmen und keinen Innenabstand erben darf. */
.leer-huelle{
  list-style:none; padding:0 !important; margin:0;
  border:0 !important; background:none !important;
  display:block !important;
}
.leer h3{font-size:1.08rem}
.leer p{color:var(--sehrleise); font-size:.92rem; max-width:44ch}
.leer .knopf{margin-top:14px}

/* ---------------- Symbolsatz ----------------
   Statt Emoji: ein Satz Strichsymbole, gleiche Staerke, gleiches
   Raster. Sie liegen als Maske im Hintergrund, nicht als Zeichen
   im Text - dadurch nehmen sie die Akzentfarbe der Karte an und
   sehen auf jedem Geraet gleich aus. Emoji taten weder das eine
   noch das andere. */
.kachel-zeichen::before,
.leer-zeichen::before,
.weg-zeichen::before{
  content:""; display:block; width:24px; height:24px;
  background:var(--ton, var(--lavendel));
  -webkit-mask:var(--symbol) center/contain no-repeat;
          mask:var(--symbol) center/contain no-repeat;
}
.weg-zeichen{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ton) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--ton) 26%, transparent);
  margin-bottom:12px;
}
.weg:hover .weg-zeichen::before,
.kachel:hover .kachel-zeichen::before{ opacity:.92 }
[data-symbol="puls"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12H7l2.4-7 4 14 2.4-7h5.7'/%3E%3C/svg%3E")}
[data-symbol="schere"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cpath d='M20.5 4 8.3 15.9'/%3E%3Cpath d='M14.4 14.4 20.5 20'/%3E%3Cpath d='M8.3 8.1 12 11.8'/%3E%3C/svg%3E")}
[data-symbol="kalender"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='15.8' rx='2.6'/%3E%3Cpath d='M3 10.2h18M8 2.8v4.4M16 2.8v4.4'/%3E%3C/svg%3E")}
[data-symbol="blase"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 11.6c0 4.5-3.9 8.2-8.8 8.2a9.7 9.7 0 0 1-3.7-.7L3.2 21l1.8-4.4a7.9 7.9 0 0 1-1.8-5c0-4.5 3.9-8.2 8.8-8.2s8.8 3.7 8.8 8.2z'/%3E%3C/svg%3E")}
[data-symbol="ticket"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6A2.6 2.6 0 0 1 5.6 6h12.8A2.6 2.6 0 0 1 21 8.6v1.5a2.2 2.2 0 0 0 0 4.4v1.5A2.6 2.6 0 0 1 18.4 18H5.6A2.6 2.6 0 0 1 3 15.4v-1.5a2.2 2.2 0 0 0 0-4.4z'/%3E%3Cpath d='M14.4 6.4v11.2' stroke-dasharray='1.9 2.4'/%3E%3C/svg%3E")}
[data-symbol="herz"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4C10.6 19.2 3.6 14.6 3.6 9.6A4.7 4.7 0 0 1 12 6.7a4.7 4.7 0 0 1 8.4 2.9c0 5-7 9.6-8.4 10.8z'/%3E%3C/svg%3E")}
[data-symbol="wuerfel"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='17.2' height='17.2' rx='3.6'/%3E%3Ccircle cx='8.6' cy='8.6' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='15.4' cy='15.4' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E")}
[data-symbol="uhr"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 6.9V12l3.4 2'/%3E%3C/svg%3E")}
[data-symbol="leute"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 20.2v-1.7a3.5 3.5 0 0 0-3.5-3.5H6.1a3.5 3.5 0 0 0-3.5 3.5v1.7'/%3E%3Ccircle cx='9' cy='7.6' r='3.5'/%3E%3Cpath d='M21.4 20.2v-1.7a3.5 3.5 0 0 0-2.7-3.4'/%3E%3Cpath d='M15.6 4.3a3.5 3.5 0 0 1 0 6.6'/%3E%3C/svg%3E")}
[data-symbol="stumm"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 4.8 6.6 8.9H3.1v6.2h3.5l4.8 4.1z'/%3E%3Cpath d='M16.4 9.6 21 14.2M21 9.6l-4.6 4.6'/%3E%3C/svg%3E")}
[data-symbol="maske"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 4.6h15.2v5.9c0 5.1-3.4 9-7.6 9.9-4.2-.9-7.6-4.8-7.6-9.9z'/%3E%3Ccircle cx='9.2' cy='10.4' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='14.8' cy='10.4' r='1' fill='black' stroke='none'/%3E%3Cpath d='M9.6 14.6c.9 1 3.9 1 4.8 0'/%3E%3C/svg%3E")}
[data-symbol="schild"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.1 4.7 6v6.1c0 4.6 3 8.1 7.3 9.6 4.3-1.5 7.3-5 7.3-9.6V6z'/%3E%3Cpath d='M9.2 12.1l2 2 3.6-3.9'/%3E%3C/svg%3E")}
[data-symbol="laut"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 4.8 6.6 8.9H3.1v6.2h3.5l4.8 4.1z'/%3E%3Cpath d='M15.4 9.1a4.3 4.3 0 0 1 0 6'/%3E%3Cpath d='M18.3 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}
/* Stern fuer den Western-Teil. Ein Sheriffabzeichen waere naeher
   dran, zerfaellt aber bei 24 Pixeln zu Matsch - der Stern bleibt
   erkennbar und meint dasselbe. */
[data-symbol="stern"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.1l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E")}

/* ---- Teamseite: Befehlsliste ---------------------------------
   Eigene Klassen mit Praefix. stil.css ist von allen Seiten
   geteilt, und eine Kollision hat hier schon einmal eine ganze
   Seite zum Scrollen gebracht. */
.suchfeld{
  width:100%; margin-top:12px; padding:10px 14px;
  background:#ffffff08; border:1px solid var(--kante-hell);
  border-radius:var(--rund); color:var(--text); font:inherit; font-size:.95rem;
}
.suchfeld:focus{outline:none; border-color:var(--glut)}
.suchfeld::placeholder{color:var(--sehrleise)}

.befehlsliste{list-style:none; margin:10px 0 0; padding:0}
.befehlsliste li{padding:9px 0; border-bottom:1px solid var(--kante)}
.befehlsliste li:last-child{border-bottom:0}
.befehlsliste li[hidden]{display:none}

.befehl-zeile{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.befehl-zeile code{
  background:#ffffff0d; border:1px solid var(--kante-hell); border-radius:6px;
  padding:2px 8px; font-size:.9rem; color:var(--flamme);
}
.befehl-art{
  font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--sehrleise); background:#ffffff08; border-radius:999px; padding:2px 8px;
}
.befehl-text{margin:4px 0 0; font-size:.88rem; color:var(--leise)}
.befehl-unter{margin:5px 0 0; font-size:.8rem; color:var(--sehrleise)}
.befehl-unter code{
  background:#ffffff0a; border-radius:5px; padding:1px 6px;
  font-size:.78rem; color:var(--leise);
}