/* PamaHQ Community - Entwurf neuer Look (30.10.2026)
   Gestaltungsidee: Sendetafel. Schwarzer Grund, dunkle Flächen mit harten Kanten,
   große Saira-Schrift. Zwei Akzente mit fester Rolle:
   Neon-Lila = alles, was man anklickt oder was Fortschritt zeigt (Knöpfe, Balken, Rang).
   Orange    = alles, was XP und Belohnung ist (XP-Werte, Guthaben, LIVE, Legendär).
   Patrick 30.10.2026: „lieber schwarz mit violetten und orangenen Akzenten“.
   Alle Ecken eckig (Radius 0), keine Leuchteffekte, ein einziges dunkles Thema. */

@font-face { font-family: 'Saira'; font-weight: 100 900; font-display: swap; src: url(schrift/Saira-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Saira'; font-weight: 100 900; font-display: swap; src: url(schrift/Saira-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F; }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url(schrift/Geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url(schrift/Geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F; }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-display: swap; src: url(schrift/GeistMono-latin.woff2) format('woff2'); }

:root {
  /* Farbe */
  --grund: #0b0a0e;        /* Seitengrund, Schwarz mit Hauch Violett */
  --flaeche: #16141b;      /* abgesetzte Fläche */
  --flaeche-hell: #221f2a; /* erhobene Fläche */
  --violett: #2e005c;      /* CI: tiefes Violett, nur noch für kleine Flächen */
  --linie: #36303f;        /* Trennlinien und Ränder */
  --text: #f6f3fa;
  --text-matt: #b5afc0;
  --akzent: #b756ff;       /* CI: Neon-Lila */
  --tinte: #0b0a0e;        /* Text auf Lila */
  --orange: #ff8022;       /* CI: XP, Belohnung, LIVE, Legendär */
  --selten: #4aa8ff;
  --gewoehnlich: #8d8899;

  /* Schrift */
  --f-anzeige: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --f-text: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-zahl: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --breite: 1280px;
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.innen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * 32px);
  margin-inline: auto;
  padding-left: var(--rand);
  padding-right: var(--rand-r);
}
@media (min-width: 900px) { .innen { --rand: max(32px, env(safe-area-inset-left, 0px)); --rand-r: max(32px, env(safe-area-inset-right, 0px)); } }

/* Hinweisleiste für den Entwurf */
.entwurf-hinweis {
  background: var(--akzent);
  color: var(--tinte);
  font-family: var(--f-zahl);
  font-size: .75rem;
  font-weight: 600;
}
.entwurf-hinweis .innen { padding-block: 6px; }

/* Kopf */
.kopf {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--grund);
  border-bottom: 2px solid var(--flaeche-hell);
}
.kopf .innen { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marke {
  font-family: var(--f-anzeige);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
}
.marke b { color: var(--akzent); font-weight: 900; }
.navi { display: flex; gap: 4px; margin-left: 8px; }
.navi a {
  font-family: var(--f-anzeige);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--text-matt);
  padding: 8px 12px;
}
.navi a:hover, .navi a[aria-current="page"] { color: var(--text); background: var(--flaeche); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .navi { display: none; } }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-anzeige);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 12px 18px;
  background: var(--akzent);
  color: var(--tinte);
  transition: transform .12s ease, background-color .12s ease;
}
.knopf:hover { background: #c77bff; }
.knopf:active { transform: translateY(1px) scale(.98); }
.knopf svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.knopf.gross { font-size: 1.15rem; padding: 16px 24px; }
.knopf.zweit { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--linie); }
.knopf.zweit:hover { box-shadow: inset 0 0 0 2px var(--akzent); }
.knopf.warn { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--orange); }

/* Nutzerchip im Kopf (angemeldet) */
.nutzer { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nutzer .bild { width: 36px; height: 36px; object-fit: cover; }
.nutzer .lv { font-family: var(--f-zahl); font-size: .8rem; color: var(--tinte); background: var(--akzent); padding: 2px 6px; font-weight: 700; }
.nutzer .name { font-weight: 600; }
@media (max-width: 480px) { .nutzer .name { display: none; } }

/* Typo */
h1, h2, h3 { font-family: var(--f-anzeige); text-wrap: balance; margin: 0; line-height: .98; }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.zahl { font-family: var(--f-zahl); font-variant-numeric: tabular-nums; }
.matt { color: var(--text-matt); }

section { padding-block: clamp(48px, 7vw, 88px); }
.abschnitt-kopf { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.abschnitt-kopf .mehr { margin-left: auto; font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; text-decoration: none; color: var(--akzent); }
.abschnitt-kopf .mehr:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Startseite: Live ---------- */
.live { background: var(--grund); padding-block: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 64px); }
.live .innen { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
@media (max-width: 960px) { .live .innen { grid-template-columns: minmax(0, 1fr); } }

.spieler {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: var(--grund);
  box-shadow: 10px 10px 0 var(--akzent);
  overflow: hidden;
}
.spieler img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.55); }
.spieler::after { content: ""; position: absolute; inset: 0; background: var(--violett); mix-blend-mode: color; }
.spieler .einwilligung {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  text-align: center; padding: 16px;
}
.spieler .einwilligung p { margin: 0; max-width: 40ch; font-size: .85rem; color: var(--text); background: var(--grund); padding: 6px 10px; }
.abspielen {
  width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border: 0; cursor: pointer;
  background: var(--akzent); color: var(--tinte);
  display: grid; place-items: center;
  transition: transform .15s ease;
}
.abspielen:hover { transform: scale(1.06); }
.abspielen svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }

.live-marke {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--tinte);
  font-family: var(--f-anzeige); font-weight: 900; font-size: 1rem; letter-spacing: .08em;
  padding: 4px 10px;
}
.live-marke::before { content: ""; width: 8px; height: 8px; background: var(--tinte); animation: blinken 1.6s steps(2, start) infinite; }
@keyframes blinken { to { visibility: hidden; } }

.live-text > .live-marke { justify-self: start; }
.live-text { display: grid; gap: 18px; align-content: center; min-width: 0; }
.live-text h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; }
.live-daten { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--f-zahl); font-size: .9rem; color: var(--text-matt); }
.live-daten strong { color: var(--text); font-weight: 600; }
.live-text .unter { margin: 0; color: var(--text-matt); max-width: 42ch; }

/* ---------- XP-Band ---------- */
.xp-band { background: var(--flaeche); color: var(--text); padding-block: 0; border-block: 2px solid var(--orange); }
.xp-band .innen { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(0, 1fr)); }
.xp-band .titel { padding: 28px 24px 28px 0; display: grid; align-content: center; gap: 6px; }
.xp-band .titel h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.xp-band .titel p { margin: 0; font-size: .9rem; color: var(--text-matt); }
.xp-regel { padding: 28px 20px; border-left: 2px solid var(--linie); display: grid; align-content: start; gap: 4px; }
.xp-regel .wert { color: var(--orange); font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.xp-regel .wert small { font-size: .45em; font-weight: 800; letter-spacing: 0; margin-left: 2px; }
.xp-regel .wofuer { font-weight: 700; font-size: 1rem; }
.xp-regel .grenze { font-family: var(--f-zahl); font-size: .75rem; color: var(--text-matt); }
@media (max-width: 1000px) {
  .xp-band .innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-band .titel { grid-column: 1 / -1; padding: 28px 0 8px; }
  .xp-regel { border-left: 0; border-top: 2px solid var(--linie); padding-inline: 0 16px; }
}

/* ---------- Videos ---------- */
.videos .raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .videos .raster { grid-template-columns: minmax(0, 1fr); } }
.vod { display: grid; gap: 12px; text-decoration: none; min-width: 0; }
.vod .bild { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--flaeche); }
.vod .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vod:hover .bild img { transform: scale(1.04); }
.vod .dauer { position: absolute; right: 0; bottom: 0; background: var(--grund); font-family: var(--f-zahl); font-size: .8rem; padding: 4px 8px; }
.vod h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.vod .meta { font-family: var(--f-zahl); font-size: .8rem; color: var(--text-matt); }
.vod.gross h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.vod-liste { display: grid; gap: 20px; align-content: start; }
.vod-liste .vod { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: start; gap: 14px; }
.vod-liste .vod h3 { font-size: 1.05rem; }

/* ---------- Clips ---------- */
.clips { background: var(--flaeche); }
.clip-reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
  scrollbar-color: var(--akzent) var(--flaeche-hell);
}
.clip { scroll-snap-align: start; display: grid; gap: 10px; text-decoration: none; background: var(--flaeche-hell); padding: 10px 10px 14px; }
.clip .bild { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.clip .bild img { width: 100%; height: 100%; object-fit: cover; }
.clip h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.clip .von { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--text-matt); }
.clip .von .zahl { font-size: .8rem; }
.clip:hover { background: var(--linie); }

/* ---------- Fuß ---------- */
.fuss { border-top: 2px solid var(--flaeche-hell); padding-block: 40px; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.fuss nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss nav a { color: var(--text-matt); text-decoration: none; font-size: .9rem; }
.fuss nav a:hover { color: var(--text); }
.fuss .kanaele { gap: 10px; }
.fuss .kanaele a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--flaeche-hell); color: var(--text-matt); transition: color .15s, border-color .15s; }
.fuss .kanaele a:hover, .fuss .kanaele a:focus-visible { color: var(--text); border-color: var(--akzent); }
.fuss .kanaele svg { width: 20px; height: 20px; fill: currentColor; }
.fuss .regel { margin-left: auto; font-size: .85rem; color: var(--text-matt); max-width: 46ch; }
@media (max-width: 700px) { .fuss .regel { margin-left: 0; } }

/* ---------- Profil ---------- */
.profil-kopf { background: var(--grund); border-bottom: 2px solid var(--flaeche-hell); padding-block: clamp(32px, 5vw, 64px); }
.profil-kopf .innen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: end; }
.profil-kopf .avatar { width: clamp(96px, 13vw, 160px); aspect-ratio: 1; object-fit: cover; box-shadow: 8px 8px 0 var(--akzent); }
.profil-kopf .wer { display: grid; gap: 10px; min-width: 0; }
.profil-kopf h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rang { font-family: var(--f-anzeige); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--akzent); }
.seit { font-size: .9rem; color: var(--text-matt); }
.level { text-align: right; line-height: .8; }
.level .klein { font-family: var(--f-anzeige); font-weight: 800; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-matt); display: block; margin-bottom: 6px; }
.level .gross { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(6rem, 16vw, 12rem); letter-spacing: -.05em; color: var(--text); }
@media (max-width: 720px) {
  .profil-kopf .innen { grid-template-columns: auto minmax(0, 1fr); }
  .level { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 14px; }
  .level .klein { margin: 0; }
}

.fortschritt { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 10px; }
.fortschritt .zeile { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--f-zahl); font-size: .9rem; }
.fortschritt .zeile strong { font-family: var(--f-anzeige); font-size: 1.4rem; font-weight: 800; }
.balken { height: 18px; background: var(--flaeche-hell); position: relative; overflow: hidden; }
.balken span { position: absolute; inset: 0 auto 0 0; background: var(--akzent); width: var(--anteil); }
.balken span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: var(--text); }

.kennzahlen .innen { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--grund); }
.kennzahl { background: var(--flaeche); padding: 24px; display: grid; gap: 6px; align-content: start; }
.kennzahl .wert { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.kennzahl .was { font-weight: 600; }
.kennzahl .wie { font-family: var(--f-zahl); font-size: .78rem; color: var(--text-matt); }
.kennzahl.guthaben { background: var(--orange); color: var(--tinte); }
.kennzahl.guthaben .wie { color: var(--tinte); opacity: .8; }
@media (max-width: 900px) { .kennzahlen .innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahl.guthaben, .kennzahl:last-child { grid-column: 1 / -1; } }
.kennzahlen { padding-block: clamp(32px, 4vw, 48px) 0; }

.raenge-liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; list-style: none; padding: 0; margin: 0; }
.raenge-liste li { background: var(--flaeche); padding: 16px 14px 18px; display: grid; gap: 4px; min-width: 0; }
.raenge-liste .lv { font-family: var(--f-zahl); font-size: .75rem; color: var(--text-matt); }
.raenge-liste .n { font-family: var(--f-anzeige); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.raenge-liste .erreicht { background: var(--flaeche-hell); }
.raenge-liste .jetzt { background: var(--akzent); color: var(--tinte); }
.raenge-liste .jetzt .lv { color: var(--tinte); }
.raenge-liste .offen { background: transparent; box-shadow: inset 0 0 0 2px var(--flaeche-hell); color: var(--text-matt); }
@media (max-width: 760px) { .raenge-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .zwei-spalten { grid-template-columns: minmax(0, 1fr); } }

.xp-buch { display: grid; gap: 28px; }
/* XP-Buch zugeklappt, damit Sammlung und Konto nicht weit unten liegen (Patrick, 30.10.2026) */
.buch-klappe > summary {
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; cursor: pointer; list-style: none;
  padding-bottom: 16px; border-bottom: 2px solid var(--flaeche-hell);
}
.buch-klappe > summary::-webkit-details-marker { display: none; }
.buch-klappe > summary h2 { margin: 0; }
.buch-klappe > summary .matt { color: var(--text-matt); font-size: .9rem; }
.buch-klappe > summary .auf { margin-left: auto; width: 12px; height: 12px; border-right: 3px solid var(--akzent); border-bottom: 3px solid var(--akzent); transform: rotate(45deg); transition: transform .2s; align-self: center; }
.buch-klappe[open] > summary .auf { transform: rotate(-135deg); }
.buch-klappe > summary:hover h2 { color: var(--akzent); }
.buch-klappe[open] > .xp-buch { margin-top: 24px; }
.buch-tag h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-matt); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; }
.buch-tag h3 .zahl { color: var(--orange); letter-spacing: 0; }
.buchung { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 10px 0; }
.buch-tag .buchung + .buchung { border-top: 1px solid var(--flaeche-hell); }
.buchung time { font-family: var(--f-zahl); font-size: .85rem; color: var(--text-matt); }
.buchung .art { min-width: 0; }
.buchung .menge { font-family: var(--f-anzeige); font-weight: 900; font-size: 1.25rem; color: var(--orange); }

.sammlung { display: grid; gap: 20px; }
.sammlung p { margin: 0; color: var(--text-matt); max-width: 48ch; }
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* ---------- Sammelkarte ----------
   Aufbau nach dem Vorbild klassischer Sammelkarten (Patrick, 30.10.2026: „orientier dich an Pokémon-Karten“),
   aber eigene Gestaltung: rundum abgerundet, breiter heller Außenrand und heller Kartenkörper in der Farbe
   der Seltenheit, Name oben, Bild im metallisch eingefassten Fenster, Leiste mit Figur und Welt, Fußzeile
   mit Nummer und Seltenheit. Legendär und episch mit Folienglanz (episch als Regenbogen-Holo), selten leicht glänzend, Kippen unter der Maus (stil/seite.js). */
.karte {
  --rand-farbe: #dcd9e2; --koerper-1: #ecebf0; --koerper-2: #c6c2cf; --koerper-3: #9e99a9;
  --schrift: #19171d; --akzentfarbe: #6e6878; --stein: #8d8899;
  --kx: 0deg; --ky: 0deg; --gx: 50%; --gy: 30%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
  padding: 7px; border-radius: 16px; background: var(--rand-farbe);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
  transform: perspective(900px) rotateX(var(--kx)) rotateY(var(--ky));
  transition: transform .25s ease;
  color: var(--schrift);
}
.karte.legendaer { --rand-farbe: #ffd66b; --koerper-1: #ffeabf; --koerper-2: #ffbe6b; --koerper-3: #ff8a2e; --schrift: #2a1405; --akzentfarbe: #b4520c; --stein: #ff8022; }
.karte.episch { --rand-farbe: #dcbcff; --koerper-1: #f1e3ff; --koerper-2: #cb98ff; --koerper-3: #9b4dff; --schrift: #22093f; --akzentfarbe: #6b23b8; --stein: #9b4dff; }
.karte.selten { --rand-farbe: #b5dcff; --koerper-1: #e3f2ff; --koerper-2: #98caff; --koerper-3: #4aa8ff; --schrift: #08233f; --akzentfarbe: #1d65b5; --stein: #2f8de6; }
.karte.kippt { transition: transform .06s linear; }

/* Der Kartenkörper liegt innerhalb des Außenrands */
.karte > * { position: relative; z-index: 1; }
.karte::before {
  content: ""; position: absolute; inset: 7px; border-radius: 10px; z-index: 0;
  background: linear-gradient(165deg, var(--koerper-1) 0%, var(--koerper-2) 55%, var(--koerper-3) 100%);
}

.karte .kartenkopf { display: flex; align-items: center; gap: 8px; padding: 7px 9px 6px; min-height: 2.1em; }
.karte .kartenkopf b {
  flex: 1; min-width: 0; font-family: var(--f-anzeige); font-weight: 800; font-size: .95rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .005em; overflow-wrap: normal; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.karte .kartenkopf b.lang { font-size: .78rem; }
.karte .steine { display: flex; gap: 4px; flex: none; }
.karte .steine i {
  width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1px;
  background: linear-gradient(135deg, #fff 0%, var(--stein) 50%, color-mix(in srgb, var(--stein) 60%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}

/* Bildfenster mit metallischer Einfassung */
.karte .motiv {
  position: relative; margin: 0 7px; aspect-ratio: 5 / 7; max-width: 100%; overflow: hidden; border-radius: 4px;
  border: 3px solid transparent;
  /* Bis das Bild da ist, ein ruhiger Verlauf in der Farbe der Karte statt Schwarz (Patrick, 31.10.2026) */
  background: linear-gradient(160deg, color-mix(in srgb, var(--koerper-2) 55%, #1a1422), color-mix(in srgb, var(--koerper-3) 45%, #0c0912)) padding-box,
    linear-gradient(135deg, #fff6d6, #b9975b 40%, #f3e2a8 60%, #8f6e3c) border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.karte .motiv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte.legendaer .motiv::before, .karte.episch .motiv::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .35), transparent 45%),
    linear-gradient(115deg, transparent 25%, var(--glanz-1) 40%, var(--glanz-2) 52%, transparent 68%);
  background-size: 100% 100%, 260% 260%;
  background-position: center, var(--gx) var(--gy);
  opacity: .38;
  animation: folie 7s ease-in-out infinite alternate;
}
.karte.legendaer { --glanz-1: rgba(255, 196, 107, .7); --glanz-2: rgba(255, 128, 34, .45); }
.karte.kippt .motiv::before, .karte.kippt::after { animation: none; }
@keyframes folie { from { background-position: center, 0% 0%; } to { background-position: center, 100% 100%; } }

/* Legendär behält den stärksten Auftritt: goldener Lichtstreifen und goldener Schein */
.karte.legendaer {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 150, 40, .6), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.karte.legendaer::after, .karte.episch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 47%, var(--streif) 52%, transparent 64%);
  background-size: 260% 100%;
  background-position: var(--gx) 0;
  animation: lichtstreifen 3.6s ease-in-out infinite alternate;
}
.karte.legendaer { --streif: rgba(255, 214, 107, .8); }
.karte.episch { --streif: rgba(214, 160, 255, .7); }

/* Episch: kräftige Regenbogen-Holofolie im Bild, Lichtstreifen über die ganze Karte, lila Schein (Patrick, 30.10.2026) */
.karte.episch {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 22px rgba(183, 86, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.karte.episch .motiv::before {
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .6), transparent 42%),
    repeating-linear-gradient(115deg, #ff8be4 0%, #b98bff 7%, #7fd8ff 14%, #8dffcf 21%, #fff39a 28%, #ffb98a 35%, #ff8be4 42%);
  background-size: 100% 100%, 320% 320%;
  opacity: .34;
  animation-duration: 4.5s;
}
@keyframes lichtstreifen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* Legendär: die stärkste Folie. Gold-Regenbogen und Glitzer im Bild, beim Kippen unter der Maus volle Stärke
   (Patrick, 30.10.2026: „beim bewegen nen richtig krassen holo effekt“) */
.karte.legendaer .motiv::before {
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .75), rgba(255, 220, 140, .35) 18%, transparent 46%),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, #ffd36b 0%, #ff8a3d 5%, #ff5ad9 10%, #a35cff 15%, #47c8ff 20%, #58ffb8 25%, #fff06a 30%, #ffd36b 35%);
  background-size: 100% 100%, 14px 14px, 300% 300%;
  background-position: center, var(--gx) var(--gy), var(--gx) var(--gy);
  opacity: .42;
  transition: opacity .25s ease;
  animation: folie-legendaer 4s ease-in-out infinite alternate;
}
@keyframes folie-legendaer { from { background-position: center, 0 0, 0% 0%; } to { background-position: center, 14px 14px, 100% 100%; } }
.karte.legendaer.kippt .motiv::before { opacity: .72; }
.karte.legendaer.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 38px rgba(255, 150, 40, .85), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.karte.legendaer.kippt::after { background-size: 200% 100%; opacity: 1; }
/* Auch der Kartenkörper schillert bei legendär, nicht nur das Bild */
.karte.legendaer > .kartenkopf, .karte.legendaer > .kartenfuss { background:
  linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 45%, rgba(255, 90, 217, .18) 52%, rgba(71, 200, 255, .18) 58%, transparent 80%) var(--gx) 0 / 300% 100%; }
.karte.episch.kippt .motiv::before { opacity: .5; }

/* Full Art (Patrick, 30.10.2026): das Motiv füllt die ganze Karte, Schrift liegt hell darüber, Regenbogenrahmen,
   die stärkste Folie aller Stufen. Aufbau und Größe bleiben wie bei jeder Karte, nur das Bild wird über alles gelegt. */
.karte.fullart {
  --schrift: #fff; --akzentfarbe: rgba(255, 255, 255, .8); --stein: #ff5ad9;
  --streif: rgba(255, 255, 255, .75);
  padding: 7px; overflow: hidden;
  background: conic-gradient(from var(--fa-winkel, 0deg), #ff5ad9, #a35cff, #47c8ff, #58ffb8, #fff06a, #ff8022, #ff5ad9);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 90, 217, .55), 0 0 46px rgba(71, 200, 255, .35);
  animation: fa-rahmen 6s linear infinite;
}
@property --fa-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fa-rahmen { to { --fa-winkel: 360deg; } }
/* Abdunklung oben und unten, damit die Schrift lesbar bleibt */
.karte.fullart::before {
  inset: 4px; border-radius: 13px; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 6, 14, .72) 0%, rgba(8, 6, 14, 0) 17%, rgba(8, 6, 14, 0) 66%, rgba(8, 6, 14, .82) 100%);
}
.karte.fullart > .kartenkopf, .karte.fullart > .leiste, .karte.fullart > .kartenfuss { z-index: 2; }
.karte.fullart .motiv { position: static; background: none; border-color: transparent; box-shadow: none; overflow: visible; }
.karte.fullart .motiv img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; border-radius: 13px; z-index: 0; }
.karte.fullart .kartenkopf b { text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.karte.fullart .steine i { background: linear-gradient(135deg, #fff, #ff5ad9 35%, #47c8ff 65%, #fff06a); box-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.karte.fullart .leiste { background: rgba(10, 8, 16, .55); color: #fff; backdrop-filter: blur(3px); }
.karte.fullart .kartenfuss .nr { text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.karte.fullart .kartenfuss em { color: #160a24; background: linear-gradient(90deg, #ff9be6, #c9a2ff, #8fe0ff, #9dffd6, #fff4a6); }
/* Folie über die ganze Karte: Regenbogen, Glitzer und ein Lichtfleck, der der Maus folgt */
.karte.fullart .motiv::before {
  content: ""; position: absolute; inset: 4px; border-radius: 13px; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .8), rgba(255, 200, 255, .3) 20%, transparent 48%),
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.7px),
    repeating-linear-gradient(115deg, #ff5ad9 0%, #a35cff 5%, #47c8ff 10%, #58ffb8 15%, #fff06a 20%, #ff8a3d 25%, #ff5ad9 30%);
  background-size: 100% 100%, 12px 12px, 280% 280%;
  background-position: center, var(--gx) var(--gy), var(--gx) var(--gy);
  opacity: .5;
  transition: opacity .25s ease;
  animation: folie-legendaer 3.5s ease-in-out infinite alternate;
}
.karte.fullart.kippt .motiv::before { opacity: .8; }
.karte.fullart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .9) 46%, rgba(255, 150, 240, .6) 51%, rgba(120, 220, 255, .6) 56%, transparent 68%);
  background-size: 240% 100%; background-position: var(--gx) 0;
  animation: lichtstreifen 3s ease-in-out infinite alternate;
}
.karte.fullart.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 90, 217, .8), 0 0 60px rgba(71, 200, 255, .55); }
.karte.fullart.kippt::after { animation: none; }
.seltenheit-filter a.fullart { border-image: linear-gradient(90deg, #ff5ad9, #47c8ff, #fff06a) 0 0 1 0 / 0 0 3px 0; }
@media (max-width: 420px) { .karte.fullart { padding: 5px; } }

/* Selten: leichter blauer Glanz, deutlich schwächer als episch */
.karte.selten { --glanz-1: rgba(150, 215, 255, .5); --glanz-2: rgba(90, 140, 255, .3); }
.karte.selten .motiv::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .28), transparent 45%),
    linear-gradient(115deg, transparent 30%, var(--glanz-1) 44%, var(--glanz-2) 54%, transparent 66%);
  background-size: 100% 100%, 260% 260%;
  background-position: center, var(--gx) var(--gy);
  opacity: .26;
  animation: folie 8s ease-in-out infinite alternate;
}

/* Leiste unter dem Bild: Figur und Welt */
.karte .leiste {
  margin: 5px 14px 0; padding: 3px 8px; border-radius: 3px; text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .75), rgba(255, 255, 255, .25));
  font-size: .64rem; font-style: italic; font-weight: 600; color: var(--schrift);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.karte .kartenfuss { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px 9px; }
.karte .kartenfuss .nr { font-family: var(--f-zahl); font-size: .62rem; font-weight: 600; color: var(--akzentfarbe); }
.karte .kartenfuss em {
  font-style: normal; font-family: var(--f-anzeige); font-weight: 800; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rand-farbe); background: var(--schrift); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
/* Schmale Karten (drei nebeneinander im Profil, am Handy): Fußzeile verkleinern, damit „Gewöhnlich“ nicht übersteht */
.karte { container-type: inline-size; }
@container (max-width: 170px) {
  .kartenfuss { padding: 6px 7px 8px; gap: 4px; }
  .kartenfuss .nr { font-size: .5rem; }
  .kartenfuss em { font-size: .48rem; letter-spacing: .03em; padding: 2px 5px; }
}
@container (max-width: 125px) {
  .kartenfuss .nr { display: none; }
  .kartenfuss { justify-content: center; }
}
@media (max-width: 420px) {
  .karte { padding: 5px; border-radius: 12px; }
  .karte::before { inset: 5px; border-radius: 8px; }
  .karte .kartenkopf b { font-size: .78rem; }
  .karte .steine i { width: 6px; height: 6px; }
  .karte .motiv { margin: 0 5px; }
  .karte .leiste { margin-inline: 8px; }
}

.konto { display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Avatar-Platzhalter: Twitch-Bild kommt später, bis dahin Initiale */
.profil-kopf .avatar { display: grid; place-items: center; background: var(--violett); color: var(--akzent); font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(3rem, 7vw, 5.5rem); }
.avatar-klein { width: 36px; height: 36px; display: grid; place-items: center; background: var(--flaeche-hell); color: var(--akzent); font-family: var(--f-anzeige); font-weight: 900; }
.profil-kopf .innen + .innen { display: block; }
.xp-buch .mehr { justify-self: start; }

/* Schmale Bildschirme: Ränge in zwei Spalten, Kartentitel mit Silbentrennung statt Bruch mitten im Wort */
.raenge-liste .n { overflow-wrap: normal; hyphens: auto; }
@media (max-width: 520px) {
  .raenge-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Anmeldeseite (Tor vor der Seite) ---------- */
.tor-seite { min-height: 100vh; display: flex; flex-direction: column; }
.tor { flex: 1; display: grid; align-items: center; padding-block: clamp(40px, 7vw, 96px); }
.tor .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tor-text { display: grid; gap: 24px; align-content: center; min-width: 0; }
.tor-text .marke { font-size: 2rem; }
.tor-text h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.025em; line-height: .92; }
.tor-text .unter { margin: 0; font-size: 1.15rem; color: var(--text-matt); max-width: 44ch; }
.tor-text .klein { margin: 0; font-size: .85rem; color: var(--text-matt); max-width: 52ch; }
.tor-text .klein a { color: var(--akzent); }
.tor-karten { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; padding-block: 40px; }
.tor-karten .karte:nth-child(1) { rotate: -6deg; translate: 2% 5%; }
.tor-karten .karte:nth-child(2) { rotate: -1deg; translate: 0 -4%; z-index: 1; }
.tor-karten .karte:nth-child(3) { rotate: 5deg; translate: 0 4%; z-index: 2; }
@media (max-width: 860px) {
  .tor .innen { grid-template-columns: minmax(0, 1fr); }
  .tor-karten { order: -1; max-width: 420px; padding-block: 8px 16px; }
}
.tor-seite .fuss .regel { margin-left: auto; }
.heute { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--text-matt); }
.heute .wert { font-family: var(--f-anzeige); font-weight: 900; font-size: 1.8rem; color: var(--orange); }

/* ---------- Echte Seite (PHP) ---------- */
.spieler iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spieler.geladen::after { display: none; }
.live-marke.aus { background: var(--flaeche-hell); color: var(--text-matt); }
.live-marke.aus::before { animation: none; background: var(--text-matt); }
.leer { color: var(--text-matt); margin: 0; max-width: 60ch; }
.meldung { margin: 0; padding: 12px 16px; background: var(--flaeche-hell); border-left: 4px solid var(--akzent); max-width: 60ch; }
.fehler { margin: 0; color: var(--orange); }
.profil-kopf img.avatar { display: block; }
img.avatar-klein { object-fit: cover; padding: 0; }
.konto form { display: contents; }
.schmal { max-width: 760px; }
.schmal h2 { margin-bottom: 20px; }
.schmal .unter { color: var(--text-matt); max-width: 60ch; }
.formular { display: grid; gap: 12px; margin-top: 24px; }
.formular label { font-weight: 600; }
.formular input { font: inherit; color: var(--text); background: var(--flaeche); border: 2px solid var(--linie); padding: 12px 14px; max-width: 420px; border-radius: 0; }
.formular input:focus { outline: none; border-color: var(--akzent); }
.kontakt-formular input, .kontakt-formular textarea { width: 100%; max-width: 560px; }
.formular textarea { font: inherit; color: var(--text); background: var(--flaeche); border: 2px solid var(--linie); padding: 12px 14px; border-radius: 0; resize: vertical; }
.formular textarea:focus { outline: none; border-color: var(--akzent); }
.kontakt-formular .knopf { justify-self: start; }
.versteckt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.einrichtung { display: grid; gap: 14px; }
.einrichtung h3 { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin-top: 20px; }
.einrichtung p { margin: 0; }
.liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.liste dt { color: var(--text-matt); }
.liste dd { margin: 0; overflow-wrap: anywhere; }
/* Echte Twitch-Titel sind lang: in Liste und Clips höchstens drei Zeilen */
.vod-liste .vod h3, .clip h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.vod.gross h3 { overflow-wrap: anywhere; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; display: grid; gap: 14px; }
.rechtstext h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; hyphens: manual; margin-bottom: 8px; }
.rechtstext h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 22px; letter-spacing: 0; }
.rechtstext p, .rechtstext ul { margin: 0; max-width: 68ch; color: var(--text); }
.rechtstext ul { padding-left: 1.2em; display: grid; gap: 6px; }
.rechtstext li::marker { color: var(--akzent); }
.rechtstext a { color: var(--akzent); text-underline-offset: 3px; }
.rechtstext .stand { color: var(--text-matt); font-family: var(--f-zahl); font-size: .85rem; }
.rechtstext .offen { padding: 10px 14px; border-left: 4px solid var(--orange); background: var(--flaeche); color: var(--text-matt); font-size: .9rem; }
.rechtstext .hinweis { margin-top: 24px; color: var(--text-matt); font-size: .85rem; }
.waehlbar { user-select: all; font-family: var(--f-zahl); }

/* ---------- Fehlerseite ---------- */
.fehlerseite { padding-block: clamp(56px, 10vw, 140px); }
.fehlerseite .innen { display: grid; gap: 20px; justify-items: start; }
.fehlerseite .code { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(6rem, 20vw, 14rem); line-height: .8; color: var(--akzent); letter-spacing: -.04em; }
.fehlerseite h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; text-transform: uppercase; }
.fehlerseite .unter { margin: 0; color: var(--text-matt); }
/* Lange Streamtitel von Twitch: kleinere Stufe, höchstens vier Zeilen */
.live-text h1.lang { font-size: clamp(1.7rem, 2.7vw, 2.6rem); line-height: 1.02; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* ---------- Packs ---------- */
.pack-seite { padding-block: clamp(32px, 6vw, 72px); }
.pack-start { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
@media (max-width: 760px) { .pack-start { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .pack-start .pack-text { justify-items: center; } }
.pack-text { display: grid; gap: 16px; justify-items: start; }
.pack-text h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; text-transform: uppercase; }
.pack-text .unter { margin: 0; color: var(--text-matt); max-width: 44ch; }
.pack-text .klein { margin: 0; font-size: .85rem; max-width: 52ch; }
.guthaben-zeile { margin: 0; color: var(--text-matt); font-weight: 600; }
.guthaben-zeile .wert { font-family: var(--f-anzeige); font-weight: 900; font-size: 1.8rem; color: var(--orange); margin-right: 6px; }

/* Die Pack-Hülle wie ein echter Booster (Patrick, 30.10.2026: „mehr Design, Logo, mehr Orange“):
   versiegelte, gerippte Folienränder mit Zacken, violetter Körper mit orangem Diagonalband und
   Lichtstrahlen, das runde PamaHQ-Logo im Ring, Folienglanz, der darüberwandert. */
.pack-huelle {
  position: relative; width: min(300px, 70vw); aspect-ratio: 5 / 8; border: 0; padding: 0; cursor: pointer;
  display: grid; grid-template-rows: auto 1fr auto; color: #fff; font: inherit; text-align: center;
  background: none; isolation: isolate;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  transition: transform .2s ease;
}
.pack-huelle.zu:hover { transform: translateY(-6px) rotate(-1.5deg); }

/* Siegelränder oben und unten: silbrig gerippt, außen gezackt */
.pack-huelle .naht {
  position: relative; z-index: 2; height: 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, rgba(0, 0, 0, .18) 2px 4px),
    linear-gradient(180deg, #f4d9b3, #c98a4a 45%, #ffe2b8 70%, #b9773b);
}
.pack-huelle .naht.oben {
  -webkit-mask: linear-gradient(#000, #000) 0 7px / 100% 100% no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 12px 8px repeat-x;
          mask: linear-gradient(#000, #000) 0 7px / 100% 100% no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 12px 8px repeat-x;
  border-radius: 0 0 3px 3px;
}
.pack-huelle .naht.unten {
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 12px 8px repeat-x;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 12px 8px repeat-x;
  border-radius: 3px 3px 0 0;
}
/* Reißlinie unter der oberen Naht */
.pack-huelle .naht.oben::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -8px; height: 0;
  border-top: 2px dashed rgba(255, 255, 255, .45);
}

.pack-huelle .koerper {
  position: relative; z-index: 1; margin: -2px 0; overflow: hidden;
  display: grid; align-content: center; justify-items: center; gap: 10px; padding: 26px 16px 18px;
  background:
    linear-gradient(118deg, transparent 0 52%, #ff8022 52% 60%, #ffb35c 60% 62%, transparent 62%),
    linear-gradient(118deg, transparent 0 64%, rgba(255, 128, 34, .35) 64% 68%, transparent 68%),
    radial-gradient(ellipse at 50% 32%, #b756ff 0%, #5d1aa8 38%, #24063f 72%, #0b0a0e 100%);
  box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, .7), inset -6px 0 10px -6px rgba(0, 0, 0, .7);
}
/* Orange Lichtstrahlen hinter dem Logo */
.pack-huelle .strahlen {
  position: absolute; z-index: -1; left: 50%; top: 34%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 128, 34, .38) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
          mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: strahlen 40s linear infinite;
}
@keyframes strahlen { to { rotate: 360deg; } }
/* Folienglanz über allem */
.pack-huelle .koerper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 58%);
  background-size: 260% 100%;
  animation: huelle-glanz 4.5s ease-in-out infinite alternate;
}
@keyframes huelle-glanz { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.pack-huelle .logo {
  width: 46%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 9px #ff8022, 0 0 0 11px #2a0a4a, 0 10px 30px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 128, 34, .55);
}
.pack-huelle .marke { margin-top: 10px; font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(2.2rem, 7.5vw, 3rem); letter-spacing: -.02em; line-height: .9; text-shadow: 0 3px 0 #2a0a4a, 0 6px 16px rgba(0, 0, 0, .5); }
.pack-huelle .marke b { color: var(--orange); }
.pack-huelle .untertitel { font-family: var(--f-anzeige); font-weight: 800; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; margin-top: -4px; padding-left: .32em; }
.pack-huelle .inhalt {
  font-family: var(--f-anzeige); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem;
  color: var(--tinte); background: linear-gradient(180deg, #ffb35c, #ff8022); padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 3px 0 #9a3f00, 0 6px 14px rgba(0, 0, 0, .4);
}
.pack-huelle .figuren { font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
.pack-huelle.zu .inhalt { animation: tippen 1.6s ease-in-out infinite; }
@keyframes tippen { 50% { scale: 1.06; } }

.pack-buehne { position: relative; min-height: min(78vh, 720px); display: grid; place-items: center; gap: 18px; }
.pack-buehne .funken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.pack-buehne.offen .pack-huelle { animation: aufreissen .8s ease-in forwards; }
.pack-buehne.offen.schein-legendaer .pack-huelle, .pack-buehne.offen.schein-fullart .pack-huelle { animation: beben .5s linear 2, aufreissen .6s ease-in .5s forwards; }
@keyframes aufreissen { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(.4) translateY(-40%); opacity: 0; } }
@keyframes beben { 0%, 100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -4px 3px; } 80% { translate: 3px -2px; } }

/* Farbiger Schein nach der besten Karte, auch bei reduzierter Bewegung */
.pack-buehne::before { content: ""; position: absolute; inset: 10% 15%; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.pack-buehne.offen::before { opacity: .32; }
.schein-gewoehnlich::before { background: #d9d6e0; }
.schein-selten::before { background: #4aa8ff; }
.schein-episch::before { background: #b756ff; }
.schein-legendaer::before { background: #ff8022; }
.schein-fullart::before { background: conic-gradient(#ff5ad9, #a35cff, #47c8ff, #58ffb8, #fff06a, #ff8022, #ff5ad9); }
.pack-buehne.offen.schein-fullart::before { opacity: .5; }
/* Weihnachtspacks: Schein in Weiß und Gold statt Seltenheitsfarbe, der Blitz warm wie Kerzenlicht */
.pack-buehne.weihnachten.schein-gewoehnlich::before, .pack-buehne.weihnachten.schein-selten::before { background: radial-gradient(circle, #ffffff, #dcecff 60%); }
.pack-buehne.weihnachten.schein-episch::before { background: radial-gradient(circle, #fff6dc, #f0c768 70%); }
.pack-buehne.weihnachten.schein-legendaer::before { background: radial-gradient(circle, #fff1c4, #ffc23d 55%, #d11a35); }
.pack-buehne.weihnachten.schein-fullart::before { background: conic-gradient(#ffd66b, #ffffff, #d11a35, #fff1c4, #ffd66b, #ffffff, #d11a35, #ffd66b); }
.pack-buehne.weihnachten.offen::before { opacity: .45; }
.pack-buehne.weihnachten.blitz::after { background: radial-gradient(circle at 50% 40%, #ffffff, #fff1c4 45%, #ffd66b); }
.pack-buehne.blitz::after { content: ""; position: fixed; inset: 0; background: #fff3d6; pointer-events: none; z-index: 30; animation: blitz .7s ease-out .45s both; }
@keyframes blitz { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }

.stapel { position: relative; width: min(320px, 78vw); aspect-ratio: 5 / 8.6; cursor: pointer; touch-action: pan-y; outline: none; }
.stapel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 8px; border-radius: 16px; }
.stapel-karte { position: absolute; inset: 0; transition: translate .38s ease-in, rotate .38s ease-in, opacity .38s ease-in; }
.stapel-karte .karte { height: 100%; }
.stapel-karte:nth-last-child(2) { translate: 0 6px; rotate: 2deg; }
.stapel-karte:nth-last-child(3) { translate: 0 12px; rotate: -2deg; }
.stapel-karte:nth-last-child(n+4) { translate: 0 18px; rotate: 1deg; }
.stapel-karte.weg { translate: calc(var(--richtung, 1) * 130%) -12%; rotate: calc(var(--richtung, 1) * 24deg); opacity: 0; }
.stapel-hinweis { margin: 0; color: var(--text-matt); font-size: .9rem; text-align: center; }
.stapel-hinweis button { font: inherit; color: var(--akzent); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }

.ergebnis { display: grid; gap: 22px; justify-items: center; width: 100%; }
.ergebnis-karten { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
@media (max-width: 900px) { .ergebnis-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ergebnis-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Marke auf einer Karte: Neu, Doppelt, Anzahl */
.karten-marke {
  position: absolute; z-index: 3; top: -6px; right: -6px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--f-anzeige); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.karten-marke.neu { background: var(--orange); color: var(--tinte); }
.karten-marke.doppelt { background: var(--flaeche-hell); color: var(--text); }
.karten-marke.anzahl { background: var(--akzent); color: var(--tinte); }
.karte:has(.karten-marke) { overflow: visible; }

/* ---------- Sammlung ---------- */
.sammlung-kopf { padding-block: clamp(32px, 5vw, 56px) 0; }
.sammlung-kopf .innen { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; }
.sammlung-kopf h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; text-transform: uppercase; }
.sammlung-kopf .unter { margin: 8px 0 0; color: var(--text-matt); }
.sammlung-pack { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sammlung-welt { padding-block: 36px 0; }
.sammlung-welt:last-of-type { padding-bottom: 72px; }
.sammlung-welt h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.welt-stand { font-family: var(--f-zahl); font-size: .85rem; color: var(--text-matt); padding: 4px 10px; border: 1px solid var(--linie); border-radius: 999px; }
.welt-stand.komplett { color: var(--tinte); background: var(--orange); border-color: var(--orange); font-family: var(--f-anzeige); font-weight: 800; text-transform: uppercase; }
.sammlung-karten { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
@media (max-width: 720px) { .sammlung-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Rückseite für fehlende Karten: gleiche Gestaltung wie die Pack-Hülle, aber gedämpft */
.karte-ruecken {
  position: relative; aspect-ratio: 5 / 8.4; border-radius: 16px; padding: 7px; overflow: hidden;
  background: #3a3046;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.karte-ruecken::before {
  content: ""; position: absolute; inset: 7px; border-radius: 10px;
  background:
    linear-gradient(118deg, transparent 0 54%, rgba(255, 128, 34, .55) 54% 60%, transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 128, 34, .12) 0 6deg, transparent 6deg 18deg),
    radial-gradient(ellipse at 50% 38%, #5d1aa8 0%, #2a0a4a 50%, #120d1b 100%);
}
.karte-ruecken > * { position: relative; }
.karte-ruecken { display: grid; place-content: center; justify-items: center; gap: 8px; color: rgba(255, 255, 255, .75); }
.karte-ruecken .logo { width: 42%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; opacity: .55; filter: grayscale(.4); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 6px rgba(255, 128, 34, .6); }
.karte-ruecken .marke { font-size: 1.05rem; margin-top: 4px; }
.karte-ruecken .marke b { color: var(--orange); }
.karte-ruecken .nr { font-family: var(--f-zahl); font-size: .72rem; background: rgba(0, 0, 0, .4); padding: 2px 8px; border-radius: 999px; }
.kennzahl.guthaben .wie a { color: var(--tinte); font-weight: 700; }
.sammlung .konto { margin-top: 4px; }

/* ---------- Stufe 3: Community ---------- */
.community-kopf { padding-block: clamp(28px, 4vw, 48px) 0; }
.community-kopf .innen { display: grid; gap: 14px; justify-items: start; }
.community-kopf h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; text-transform: uppercase; }
.community-kopf .unter { margin: 0; color: var(--text-matt); max-width: 60ch; }
.reiter { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
.reiter a, .umschalter a { font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; padding: 8px 14px; background: var(--flaeche); color: var(--text-matt); }
.reiter a:hover, .umschalter a:hover { color: var(--text); }
.reiter a[aria-current="page"] { background: var(--flaeche-hell); color: var(--text); box-shadow: inset 0 -3px 0 var(--akzent); }
.filter { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 8px; }
.umschalter { display: flex; flex-wrap: wrap; gap: 2px; }
.umschalter a[aria-current="true"] { background: var(--akzent); color: var(--tinte); }

/* Sammlung: Filter nach Seltenheit, die Farbe der Seltenheit als Unterstrich */
.seltenheit-filter { flex-wrap: wrap; margin-top: 24px; }
.seltenheit-filter a { border-bottom: 3px solid transparent; }
.seltenheit-filter a .zahl { font-family: var(--f-zahl); font-weight: 500; font-size: .8em; opacity: .75; margin-left: 4px; }
.seltenheit-filter a.legendaer { border-bottom-color: #ff8022; }
.seltenheit-filter a.episch { border-bottom-color: #b756ff; }
.seltenheit-filter a.selten { border-bottom-color: #4aa8ff; }
.seltenheit-filter a.gewoehnlich { border-bottom-color: #9e99a9; }

/* Sammlung: Karte vergrößert */
.sammlung-karten .karte { cursor: zoom-in; }
.karten-gross { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; }
.karten-gross::backdrop { background: rgba(5, 4, 8, .86); backdrop-filter: blur(6px); }
.karten-gross .buehne { display: grid; place-items: center; width: 100%; height: 100%; padding: 56px 16px 24px; cursor: zoom-out; }
.karten-gross .karte { width: min(440px, 88vw, calc((100dvh - 110px) * .6)); cursor: default; animation: karte-auf .28s ease-out; }
.karten-gross .karte .kartenkopf b { font-size: 1.35rem; }
.karten-gross .karte .leiste { font-size: .85rem; }
.karten-gross .karte .kartenfuss .nr { font-size: .8rem; }
.karten-gross .karte .kartenfuss em { font-size: .78rem; }
.karten-gross .zu {
  position: fixed; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border: 2px solid var(--flaeche-hell);
  background: var(--grund); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.karten-gross .zu:hover { border-color: var(--akzent); }
@keyframes karte-auf { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }

.bestenliste-abschnitt { padding-top: 28px; }
.bestenliste-abschnitt .meldung { margin-bottom: 20px; }
.meldung a { color: var(--akzent); }
.bestenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bestenliste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--flaeche); padding: 10px 16px 10px 0; }
.bestenliste .platz { text-align: center; font-weight: 700; color: var(--text-matt); }
.bestenliste .wert { font-family: var(--f-anzeige); font-weight: 900; font-size: 1.35rem; color: var(--orange); white-space: nowrap; }
.bestenliste .wert small { font-size: .7rem; font-weight: 700; color: var(--text-matt); letter-spacing: .06em; }
.bestenliste .podest .platz { font-family: var(--f-anzeige); font-weight: 900; font-size: 1.5rem; color: var(--text); }
.bestenliste .p1 { box-shadow: inset 4px 0 0 var(--orange); }
.bestenliste .p1 .platz { color: var(--orange); }
.bestenliste .selbst { background: var(--flaeche-hell); box-shadow: inset 4px 0 0 var(--akzent); }
.spieler-name { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; font-weight: 600; flex-wrap: wrap; }
.spieler-name > span:first-of-type { overflow-wrap: anywhere; }
.spieler-name:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.spieler-name .avatar-klein { flex: none; }
.nur-du { font-family: var(--f-zahl); font-size: .7rem; font-weight: 400; color: var(--text-matt); border: 1px solid var(--linie); padding: 1px 6px; }

.freunde-oben { padding-top: 32px; }
.code-kasten { display: grid; gap: 12px; align-content: start; background: var(--flaeche); padding: 24px; }
.code-kasten h2, .code-eingabe h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.code-kasten p { margin: 0; }
.mein-code { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: .08em; color: var(--orange); line-height: 1; }
.code-eingabe { margin-top: 0; align-content: start; }
.code-eingabe input { font-family: var(--f-zahl); font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; }
.knopf.klein { padding: 8px 12px; font-size: .9rem; }
.freunde-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.freunde-liste li { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto; gap: 12px 20px; align-items: center; background: var(--flaeche); padding: 12px 16px; }
.freunde-liste form { display: contents; }
.freund-werte { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; color: var(--text-matt); }
.freund-werte b { color: var(--text); }
.freund-werte b.orange { color: var(--orange); }
@media (max-width: 640px) { .freunde-liste li { grid-template-columns: minmax(0, 1fr) auto; } .freund-werte { grid-column: 1 / -1; grid-row: 2; } }

.schalter-liste { display: grid; gap: 2px; margin-top: 20px; }
.schalter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; background: var(--flaeche); padding: 16px 18px; cursor: pointer; }
.schalter.weit { margin-top: 12px; box-shadow: inset 4px 0 0 var(--orange); }
.schalter .was { display: grid; gap: 2px; }
.schalter .was span { font-size: .9rem; color: var(--text-matt); }
.schalter input { appearance: none; width: 46px; height: 26px; margin: 0; background: var(--flaeche-hell); box-shadow: inset 0 0 0 2px var(--linie); position: relative; cursor: pointer; flex: none; }
.schalter input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: var(--text-matt); transition: translate .15s ease; }
.schalter input:checked { background: var(--akzent); box-shadow: none; }
.schalter input:checked::after { background: var(--tinte); translate: 20px 0; }
.schalter input:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.schalter-liste .konto { margin-top: 18px; }
.schalter-liste .meldung { margin-top: 12px; }

.vorschau-band { background: var(--akzent); color: var(--tinte); font-weight: 600; padding-block: 10px; }
.vorschau-band a { color: var(--tinte); }
/* Testmodus des Betreibers: auffällig, damit niemand vergisst, dass er im Testkonto ist */
.test-band { position: sticky; top: 0; z-index: 40; background: repeating-linear-gradient(135deg, #ff8022 0 18px, #f06d10 18px 36px); color: var(--tinte); font-weight: 600; padding-block: 8px; font-size: .9rem; }
.test-band .innen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.test-band b { font-family: var(--f-anzeige); text-transform: uppercase; letter-spacing: .06em; background: var(--tinte); color: #ff8022; padding: 2px 8px; }
.test-band a { color: var(--tinte); margin-right: 6px; }
.test-band .test-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.test-band form { margin: 0; }
.test-band button { font: inherit; font-size: .82rem; cursor: pointer; border: 0; padding: 5px 10px; background: var(--tinte); color: #fff; }
.test-band button:hover { color: #ff8022; }
@media (max-width: 700px) {
  .test-band { position: static; font-size: .8rem; padding-block: 6px; }
  .test-band .innen > span:first-of-type { display: none; }
  .test-band .test-knoepfe { margin-left: 0; }
  .test-band button { padding: 4px 8px; font-size: .75rem; }
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.knopfreihe form { margin: 0; }
.freund-marke { color: var(--akzent); font-weight: 700; }
.spieler-zahlen .innen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Auf dem Handy war die Navigation bisher ganz ausgeblendet. Jetzt als waagerecht wischbare Zeile. */
@media (max-width: 760px) {
  .kopf .innen { flex-wrap: wrap; row-gap: 0; }
  .navi { display: flex; order: 3; width: 100%; margin: 0; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
  .navi::-webkit-scrollbar { display: none; }
  .navi a { white-space: nowrap; }
}
/* Schmale Inhalte auf Community-Seiten bündig mit der Überschrift statt mittig */
.bestenliste-abschnitt .innen.schmal, #sichtbarkeit .innen.schmal { max-width: var(--breite); }
.bestenliste-abschnitt .innen.schmal > *, #sichtbarkeit .innen.schmal > * { max-width: 760px; }

/* ---------- Anfragen, Tausch, Betreiber (30.10.2026) ---------- */
.zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px; background: var(--orange); color: var(--tinte); font-family: var(--f-zahl); font-size: .72rem; font-weight: 700; letter-spacing: 0; vertical-align: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form.inline { display: inline; }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.beziehung { font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; color: var(--text-matt); padding: 6px 10px; border: 1px solid var(--linie); justify-self: end; }
.beziehung.freund { color: var(--akzent); border-color: var(--akzent); }
.unterkopf { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; margin: 32px 0 12px; color: var(--text-matt); }
.suche { margin-top: 0; }
.suche h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.suche-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.suche-zeile input { flex: 1 1 220px; }
.treffer { margin-top: 16px; }
.freunde-liste.treffer li { grid-template-columns: minmax(0, 1fr) 0 auto; }
.profil-kopf .wer .konto, .profil-kopf .wer > div { margin-top: 6px; }

/* Karten auswählen */
.karte-wahl { position: relative; display: block; cursor: pointer; }
.karte-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 3; }
.karte-wahl .haken { position: absolute; z-index: 4; top: -8px; left: -8px; width: 30px; height: 30px; background: var(--grund); box-shadow: inset 0 0 0 2px var(--linie); pointer-events: none; }
.karte-wahl input:checked ~ .haken { background: var(--akzent); box-shadow: none; }
.karte-wahl input:checked ~ .haken::after { content: ""; position: absolute; left: 10px; top: 5px; width: 7px; height: 14px; border: solid var(--tinte); border-width: 0 3px 3px 0; rotate: 45deg; }
.karte-wahl input:checked ~ .karte { outline: 4px solid var(--akzent); outline-offset: 3px; }
.karte-wahl input:focus-visible ~ .haken { outline: 3px solid var(--text); outline-offset: 2px; }
.karte-wahl:not(:has(input:checked)) .karte { opacity: .92; }
.tausch-wahl { padding-bottom: 96px; }
.wahl-leiste { position: sticky; bottom: 0; z-index: 20; background: var(--flaeche-hell); border-top: 2px solid var(--akzent); padding-block: 12px; margin-top: 32px; }
.wahl-leiste .innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wahl-leiste .knopf[disabled] { opacity: .45; cursor: not-allowed; }
.wahl-leiste.voll span { color: var(--orange); }

/* Angebote */
.tausch-karten { grid-template-columns: repeat(auto-fill, minmax(110px, 150px)); gap: 12px; }
.sammlung-kopf .tausch-karten { margin-top: 20px; }
.angebot { background: var(--flaeche); padding: 20px; display: grid; gap: 16px; margin-bottom: 2px; }
.angebot header { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.angebot-seiten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.angebot-seiten h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-matt); margin-bottom: 10px; }
.angebot-seiten > div:first-child h3 { color: var(--orange); }
@media (max-width: 640px) { .angebot-seiten { grid-template-columns: minmax(0, 1fr); } }

/* Betreiber */
.betreiber-kasten { background: var(--flaeche); padding: 24px; margin-top: 0; align-content: start; }
.betreiber-kasten h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.betreiber-kasten p { margin: 0; }
.warn-kasten { box-shadow: inset 4px 0 0 var(--orange); }
.haken-zeile { display: flex; gap: 10px; align-items: center; font-weight: 400 !important; }
.haken-zeile input { width: 20px; height: 20px; accent-color: var(--orange); }
.tabelle-rahmen { overflow-x: auto; margin-top: 24px; }
.betreiber-tabelle { width: 100%; border-collapse: collapse; min-width: 760px; }
.betreiber-tabelle th { text-align: left; font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; color: var(--text-matt); padding: 10px 12px; border-bottom: 2px solid var(--linie); white-space: nowrap; }
.betreiber-tabelle td { padding: 8px 12px; border-bottom: 1px solid var(--flaeche-hell); white-space: nowrap; }
.betreiber-tabelle td.zahl, .betreiber-tabelle th:not(:first-child) { text-align: right; }
.betreiber-tabelle .orange { color: var(--orange); font-weight: 700; }
.betreiber-tabelle tbody tr:hover { background: var(--flaeche); }
.rang a { color: inherit; }
.sammlung-kopf .innen.tausch-oben { display: block; }
.karte-wahl .haken { top: -12px; left: -12px; width: 28px; height: 28px; }
.karte-wahl input:checked ~ .haken::after { left: 9px; top: 4px; }
.wahl-raster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; }
@media (max-width: 520px) { .wahl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
/* Lange Knöpfe (z. B. „Freundschaftsanfrage senden“) dürfen auf schmalen Bildschirmen umbrechen */
@media (max-width: 520px) {
  .profil-kopf .knopf, .freunde-liste .knopf, .angebot .knopf, .wahl-leiste .knopf { white-space: normal; text-align: left; }
  .freunde-liste li { grid-template-columns: minmax(0, 1fr); }
  .freunde-liste .knopf-reihe { justify-content: flex-start; }
}

/* ---------- Rotationsmaschine (Patrick, 30.10.2026) ----------
   Gehäuse mit Lauflichtern, im Fenster rattert eine Walze aus Kartenrückseiten. Nach dem Dreh bleibt sie stehen
   und die gezogene Karte dreht sich auf, mit Schein in der Farbe der Seltenheit. Ohne Bewegung (reduced motion)
   steht die Karte sofort da, weil alle Animationen ihren Zustand nur über „both“ setzen. */
.maschine-seite { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
@media (max-width: 760px) { .maschine-seite { grid-template-columns: minmax(0, 1fr); justify-items: center; } .maschine-text { text-align: center; justify-items: center; } }
.maschine {
  --schein: #b756ff;
  position: relative; width: min(380px, 100%); padding: 26px 22px 30px; border-radius: 30px;
  background: linear-gradient(180deg, #2a1442 0%, #160c24 55%, #0d0816 100%);
  box-shadow: 0 0 0 3px #3d2160, 0 0 0 7px #120a1d, 0 0 0 9px rgba(183, 86, 255, .55), 0 24px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(183, 86, 255, .25);
  display: grid; justify-items: center; gap: 14px;
}
.maschine-lichter { position: absolute; inset: 9px 22px; pointer-events: none; display: grid; grid-template-columns: repeat(9, 9px); justify-content: space-between; align-content: space-between; }
.maschine-lichter i { width: 9px; height: 9px; border-radius: 50%; background: #ff8022; box-shadow: 0 0 8px #ff8022; animation: lauflicht 1.2s steps(1) infinite; }
.maschine-lichter i:nth-child(2n) { background: #b756ff; box-shadow: 0 0 8px #b756ff; animation-delay: .6s; }
@keyframes lauflicht { 50% { opacity: .25; box-shadow: none; } }
.maschine-name { margin: 0; font-family: var(--f-anzeige); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; color: #fff; }
.maschine-name b { color: var(--akzent); }
.maschine-fenster {
  position: relative; width: 100%; aspect-ratio: 5 / 6.6; overflow: hidden; border-radius: 18px; background: #07050b;
  box-shadow: inset 0 0 0 3px #3d2160, inset 0 18px 30px rgba(0, 0, 0, .8), inset 0 -18px 30px rgba(0, 0, 0, .8);
}
.maschine-fenster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 5, 11, .9), transparent 22%, transparent 78%, rgba(7, 5, 11, .9)); }
.walze { display: grid; gap: 14px; width: 66%; margin: 0 auto; padding-top: 8%; animation: walze-leer 40s linear infinite alternate; }
.walze .karte-ruecken { box-shadow: none; }
@keyframes walze-leer { to { transform: translateY(-70%); } }
/* Nach dem Dreh: maschine.js misst das Ziel und setzt --ziel, erst dann läuft die Walze los */
.maschine.laeuft .walze { animation: none; }
.maschine.los .walze { animation: walze-dreh 2.6s cubic-bezier(.12, .7, .18, 1) both; }
@keyframes walze-dreh { from { transform: translateY(0); filter: blur(0); } 12% { filter: blur(3px); } 82% { filter: blur(.6px); } to { transform: translateY(var(--ziel, 0)); filter: blur(0); } }
.maschine.los .walze .ziel { animation: ziel-leuchten .5s ease-out 2.6s both; }
@keyframes ziel-leuchten { 50% { scale: 1.08; } to { scale: 1.04; box-shadow: 0 0 34px var(--r-farbe), 0 0 0 3px var(--r-farbe); } }

/* Rückseiten mit Seltenheit (Rotationsmaschine): Rahmen, Schein, Steine und Schild in der Farbe der Stufe */
.karte-ruecken[class*=" r-"] { background: var(--r-farbe); color: #fff; }
/* Die ganze Rückseite in der Farbe der Seltenheit, mit hellem Glanz von oben und dunklerem Grund unten */
.karte-ruecken[class*=" r-"]::before {
  background:
    linear-gradient(118deg, transparent 0 54%, rgba(255, 255, 255, .28) 54% 60%, transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, .14) 0 6deg, transparent 6deg 18deg),
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r-farbe) 70%, #fff) 0%, var(--r-farbe) 45%, color-mix(in srgb, var(--r-farbe) 55%, #000) 100%);
}
.karte-ruecken.r-fullart::before {
  background:
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, .18) 0 6deg, transparent 6deg 18deg),
    conic-gradient(from 30deg at 50% 45%, #ff5ad9, #a35cff, #47c8ff, #58ffb8, #fff06a, #ff8022, #ff5ad9);
}
.karte-ruecken[class*=" r-"] .marke { text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.karte-ruecken[class*=" r-"] .marke b { color: #fff; }
.karte-ruecken[class*=" r-"] .logo { opacity: 1; filter: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 0 6px rgba(0, 0, 0, .25); }
.karte-ruecken[class*=" r-"] .schild { background: rgba(10, 6, 16, .82); color: #fff; }
.karte-ruecken[class*=" r-"] .steine i { background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--r-farbe) 60%, #fff)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.karte-ruecken.r-gewoehnlich { --r-farbe: #b9b5c2; }
.karte-ruecken.r-selten { --r-farbe: #4aa8ff; }
.karte-ruecken.r-episch { --r-farbe: #b756ff; }
.karte-ruecken.r-legendaer { --r-farbe: #ff8022; }
.karte-ruecken.r-fullart { --r-farbe: #ff5ad9; background: conic-gradient(#ff5ad9, #a35cff, #47c8ff, #58ffb8, #fff06a, #ff8022, #ff5ad9); }
.karte-ruecken .steine { position: absolute; top: 9%; display: flex; gap: 5px; }
.karte-ruecken .steine i { width: 9px; height: 9px; rotate: 45deg; border-radius: 1px; background: linear-gradient(135deg, #fff, var(--r-farbe)); box-shadow: 0 0 6px var(--r-farbe); }
.karte-ruecken .schild { font-family: var(--f-anzeige); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #120d1b; background: var(--r-farbe); }

.maschine-karte {
  position: absolute; left: 50%; top: 52%; width: 68%; translate: -50% -50%; z-index: 3;
  animation: karte-auftauchen .7s cubic-bezier(.2, .9, .3, 1.2) 3.15s both;
}
.maschine-karte::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--schein) 0 8deg, transparent 8deg 24deg);
  mask: radial-gradient(circle, #000 20%, transparent 68%); opacity: .55;
  animation: strahlen 14s linear infinite;
}
@keyframes karte-auftauchen { from { opacity: 0; transform: perspective(700px) rotateY(95deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes strahlen { to { rotate: 360deg; } }
.maschine.laeuft { animation: maschine-glow 1s ease-out 2.7s both; }
@keyframes maschine-glow { to { box-shadow: 0 0 0 3px #3d2160, 0 0 0 7px #120a1d, 0 0 0 9px var(--schein), 0 24px 60px rgba(0, 0, 0, .6), 0 0 90px var(--schein); } }
.maschine.schein-gewoehnlich { --schein: #d9d6e0; }
.maschine.schein-selten { --schein: #4aa8ff; }
.maschine.schein-episch { --schein: #b756ff; }
.maschine.schein-legendaer { --schein: #ff8022; }
.maschine.schein-fullart { --schein: #ff5ad9; }
.maschine.schein-fullart .maschine-karte::before { background: repeating-conic-gradient(from 0deg, #ff5ad9 0 6deg, #47c8ff 6deg 12deg, #fff06a 12deg 18deg, transparent 18deg 30deg); }
.maschine-text { display: grid; gap: 16px; align-content: start; min-width: 0; }
.maschine-text h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); overflow-wrap: anywhere; hyphens: auto; }
/* Das Ergebnis erst zeigen, wenn die Walze steht */
.maschine-text .ergebnis-titel { animation: einblenden .4s ease-out 3.3s both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chancen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; width: 100%; }
@media (max-width: 520px) { .chancen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chancen div { background: var(--flaeche); padding: 8px 12px; border-bottom: 3px solid #9e99a9; }
.chancen dt { font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; font-size: .78rem; color: var(--text-matt); }
.chancen dd { margin: 2px 0 0; font-weight: 700; }
.chancen .fullart { border-bottom-color: #ff5ad9; } .chancen .legendaer { border-bottom-color: #ff8022; }
.chancen .episch { border-bottom-color: #b756ff; } .chancen .selten { border-bottom-color: #4aa8ff; }

/* Betreiber: Clips sichten (Patrick, 31.10.2026: Clip-XP nur nach Einsicht) */
.clip-sichtung { display: grid; gap: 10px; margin-top: 16px; }
.clip-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--flaeche); padding: 10px; }
.clip-zeile.belohnt { opacity: .55; }
.clip-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.clip-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-bild .dauer { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .75); padding: 1px 6px; font-size: .75rem; }
.clip-info { display: grid; gap: 4px; min-width: 0; }
.clip-info b { overflow-wrap: anywhere; }
.clip-info a { color: var(--akzent); font-weight: 700; }
.clip-status { font-family: var(--f-anzeige); font-weight: 800; text-transform: uppercase; font-size: .8rem; color: var(--orange); }
@media (max-width: 640px) { .clip-zeile { grid-template-columns: 110px minmax(0, 1fr); } .clip-zeile form, .clip-zeile .clip-status { grid-column: 1 / -1; } }

/* Sammlung: Filterleiste mit Seltenheit und Charakter (Patrick, 31.10.2026) */
.filter-zeile { display: grid; gap: 12px; }
.filter-zeile .seltenheit-filter { margin-top: 24px; }
.figur-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.figur-filter label { font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; font-size: .8rem; color: var(--text-matt); }
.figur-filter select { min-width: 0; flex: 0 1 280px; background: var(--flaeche); color: var(--text); border: 2px solid var(--flaeche-hell); padding: 8px 10px; font: inherit; }
.figur-filter select:focus { border-color: var(--akzent); outline: none; }
.karte-wahl[hidden] { display: none; }

/* Doppelte (06.11.2026): Schalter „Nur Doppelte“ neben dem Charakterfilter und Tauschtipp in der Freundessammlung */
.figur-filter .doppelt-filter { margin-inline: 0; }
.doppelt-filter a { border-bottom: 3px solid var(--akzent); }
.doppelt-filter a .zahl { font-family: var(--f-zahl); font-weight: 500; font-size: .8em; opacity: .75; margin-left: 4px; }
.tauschtipp { margin: 12px 0 0; padding: 10px 14px; background: var(--flaeche); border-left: 4px solid var(--akzent); max-width: 60ch; }
.tauschtipp .zahl { color: var(--orange); }
.tauschtipp a { color: var(--akzent); font-weight: 600; margin-left: 4px; }

/* ---------- Weihnachten 2026 · Limited (Patrick, 06.11.2026) ----------
   Eigener Aufbau statt eingefärbter Normalkarte (Patrick, 06.11.2026: „das komplette Kartendesign soll sich unterscheiden“,
   alles mit roten Akzenten): tiefes Weinrot mit feinem Goldlinien-Muster, Bild im Bogenfenster unter einer Tannengirlande,
   Titel als Band unter dem Bild, Seltenheit als Sterne über dem Fenster. Der Rahmen zeigt die Seltenheit über sein Metall
   (Silber, Eissilber, Gold, Glanzgold). Holo und Glanz je Seltenheit bleiben. Rückseite und Pack sind wie ein verpacktes
   Geschenk, das Logo trägt Weihnachtsmütze. Muss hinter den Seltenheitsregeln stehen, weil beide gleich spezifisch sind. */
.karte.weihnachten {
  --metall: linear-gradient(135deg, #f6f7fa, #a9adb9 42%, #eef0f4 58%, #7f8390);
  --koerper-1: #a3142a; --koerper-2: #6a0b19; --koerper-3: #33050d;
  --schrift: #fff4dc; --akzentfarbe: #f0c768; --rand-farbe: #d8dbe3;
  padding: 6px; border-radius: 18px; background: var(--metall);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 18px rgba(209, 26, 53, .35);
}
.karte.weihnachten.selten { --metall: linear-gradient(135deg, #f4fbff, #9cc9ec 42%, #e8f6ff 58%, #6893bd); --rand-farbe: #cfe8fb; }
.karte.weihnachten.episch { --metall: linear-gradient(135deg, #fff3d6, #c99a4a 42%, #ffe9b3 58%, #9c6c22); --rand-farbe: #f0d48e; }
.karte.weihnachten.legendaer { --metall: linear-gradient(135deg, #fff8dc, #e6b23c 38%, #fff0b8 52%, #d08f1c 70%, #fff3c4); --rand-farbe: #ffd66b; }
.karte.weihnachten:not(.fullart)::before {
  inset: 6px; border-radius: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg transform='translate(15 15) scale(.55)'%3E%3Cg fill='none' stroke='%23f0c768' stroke-width='1' stroke-linecap='round' stroke-opacity='0.22'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(45 45) scale(.4)'%3E%3Cg fill='none' stroke='%23fff1cf' stroke-width='1' stroke-linecap='round' stroke-opacity='0.16'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 46px 46px, radial-gradient(ellipse at 50% 32%, var(--koerper-1) 0%, var(--koerper-2) 55%, var(--koerper-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(240, 199, 104, .6), inset 0 0 0 4px rgba(51, 5, 13, .6), inset 0 0 0 5px rgba(240, 199, 104, .35);
}
/* Reihenfolge: Bild, Titelband, Figur, Fuß. Die Sterne sitzen über dem Bogenfenster */
.karte.weihnachten:not(.fullart) > .motiv { order: 1; }
.karte.weihnachten:not(.fullart) > .kartenkopf { order: 2; }
.karte.weihnachten:not(.fullart) > .leiste { order: 3; }
.karte.weihnachten:not(.fullart) > .kartenfuss { order: 4; }
.karte.weihnachten > .deko { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden; }
/* Feiner Schneeglitzer am oberen Rand */
.karte.weihnachten > .deko::after {
  content: ""; position: absolute; inset: 6px 6px auto; height: 34%; border-radius: 13px 13px 0 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 .8px, transparent 1.4px) 3px 4px / 17px 13px,
    radial-gradient(circle, rgba(255, 241, 207, .7) 0 .6px, transparent 1.2px) 11px 9px / 23px 19px;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 100%); mask: linear-gradient(180deg, #000 0%, transparent 100%);
}
.karte.weihnachten:not(.fullart) > .deko::before {
  content: ""; position: absolute; top: 24px; left: 9%; right: 9%; aspect-ratio: 200 / 46;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46'%3E %3Cpath d='M4 6Q100 54 196 6' fill='none' stroke='%23b08a3e' stroke-width='1.4'/%3E %3Cpath d='M7.2 6.8L0.8 11.0M7.2 6.8L3.7 1.0M10.4 7.5L4.0 11.8M10.4 7.5L6.9 1.8M13.6 8.3L7.2 12.6M13.6 8.3L10.0 2.6M16.8 9.0L10.5 13.4M16.8 9.0L13.2 3.3M20.0 9.7L13.7 14.1M20.0 9.7L16.3 4.0M23.2 10.3L16.9 14.8M23.2 10.3L19.5 4.7M26.4 10.9L20.2 15.5M26.4 10.9L22.6 5.4M29.6 11.5L23.4 16.1M29.6 11.5L25.8 6.0M32.8 12.1L26.7 16.8M32.8 12.1L28.9 6.6M36.0 12.7L29.9 17.4M36.0 12.7L32.1 7.2M39.2 13.2L33.1 17.9M39.2 13.2L35.3 7.7M42.4 13.7L36.4 18.5M42.4 13.7L38.4 8.3M45.6 14.1L39.6 19.0M45.6 14.1L41.6 8.8M48.8 14.6L42.9 19.5M48.8 14.6L44.7 9.2M52.0 15.0L46.1 19.9M52.0 15.0L47.9 9.7M55.2 15.4L49.3 20.4M55.2 15.4L51.0 10.1M58.4 15.7L52.6 20.8M58.4 15.7L54.2 10.5M61.6 16.1L55.8 21.2M61.6 16.1L57.3 10.9M64.8 16.4L59.1 21.5M64.8 16.4L60.5 11.2M68.0 16.7L62.3 21.8M68.0 16.7L63.7 11.5M71.2 16.9L65.5 22.1M71.2 16.9L66.8 11.8M74.4 17.1L68.8 22.4M74.4 17.1L70.0 12.1M77.6 17.3L72.0 22.7M77.6 17.3L73.1 12.3M80.8 17.5L75.3 22.9M80.8 17.5L76.3 12.5M84.0 17.7L78.5 23.1M84.0 17.7L79.5 12.7M87.2 17.8L81.8 23.2M87.2 17.8L82.6 12.9M90.4 17.9L85.0 23.4M90.4 17.9L85.8 13.0M93.6 17.9L88.3 23.5M93.6 17.9L88.9 13.1M96.8 18.0L91.5 23.6M96.8 18.0L92.1 13.2M100.0 18.0L94.8 23.6M100.0 18.0L95.2 13.2M103.2 18.0L98.0 23.7M103.2 18.0L98.4 13.3M106.4 17.9L101.2 23.7M106.4 17.9L101.6 13.3M109.6 17.9L104.5 23.6M109.6 17.9L104.7 13.2M112.8 17.8L107.7 23.6M112.8 17.8L107.9 13.2M116.0 17.7L111.0 23.5M116.0 17.7L111.1 13.1M119.2 17.5L114.2 23.4M119.2 17.5L114.2 13.0M122.4 17.3L117.5 23.3M122.4 17.3L117.4 12.9M125.6 17.1L120.7 23.1M125.6 17.1L120.5 12.7M128.8 16.9L124.0 22.9M128.8 16.9L123.7 12.5M132.0 16.7L127.2 22.7M132.0 16.7L126.9 12.3M135.2 16.4L130.5 22.5M135.2 16.4L130.0 12.1M138.4 16.1L133.7 22.2M138.4 16.1L133.2 11.8M141.6 15.7L137.0 21.9M141.6 15.7L136.4 11.5M144.8 15.4L140.2 21.6M144.8 15.4L139.5 11.2M148.0 15.0L143.5 21.2M148.0 15.0L142.7 10.9M151.2 14.6L146.7 20.9M151.2 14.6L145.9 10.5M154.4 14.1L150.0 20.5M154.4 14.1L149.0 10.1M157.6 13.7L153.2 20.0M157.6 13.7L152.2 9.7M160.8 13.2L156.5 19.6M160.8 13.2L155.4 9.2M164.0 12.7L159.7 19.1M164.0 12.7L158.5 8.7M167.2 12.1L163.0 18.6M167.2 12.1L161.7 8.2M170.4 11.5L166.3 18.0M170.4 11.5L164.9 7.7M173.6 10.9L169.5 17.5M173.6 10.9L168.0 7.2M176.8 10.3L172.8 16.9M176.8 10.3L171.2 6.6M180.0 9.7L176.0 16.2M180.0 9.7L174.4 6.0M183.2 9.0L179.3 15.6M183.2 9.0L177.5 5.3M186.4 8.3L182.5 14.9M186.4 8.3L180.7 4.7M189.6 7.5L185.8 14.2M189.6 7.5L183.9 4.0M192.8 6.8L189.0 13.5M192.8 6.8L187.1 3.3' fill='none' stroke='%23f0c768' stroke-width='.9' stroke-linecap='round'/%3E %3Cline x1='38.6' y1='13.1' x2='38.6' y2='18.1' stroke='%23f0c768' stroke-width='.6'/%3E%3Ccircle cx='38.6' cy='21.1' r='3.1' fill='%23c8172f' stroke='%23f0c768' stroke-width='.8'/%3E%3Ccircle cx='37.6' cy='20.1' r='.9' fill='%23fff1cf' fill-opacity='.8'/%3E%3Cline x1='77.0' y1='17.3' x2='77.0' y2='22.3' stroke='%23f0c768' stroke-width='.6'/%3E%3Ccircle cx='77.0' cy='25.3' r='3.1' fill='%23c8172f' stroke='%23f0c768' stroke-width='.8'/%3E%3Ccircle cx='76.0' cy='24.3' r='.9' fill='%23fff1cf' fill-opacity='.8'/%3E%3Cline x1='123.0' y1='17.3' x2='123.0' y2='22.3' stroke='%23f0c768' stroke-width='.6'/%3E%3Ccircle cx='123.0' cy='25.3' r='3.1' fill='%23c8172f' stroke='%23f0c768' stroke-width='.8'/%3E%3Ccircle cx='122.0' cy='24.3' r='.9' fill='%23fff1cf' fill-opacity='.8'/%3E%3Cline x1='161.4' y1='13.1' x2='161.4' y2='18.1' stroke='%23f0c768' stroke-width='.6'/%3E%3Ccircle cx='161.4' cy='21.1' r='3.1' fill='%23c8172f' stroke='%23f0c768' stroke-width='.8'/%3E%3Ccircle cx='160.4' cy='20.1' r='.9' fill='%23fff1cf' fill-opacity='.8'/%3E%3Cpolygon points='100.0,19.8 101.3,23.2 104.9,23.4 102.1,25.7 103.1,29.2 100.0,27.2 96.9,29.2 97.9,25.7 95.1,23.4 98.7,23.2' fill='%23ffe7a3' stroke='%23b08a3e' stroke-width='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}
.karte.weihnachten:not(.fullart) .motiv {
  margin: 30px 11px 0; border-radius: 48% 48% 6px 6px / 20% 20% 6px 6px;
  background: linear-gradient(160deg, #5a0a16, #1d0308) padding-box, var(--metall) border-box;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
/* Titel als rotes Band mit Goldkante, das über den unteren Bildrand greift */
.karte.weihnachten:not(.fullart) > .kartenkopf {
  /* Ohne filter: ein Filter würde den Kopf zum Bezugsrahmen der Sterne machen, die über dem Fenster sitzen sollen */
  position: static; justify-content: center; margin-top: -15px; padding: 0 4px; min-height: 0;
}
.karte.weihnachten:not(.fullart) .kartenkopf b {
  position: relative; z-index: 2; flex: 0 1 auto; text-align: center; color: #fff4dc;
  padding: 7px 20px 6px; background: linear-gradient(180deg, #d01c36, #8e0c1f);
  box-shadow: inset 0 1.5px 0 #f0c768, inset 0 -1.5px 0 #f0c768;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  /* Immer einzeilig, lange Titel (Plätzchenbäckerei) werden kleiner statt umzubrechen */
  display: block; white-space: nowrap; font-size: min(.95rem, 6.2cqi); max-width: 100%;
}
.karte.weihnachten:not(.fullart) .steine { position: absolute; z-index: 4; top: 10px; left: 50%; translate: -50% 0; gap: 3px; }
.karte.weihnachten .steine i {
  width: 13px; height: 13px; transform: none; border-radius: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(160deg, #fff, var(--stein) 55%, color-mix(in srgb, var(--stein) 55%, #000));
  box-shadow: none; filter: drop-shadow(0 0 2px rgba(255, 230, 160, .7));
}
.karte.weihnachten.gewoehnlich .steine i { --stein: #e6e8ee; }
.karte.weihnachten:not(.fullart) .leiste {
  margin: 6px 14px 0; background: none; color: rgba(255, 244, 220, .82); border-radius: 0;
  border-bottom: 1px solid rgba(240, 199, 104, .35);
}
.karte.weihnachten:not(.fullart) .kartenfuss { position: relative; padding-top: 6px; }
.karte.weihnachten:not(.fullart) .kartenfuss::before {
  content: "✦"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: .6rem; color: rgba(240, 199, 104, .8); pointer-events: none;
}
.karte.weihnachten .kartenfuss .nr { color: #f0c768; }
.karte.weihnachten .kartenfuss em { color: #4a0810; background: var(--metall); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.karte.weihnachten.legendaer { --streif: rgba(255, 224, 140, .85); box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 190, 70, .6), 0 0 44px rgba(209, 26, 53, .35); }
.karte.weihnachten.legendaer.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 190, 70, .9), 0 0 60px rgba(209, 26, 53, .5); }
.karte.weihnachten.episch { --streif: rgba(255, 214, 160, .7); box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(240, 199, 104, .45); }
.karte.weihnachten.legendaer > .kartenkopf, .karte.weihnachten.legendaer > .kartenfuss { background: none; }
/* Full Art: Bild über die ganze Karte, Rahmen läuft in Rot, Gold und Weiß, Titel ebenfalls als Band */
.karte.weihnachten.fullart {
  background: conic-gradient(from var(--fa-winkel, 0deg), #ffd66b, #d11a35, #fff1cf, #8e0c1f, #ffd66b, #d11a35, #ffd66b);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 214, 107, .55), 0 0 46px rgba(209, 26, 53, .4);
}
.karte.weihnachten.fullart .kartenkopf { justify-content: center; align-items: center; flex-direction: column-reverse; gap: 5px; }
.karte.weihnachten.fullart .kartenkopf b { max-width: 100%; }
.karte.weihnachten.fullart .kartenkopf b {
  flex: 0 1 auto; padding: 6px 18px 5px; background: linear-gradient(180deg, #d01c36, #8e0c1f); color: #fff4dc;
  box-shadow: inset 0 1.5px 0 #f0c768, inset 0 -1.5px 0 #f0c768;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
}
.karte.weihnachten.fullart .kartenfuss em { color: #4a0810; background: linear-gradient(90deg, #f6d98a, #fff1cf, #f6d98a); }
/* Schneekugel (Patrick, 06.11.2026: „Effekt wie Schneekugeln, dass Schnee rieselt, zum Holo-Effekt“): drei Schichten Flocken
   rieseln über das Bild, große schneller als kleine. Jede Schicht wandert je Durchlauf genau eine Kachelhöhe, so läuft es
   nahtlos. Dazu ein Glanz wie auf Glas. Beim Kippen (Maus darüber, Handy bewegen) wirbelt der Schnee schneller, wie geschüttelt. */
.karte.weihnachten.fullart > .deko::before {
  content: ""; position: absolute; inset: 4px; border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0 1.1px, transparent 1.9px) 0 0 / 38px 46px,
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, .85) 0 1.8px, transparent 2.8px) 0 0 / 71px 83px,
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .9) 0 2.6px, rgba(255, 255, 255, .35) 3.4px, transparent 4.4px) 0 0 / 113px 131px;
  animation: schneekugel 9s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6));
}
.karte.weihnachten.fullart > .deko::after {
  inset: 4px; height: auto; border-radius: 14px;
  background:
    radial-gradient(ellipse 46% 30% at 30% 16%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 60%, transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 62%, rgba(40, 0, 8, .38) 100%);
  -webkit-mask: none; mask: none; mix-blend-mode: screen;
}
@keyframes schneekugel {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 38px 46px, -71px 83px, 0 131px; }
}
.karte.weihnachten.fullart.kippt > .deko::before { animation-duration: 2.6s; }
@media (prefers-reduced-motion: reduce) { .karte.weihnachten.fullart > .deko::before { animation: none; } }
.karte.weihnachten.fullart.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 214, 107, .8), 0 0 60px rgba(209, 26, 53, .55); }
/* Schmale Karten (Sammlung am Handy): Titelband kleiner, damit es nicht über das halbe Bild greift */
@container (max-width: 170px) {
  /* Titel einzeilig, Größe nach Kartenbreite: lange Titel wie „Weihnachtsmann“ passen so ins Band */
  .karte.weihnachten .kartenkopf b { display: block; white-space: nowrap; font-size: min(.72rem, 6.6cqi); padding: 5px 11px 4px; }
  .karte.weihnachten:not(.fullart) > .kartenkopf { margin-top: -11px; }
  .karte.weihnachten:not(.fullart) .kartenfuss::before { display: none; }
}
/* Folie in Gold, Weiß und Eis statt Regenbogen: der Regenbogen färbt das Weihnachtsrot sonst rosa */
.karte.weihnachten.legendaer .motiv::before {
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .7), rgba(255, 220, 140, .3) 18%, transparent 46%),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, #ffd36b 0%, #fff1c4 6%, #e6a93a 12%, #fff8e0 18%, #ffd36b 24%);
  background-size: 100% 100%, 14px 14px, 300% 300%;
  opacity: .34;
}
.karte.weihnachten.episch .motiv::before {
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .55), transparent 42%),
    repeating-linear-gradient(115deg, #fff1c4 0%, #d9eeff 8%, #ffd36b 16%, #ffffff 24%, #fff1c4 32%);
  background-size: 100% 100%, 320% 320%;
  opacity: .3;
}
.karte.weihnachten.fullart .motiv::before {
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .6), rgba(255, 220, 160, .22) 20%, transparent 48%),
    repeating-linear-gradient(115deg, #ffd36b 0%, #ff6b6b 6%, #fff1c4 12%, #e6a93a 18%, #ffffff 24%, #ffd36b 30%);
  /* Ohne Glitzerraster: den Glitzer übernimmt hier der Schnee, beides zusammen wirkte unruhig */
  background-size: 100% 100%, 280% 280%;
  background-position: center, var(--gx) var(--gy);
  opacity: .24;
}
.karte.weihnachten.fullart .motiv::before { animation-name: folie-weihnacht; }
@keyframes folie-weihnacht { from { background-position: center, 0% 0%; } to { background-position: center, 100% 100%; } }
.karte.weihnachten.fullart.kippt .motiv::before { opacity: .45; }
.karte.weihnachten.fullart { --stein: #ffd66b; }
.karte.weihnachten.fullart .steine i { background: linear-gradient(160deg, #fff, #ffd66b 55%, #b8801c); }
/* Titel immer einzeilig, Größe nach Kartenbreite */
.karte.weihnachten.fullart .kartenkopf b { white-space: nowrap; display: block; font-size: min(.95rem, 6.4cqi); }
.karte.weihnachten.fullart::after { background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .9) 46%, rgba(255, 214, 107, .6) 51%, rgba(255, 120, 120, .45) 56%, transparent 68%); background-size: 240% 100%; background-position: var(--gx) 0; }
@media (max-width: 420px) {
  .karte.weihnachten { padding: 5px; }
  .karte.weihnachten:not(.fullart) .motiv { margin: 24px 7px 0; }
  .karte.weihnachten:not(.fullart) > .deko::before { top: 18px; }
  .karte.weihnachten:not(.fullart) .steine { top: 7px; }
  .karte.weihnachten .steine i { width: 9px; height: 9px; }
}

/* Rückseite: verpackt wie ein Geschenk. Goldener Rahmen, Weinrot, Band über Kreuz, Schleife, große Goldflocke hinter dem Logo */
.karte-ruecken.weihnachten { background: linear-gradient(135deg, #fff3d6, #c99a4a 42%, #ffe9b3 58%, #9c6c22); padding: 6px; border-radius: 18px; color: #fff4dc; }
.karte-ruecken.weihnachten::before {
  inset: 6px; border-radius: 13px;
  background:
    linear-gradient(90deg, transparent calc(50% - 10px), #b08a3e calc(50% - 10px) calc(50% - 8px), #f0c768 calc(50% - 8px) calc(50% + 8px), #b08a3e calc(50% + 8px) calc(50% + 10px), transparent calc(50% + 10px)),
    linear-gradient(180deg, transparent calc(38% - 10px), #b08a3e calc(38% - 10px) calc(38% - 8px), #f0c768 calc(38% - 8px) calc(38% + 8px), #b08a3e calc(38% + 8px) calc(38% + 10px), transparent calc(38% + 10px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='%23f0c768' stroke-width='0.45' stroke-linecap='round' stroke-opacity='0.55'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/svg%3E") 50% 38% / 92% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg transform='translate(15 15) scale(.55)'%3E%3Cg fill='none' stroke='%23f0c768' stroke-width='1' stroke-linecap='round' stroke-opacity='0.22'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(45 45) scale(.4)'%3E%3Cg fill='none' stroke='%23fff1cf' stroke-width='1' stroke-linecap='round' stroke-opacity='0.16'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px,
    radial-gradient(ellipse at 50% 38%, #b3172f 0%, #6a0b19 55%, #2a040b 100%);
  box-shadow: inset 0 0 0 1px rgba(240, 199, 104, .6);
}
.karte-ruecken.weihnachten .schleife {
  position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 120 / 74; translate: -50% -58%; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 74'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9a441'/%3E%3Cstop offset='.7' stop-color='%23ffe7a3'/%3E%3Cstop offset='1' stop-color='%23a8741f'/%3E%3C/linearGradient%3E %3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9a441'/%3E%3Cstop offset='1' stop-color='%238a5a12'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M56 40L38 72L47 68L53 74L60 44Z' fill='url(%23d)'/%3E%3Cpath d='M64 40L82 72L73 68L67 74L60 44Z' fill='url(%23d)'/%3E %3Cpath d='M58 36C40 6 8 4 10 26C12 44 40 44 58 38Z' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E %3Cpath d='M62 36C80 6 112 4 110 26C108 44 80 44 62 38Z' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E %3Cpath d='M52 34C40 18 22 14 20 26' fill='none' stroke='%238a5a12' stroke-opacity='.45' stroke-width='1.2'/%3E %3Cpath d='M68 34C80 18 98 14 100 26' fill='none' stroke='%238a5a12' stroke-opacity='.45' stroke-width='1.2'/%3E %3Crect x='51' y='29' width='18' height='16' rx='5' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}
.karte-ruecken.weihnachten .logo { z-index: 2; opacity: 1; filter: none; box-shadow: 0 0 0 3px #fff1cf, 0 0 0 6px #d9a441, 0 6px 16px rgba(0, 0, 0, .5); }
.karte-ruecken.weihnachten .marke { z-index: 2; color: #fff4dc; text-shadow: 0 2px 0 #4a0810; }
/* Name und Untertitel liegen auf einem weinroten Anhänger, damit das Band sie nicht durchschneidet */
.karte-ruecken.weihnachten .marke, .karte-ruecken.weihnachten .untertitel { background: #5e0915; box-shadow: inset 0 0 0 1px rgba(240, 199, 104, .55); }
.karte-ruecken.weihnachten .marke { padding: 3px 10px 1px; border-radius: 4px 4px 0 0; }
.karte-ruecken.weihnachten .marke b { color: #f0c768; }
.karte-ruecken.weihnachten .untertitel { z-index: 2; margin-top: -8px; padding: 2px 8px 3px 10px; border-radius: 0 0 4px 4px; font-family: var(--f-anzeige); font-weight: 700; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: #f0c768; }
.karte-ruecken.weihnachten .nr { z-index: 2; background: #4a0810; color: #f0c768; box-shadow: inset 0 0 0 1px rgba(240, 199, 104, .5); }

/* Weihnachtspack: rote Folie mit Goldband und Schleife, goldene Nähte, Schneeglitzer, Logo mit Mütze */
.pack-huelle.weihnachten .naht {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, rgba(0, 0, 0, .16) 2px 4px),
    linear-gradient(180deg, #fff1c4, #d9a441 45%, #ffe7a3 70%, #a8741f);
}
.pack-huelle.weihnachten .koerper {
  padding-top: 58px;
  background:
    linear-gradient(90deg, transparent calc(50% - 15px), #a8741f calc(50% - 15px) calc(50% - 12px), #f0c768 calc(50% - 12px) calc(50% + 12px), #a8741f calc(50% + 12px) calc(50% + 15px), transparent calc(50% + 15px)),
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.8px) 0 0 / 23px 23px,
    radial-gradient(circle, rgba(255, 241, 207, .35) 0 .8px, transparent 1.5px) 11px 13px / 31px 29px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg transform='translate(15 15) scale(.55)'%3E%3Cg fill='none' stroke='%23f0c768' stroke-width='1' stroke-linecap='round' stroke-opacity='0.22'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(45 45) scale(.4)'%3E%3Cg fill='none' stroke='%23fff1cf' stroke-width='1' stroke-linecap='round' stroke-opacity='0.16'%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(0)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(60)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(120)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(180)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(240)'/%3E%3Cpath d='M0 0V-10M0-6.6l-2.7-2.5M0-6.6l2.7-2.5M0-3.4l-1.8-1.7M0-3.4l1.8-1.7' transform='rotate(300)'/%3E%3Ccircle r='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 54px 54px,
    radial-gradient(ellipse at 50% 34%, #d3213c 0%, #8e1226 40%, #3d050e 75%, #16040a 100%);
}
.pack-huelle.weihnachten .schleife {
  position: absolute; z-index: 2; top: 4px; left: 50%; translate: -50% 0; width: 46%; aspect-ratio: 120 / 74;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 74'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9a441'/%3E%3Cstop offset='.7' stop-color='%23ffe7a3'/%3E%3Cstop offset='1' stop-color='%23a8741f'/%3E%3C/linearGradient%3E %3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9a441'/%3E%3Cstop offset='1' stop-color='%238a5a12'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M56 40L38 72L47 68L53 74L60 44Z' fill='url(%23d)'/%3E%3Cpath d='M64 40L82 72L73 68L67 74L60 44Z' fill='url(%23d)'/%3E %3Cpath d='M58 36C40 6 8 4 10 26C12 44 40 44 58 38Z' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E %3Cpath d='M62 36C80 6 112 4 110 26C108 44 80 44 62 38Z' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E %3Cpath d='M52 34C40 18 22 14 20 26' fill='none' stroke='%238a5a12' stroke-opacity='.45' stroke-width='1.2'/%3E %3Cpath d='M68 34C80 18 98 14 100 26' fill='none' stroke='%238a5a12' stroke-opacity='.45' stroke-width='1.2'/%3E %3Crect x='51' y='29' width='18' height='16' rx='5' fill='url(%23g)' stroke='%238a5a12' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5));
}
.pack-huelle.weihnachten .strahlen { background: repeating-conic-gradient(from 0deg, rgba(240, 199, 104, .42) 0 6deg, transparent 6deg 18deg); }
.pack-huelle.weihnachten .logo { position: relative; z-index: 1; box-shadow: 0 0 0 4px #fff1cf, 0 0 0 9px #d9a441, 0 0 0 11px #4a0810, 0 10px 30px rgba(0, 0, 0, .55), 0 0 40px rgba(240, 199, 104, .6); }
.pack-huelle.weihnachten .marke { position: relative; z-index: 1; text-shadow: 0 3px 0 #4a0810, 0 6px 16px rgba(0, 0, 0, .55); }
.pack-huelle.weihnachten .marke b { color: #f0c768; }
.pack-huelle.weihnachten .untertitel { position: relative; z-index: 1; color: #fff1cf; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.pack-huelle.weihnachten .inhalt { position: relative; z-index: 1; color: #4a0810; background: linear-gradient(180deg, #fff1c4, #d9a441); box-shadow: 0 3px 0 #8a5a12, 0 6px 14px rgba(0, 0, 0, .4); }
.pack-huelle.weihnachten .figuren { position: relative; z-index: 1; color: rgba(255, 241, 207, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.weihnachtspack-start { margin-top: clamp(32px, 6vw, 72px); padding-top: clamp(32px, 6vw, 72px); border-top: 2px solid var(--flaeche-hell); }
.weihnachtspack-start h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; text-transform: uppercase; color: #f0c768; }
.sammlung-weihnachten h2 { color: #f0c768; }

/* ---------- Adventskalender: Winterwunderland (Patrick, 06.11.2026: „hau richtig auf die Kacke, es soll aussehen wie ein
   Winter Wonderland“) ----------
   Nachthimmel mit Polarlicht, Sternen und Mond, Schnee über die ganze Seite (advent.js), verschneite Hügel mit Tannen, ein
   riesiger Titel. Die Törchen sind Eisglasscheiben mit Schneekappe in verschiedenen Größen, Tag 24 groß in Gold. Beim Öffnen
   klappt die Scheibe nach oben weg, goldenes Licht und ein Schwall aus Schnee und Funken. Keine Requisiten, nur Licht und Schnee. */
.winter-seite { background: #050b1e; }
.winter-seite .kopf { background: rgba(5, 11, 30, .94); }
.schneefall { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.winter { position: relative; overflow: hidden; background: linear-gradient(180deg, #050b1e 0%, #0a1838 38%, #10244f 62%, #0b1532 100%); }

.winter-held { position: relative; min-height: min(92vh, 900px); display: grid; align-content: center; padding-block: clamp(48px, 8vw, 110px) clamp(150px, 18vw, 260px); isolation: isolate; }
.winter-held .himmel { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Weiche Verläufe statt Weichzeichner und Mischmodus: sieht gleich aus, kostet beim Zeichnen fast nichts (Patrick: „lädt langsam“) */
.polarlicht { position: absolute; will-change: transform; }
.polarlicht.a { width: 90vw; height: 46vw; left: -18vw; top: -4vw; opacity: .5; animation: polar-a 18s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 50% 32% at 40% 50%, rgba(31, 224, 176, .75), rgba(54, 200, 255, .35) 45%, transparent 72%); }
.polarlicht.b { width: 76vw; height: 40vw; right: -20vw; top: 6vw; opacity: .42; animation: polar-b 23s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 50% 30% at 55% 50%, rgba(122, 92, 255, .7), rgba(46, 240, 166, .3) 50%, transparent 74%); }
@keyframes polar-a { from { transform: translateX(0) rotate(-8deg) scaleY(1); } to { transform: translateX(12vw) rotate(4deg) scaleY(1.35); } }
@keyframes polar-b { from { transform: translateX(0) rotate(10deg); } to { transform: translateX(-14vw) rotate(-4deg) scaleY(1.25); } }
.sterne { position: absolute; inset: 0 0 30%;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px) 0 0 / 97px 83px,
    radial-gradient(circle, rgba(255, 255, 255, .8) 0 .8px, transparent 1.4px) 40px 30px / 61px 59px,
    radial-gradient(circle, rgba(220, 235, 255, .9) 0 1.3px, transparent 2px) 20px 50px / 173px 139px;
  animation: funkeln 4s ease-in-out infinite alternate; }
@keyframes funkeln { from { opacity: .55; } to { opacity: 1; } }
.mond { position: absolute; right: 9vw; top: 7vw; width: clamp(70px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffdf4, #f3ecd6 55%, #d9d0b4);
  box-shadow: 0 0 40px 10px rgba(255, 248, 220, .35), 0 0 140px 50px rgba(160, 200, 255, .18); }
.held-inhalt { position: relative; display: grid; gap: clamp(16px, 2.4vw, 28px); justify-items: start; }
.held-ueber { margin: 0; font-family: var(--f-zahl); font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: #bfe3ff; }
.held-titel { margin: 0; line-height: .9; font-family: var(--f-anzeige); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap;
  /* Ein Wort über die ganze Breite: Größe an der Fensterbreite, damit es nie umbricht */
  font-size: min(10vw, 10.5rem); }
.held-titel .eis { background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 45%, #9cc6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-titel .gold { background: linear-gradient(180deg, #fff1c4 0%, #ffd66b 50%, #e0a42a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 560px) { .held-titel { font-size: 11.4vw; } }
.held-zahlen { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 56px); }
.held-zahlen div { display: grid; gap: 2px; }
.held-zahlen b { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: #fff; text-shadow: 0 0 24px rgba(160, 210, 255, .6); }
.held-zahlen b.gold { color: #ffd66b; text-shadow: 0 0 26px rgba(255, 200, 90, .7); }
.held-zahlen span { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #bcd3f2; }
.held-text { margin: 0; max-width: 52ch; font-size: 1.05rem; color: #d7e4f7; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.winter .knopf.zweit { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.knopf.gold { background: linear-gradient(180deg, #fff1c4, #ffcf5a 55%, #e0a42a); color: #3d1a00; box-shadow: 0 0 0 1px rgba(255, 241, 196, .6), 0 10px 30px rgba(255, 190, 70, .45); }
.knopf.gold:hover { filter: brightness(1.06); }
.huegel { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(130px, 18vw, 260px); z-index: -1; }

.advent-seite { position: relative; z-index: 1; padding-block: 0 clamp(70px, 10vw, 140px); margin-top: -40px; }
.advent-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 13vw, 190px); grid-auto-flow: dense; gap: clamp(10px, 1.6vw, 22px); }
.tuerchen.breit { grid-column: span 2; }
.tuerchen.hoch { grid-row: span 2; }
.tuerchen.riesig { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .advent-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 22vw, 170px); } }
@media (max-width: 560px) { .advent-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 108px; } .tuerchen.hoch { grid-row: span 1; } }

.tuerchen { position: relative; min-width: 0; perspective: 900px; }
.tuerchen form { display: contents; }
/* Hinter der Scheibe: warmes goldenes Licht mit dem Inhalt */
.tuerchen .dahinter {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center;
  border-radius: 18px; color: #3d1a00;
  background: radial-gradient(ellipse at 50% 35%, #fffaf0 0%, #ffe6a3 35%, #f4b844 75%, #c47a12 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -10px 30px rgba(140, 70, 0, .35), 0 0 30px rgba(255, 190, 70, .35);
}
.tuerchen .dahinter b { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(1rem, 2vw, 1.55rem); line-height: 1; text-transform: uppercase; }
.tuerchen.riesig .dahinter b { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
.tuerchen .dahinter span { font-size: .78rem; font-weight: 600; }
.tuerchen .dahinter a { margin-top: 4px; font-family: var(--f-anzeige); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: #8e1226; padding: 4px 12px; border-radius: 999px; text-decoration: none; }
.tuerchen .dahinter a:hover { background: #b3172f; }
.tuerchen:not(.auf) .dahinter { visibility: hidden; }
/* Kleine Zeichen für den Inhalt */
.symbol { width: 30px; height: 38px; margin-bottom: 2px; border-radius: 4px; }
.symbol.pack { background: linear-gradient(118deg, transparent 0 52%, #ff8022 52% 62%, transparent 62%), linear-gradient(160deg, #b756ff, #2a0a4a); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.symbol.pack.rot { background: linear-gradient(90deg, transparent 42%, #f0c768 42% 58%, transparent 58%), linear-gradient(160deg, #d3213c, #5e0915); }
.symbol.karte { width: 28px; background: linear-gradient(160deg, #a3142a, #33050d); box-shadow: inset 0 0 0 2px #f0c768, 0 3px 8px rgba(0, 0, 0, .35); }
.symbol.karte.gold { background: conic-gradient(#ffd66b, #d11a35, #fff1cf, #ffd66b); }
.symbol.muenze { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d0, #ffcf5a 50%, #b97a12); box-shadow: inset 0 0 0 3px rgba(120, 70, 0, .35), 0 3px 8px rgba(0, 0, 0, .35); }

/* Die Scheibe: Eisglas mit Schneekappe, klappt beim Öffnen nach oben weg */
.tuerchen .tuer {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; border: 0; padding: 0; margin: 0; font: inherit;
  border-radius: 18px; color: #fff; overflow: visible; cursor: default;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(190, 225, 255, .12) 100%),
    linear-gradient(170deg, #3d5f9e, #1d3266);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -20px 40px rgba(10, 25, 70, .35), 0 14px 34px rgba(0, 0, 0, .4);
  transform-origin: 50% 0; transition: transform .25s ease, box-shadow .25s ease;
}
/* Schneekappe oben, leicht über den Rand */
.tuerchen .tuer::before {
  content: ""; position: absolute; left: -3px; right: -3px; top: -9px; height: 22px; border-radius: 14px 14px 6px 6px;
  background:
    radial-gradient(ellipse 18px 11px at 12% 70%, #fff 98%, transparent) ,
    radial-gradient(ellipse 22px 13px at 34% 62%, #fff 98%, transparent),
    radial-gradient(ellipse 16px 10px at 55% 72%, #fff 98%, transparent),
    radial-gradient(ellipse 24px 13px at 78% 60%, #fff 98%, transparent),
    radial-gradient(ellipse 14px 9px at 94% 72%, #fff 98%, transparent),
    linear-gradient(#fff, #eaf3ff);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 55%;
  background-repeat: no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%;
}
/* Eisblumen in der Ecke */
.tuerchen .tuer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .35), transparent 38%), radial-gradient(circle at 0 100%, rgba(255, 255, 255, .18), transparent 30%);
}
.tuerchen .zahl-tuer { font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: .9; letter-spacing: -.03em; text-shadow: 0 2px 0 rgba(10, 25, 70, .45), 0 0 22px rgba(180, 220, 255, .7); }
.tuerchen.riesig .zahl-tuer, .tuerchen.hoch .zahl-tuer { font-size: clamp(4rem, 10vw, 8.5rem); }
.tuerchen .hinweis { font-family: var(--f-zahl); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(225, 238, 255, .8); }
/* Geschlossen: dunkleres Glas, die Schneekappe bleibt weiß */
.tuerchen.zu .tuer { background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(170deg, #2a4479, #142450); }
.tuerchen.zu .zahl-tuer { opacity: .7; }
/* Bereit: goldener Schein, ein Lichtstreif läuft über das Glas */
.tuerchen.bereit .tuer { cursor: pointer; box-shadow: inset 0 0 0 2px #ffe08a, inset 0 1px 0 #fff, inset 0 -20px 40px rgba(120, 60, 0, .25), 0 0 0 1px rgba(255, 214, 107, .5), 0 0 34px rgba(255, 200, 90, .55), 0 14px 34px rgba(0, 0, 0, .4); }
.tuerchen.bereit .tuer::after { opacity: 1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 230, 160, .35) 52%, transparent 66%) 0 0 / 260% 100%; animation: glas-glanz 3.2s ease-in-out infinite; }
@keyframes glas-glanz { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.tuerchen.bereit .hinweis { color: #ffe08a; font-weight: 700; }
.tuerchen.bereit .tuer:hover, .tuerchen.bereit .tuer:focus-visible { transform: translateY(-4px) rotateX(8deg); outline: none; box-shadow: inset 0 0 0 2px #fff1c4, 0 0 0 2px #ffd66b, 0 0 50px rgba(255, 200, 90, .8), 0 20px 40px rgba(0, 0, 0, .45); }
/* Tag 24: Gold */
.tuerchen.haupt .tuer { background: linear-gradient(125deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 45%), linear-gradient(160deg, #ffe08a, #e2a12a 55%, #9a5a08); color: #3d1a00; }
.tuerchen.haupt .zahl-tuer { text-shadow: 0 2px 0 rgba(255, 255, 255, .55), 0 0 30px rgba(255, 240, 200, .8); }
.tuerchen.haupt .hinweis { color: #5a2c00; }
.tuerchen.haupt.zu .tuer { background: linear-gradient(125deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%), linear-gradient(160deg, #e8c66a, #b88420 55%, #6e4006); }
/* Öffnen: Scheibe klappt nach oben weg, das Licht dahinter strahlt auf */
.tuerchen.schwingt { z-index: 4; }
.tuerchen.schwingt .dahinter { visibility: visible; animation: licht-auf .9s ease-out both; }
.tuerchen.schwingt .dahinter > * { visibility: hidden; }
.tuerchen.schwingt .tuer { animation: scheibe-auf .75s cubic-bezier(.55, 0, .3, 1) forwards; pointer-events: none; }
@keyframes scheibe-auf { 0% { transform: rotateX(0); } 25% { transform: rotateX(14deg) scale(1.04); } 100% { transform: rotateX(-105deg) translateY(-30%); opacity: 0; } }
@keyframes licht-auf { from { box-shadow: 0 0 0 rgba(255, 210, 110, 0); filter: brightness(1.6); } 50% { box-shadow: 0 0 90px 30px rgba(255, 210, 110, .85); } to { box-shadow: 0 0 30px rgba(255, 190, 70, .35); filter: none; } }
.tuerchen.frisch .dahinter { animation: inhalt-auf .8s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes inhalt-auf { from { transform: scale(.6); filter: brightness(1.8); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .polarlicht, .sterne, .tuerchen.bereit .tuer::after { animation: none; }
  .tuerchen.schwingt .tuer, .tuerchen.frisch .dahinter, .tuerchen.schwingt .dahinter { animation: none; }
}

/* ---------- Sammlung nach Welten zum Aufklappen (06.11.2026) ---------- */
.welt-werkzeug { padding-block: 24px 4px; }
.welt-werkzeug .innen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.welt-sprung { display: flex; align-items: center; gap: 8px; }
.welt-sprung span { font-family: var(--f-anzeige); font-weight: 700; text-transform: uppercase; font-size: .8rem; color: var(--text-matt); }
.welt-sprung select { min-width: 0; max-width: 62vw; background: var(--flaeche); color: var(--text); border: 2px solid var(--flaeche-hell); padding: 8px 10px; font: inherit; }
details.sammlung-welt { padding-block: 0; }
details.sammlung-welt:last-of-type { padding-bottom: 0; }
details.sammlung-welt > summary { list-style: none; cursor: pointer; padding-block: 10px; }
details.sammlung-welt > summary::-webkit-details-marker { display: none; }
details.sammlung-welt > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
details.sammlung-welt[open] > .innen { padding-bottom: 36px; }
details.sammlung-welt:not(:has(.karte)) .welt-stand { color: var(--text-matt); }
main > details.sammlung-welt:last-of-type { margin-bottom: 72px; }

/* ---------- Leiste unten auf dem Handy (06.11.2026) ----------
   Oben passte nur ein Teil des Menüs hin, Packs und Tausch standen gar nicht drin. Unten wie in einer App. */
.unten-leiste { display: none; }
@media (max-width: 760px) {
  .kopf .navi { display: none; }
  .unten-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: rgba(10, 8, 14, .96); border-top: 2px solid var(--flaeche-hell);
    padding: 6px max(6px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
  }
  .unten-leiste a {
    flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; position: relative;
    text-decoration: none; color: var(--text-matt); font-family: var(--f-anzeige); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .03em;
  }
  .unten-leiste svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .unten-leiste a[aria-current="page"] { color: var(--akzent); }
  .unten-leiste .zaehler { position: absolute; top: 0; left: calc(50% + 6px); }
  body:has(.unten-leiste) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body:has(.unten-leiste) .wahl-leiste { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
details.sammlung-welt { scroll-margin-top: 84px; }

/* ---------- Startseite ohne Stream: Schaufenster mit Kartenfächer (06.11.2026) ----------
   Vorher stand hier ein grauer Player-Platzhalter. Jetzt zeigt die Seite das, was es zwischen den Streams gibt: Karten. */
.schaufenster { padding-block: clamp(28px, 5vw, 64px) clamp(36px, 6vw, 80px); overflow: hidden; }
.schaufenster .innen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.schaufenster-text { display: grid; gap: 22px; align-content: center; min-width: 0; }
.schaufenster-text > .live-marke { justify-self: start; }
.schaufenster-text h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
.schaufenster-text .unter { margin: 0; color: var(--text-matt); font-size: 1.1rem; max-width: 40ch; }
.schaufenster-text .knopfreihe { margin-top: 4px; }

.stand-zeile { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 0; border-block: 2px solid var(--flaeche-hell); }
.stand-zeile > div { padding: 14px 28px 14px 0; display: grid; gap: 2px; }
.stand-zeile > div + div { padding-left: 24px; border-left: 2px solid var(--flaeche-hell); }
.stand-zeile dt { font-family: var(--f-anzeige); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-matt); }
.stand-zeile dd { margin: 0; font-family: var(--f-anzeige); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1; color: var(--text); }
.stand-zeile dd small { font-size: .5em; font-weight: 800; color: var(--text-matt); margin-left: 2px; }
.stand-zeile > div:last-child dd { color: var(--orange); }
.stand-zeile > div:last-child dd small { color: inherit; }

.faecher { position: relative; margin: 0; display: grid; gap: 14px; }
.faecher-karten::before {
  content: ""; position: absolute; inset: 22% -2% 3% 30%;
  background: var(--akzent); box-shadow: 12px 12px 0 var(--orange);
  rotate: -3deg;
}
.faecher-karten { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 6% 4%; }
.faecher-platz {
  --r: 0deg; --y: 0%;
  margin-inline: -5%; rotate: var(--r); translate: 0 var(--y);
  transition: rotate .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1);
}
.faecher-platz:nth-child(1) { --r: -13deg; --y: 9%; }
.faecher-platz:nth-child(2) { --r: -4deg; --y: -3%; z-index: 3; }
.faecher-platz:nth-child(3) { --r: 5deg; --y: -1%; z-index: 2; }
.faecher-platz:nth-child(4) { --r: 14deg; --y: 10%; z-index: 1; }
.faecher-platz .karte { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.faecher figcaption { position: relative; justify-self: start; margin-top: 10px; font-size: .85rem; color: var(--text-matt); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Über dem Fächer gehen die Karten etwas auseinander, wie in der Hand aufgefächert */
  .faecher-karten:hover .faecher-platz { rotate: calc(var(--r) * 1.35); }
  .faecher-karten:hover .faecher-platz:nth-child(1) { translate: -6% var(--y); }
  .faecher-karten:hover .faecher-platz:nth-child(4) { translate: 6% var(--y); }
  .faecher-platz:hover { z-index: 4; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Beim Laden werden die Karten von einem Stapel in der Mitte ausgeteilt */
  .faecher-platz { animation: austeilen .8s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i) * .09s) both; }
  .faecher-karten::before { animation: block-rein .7s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes austeilen {
  from { opacity: 0; rotate: 0deg; translate: calc((1.5 - var(--i)) * 85%) 26%; }
}
@keyframes block-rein {
  from { opacity: 0; rotate: 0deg; scale: .92; }
}

@media (max-width: 960px) {
  .schaufenster .innen { grid-template-columns: minmax(0, 1fr); }
  .faecher { order: -1; width: min(100%, 480px); justify-self: center; }
  .faecher figcaption { justify-self: center; }
}
@media (max-width: 520px) {
  .stand-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stand-zeile > div { padding-right: 8px; }
  .stand-zeile > div + div { padding-left: 12px; }
  .schaufenster-text .knopfreihe .knopf { flex: 1 1 auto; justify-content: center; }
}
/* Handy: drei Karten statt vier und knappere Abstände, damit die Knöpfe über der Leiste unten bleiben */
@media (max-width: 520px) {
  .schaufenster { padding-block: 12px 32px; }
  .schaufenster .innen { gap: 14px; }
  .schaufenster-text { gap: 14px; }
  .schaufenster-text h1 { font-size: 2.4rem; }
  .schaufenster-text .unter { display: none; }
  .faecher { gap: 6px; width: min(100%, 360px); }
  .faecher-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 8% 6%; }
  .faecher-platz { margin-inline: -4%; }
  .faecher-platz:nth-child(4) { display: none; }
  .faecher-platz:nth-child(1) { --r: -10deg; --y: 7%; }
  .faecher-platz:nth-child(2) { --r: -1deg; --y: -2%; }
  .faecher-platz:nth-child(3) { --r: 9deg; --y: 7%; }
  .faecher figcaption { margin-top: 4px; font-size: .8rem; }
  .stand-zeile > div { padding-block: 10px; }
}
@media (max-width: 520px) {
  .schaufenster-text .knopfreihe { flex-wrap: nowrap; gap: 8px; }
  .schaufenster-text .knopfreihe .knopf.gross { flex: 1 1 0; min-width: 0; font-size: .95rem; padding: 14px 10px; white-space: nowrap; }
}

/* ---------- Welt-Banner in der Sammlung (06.11.2026) ----------
   Jede Welt zeigt rechts das Motiv ihrer besten eigenen Karte, das nach links ins Schwarz ausläuft.
   Ohne eigene Karte: die beste Karte der Welt, grau und verschwommen. Die Bilder sind hochkant, deshalb kein Vollbild. */
.welt-banner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  min-height: clamp(92px, 11vw, 128px); overflow: hidden; isolation: isolate;
  background: var(--flaeche); border: 2px solid var(--flaeche-hell);
  transition: border-color .2s ease;
}
.welt-bild { position: absolute; inset: 0 0 0 auto; width: min(52%, 560px); z-index: -1; }
.welt-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 62%);
  mask-image: linear-gradient(to right, transparent, #000 62%);
  transition: scale .5s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
}
.welt-banner.verborgen .welt-bild img { filter: grayscale(1) blur(3px) brightness(.62) contrast(1.1); scale: 1.06; }
.welt-text { display: grid; gap: 6px; padding: 16px 20px; min-width: 0; }
.welt-text h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; text-wrap: balance; }
.welt-genre { font-size: .9rem; color: var(--text-matt); }
.welt-fortschritt { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.welt-balken { position: relative; width: min(180px, 40vw); height: 4px; background: var(--flaeche-hell); flex: none; }
.welt-balken::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil, 0) * 100%); background: var(--akzent); }
.welt-banner .welt-stand { border: 0; padding: 0; font-size: .85rem; }
.welt-banner.komplett { border-color: var(--orange); }
.welt-banner.komplett .welt-balken::before { background: var(--orange); }
.welt-banner.komplett .welt-stand { background: none; color: var(--orange); }
.welt-banner.verborgen h2 { color: var(--text-matt); }
.welt-pfeil {
  width: 40px; height: 40px; margin-right: 16px; display: grid; place-items: center;
  background: rgba(11, 10, 14, .72); border: 2px solid var(--flaeche-hell);
}
.welt-pfeil::before {
  content: ""; width: 10px; height: 10px; border-right: 3px solid var(--text); border-bottom: 3px solid var(--text);
  rotate: 45deg; translate: 0 -2px; transition: rotate .25s cubic-bezier(.16, 1, .3, 1), translate .25s cubic-bezier(.16, 1, .3, 1);
}
details.sammlung-welt[open] .welt-pfeil::before { rotate: 225deg; translate: 0 2px; }
details.sammlung-welt > summary:hover .welt-banner { border-color: var(--akzent); }
details.sammlung-welt > summary:hover .welt-bild img { scale: 1.04; }
details.sammlung-welt > summary:hover .welt-banner.verborgen .welt-bild img { scale: 1.1; filter: grayscale(.6) blur(4px) brightness(.6); }
details.sammlung-welt > summary:hover h2 { color: var(--text); }
details.sammlung-welt[open] > .innen { padding-top: 14px; }
@media (max-width: 720px) {
  .welt-bild { width: 58%; }
  .welt-text { padding: 12px 14px; gap: 4px; }
  .welt-text h2 { font-size: 1.35rem; }
  .welt-genre { font-size: .8rem; }
  .welt-balken { width: 96px; }
  .welt-pfeil { width: 34px; height: 34px; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .welt-bild img, .welt-pfeil::before { transition: none; }
}

/* ---------- Filter zum Zuklappen (06.11.2026) ---------- */
/* .sammlung-kopf .innen ist ein Flex-Container, die Klappe soll aber volle Breite haben */
.sammlung-kopf .filter-klappe { display: block; }
.filter-klappe > summary { display: none; }
@media (max-width: 720px) {
  .filter-klappe { margin-top: 20px; }
  .filter-klappe > summary {
    border: 2px solid var(--flaeche-hell);
    display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none;
    font-family: var(--f-anzeige); font-weight: 800; text-transform: uppercase;
  }
  .filter-klappe > summary::-webkit-details-marker { display: none; }
  .filter-klappe > summary::after {
    content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px;
  }
  .filter-klappe[open] > summary::after { rotate: 225deg; translate: 0 2px; }
  .filter-klappe .filter-stand { font-family: var(--f-text, inherit); font-weight: 500; text-transform: none; font-size: .85rem; color: var(--text-matt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filter-klappe[data-aktiv] .filter-stand { color: var(--akzent); }
  .filter-klappe .filter-zeile { padding-top: 14px; }
  .filter-klappe .filter-zeile .seltenheit-filter { margin-top: 0; }
  /* Auf dem Handy bündeln Leiste unten und Packs-Knopf den Weg zu Packs und Maschine */
  .sammlung-pack .knopf.zweit[href="/maschine.php"] { display: none; }
}
@media (max-width: 720px) {
  .welt-werkzeug .umschalter { flex-wrap: nowrap; }
  .welt-werkzeug .umschalter a { padding-inline: 10px; font-size: .85rem; white-space: nowrap; }
  .welt-sprung { flex: 1 1 100%; }
  .welt-sprung select { flex: 1; max-width: none; }
  [data-alle-welten] { display: none; }
}

/* ---------- NEU-Marke in der Sammlung (06.11.2026) ----------
   Seltener Moment, deshalb darf er glänzen: einmal läuft ein Lichtstreif über die Karte, die Marke bleibt. */
.karten-marke.neu {
  position: absolute; z-index: 3; top: -6px; left: -6px; padding: 3px 9px;
  background: var(--orange); color: var(--tinte);
  font-family: var(--f-anzeige); font-weight: 900; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(255, 128, 34, .45);
}
.karte:has(.karten-marke.neu) { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Eigenes Element, weil ::after bei Episch und Legendär schon die Folie trägt */
.neu-glanz { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .neu-glanz {
    display: block; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%; background-position: 150% 0;
    animation: neu-glanz 1.1s cubic-bezier(.23, 1, .32, 1) .35s both;
  }
  .karten-marke.neu { animation: neu-marke .4s cubic-bezier(.23, 1, .32, 1) .2s both; }
}
@keyframes neu-glanz { to { background-position: -50% 0; } }
@keyframes neu-marke { from { opacity: 0; scale: .9; } }
.welt-neu {
  font-family: var(--f-anzeige); font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinte); background: var(--orange); padding: 2px 8px;
}

/* ---------- Seitenübergänge (06.11.2026) ----------
   Seitenwechsel passieren oft, deshalb nur eine kurze Überblendung des Inhalts. Kopf und Leiste unten bleiben stehen,
   dadurch wirkt der Wechsel wie in einer App. Browser ohne Unterstützung wechseln wie bisher. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: kopf; }
  .unten-leiste { view-transition-name: leiste; }
  ::view-transition-old(root) { animation: 120ms cubic-bezier(.23, 1, .32, 1) both seite-raus; }
  ::view-transition-new(root) { animation: 200ms cubic-bezier(.23, 1, .32, 1) 40ms both seite-rein; }
  ::view-transition-group(kopf), ::view-transition-group(leiste) { animation-duration: 0s; }
}
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; translate: 0 6px; } }

/* ---------- Gratis-Starterpacks (06.11.2026) ---------- */
.starter-hinweis { display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border: 2px solid var(--orange); background: rgba(255, 128, 34, .08); }
.starter-hinweis p { margin: 0; }
.starter-hinweis strong { color: var(--orange); }
@media (max-width: 760px) { .pack-start .starter-hinweis { justify-items: center; text-align: center; } }

/* ---------- Einrichtung: Arten der Einblendung (07.11.2026) ---------- */
.einblend-arten { display: grid; gap: 10px; margin-block: 12px 18px; max-width: 760px; }
.einblend-art { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--flaeche); cursor: pointer; }
.einblend-art input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--akzent); flex: none; }
.einblend-art .matt { display: block; font-size: .85rem; }
.einblend-ziel input { width: 90px; background: var(--flaeche); color: var(--text); border: 2px solid var(--flaeche-hell); padding: 6px 8px; font: inherit; }
.einblend-arten .knopf { justify-self: start; }

/* ---------- Tauschauswahl: Hinweise unter der Karte (07.11.2026) ---------- */
.wahl-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 26px; }
.wahl-marke {
  display: inline-flex; align-items: center; padding: 3px 9px; font-family: var(--f-anzeige); font-weight: 800;
  font-size: .8rem; letter-spacing: .03em; line-height: 1.2;
}
.wahl-marke.fehlt { background: var(--orange); color: var(--tinte); }
.wahl-marke.doppelt { background: var(--akzent); color: var(--tinte); }
.wahl-marke { background: var(--flaeche-hell); color: var(--text); }
.wahl-marke.letzte { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.tausch-karte .wahl-marken { margin-top: 8px; min-height: 0; }
.tausch-karte .wahl-marke { font-size: .72rem; padding: 3px 7px; }

/* ======================================================================================================================
   Limited „MAGIC CITY VI“ (Patrick, 13.11.2026)
   Karten, Booster, Rückseite und Seitenhintergrund im Miami-Abendlook. Vorlage: _karten/vorschau-magiccity-design.html.
   Alles Farbflächen und Verläufe, Palmen als Maske aus einer eingebetteten Zeichnung (keine Bilddatei, keine fremde Ladeadresse).
   Feste Verläufe statt Live-Weichzeichner (Leistungsbefund aus „Winterwunderland“). Eigene mc-Klassennamen in Karten, Pack und
   Rückseite, weil .fuss, .innen, .kopf und .zahl Seitenklassen sind (Falle aus der Vorlage). Muss hinter den Seltenheitsregeln stehen.
   ====================================================================================================================== */
:root {
  --mc-nacht: #1c0a2c; --mc-steg: #2a0d44;
  --mc-blau: #3b5ee0; --mc-violett: #8a3fd8; --mc-pink: #ff3d9a; --mc-koralle: #ff6b5e;
  --mc-orange: #ff9b3a; --mc-gelb: #ffd45c; --mc-tuerkis: #2fd2c6; --mc-mint: #a6f3dd; --mc-himmel: #8fc8ff;
  --mc-palme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cg fill='black'%3E%3Cpath d='M104 296c-6-60-2-130 10-190l9 2c-11 58-15 128-9 188z'/%3E%3Cpath d='M118 104c-30-30-74-36-110-20 34-2 64 8 88 30z'/%3E%3Cpath d='M118 104c-12-42-46-74-86-82 30 14 52 42 66 80z'/%3E%3Cpath d='M118 104c10-40 40-70 76-80-26 18-46 46-58 82z'/%3E%3Cpath d='M118 104c34-16 66-10 82 10-26-8-50-6-74 6z'/%3E%3Cpath d='M118 104c26 8 46 30 54 62-14-20-32-36-58-48z'/%3E%3Cpath d='M118 104c-24 6-46 26-58 56 18-20 38-36 62-44z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Karte ---------- */
.karte.mc {
  --r1: var(--mc-tuerkis); --r2: var(--mc-himmel); --r3: var(--mc-mint); --tag: var(--mc-tuerkis);
  --stein: var(--mc-gelb); --glanz-1: rgba(255, 190, 140, .5); --glanz-2: rgba(255, 107, 94, .3);
  /* Außenrand hell wie bei den normalen Karten, leicht in der Farbe der Seltenheit (Patrick, 13.11.2026: kein schwarzer Rand) */
  padding: 6px; border-radius: 16px; color: #fff; isolation: isolate;
  background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--r2) 35%, #ffffff) 50%, color-mix(in srgb, var(--r3) 30%, #ffffff));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .7);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
/* Rahmenfläche in der Farbe der Seltenheit */
.karte.mc::before {
  inset: 6px; border-radius: 11px; z-index: 0;
  background: linear-gradient(160deg, var(--r1), var(--r2) 55%, var(--r3));
}
.karte.mc.selten { --r1: var(--mc-koralle); --r2: #ffa07a; --r3: var(--mc-gelb); --tag: var(--mc-koralle); }
.karte.mc.episch { --r1: var(--mc-blau); --r2: var(--mc-violett); --r3: var(--mc-pink); --tag: var(--mc-pink); box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 61, 154, .45); }
.karte.mc.legendaer { --r1: var(--mc-gelb); --r2: var(--mc-orange); --r3: var(--mc-pink); --tag: var(--mc-gelb); --streif: rgba(255, 214, 107, .8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 155, 58, .6); }
.karte.mc.legendaer::before {
  background:
    repeating-linear-gradient(118deg, transparent 0 10px, rgba(255, 255, 255, .22) 10px 11px),
    linear-gradient(160deg, #fff3b8 0%, var(--mc-gelb) 18%, var(--mc-orange) 50%, var(--mc-pink) 85%, #ffb0d8 100%);
}
.karte.mc.fullart { --tag: var(--mc-pink); --streif: rgba(255, 190, 120, .8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 61, 154, .55), 0 0 60px rgba(59, 94, 224, .35); }

/* Palmenschatten im Rahmen */
.karte.mc > .deko { position: absolute; inset: 6px; z-index: 0; border-radius: 11px; overflow: hidden; pointer-events: none; }
.karte.mc > .deko::before {
  content: ""; position: absolute; width: 60%; aspect-ratio: 2 / 3; right: -18%; bottom: -6%; background: var(--mc-nacht); opacity: .16;
  -webkit-mask: var(--mc-palme) center / contain no-repeat; mask: var(--mc-palme) center / contain no-repeat;
}
.karte.mc.fullart > .deko { display: none; }

/* Aufbau wie bei den normalen Karten (Patrick, 13.11.2026): Titel und Sonnen oben, gerades Bildfenster, Leiste mit Figur,
   Fuß mit Nummer und Stufe. Der Titel behält den kräftigen Magic-City-Schriftzug (dicke Kontur, pinker Tiefenschatten). */
.karte.mc > .kartenkopf { position: relative; z-index: 2; background: none; padding: 8px 10px 7px; }
.karte.mc .kartenkopf b, .karte.mc .kartenkopf b.lang {
  font-weight: 900; font-size: clamp(.7rem, 7cqi, 1.08rem); line-height: 1.05; letter-spacing: 0; text-transform: uppercase; hyphens: manual;
  color: #fff; text-shadow: none; overflow: visible;
  -webkit-text-stroke: .16em var(--mc-nacht); paint-order: stroke fill;
  filter: drop-shadow(0 .07em 0 var(--mc-pink)) drop-shadow(0 .1em .12em rgba(0, 0, 0, .45));
}
.karte.mc .kartenkopf b.lang { font-size: clamp(.6rem, 5.6cqi, .86rem); }
.karte.mc .steine { position: relative; z-index: 2; gap: 3px; }
.karte.mc .steine i, .karte.mc.fullart .steine i {
  width: 11px; height: 11px; transform: none; border-radius: 50%;
  background: linear-gradient(180deg, var(--mc-gelb), var(--mc-orange) 50%, var(--mc-pink)); box-shadow: 0 0 0 1.5px var(--mc-nacht);
}
.karte.mc.fullart .steine i { box-shadow: 0 0 0 1.5px var(--mc-nacht), 0 0 6px rgba(255, 212, 92, .9); }

/* Bildfenster mit heller Chromeinfassung wie der Metallrand der normalen Karten, in Sonnenuntergangsfarben
   (Patrick, 13.11.2026: der dunkle Rand gefiel nicht) */
.karte.mc > .motiv {
  z-index: 1; border: 3px solid transparent; border-radius: 4px;
  background: linear-gradient(160deg, #3a1660, #1c0a2c) padding-box,
    linear-gradient(135deg, #ffffff, #ffd1e8 30%, #ffe7a8 50%, #b9f3ec 70%, #ffffff) border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.karte.mc .motiv img { object-position: 50% 30%; }

.karte.mc > .leiste {
  position: relative; z-index: 2; background: rgba(255, 255, 255, .85); color: var(--mc-nacht);
  font-family: var(--f-anzeige); font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

.karte.mc > .kartenfuss { position: relative; z-index: 2; background: none; }
.karte.mc .kartenfuss .nr { font-weight: 700; color: var(--mc-nacht); text-shadow: none; }
.karte.mc.episch .kartenfuss .nr, .karte.mc.legendaer .kartenfuss .nr { color: #fff; text-shadow: 0 1px 0 var(--mc-nacht); }
.karte.mc .kartenfuss em, .karte.mc.fullart .kartenfuss em {
  color: #fff; background: var(--mc-nacht); font-weight: 900; box-shadow: inset 0 -2px 0 var(--tag);
}
.karte.mc.fullart .kartenfuss em { background: linear-gradient(90deg, var(--mc-blau), var(--mc-pink), var(--mc-orange), var(--mc-gelb)); color: var(--mc-nacht); box-shadow: 0 0 0 1.5px var(--mc-nacht); }
.karte.mc.fullart .kartenfuss .nr { color: #fff; text-shadow: 0 1px 3px #000; }

/* Glanz je Seltenheit: Foliengradient in Sonnenuntergangsfarben statt Regenbogen */
.karte.mc.selten .motiv::before { opacity: .22; }
.karte.mc.episch .motiv::before {
  background-image: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .5), transparent 42%),
    repeating-linear-gradient(115deg, #3b5ee0 0%, #8a3fd8 8%, #ff3d9a 16%, #ff9b3a 24%, #3b5ee0 32%);
  opacity: .3;
}
.karte.mc.legendaer .motiv::before {
  background-image: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .7), rgba(255, 220, 140, .35) 18%, transparent 46%),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, #ffd45c 0%, #ff9b3a 6%, #ff3d9a 12%, #8a3fd8 18%, #2fd2c6 24%, #ffd45c 30%);
  opacity: .42;
}
.karte.mc.legendaer.kippt .motiv::before { opacity: .7; }
.karte.mc.legendaer.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 155, 58, .9), 0 0 60px rgba(255, 61, 154, .4); }
.karte.mc.legendaer > .kartenkopf, .karte.mc.legendaer > .kartenfuss { background: none; }
.karte.mc.episch.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 61, 154, .75); }

/* Full Art: randloses Bild, Sunset-Holofolie, Titel groß am unteren Rand */
.karte.mc.fullart { padding: 6px; animation: none; overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #ffd1e8 25%, #ffe7a8 50%, #b9f3ec 75%, #ffffff); }
.karte.mc.fullart:has(.karten-marke) { overflow: visible; }
.karte.mc.fullart::before {
  inset: 6px; border-radius: 11px; z-index: 1;
  background: linear-gradient(180deg, rgba(28, 10, 44, .55) 0%, transparent 22%, transparent 60%, rgba(28, 10, 44, .85) 100%);
}
.karte.mc.fullart .motiv img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 11px; object-position: 50% 40%; }
.karte.mc.fullart > .motiv { border: 0; background: none; box-shadow: none; }
.karte.mc.fullart .motiv::before {
  inset: 6px; border-radius: 11px; opacity: .38;
  background-image: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .7), rgba(255, 200, 180, .25) 20%, transparent 48%),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.7px),
    repeating-linear-gradient(115deg, #3b5ee0 0%, #8a3fd8 5%, #ff3d9a 10%, #ff9b3a 15%, #ffd45c 20%, #2fd2c6 25%, #3b5ee0 30%);
}
.karte.mc.fullart.kippt .motiv::before { opacity: .7; }
.karte.mc.fullart::after {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .85) 46%, rgba(255, 190, 120, .55) 51%, rgba(255, 110, 180, .5) 56%, transparent 68%);
  background-size: 240% 100%; background-position: var(--gx) 0;
}
.karte.mc.fullart.kippt { box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 44px rgba(255, 61, 154, .85), 0 0 64px rgba(59, 94, 224, .5); }
.karte.mc.fullart > .leiste { background: rgba(255, 255, 255, .85); color: var(--mc-nacht); }
@media (max-width: 420px) {
  .karte.mc .steine i, .karte.mc.fullart .steine i { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) { .karte.mc::after, .karte.mc .motiv::before { animation: none; } }

/* ---------- Rückseite für fehlende Karten ---------- */
.karte-ruecken.mc-ruecken {
  display: block; container-type: inline-size; border-radius: 16px; padding: 6px; color: #fff;
  background: linear-gradient(145deg, #4a1f78, var(--mc-nacht) 40%, #12061f 70%, #3a1660);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 61, 154, .3), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .6);
}
.karte-ruecken.mc-ruecken::before { display: none; }
.mc-rahmen {
  position: relative; height: 100%; border-radius: 10px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1.5px rgba(255, 220, 240, .7), inset 0 0 0 3px rgba(28, 10, 44, .9), inset 0 0 24px rgba(0, 0, 0, .55);
}
.mc-rahmen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: color-dodge; opacity: .22;
  background: linear-gradient(125deg, transparent 20%, #5ad6ff 35%, #ff6fb8 50%, #ffe3a0 62%, transparent 78%) 0 0 / 250% 250%; animation: mc-holo 7s linear infinite;
}
@keyframes mc-holo { to { background-position: 250% 250%; } }
.mc-ruecken .mc-logo { position: absolute; z-index: 4; left: 50%; top: 11%; translate: -50% 0; width: 100%; --logo: 15.6cqi; }
.mc-ruecken .mc-szene .mc-palme.nah.l, .mc-ruecken .mc-szene .mc-palme.nah.r { width: 76%; }
.mc-nr {
  position: absolute; z-index: 4; top: 9px; left: 9px; padding: 2px 7px; border-radius: 999px; background: rgba(20, 6, 34, .6); border: 1px solid rgba(255, 255, 255, .3);
  font-family: var(--f-zahl); font-size: clamp(.42rem, 3.3cqi, .6rem); font-weight: 700; letter-spacing: .06em;
}
.mc-fuss { position: absolute; z-index: 4; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px; }
.mc-fuss img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mc-nacht), 0 0 12px rgba(255, 61, 154, .8); }
.mc-fuss span { font-family: var(--f-anzeige); font-weight: 800; font-size: clamp(.46rem, 3.6cqi, .66rem); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 var(--mc-nacht), 0 0 8px rgba(255, 61, 154, .8); }

/* ---------- Logo „MAGIC CITY VI“ ---------- */
.mc-logo { display: grid; justify-items: center; font-size: var(--logo, 44px); line-height: .8; }
.mc-wort { position: relative; z-index: 2; display: block; text-align: center; font-family: var(--f-anzeige); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: #fff;
  -webkit-text-stroke: .13em var(--mc-nacht); paint-order: stroke fill;
  text-shadow: 0 .02em 0 #ffd0ea, 0 .04em 0 #ff8fc8, 0 .06em 0 #ff3d9a, 0 .08em 0 #c42a86, 0 .1em 0 #7a1c6e, 0 .12em 0 var(--mc-nacht), 0 .2em .2em rgba(0, 0, 0, .55); }
.mc-wort span { display: block; }
.mc-wort .a { font-size: 1em; }
.mc-wort .b { font-size: 1.28em; margin-top: .04em; }
/* VI: eigene Chromzahl mit Neonkante, schräg rechts unten vor dem Schriftzug */
.mc-vi { position: relative; z-index: 3; display: block; margin-top: -.3em; margin-left: 1.6em; transform: rotate(-7deg) skewX(-10deg);
  font-family: var(--f-anzeige); font-weight: 900; font-style: italic; font-size: 1.7em; letter-spacing: -.03em; line-height: .85; padding: 0 .14em;
  background: linear-gradient(180deg, #ffffff 0%, #bfe6ff 18%, #3f7dff 44%, #1b1250 49%, #ff2f94 53%, #ff8a3a 72%, #ffe27a 92%, #fff7c8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .05em var(--mc-nacht); paint-order: stroke fill;
  filter: drop-shadow(.02em .02em 0 #fff) drop-shadow(0 0 .06em #ff3d9a) drop-shadow(0 0 .2em rgba(255, 61, 154, .9)) drop-shadow(0 .1em 0 var(--mc-nacht)) drop-shadow(0 .18em .16em rgba(0, 0, 0, .55)); }
.mc-band { position: relative; z-index: 3; display: block; margin-top: .22em; font-family: var(--f-anzeige); font-weight: 900; font-size: .2em; letter-spacing: .34em; padding: .4em .9em .4em 1.24em;
  text-transform: uppercase; color: var(--mc-nacht); background: linear-gradient(180deg, #d9fff6, var(--mc-tuerkis) 55%, #19a89e); transform: skewX(-12deg);
  box-shadow: 0 .14em 0 #0d6b66, 0 .24em .3em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .8); }

/* ---------- Szene (Booster und Rückseite): Sonnenuntergang in Schichten ---------- */
.mc-szene { position: absolute; inset: 0; display: block; overflow: hidden;
  background: linear-gradient(180deg, #2b2f9e 0%, #5b34c4 22%, #b23fc8 42%, #ff4f9e 58%, #ff8a5a 70%, #ffc25e 78%, #ff9a6a 79%, #a04aa8 92%, #3a1e72 100%); }
.mc-szene > span { display: block; position: absolute; }
.mc-sterne { inset: 0 0 60% 0; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 30% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 14%, #fff, transparent),
    radial-gradient(1px 1px at 86% 26%, #fff, transparent), radial-gradient(1px 1px at 50% 22%, #fff, transparent), radial-gradient(1px 1px at 62% 5%, #fff, transparent); }
.mc-hof { left: 50%; top: 60%; width: 160%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 230, 160, .85) 0%, rgba(255, 150, 120, .45) 14%, rgba(255, 80, 160, .18) 30%, transparent 52%); }
.mc-strahlen { left: 50%; top: 60%; width: 220%; aspect-ratio: 1; translate: -50% -50%; mix-blend-mode: screen; opacity: .45;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 170, .55) 0 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 6%, transparent 45%); mask: radial-gradient(circle, #000 6%, transparent 45%); animation: strahlen 60s linear infinite; }
.mc-sonne { left: 50%; top: 60%; width: 62%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: linear-gradient(180deg, #fff6c8 0%, var(--mc-gelb) 25%, var(--mc-orange) 55%, var(--mc-pink) 85%);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10%) bottom / 100% 45% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10%) bottom / 100% 45% no-repeat;
  filter: drop-shadow(0 0 18px rgba(255, 170, 90, .9)); }
.mc-skyline { left: 0; right: 0; top: 66%; height: 14%; color: rgba(70, 30, 110, .55); }
.mc-skyline svg { width: 100%; height: 100%; display: block; }
.mc-wasser { left: 0; right: 0; top: 79%; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 150, 120, 0), rgba(40, 20, 90, .6)), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 220, 180, .28) 5px 6px); }
.mc-spiegel { left: 50%; top: 79%; width: 34%; height: 18%; translate: -50% 0;
  background: repeating-linear-gradient(180deg, rgba(255, 230, 160, .9) 0 3px, transparent 3px 8px);
  -webkit-mask: radial-gradient(ellipse at 50% 0, #000 20%, transparent 70%); mask: radial-gradient(ellipse at 50% 0, #000 20%, transparent 70%);
  animation: mc-flimmern 2.4s ease-in-out infinite alternate; }
@keyframes mc-flimmern { to { opacity: .55; transform: scaleX(1.12); } }
/* Palmen in zwei Tiefen: ferne im Dunst, nahe dunkel */
.mc-palme { aspect-ratio: 2 / 3; background: currentColor; -webkit-mask: var(--mc-palme) center bottom / contain no-repeat; mask: var(--mc-palme) center bottom / contain no-repeat; }
.mc-palme.fern { color: rgba(90, 30, 120, .6); width: 26%; bottom: 20%; }
.mc-palme.fern.l { left: 14%; transform: scaleX(-1); }
.mc-palme.fern.r { right: 10%; width: 22%; bottom: 21%; }
.mc-palme.nah { color: #12061f; width: 70%; bottom: -6%; filter: drop-shadow(0 0 6px rgba(255, 80, 160, .35)); }
.mc-palme.nah.l { left: -30%; transform: scaleX(-1) rotate(4deg); }
.mc-palme.nah.r { right: -28%; width: 60%; bottom: -4%; transform: rotate(-3deg); }
.mc-flare { border-radius: 50%; mix-blend-mode: screen; }
.mc-flare.a { left: 60%; top: 40%; width: 16%; aspect-ratio: 1; background: radial-gradient(circle, rgba(140, 220, 255, .45), transparent 70%); }
.mc-flare.b { left: 70%; top: 30%; width: 7%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 140, 220, .6), transparent 70%); }
.mc-flare.c { left: 28%; top: 72%; width: 10%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 240, 170, .4), transparent 70%); }

/* ---------- Booster ---------- */
.pack-start.magiccity-start, .pack-buehne.magiccity { perspective: 1100px; }
.pack-huelle.mc-pack {
  container-type: inline-size; grid-template-rows: 28px 1fr 28px; --logo: 16.6cqi;
  transform-style: preserve-3d; transform: rotateY(-16deg) rotateX(5deg); animation: mc-schweben 6s ease-in-out infinite alternate;
  filter: drop-shadow(-18px 26px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(255, 61, 154, .35));
}
@keyframes mc-schweben { from { transform: rotateY(-16deg) rotateX(5deg) translateY(0); } to { transform: rotateY(-8deg) rotateX(2deg) translateY(-8px); } }
.pack-huelle.mc-pack.zu:hover { filter: drop-shadow(-18px 26px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(255, 61, 154, .6)) brightness(1.06); }
.pack-huelle.mc-pack.vorbei { animation: none; filter: grayscale(.55) drop-shadow(-18px 26px 26px rgba(0, 0, 0, .6)); }
.pack-huelle.mc-pack .naht { height: auto; z-index: 6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .65), transparent 35%, rgba(0, 0, 0, .35) 70%, rgba(255, 255, 255, .4)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, rgba(0, 0, 0, .25) 2px 4px),
    linear-gradient(90deg, #6a2c9e, #ff6fb8 25%, #ffe3a0 45%, #ff6fb8 62%, #5ad6ff 82%, #6a2c9e); }
.pack-huelle.mc-pack .naht.oben::after { bottom: -8px; border-top-color: rgba(255, 255, 255, .6); }
.mc-koerper { position: relative; z-index: 1; display: block; overflow: hidden; margin: -2px 0; }
/* Folienwölbung: Ränder dunkel, links ein breiter Lichtstreif, rechts ein schmaler */
.mc-koerper::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 0, 20, .6) 0%, transparent 9%, rgba(255, 255, 255, .22) 20%, rgba(255, 255, 255, .04) 30%, transparent 55%, rgba(255, 255, 255, .12) 80%, transparent 86%, rgba(10, 0, 20, .65) 100%),
              linear-gradient(180deg, rgba(20, 0, 40, .45), transparent 22%, transparent 88%, rgba(0, 0, 0, .45)); }
/* wandernder Glanzlicht-Streif und Knitterstruktur */
.mc-koerper::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .85) 44%, rgba(255, 255, 255, .15) 50%, transparent 60%) 0 0 / 260% 100%,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mc-glanz 5s ease-in-out infinite alternate; }
@keyframes mc-glanz { from { background-position: 110% 0, 0 0; } to { background-position: -10% 0, 0 0; } }
.mc-pack .mc-logo { position: absolute; z-index: 4; left: 50%; top: 13%; translate: -50% 0; width: 100%; --logo: 16.6cqi; }
.mc-inhalt { position: absolute; z-index: 4; left: 50%; bottom: 16px; translate: -50% 0; font-family: var(--f-anzeige); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
  color: var(--mc-nacht); background: linear-gradient(180deg, #fff6c8, var(--mc-gelb) 40%, var(--mc-orange)); padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--mc-nacht), 0 4px 0 var(--mc-nacht), 0 8px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 18px rgba(255, 200, 90, .6); }
.pack-huelle.zu .mc-inhalt { animation: tippen 1.6s ease-in-out infinite; }
.mc-limit { position: absolute; z-index: 4; top: 12px; right: 12px; font-family: var(--f-zahl); font-size: .58rem; font-weight: 700; letter-spacing: .08em; color: #fff;
  background: rgba(20, 6, 34, .55); border: 1px solid rgba(255, 255, 255, .35); padding: 3px 7px; border-radius: 999px; }
/* Schein hinter der Bühne: Sonnenuntergang statt Seltenheitsfarbe, der Blitz warm */
.pack-buehne.magiccity.schein-gewoehnlich::before, .pack-buehne.magiccity.schein-selten::before { background: radial-gradient(circle, #ffd45c, #ff6b5e 60%, transparent); }
.pack-buehne.magiccity.schein-episch::before { background: radial-gradient(circle, #ff9bd0, #ff3d9a 45%, #8a3fd8 80%); }
.pack-buehne.magiccity.schein-legendaer::before { background: radial-gradient(circle, #fff1b8, #ff9b3a 50%, #ff3d9a); }
.pack-buehne.magiccity.schein-fullart::before { background: conic-gradient(#3b5ee0, #8a3fd8, #ff3d9a, #ff9b3a, #ffd45c, #2fd2c6, #3b5ee0); }
.pack-buehne.magiccity.offen::before { opacity: .45; }
.pack-buehne.magiccity.blitz::after { background: radial-gradient(circle at 50% 40%, #fff6d0, #ffcf7a 40%, #ff7ab0); }
.pack-buehne.magiccity .stapel-karte .karte { height: 100%; }

/* ---------- Seitenhintergrund: Miami am Abend (nur im Magic-City-Bereich) ---------- */
body.mc-seite {
  background: #0b0a2e;
  --text-matt: #e4d2f5; --flaeche: rgba(26, 10, 52, .78); --flaeche-hell: rgba(70, 28, 104, .85); --linie: rgba(255, 200, 240, .3); --akzent: #ff5fae;
}
.mc-himmel {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1px 1px at 8% 9%, #fff, transparent), radial-gradient(1.5px 1.5px at 17% 21%, #fff, transparent), radial-gradient(1px 1px at 27% 6%, #fff, transparent),
    radial-gradient(1px 1px at 38% 16%, #ffe9f6, transparent), radial-gradient(1.5px 1.5px at 49% 8%, #fff, transparent), radial-gradient(1px 1px at 58% 24%, #fff, transparent),
    radial-gradient(1px 1px at 67% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 76% 5%, #ffe9f6, transparent), radial-gradient(1px 1px at 86% 19%, #fff, transparent),
    radial-gradient(1px 1px at 93% 8%, #fff, transparent), radial-gradient(1px 1px at 12% 33%, #fff, transparent), radial-gradient(1px 1px at 81% 34%, #fff, transparent),
    radial-gradient(ellipse 80% 42% at 50% 100%, rgba(255, 214, 120, .55), rgba(255, 120, 80, .24) 45%, transparent 75%),
    linear-gradient(180deg, #050826 0%, #140d4a 22%, #3a1873 42%, #82298a 62%, #c6397f 80%, #ff7a4a 100%);
}
.mc-h-sonne {
  position: absolute; left: 50%; bottom: -22vmin; width: min(78vmin, 640px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; opacity: .8;
  background: linear-gradient(180deg, #fff1b0 0%, var(--mc-gelb) 22%, var(--mc-orange) 52%, var(--mc-pink) 85%);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10%) bottom / 100% 45% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10%) bottom / 100% 45% no-repeat;
}
.mc-h-palme { position: absolute; bottom: -3vh; width: min(36vw, 440px); aspect-ratio: 2 / 3; background: #0d0420; opacity: .86;
  -webkit-mask: var(--mc-palme) center bottom / contain no-repeat; mask: var(--mc-palme) center bottom / contain no-repeat; }
.mc-h-palme.l { left: -7vw; transform: scaleX(-1) rotate(3deg); }
.mc-h-palme.r { right: -9vw; width: min(30vw, 380px); bottom: -1vh; transform: rotate(-3deg); }
@media (max-width: 700px) { .mc-h-palme { width: 52vw; } .mc-h-palme.r { width: 44vw; } .mc-h-palme.l { left: -22vw; } .mc-h-palme.r { right: -20vw; } }

/* Kopf und Reiter im Magic-City-Bereich */
.mc-seite .sammlung-kopf h1, .mc-seite .pack-text h1 {
  color: #fff; -webkit-text-stroke: .1em var(--mc-nacht); paint-order: stroke fill; text-shadow: 0 .05em 0 var(--mc-pink), 0 .1em .14em rgba(0, 0, 0, .5);
}
.mc-seite .abschnitt-kopf h2, .mc-seite .sammlung-magiccity h2 { color: var(--mc-gelb); text-shadow: 0 2px 0 var(--mc-nacht); }
.mc-reiter { margin-bottom: 18px; }
.mc-reiter a { backdrop-filter: none; }
.mc-reiter a.mc { color: var(--mc-gelb); }
.mc-reiter a.mc .zahl { font-family: var(--f-zahl); font-weight: 500; font-size: .8em; opacity: .85; margin-left: 4px; }
.mc-reiter a.mc[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(255, 61, 154, .55), rgba(255, 155, 58, .55)); box-shadow: inset 0 -3px 0 var(--mc-gelb); }
.mc-kopf .mc-werkzeug { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: flex-start; margin-top: 18px; }
.mc-seite .welt-stand { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(20, 6, 34, .5); }
.mc-seite .welt-stand.komplett { color: var(--mc-nacht); background: var(--mc-gelb); border-color: var(--mc-gelb); }
.mc-seite .guthaben-zeile .wert { color: var(--mc-gelb); }
.mc-seite .fuss { background: rgba(10, 4, 24, .55); border-top-color: rgba(255, 200, 240, .25); }
.mc-seite .karte-wahl, .mc-seite .tausch-karte { position: relative; }
.magiccity-start { padding-block: clamp(8px, 2vw, 24px); }
.magiccity-start .pack-text { padding: 20px 24px; border-radius: 12px; background: rgba(20, 6, 34, .62); box-shadow: 0 0 0 1px rgba(255, 200, 240, .2); }
.pack-seite .mc-reiter { margin-bottom: clamp(20px, 4vw, 40px); }
@media (max-width: 760px) { .pack-start.magiccity-start { justify-items: center; } }
.pack-buehne.magiccity .stapel-hinweis { color: #fff; text-shadow: 0 1px 4px rgba(10, 4, 24, .8); }
.pack-buehne.magiccity .stapel-hinweis button { color: var(--mc-gelb); font-weight: 700; }
/* Rückseite: Rahmen füllt die ganze Karte (Prozenthöhe löst sich im Seitenverhältnis-Kasten nicht auf) */
.karte-ruecken.mc-ruecken { position: relative; }
.karte-ruecken.mc-ruecken > .mc-rahmen { position: absolute; inset: 6px; height: auto; }
/* Rückseite steht still (Patrick, 14.11.2026): in der Sammlung liegen bis zu 200 davon, Holo, Strahlen und Wasser liefen sonst überall endlos */
.mc-ruecken .mc-rahmen::after, .mc-ruecken .mc-szene > span { animation: none; }
/* Ergebnis eines Magic-City-Packs: drei Karten mittig, Texte lesbar auf dem Sonnenuntergang */
.pack-buehne.magiccity .ergebnis-karten { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; }
@media (max-width: 520px) { .pack-buehne.magiccity .ergebnis-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-buehne.magiccity .ergebnis h2 { color: #fff; -webkit-text-stroke: .08em var(--mc-nacht); paint-order: stroke fill; text-shadow: 0 .05em 0 var(--mc-pink); }
.pack-buehne.magiccity .guthaben-zeile { color: #fff; text-shadow: 0 1px 4px rgba(10, 4, 24, .8); }
.pack-buehne.magiccity .knopf.zweit { background: rgba(20, 6, 34, .72); color: #fff; }