/* Tierkreis-Karten 2.0 (2026-10-20, .claude/karten-2-konzept.md): große Karte .k2 (Hand, Sammlung, Deck, Großansicht), Feldkarte .k3 im Duell.
   Entwurf und Muster: entwuerfe/karten-2/muster.html. Rahmen = Seltenheit, innen = Element, Kosten/Angriff/Leben als Kugeln in Fassungen.
   Die Karte trägt zusätzlich die Klasse .hk, damit Größen (--b) aus duell.css/karten.css/deck.css weiter gelten. */

/* Zwei Farbsignale (Nutzer 2026-10-20): äußerer Rahmen = Seltenheit (Normal Stahl, Selten Saphirblau, Legendär Gold,
   Mythisch Violett), innen = Element (Leisten, Bildfenster, Element-Kugel, Wasserzeichen). */
.k2, .k2f {
  --el: #3d7fc2; --el-hell: #dbe9f7; --el-tief: #173a63;
  --rand-a: #d5d9de; --rand-b: #4b525a; --schein: transparent;
  --flaeche: color-mix(in srgb, var(--el-tief) 55%, #0b0f16);
  --leiste-a: color-mix(in srgb, var(--el) 22%, #fff); --leiste-b: color-mix(in srgb, var(--el) 60%, #fff);
  --papier: color-mix(in srgb, var(--el-hell) 55%, #fbf8f1);
  --tinte: #1b2128;
}
[data-el="wasser"] { --el: #3d7fc2; --el-hell: #dbe9f7; --el-tief: #173a63; }
[data-el="erde"]   { --el: #b4843f; --el-hell: #f1e2c6; --el-tief: #5a3d15; }
[data-el="holz"]   { --el: #4f9a4a; --el-hell: #dcedd0; --el-tief: #22481f; }
[data-el="feuer"]  { --el: #c9573d; --el-hell: #f6dbcf; --el-tief: #6a2213; }
[data-el="metall"] { --el: #8b939c; --el-hell: #e8eaec; --el-tief: #3a4047; }
[data-el="neutral"] { --el: #8b939c; --el-hell: #ece9e2; --el-tief: #2f3338; }

/* Seltenheit am Rahmen: Selten Saphirblau mit leichtem Schein, Legendär Gold mit warmem Schein; Mythisches Wesen violett */
.k2[data-sel="selten"], .k2f[data-sel="selten"] { --rand-a: #c4ecff; --rand-b: #1452a3; --schein: rgb(70 170 255 / .55); }
.k2[data-sel="legendaer"], .k2f[data-sel="legendaer"] { --rand-a: #fff1b0; --rand-b: #9a6512; --schein: rgb(255 196 60 / .65); }
.k2--wesen {
  --rand-a: #d9c0ff; --rand-b: #3d1873; --flaeche: #170d2b; --schein: rgb(170 110 255 / .6);
  --leiste-a: #8a5fd0; --leiste-b: #4a2486; --papier: #ece3f8;
}

.k2 {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size;
  /* kein Innenabstand in %: der bezöge sich auf die umgebende Fläche (z. B. die ganze Hand) – die Fläche liegt per inset in cqi */
  border-radius: 4.5% / 3.2%; padding: 0;
  background: linear-gradient(135deg, var(--rand-a) 0%, var(--rand-b) 32%, var(--rand-a) 50%, var(--rand-b) 72%, var(--rand-a) 100%);
  box-shadow: 0 0 14px 2px var(--schein), 0 4px 12px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .35);
  color: var(--tinte); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; line-height: 1.25; text-align: left;
}
/* Kartenfläche mit runden Aussparungen oben links und in beiden unteren Ecken: Dort fließt das Rahmenmetall hinein
   und bildet die Fassung für Kosten, Angriff und Leben (Kugeln liegen nicht auf dem Rand, sondern in der Fassung). */
.k2 { --nr: 8.8cqi; --nm: 8cqi; }
.k2__flaeche {
  position: absolute; inset: 3cqi; border-radius: 2.6cqi; overflow: hidden;
  display: flex; flex-direction: column; gap: 2.2cqi; padding: 2cqi 2.6cqi 12cqi;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--el) 30%, var(--flaeche)), var(--flaeche) 70%);
  box-shadow: inset 0 0 0 .5cqi rgb(0 0 0 / .35);
  --aus: transparent calc(var(--nr) - .1cqi), #000 var(--nr);
  -webkit-mask:
    radial-gradient(circle var(--nr) at var(--nm) var(--nm), var(--aus)),
    radial-gradient(circle var(--nr) at var(--nm) calc(100% - var(--nm)), var(--aus)),
    radial-gradient(circle var(--nr) at calc(100% - var(--nm)) calc(100% - var(--nm)), var(--aus));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--nr) at var(--nm) var(--nm), var(--aus)),
    radial-gradient(circle var(--nr) at var(--nm) calc(100% - var(--nm)), var(--aus)),
    radial-gradient(circle var(--nr) at calc(100% - var(--nm)) calc(100% - var(--nm)), var(--aus));
  mask-composite: intersect;
}

/* Metallkugeln (Kosten, Angriff, Leben): glänzende Kugel in einer Fassung aus Rahmenmetall */
/* Kugel sitzt mittig in der Aussparung: Kartenrand 3 % ≈ 3,2cqi + Mittelpunkt --nm − halbe Kugel (7,2cqi) */
.k2__kosten, .k2__wert {
  position: absolute; z-index: 3; width: 14.4cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: .9cqi solid transparent;
  box-shadow: 0 0 0 .35cqi rgb(0 0 0 / .45), inset 0 -1cqi 1.6cqi rgb(0 0 0 / .3);
  color: #fff; font-size: 7.8cqi; font-weight: 900; line-height: 1;
  -webkit-text-stroke: .5cqi rgb(0 0 0 / .55); paint-order: stroke fill;
}
.k2__kosten {
  top: 3.8cqi; left: 3.8cqi; -webkit-text-stroke-color: #0d2a52;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / .9) 0 9%, transparent 22%) padding-box,
    radial-gradient(circle at 45% 38%, #eaf5ff, #8cc2f0 45%, #2f6cab 100%) padding-box,
    linear-gradient(135deg, var(--rand-a), var(--rand-b) 55%, var(--rand-a)) border-box;
}
.k2__wert { bottom: 3.8cqi; }
.k2__wert svg { position: absolute; inset: 20%; width: 60%; height: 60%; color: rgb(255 255 255 / .2); }
.k2__wert b { position: relative; }
.k2__angriff {
  left: 3.8cqi;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / .85) 0 9%, transparent 22%) padding-box,
    radial-gradient(circle at 45% 38%, #ffe68a, #eeb124 50%, #a96c06 100%) padding-box,
    linear-gradient(135deg, var(--rand-a), var(--rand-b) 55%, var(--rand-a)) border-box;
}
.k2__leben {
  right: 3.8cqi;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / .85) 0 9%, transparent 22%) padding-box,
    radial-gradient(circle at 45% 38%, #ff9d8f, #e2402f 50%, #8c160c 100%) padding-box,
    linear-gradient(135deg, var(--rand-a), var(--rand-b) 55%, var(--rand-a)) border-box;
}

/* Namensleiste aus Metall, links Platz für die Kosten-Kugel, rechts Element-Kugel */
.k2__kopf {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 12cqi;
  margin-left: 13.6cqi; padding: .8cqi 13cqi .8cqi 3.6cqi; border-radius: 1.4cqi;
  background: linear-gradient(180deg, var(--leiste-a), var(--leiste-b));
  box-shadow: inset 0 .4cqi 0 rgb(255 255 255 / .6), inset 0 -.5cqi .8cqi rgb(0 0 0 / .18), 0 0 0 .4cqi rgb(0 0 0 / .25);
}
.k2__name { display: block; font-size: 6.6cqi; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k2__name small { font-size: 3.6cqi; font-weight: 600; opacity: .7; margin-left: 1.2cqi; letter-spacing: 0; }
.k2__form { display: block; font-size: 3.2cqi; font-style: italic; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k2__element {
  position: absolute; top: 50%; right: 1cqi; width: 10.5cqi; aspect-ratio: 1; margin-top: -5.25cqi; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: .8cqi solid transparent;
  background:
    radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--el) 50%, #fff), var(--el) 55%, var(--el-tief)) padding-box,
    linear-gradient(135deg, var(--rand-a), var(--rand-b)) border-box;
  box-shadow: 0 .3cqi .6cqi rgb(0 0 0 / .3);
}
.k2__element svg { width: 62%; height: 62%; }

/* Bildfenster mit dunkler Innenkante */
.k2__bild {
  position: relative; flex-shrink: 0; aspect-ratio: 16 / 10.6; border-radius: 1.6cqi; padding: .8cqi;
  background: linear-gradient(135deg, var(--rand-a), var(--rand-b) 50%, var(--rand-a));
  box-shadow: 0 0 0 .5cqi rgb(0 0 0 / .4);
}
/* Techniken und legendäre Tiere (zwei Fähigkeiten) haben mehr Text: flacheres Bild, damit nichts abgeschnitten wird (2026-10-20) */
.k2--technik .k2__bild, .k2[data-sel="legendaer"]:not(.k2--wesen) .k2__bild { aspect-ratio: 16 / 9; }
.k2[data-sel="legendaer"]:not(.k2--wesen) .k2__text { gap: .8cqi; padding-top: 2cqi; line-height: 1.2; }
.k2__fenster {
  position: absolute; inset: .8cqi; border-radius: 1cqi; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 .5cqi, transparent .5cqi 6cqi),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--el) 85%, #000) 0%, transparent 55%),
    radial-gradient(circle at 50% 38%, #fff 0%, var(--el-hell) 32%, color-mix(in srgb, var(--el) 75%, var(--el-hell)) 100%);
  box-shadow: inset 0 0 1.4cqi rgb(0 0 0 / .35);
}
/* Bildgröße nach Entwicklung (Form I–V bzw. Wesensstufe 1–6, --gr aus karte2.js): kleine Formen stehen kleiner unten im Fenster */
.k2__fenster img {
  position: absolute; z-index: 1; left: 50%; bottom: 3%; width: calc(94% * var(--gr, 1)); height: calc(94% * var(--gr, 1));
  transform: translateX(-50%); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 1.2cqi 1cqi rgb(0 0 0 / .3));
}
.k2__vorform {
  position: absolute; z-index: 2; top: 1.8cqi; left: 1.8cqi; width: 12cqi; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #fff 30%, var(--el-hell));
  box-shadow: 0 0 0 .7cqi var(--rand-a), 0 0 0 1.1cqi var(--rand-b), 0 .6cqi 1.2cqi rgb(0 0 0 / .3);
}
.k2__vorform img { width: 100%; height: 100%; object-fit: contain; }

/* Infoleiste mit abgeschrägten Enden */
.k2__info {
  flex-shrink: 0; padding: .9cqi 5cqi; text-align: center;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
  background: linear-gradient(180deg, var(--leiste-a), var(--leiste-b));
  font-size: 3.2cqi; font-style: italic; font-weight: 600; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Helles Textfeld wie Papier, Element als Wasserzeichen */
.k2__text {
  position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1.4cqi;
  padding: 2.6cqi 3.8cqi 4cqi; border-radius: 1.6cqi;
  background:
    radial-gradient(130% 90% at 30% 10%, rgb(255 255 255 / .7), transparent 60%),
    linear-gradient(180deg, var(--papier), color-mix(in srgb, var(--papier) 85%, var(--el)));
  box-shadow: inset 0 0 0 .5cqi color-mix(in srgb, var(--rand-a) 60%, transparent), inset 0 .6cqi 1.4cqi rgb(0 0 0 / .12);
}
.k2__zeichen { position: absolute; right: -3cqi; bottom: -2cqi; width: 36cqi; aspect-ratio: 1; color: var(--el); opacity: .14; pointer-events: none; }
.k2__zeichen svg { width: 100%; height: 100%; }
.k2__faeh { position: relative; display: grid; grid-template-columns: 7cqi 1fr; gap: 0 2.2cqi; align-items: start; }
.k2__faeh-sym {
  width: 7cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5a6470, #262c33); box-shadow: 0 0 0 .5cqi rgb(255 255 255 / .8);
}
.k2__faeh-sym svg { width: 62%; height: 62%; }
.k2__faeh b { display: block; font-size: 5cqi; font-weight: 800; }
.k2__faeh span { display: block; font-size: 4.1cqi; }
.k2__faeh--zweite .k2__faeh-sym { background: radial-gradient(circle at 35% 30%, #f4d27a, #b8861f); }
.k2__faeh--zweite b::after { content: " (legendär)"; font-size: 3cqi; font-weight: 600; opacity: .7; }
.k2__faeh .k2__textgross { font-size: 4.8cqi; font-weight: 600; }
.k2__steckbrief { position: relative; margin-top: auto; font-size: 3.4cqi; font-style: italic; opacity: .75; text-align: right;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.k2[data-sel="legendaer"] .k2__steckbrief { display: none; }

/* Dunkle Fußleiste zwischen Angriff und Leben */
.k2__fuss {
  position: absolute; z-index: 2; left: 50%; bottom: 1.6cqi; transform: translateX(-50%); width: 58cqi; height: 8.6cqi;
  display: flex; align-items: center; justify-content: center; gap: 1.6cqi;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  background: linear-gradient(180deg, #343a43, #101317);
  box-shadow: inset 0 .4cqi 0 rgb(255 255 255 / .12);
  font-size: 3.4cqi; font-weight: 700; color: #eef0f2; white-space: nowrap;
}
.k2__fuss::before { content: ""; position: absolute; inset: 0; clip-path: inherit; box-shadow: inset 0 0 0 .5cqi var(--rand-a); opacity: .5; }
.k2__sel { font-size: 4cqi; line-height: 1; color: var(--rand-a); }
/* Seltenheitsname in der Fußleiste in der Rahmenfarbe */
.k2[data-sel="selten"] .k2__fuss > span:nth-child(2) { color: #9fdcff; }
.k2[data-sel="legendaer"] .k2__fuss > span:nth-child(2) { color: #ffd76a; }
.k2--wesen .k2__fuss > span:nth-child(2) { color: #d6b8ff; }
.k2__nr { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; letter-spacing: .02em; opacity: .85; }

/* Glanz: Selten im Bildfenster, Legendär auf der ganzen Karte (beim Darüberfahren) */
.k2[data-sel="selten"] .k2__fenster::after,
.k2[data-sel="legendaer"] .k2__flaeche::after,
.k2--wesen .k2__fenster::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgb(255 255 255 / .6) 42%, rgb(170 225 255 / .45) 48%, rgb(255 210 250 / .35) 54%, transparent 70%);
  background-size: 260% 100%; background-position: 100% 0; mix-blend-mode: soft-light;
  transition: background-position .9s ease;
}
.k2[data-sel="legendaer"] .k2__flaeche::after { mix-blend-mode: overlay; opacity: .7; }
.k2:hover .k2__fenster::after, .k2:hover .k2__flaeche::after { background-position: 0 0; }

/* Technik: grauer Rahmen, Technik-Symbol in der rechten Kugel, keine Werte */
.k2--technik .k2__flaeche {
  padding-bottom: 12cqi;
  -webkit-mask: radial-gradient(circle var(--nr) at var(--nm) var(--nm), var(--aus)); -webkit-mask-composite: source-over;
  mask: radial-gradient(circle var(--nr) at var(--nm) var(--nm), var(--aus)); mask-composite: add;
}
.k2--rueck .k2__flaeche { -webkit-mask: none; mask: none; }
.k2--technik .k2__fenster img { bottom: 5%; width: 80%; height: 90%; object-position: 50% 50%; }

/* Mythisches Wesen: dunkle violette Leisten mit heller Schrift */
.k2--wesen .k2__kopf, .k2--wesen .k2__info { color: #f4efff; }
.k2--wesen .k2__fenster {
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--el) 35%, #fff) 0%, color-mix(in srgb, var(--el) 60%, #1a1e2c) 45%, #0e111a 100%);
}
.k2__kraft { position: relative; padding: 1.8cqi 2.6cqi; border-radius: 1.2cqi; border-left: 1.2cqi solid #7a4cc4; background: rgb(122 76 196 / .1); }
.k2__kraft small { display: block; font-size: 2.8cqi; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b2fa3; }
.k2__kraft b { display: block; font-size: 5cqi; font-weight: 800; }
.k2__kraft span { display: block; font-size: 4.1cqi; }

/* Rückseite in den Website-Farben (Nutzer 2026-10-20): dunkles Grün mit Mint (Primär #176B5B / #75C9AD),
   45°-Linien und zwei Kreisbögen wie im Startseiten-Hero (.muster-geo) links und rechts, in der Mitte das DO-Zeichen aus dem Logo.
   Das Zeichen kommt als Maske aus images/logo/do-matik-logo-dunkel@2x.webp (DO = linke 547 von 1471 px). */
.k2--rueck { --rand-a: #b9ead8; --rand-b: #0f4a3e; --schein: rgb(117 201 173 / .35); }
.k2--rueck .k2__flaeche {
  align-items: center; justify-content: center; gap: 4cqi; padding: 0;
  background: radial-gradient(circle at 50% 46%, #1f7a66 0%, #145446 38%, #0b2f28 100%);
  box-shadow: inset 0 0 0 .5cqi rgb(0 0 0 / .3), inset 0 0 0 1.4cqi rgb(117 201 173 / .25);
}
/* Linien links und rechts, zur Mitte hin auslaufend; Kreisbögen oben rechts und unten links */
.k2--rueck .k2__flaeche::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 92% 8%, transparent 0 29.6cqi, rgb(185 234 216 / .22) 29.8cqi 30.3cqi, transparent 30.5cqi 43.6cqi, rgb(185 234 216 / .16) 43.8cqi 44.3cqi, transparent 44.5cqi),
    radial-gradient(circle at 8% 92%, transparent 0 29.6cqi, rgb(185 234 216 / .22) 29.8cqi 30.3cqi, transparent 30.5cqi 43.6cqi, rgb(185 234 216 / .16) 43.8cqi 44.3cqi, transparent 44.5cqi),
    repeating-linear-gradient(45deg, transparent 0 6.4cqi, rgb(185 234 216 / .2) 6.4cqi 6.8cqi);
  -webkit-mask: linear-gradient(90deg, #000 0%, transparent 38%, transparent 62%, #000 100%);
  mask: linear-gradient(90deg, #000 0%, transparent 38%, transparent 62%, #000 100%);
}
.k2__do {
  position: relative; width: 62cqi; aspect-ratio: 547 / 240;
  background: linear-gradient(160deg, #e6fff4 0%, #9ee3c8 45%, #4fb393 100%);
  -webkit-mask: url("../images/logo/do-matik-logo-dunkel@2x.webp") 0 0 / 268.9% 100% no-repeat;
  mask: url("../images/logo/do-matik-logo-dunkel@2x.webp") 0 0 / 268.9% 100% no-repeat;
  filter: drop-shadow(0 0 2.4cqi rgb(117 201 173 / .8)) drop-shadow(0 .6cqi .6cqi rgb(0 0 0 / .35));
}
/* Leuchten hinter dem Zeichen (eigenes Element, weil die Maske das Zeichen selbst beschneidet) */
.k2__do-schein { position: absolute; left: 50%; top: 46%; width: 80cqi; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(117 201 173 / .35) 0%, rgb(117 201 173 / .12) 35%, transparent 65%); }
.k2__wort { position: relative; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 4.2cqi; font-weight: 600; letter-spacing: .3em; color: rgb(185 234 216 / .75); }

/* Feldkarte (kompakt) fürs Duell: gleicher Rahmen, Kugeln unten in den Ecken */
.k2f {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; border-radius: 8% / 6.4%; padding: 0;
  background: linear-gradient(135deg, var(--rand-a), var(--rand-b) 35%, var(--rand-a) 55%, var(--rand-b));
  box-shadow: 0 0 12px 1px var(--schein), 0 4px 12px rgb(0 0 0 / .35); font-family: "Segoe UI", system-ui, sans-serif;
}
.k2f .k2__fenster {
  inset: 4.5cqi; border-radius: 5cqi; box-shadow: inset 0 0 0 1cqi rgb(0 0 0 / .35);
  --aus: transparent 12.9cqi, #000 13cqi;
  -webkit-mask: radial-gradient(circle 13cqi at 12cqi calc(100% - 12cqi), var(--aus)), radial-gradient(circle 13cqi at calc(100% - 12cqi) calc(100% - 12cqi), var(--aus));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 13cqi at 12cqi calc(100% - 12cqi), var(--aus)), radial-gradient(circle 13cqi at calc(100% - 12cqi) calc(100% - 12cqi), var(--aus));
  mask-composite: intersect;
}
.k2f .k2__fenster img { bottom: 12%; width: calc(96% * var(--gr, 1)); height: calc(86% * var(--gr, 1)); }
.k2f__name { position: absolute; z-index: 2; left: 50%; top: 2cqi; transform: translateX(-50%); padding: .8cqi 4cqi; border-radius: 1.6cqi; white-space: nowrap;
  background: linear-gradient(180deg, var(--leiste-a), var(--leiste-b)); font-size: 8cqi; font-weight: 800; color: var(--tinte); }
.k2f__syms { position: absolute; z-index: 2; left: 50%; bottom: 3cqi; transform: translateX(-50%); display: flex; gap: 2cqi; }
.k2f__syms span { width: 12cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #262c33; box-shadow: 0 0 0 1cqi var(--rand-a); }
.k2f__syms svg { width: 62%; height: 62%; }
.k2f .k2__wert { width: 22cqi; border-width: 1.4cqi; font-size: 12cqi; bottom: 5.5cqi; -webkit-text-stroke-width: .8cqi; }
.k2f .k2__angriff { left: 5.5cqi; }
.k2f .k2__leben { right: 5.5cqi; }

/* Extra für Legendär und Mythisch (Nutzer 2026-10-20): Glitzer im Rahmen + langsam umlaufender Lichtschein nur auf dem Rahmen.
   Einzige Dauer-Animation der Karten; bei „Bewegung reduzieren“ bleibt nur der Glitzer. */
@property --dreh { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.k2[data-sel="legendaer"], .k2f[data-sel="legendaer"] {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1px, transparent 2px) 0 0 / 23px 29px,
    radial-gradient(circle at 70% 20%, rgb(255 246 200 / .8) 0 1px, transparent 2px) 0 0 / 37px 41px,
    linear-gradient(135deg, var(--rand-a) 0%, var(--rand-b) 32%, var(--rand-a) 50%, var(--rand-b) 72%, var(--rand-a) 100%);
}
.k2--wesen {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1px, transparent 2px) 0 0 / 21px 27px,
    radial-gradient(circle at 70% 20%, rgb(200 240 255 / .85) 0 1px, transparent 2px) 0 0 / 33px 39px,
    conic-gradient(from 200deg at 50% 50%, #c9a6ff, #7fd3ff, #ffd6f5, #9b6bff, #6fe0d0, #c9a6ff) ;
}
.k2[data-sel="legendaer"]::before, .k2--wesen::before, .k2f[data-sel="legendaer"]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3%; pointer-events: none;
  background: conic-gradient(from var(--dreh), transparent 0 62%, rgb(255 255 255 / .0) 64%, var(--lauf, rgb(255 248 215 / .95)) 74%, transparent 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mix-blend-mode: screen; animation: k2-lauf 7s linear infinite;
}
.k2f[data-sel="legendaer"]::before { padding: 4.5%; }
.k2--wesen::before { --lauf: rgb(235 220 255 / .95); animation-duration: 5.5s; }
@keyframes k2-lauf { to { --dreh: 360deg; } }

/* Nur Mythische Wesen (Nutzer 2026-10-20, sollen sich von allen anderen abheben): schillernder Strahlenkranz hinter dem Wesen,
   pulsierende violette Aura um die Karte */
.k2--wesen { animation: k2-aura 3.6s ease-in-out infinite; }
.k2--wesen .k2__fenster::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(214 176 255 / .6) 0 5deg, transparent 5deg 10deg, rgb(140 225 255 / .45) 10deg 15deg, transparent 15deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 8%, rgb(0 0 0 / .6) 30%, transparent 62%);
  mask: radial-gradient(circle, #000 8%, rgb(0 0 0 / .6) 30%, transparent 62%);
  animation: k2-strahl 60s linear infinite;
}
@keyframes k2-strahl { to { transform: rotate(360deg); } }

/* Legendär als Mittelding (Nutzer 2026-10-20): goldene Leisten, zarter goldener Strahlenkranz, sanft pulsierende Goldaura –
   ohne Regenbogen-Rahmen, Funken, Leuchten um die Figur und schimmernden Namen (die bleiben Mythisch vorbehalten) */
.k2[data-sel="legendaer"], .k2f[data-sel="legendaer"] { --leiste-a: #fff7d6; --leiste-b: #e0b048; animation: k2-gold 4.5s ease-in-out infinite; }
.k2[data-sel="legendaer"] .k2__fenster::before, .k2f[data-sel="legendaer"] .k2__fenster::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 222 120 / .42) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .5) 28%, transparent 55%);
  mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .5) 28%, transparent 55%);
  animation: k2-strahl 90s linear infinite;
}
@keyframes k2-gold {
  0%, 100% { box-shadow: 0 0 12px 2px rgb(255 196 60 / .5), 0 4px 12px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .35); }
  50%      { box-shadow: 0 0 20px 4px rgb(255 200 70 / .75), 0 4px 12px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .35); }
}

/* Mythisch noch stärker (Nutzer 2026-10-20): fließender Regenbogen-Rahmen, funkelnde Lichtpunkte im Bildfenster,
   leuchtender Schein um das Wesen, schimmernder Name */
@property --farbe { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.k2--wesen {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1px, transparent 2px) 0 0 / 21px 27px,
    radial-gradient(circle at 70% 20%, rgb(200 240 255 / .85) 0 1px, transparent 2px) 0 0 / 33px 39px,
    conic-gradient(from var(--farbe), #c9a6ff, #7fd3ff, #ffd6f5, #9b6bff, #6fe0d0, #ffe9a6, #c9a6ff);
  animation: k2-aura 3.6s ease-in-out infinite, k2-farbe 8s linear infinite;
}
@keyframes k2-farbe { to { --farbe: 360deg; } }
.k2--wesen .k2__fenster img { filter: drop-shadow(0 0 1.6cqi rgb(205 160 255 / .9)) drop-shadow(0 0 4cqi rgb(140 220 255 / .55)); }
.k2__funken, .k2__funken::before {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, #fff 0 .5cqi, transparent 1.1cqi),
    radial-gradient(circle at 84% 18%, #e7d4ff 0 .6cqi, transparent 1.3cqi),
    radial-gradient(circle at 70% 70%, #fff 0 .45cqi, transparent 1cqi),
    radial-gradient(circle at 26% 76%, #bdf0ff 0 .55cqi, transparent 1.2cqi),
    radial-gradient(circle at 50% 12%, #fff 0 .4cqi, transparent .9cqi);
  animation: k2-funkeln 2.2s ease-in-out infinite alternate;
}
.k2__funken::before {
  content: "";
  background:
    radial-gradient(circle at 92% 52%, #fff 0 .5cqi, transparent 1.1cqi),
    radial-gradient(circle at 8% 50%, #f1e4ff 0 .5cqi, transparent 1.1cqi),
    radial-gradient(circle at 40% 88%, #fff 0 .45cqi, transparent 1cqi),
    radial-gradient(circle at 60% 34%, #c8f4ff 0 .4cqi, transparent .9cqi);
  animation-delay: -1.1s; animation-duration: 1.7s;
}
@keyframes k2-funkeln { from { opacity: .1; } to { opacity: 1; } }
.k2--wesen .k2__name {
  background: linear-gradient(90deg, #fff 0%, #e4cfff 25%, #a9ecff 50%, #ffe3f6 75%, #fff 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: k2-schrift 4s linear infinite;
}
@keyframes k2-schrift { to { background-position: 200% 0; } }
@keyframes k2-aura {
  0%, 100% { box-shadow: 0 0 12px 2px rgb(170 110 255 / .55), 0 4px 12px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .35); }
  50%      { box-shadow: 0 0 30px 8px rgb(185 130 255 / .9), 0 4px 12px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .35); }
}

/* ===================== Feldkarte 2.0 (Vorschlag 2026-10-20) =====================
   Randloses Tier vor einer kleinen Element-Szene, ragt bei hohen Formen über den Rahmen hinaus (Pop-out),
   gleicher Rahmen wie die großen Karten (Seltenheit), Angriff/Leben als Kugeln in Fassungen, Fähigkeiten als Plaketten.
   Zustände werden an der Karte gezeigt (keine Zughilfe): Wache = Schild hinter der Karte, Schild = Lichtblase,
   Schlaf = entsättigt + Zz, Gefesselt = Ketten, Gift = grüner Tropfen. Treffer/Besiegt als kurze Reaktion. */
.k3-platz { position: relative; width: 100%; }
.k3 {
  --rand-a: #d5d9de; --rand-b: #4b525a; --schein: transparent; --ring-a: var(--rand-a); --ring-b: var(--rand-b);
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size;
  border-radius: 9% / 7.2%; padding: 0;
  background: linear-gradient(135deg, var(--rand-a), var(--rand-b) 35%, var(--rand-a) 55%, var(--rand-b));
  box-shadow: 0 0 14px 2px var(--schein), 0 6px 14px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .35);
  font-family: "Segoe UI", system-ui, sans-serif; transition: transform .2s ease;
  transform: perspective(700px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
}
.k3[data-sel="selten"] { --rand-a: #c4ecff; --rand-b: #1452a3; --schein: rgb(70 170 255 / .55); }
.k3[data-sel="legendaer"] { --rand-a: #fff1b0; --rand-b: #9a6512; --schein: rgb(255 196 60 / .65); animation: k2-gold 4.5s ease-in-out infinite; }
.k3--wesen {
  --rand-a: #d9c0ff; --rand-b: #3d1873; --schein: rgb(170 110 255 / .6);
  background: conic-gradient(from var(--farbe), #c9a6ff, #7fd3ff, #ffd6f5, #9b6bff, #6fe0d0, #ffe9a6, #c9a6ff);
  animation: k2-aura 3.6s ease-in-out infinite, k2-farbe 8s linear infinite;
}
/* Element-Szene: Himmel, Strahlen, Hügel, Bodenschatten; unten zwei Aussparungen für die Fassungen */
.k3__szene {
  position: absolute; inset: 4.5cqi; border-radius: 6cqi; overflow: hidden;
  background:
    radial-gradient(34% 7% at 50% 81%, rgb(0 0 0 / .4), transparent 70%),
    radial-gradient(130% 38% at 50% 100%, color-mix(in srgb, var(--el) 70%, #000) 0 50%, transparent 51%),
    radial-gradient(150% 46% at 50% 100%, color-mix(in srgb, var(--el) 85%, #fff) 0 50%, transparent 51%),
    repeating-conic-gradient(from 0deg at 50% 62%, rgb(255 255 255 / .13) 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 50% 55%, #fff 0, var(--el-hell) 24%, color-mix(in srgb, var(--el) 70%, var(--el-hell)) 58%, var(--el-tief) 100%);
  box-shadow: inset 0 0 0 .8cqi rgb(0 0 0 / .35), inset 0 0 6cqi rgb(0 0 0 / .35);
  --aus: transparent 13.9cqi, #000 14cqi;
  -webkit-mask: radial-gradient(circle 14cqi at 12cqi calc(100% - 12cqi), var(--aus)), radial-gradient(circle 14cqi at calc(100% - 12cqi) calc(100% - 12cqi), var(--aus));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 14cqi at 12cqi calc(100% - 12cqi), var(--aus)), radial-gradient(circle 14cqi at calc(100% - 12cqi) calc(100% - 12cqi), var(--aus));
  mask-composite: intersect;
}
/* Normal ohne Streifen (Nutzer 2026-10-20): ruhiger Verlauf; Selten behält die zarten Strahlen */
.k3[data-sel="normal"]:not(.k3--wesen) .k3__szene { background:
    radial-gradient(34% 7% at 50% 81%, rgb(0 0 0 / .4), transparent 70%),
    radial-gradient(130% 38% at 50% 100%, color-mix(in srgb, var(--el) 70%, #000) 0 50%, transparent 51%),
    radial-gradient(150% 46% at 50% 100%, color-mix(in srgb, var(--el) 85%, #fff) 0 50%, transparent 51%),
    radial-gradient(circle at 50% 55%, #fff 0, var(--el-hell) 24%, color-mix(in srgb, var(--el) 70%, var(--el-hell)) 58%, var(--el-tief) 100%); }
.k2[data-sel="normal"] .k2__fenster:not(.k2--technik *) { background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--el) 85%, #000) 0%, transparent 55%),
    radial-gradient(circle at 50% 38%, #fff 0%, var(--el-hell) 32%, color-mix(in srgb, var(--el) 75%, var(--el-hell)) 100%); }
.k3--wesen .k3__szene { background:
    radial-gradient(34% 7% at 50% 81%, rgb(0 0 0 / .5), transparent 70%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--el) 35%, #fff) 0%, color-mix(in srgb, var(--el) 60%, #1a1e2c) 45%, #0e111a 100%); }
/* Strahlenkranz Legendär/Mythisch, Funken Mythisch */
.k3[data-sel="legendaer"] .k3__szene::before, .k3--wesen .k3__szene::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%;
  background: repeating-conic-gradient(from 0deg, rgb(255 222 120 / .5) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .5) 28%, transparent 55%); mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .5) 28%, transparent 55%);
  animation: k2-strahl 90s linear infinite;
}
.k3--wesen .k3__szene::before { background: repeating-conic-gradient(from 0deg, rgb(214 176 255 / .6) 0 5deg, transparent 5deg 10deg, rgb(140 225 255 / .45) 10deg 15deg, transparent 15deg 20deg); animation-duration: 60s; }
/* Tier: steht auf dem Hügel und wächst mit der Form, berührt aber nie den Rahmen (Nutzer 2026-10-20):
   Höhe höchstens 70 % der Karte (oben bleiben ≥ 4cqi bis zur Szenenkante), Breite höchstens 80 % */
.k3__tier {
  position: absolute; z-index: 3; left: 50%; bottom: 21%; width: calc(80% * var(--gr, 1)); height: calc(70% * var(--gr, 1));
  transform: translateX(-50%); object-fit: contain; object-position: 50% 100%; pointer-events: none;
  filter: drop-shadow(0 1.4cqi 1.2cqi rgb(0 0 0 / .45));
}
.k3--wesen .k3__tier { filter: drop-shadow(0 0 2cqi rgb(205 160 255 / .9)) drop-shadow(0 0 5cqi rgb(140 220 255 / .5)); }
/* Name als Band zwischen den Kugeln */
.k3__name {
  position: absolute; z-index: 4; left: 50%; bottom: 6.5cqi; transform: translateX(-50%); padding: 1.2cqi 7cqi; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  background: linear-gradient(180deg, var(--rand-a), var(--rand-b));
  color: #fff; font-size: 9cqi; font-weight: 800; letter-spacing: .01em; line-height: 1.15;
  text-shadow: 0 .4cqi 0 rgb(0 0 0 / .55), 0 0 1.2cqi rgb(0 0 0 / .6);   /* lesbarer als Kontur (Nutzer-Wunsch 2026-10-20) */
}
/* Angriff und Leben: gleiche Kugeln wie auf der großen Karte, deutlich größer (Nutzer-Wunsch 2026-10-20);
   sie ragen etwas über die unteren Ecken hinaus, damit der Name dazwischen Platz hat */
.k3 .k2__wert { width: 31cqi; border-width: 2cqi; font-size: 18cqi; bottom: -3cqi; -webkit-text-stroke-width: 1cqi; z-index: 5; }
.k3 .k2__angriff { left: -5cqi; }
.k3 .k2__leben { right: -5cqi; }
.k3 .k2__leben.verletzt b { color: #ffc2b8; }
.k3 .k2__wert.hoch b { color: #c9ffb8; }
/* Fähigkeiten als Plaketten links oben, Zustands-Plaketten rechts oben */
.k3__plaketten { position: absolute; z-index: 5; top: 7cqi; display: flex; flex-direction: column; gap: 2cqi; }
.k3__plaketten--links { left: 7cqi; }
.k3__plaketten--rechts { right: 7cqi; }
.k3__plakette {
  width: 14cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5a6470, #20252b); border: 1cqi solid transparent;
  background-clip: padding-box; box-shadow: 0 0 0 1cqi var(--rand-a), 0 .8cqi 1.4cqi rgb(0 0 0 / .45);
}
.k3__plakette svg { width: 64%; height: 64%; }
.k3__plakette--zweite { background: radial-gradient(circle at 35% 30%, #f4d27a, #9a6a12); background-clip: padding-box; }
.k3__plakette--gift { background: radial-gradient(circle at 35% 30%, #9be86a, #2c7a1a); background-clip: padding-box; }
/* Kippen zur Maus und Glanzpunkt (nur Reaktion) */
.k3__glanz { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / .35), transparent 45%); mix-blend-mode: soft-light; }
.k3:hover .k3__glanz { opacity: 1; }

/* Zustände */
/* Wache (Nutzer 2026-10-20: Schild wirkte deplatziert): dicker Wehrrahmen um die Karte – schweres Metall mit Nieten
   und dunkler Fuge, gleiche Rundung wie die Karte, so wirkt der Kartenrahmen selbst verstärkt */
.k3-platz--wache::before {
  content: ""; position: absolute; inset: -6.5% -6.5%; z-index: 0; pointer-events: none; border-radius: 14% / 11.5%;
  background:
    radial-gradient(circle at 50% 2.4%, #f3f5f7 0 1.4%, #6c747d 1.6% 2.4%, transparent 2.6%),
    radial-gradient(circle at 50% 97.6%, #f3f5f7 0 1.4%, #6c747d 1.6% 2.4%, transparent 2.6%),
    radial-gradient(circle at 2.8% 50%, #f3f5f7 0 1.2%, #6c747d 1.4% 2%, transparent 2.2%),
    radial-gradient(circle at 97.2% 50%, #f3f5f7 0 1.2%, #6c747d 1.4% 2%, transparent 2.2%),
    linear-gradient(135deg, #eef1f3 0%, #626a73 30%, #c9ced3 50%, #4a5159 72%, #dfe3e6 100%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .45), inset 0 0 0 5px rgb(0 0 0 / .25), 0 6px 12px rgb(0 0 0 / .5);
}
.k3-platz--wache::after { content: ""; position: absolute; inset: -1.6%; z-index: 0; pointer-events: none; border-radius: 10.5% / 8.4%;
  background: #12161a; box-shadow: inset 0 2px 4px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .2); }
/* Ansturm (immer gleich, unabhängig davon, ob das Tier gerade angreifen darf): Windstreifen an beiden Seiten, die nach vorn ziehen */
.k3__wind { position: absolute; top: -6%; bottom: -6%; left: -9%; right: -9%; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(0deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(0deg, transparent, #000 25%, #000 75%, transparent); }
.k3__wind::before {
  content: ""; position: absolute; inset: 0 0 -40% 0;
  background:
    linear-gradient(0deg, transparent 0 10%, rgb(225 245 255 / .9) 10% 30%, transparent 30% 55%, rgb(225 245 255 / .7) 55% 70%, transparent 70%) 1.5% 0 / 2px 50% repeat-y,
    linear-gradient(0deg, transparent 0 35%, rgb(225 245 255 / .75) 35% 60%, transparent 60% 80%, rgb(225 245 255 / .5) 80% 92%, transparent 92%) 5% 0 / 2px 40% repeat-y,
    linear-gradient(0deg, transparent 0 20%, rgb(225 245 255 / .9) 20% 42%, transparent 42% 64%, rgb(225 245 255 / .65) 64% 80%, transparent 80%) 98.5% 0 / 2px 50% repeat-y,
    linear-gradient(0deg, transparent 0 45%, rgb(225 245 255 / .7) 45% 68%, transparent 68% 85%, rgb(225 245 255 / .5) 85% 95%, transparent 95%) 95% 0 / 2px 40% repeat-y;
  background-size: 3px 50%, 3px 40%, 3px 50%, 3px 40%;
  filter: drop-shadow(0 0 3px rgb(180 230 255 / .9));
  animation: k3-wind 1.2s linear infinite;
}
@keyframes k3-wind { to { transform: translateY(-28.5%); } }
/* Flug: Karte schwebt leicht über dem Feld, Schatten bleibt unten */
/* Schweben über top in px-Werten der Kartenhöhe ist nicht möglich (Höhe des Platzes ist auto), daher fester Versatz per --hub */
.k3-platz--flug > .k3 { --hub: -10px; top: var(--hub); animation-name: k3-schweben; animation-duration: 3.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.k3-platz--flug > .k3[data-sel="legendaer"] { animation: k3-schweben 3.6s ease-in-out infinite, k2-gold 4.5s ease-in-out infinite; }
@keyframes k3-schweben { 0%, 100% { top: -10px; } 50% { top: -18px; } }
.k3__schatten { position: absolute; z-index: 0; left: 12%; right: 12%; bottom: -10px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / .7), transparent); filter: blur(3px); animation: k3-schatten 3.6s ease-in-out infinite; }
@keyframes k3-schatten { 50% { transform: scaleX(.8); opacity: .6; } }
.k3 .k2__angriff.tief b { color: #ffc2b8; }
.k3--schild::after {
  content: ""; position: absolute; inset: -7%; z-index: 7; border-radius: 50% / 46%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgb(255 255 255 / .55), transparent 22%),
    radial-gradient(closest-side, transparent 80%, rgb(140 220 255 / .3) 90%, rgb(200 245 255 / .85) 97%, transparent 100%);
}
.k3--schlaf .k3__tier { filter: grayscale(.75) brightness(.78) drop-shadow(0 1.4cqi 1.2cqi rgb(0 0 0 / .45)); }
.k3__zz { position: absolute; z-index: 6; top: 18%; right: 14%; font-size: 11cqi; font-weight: 900; color: #e8f4ff; letter-spacing: .1em;
  text-shadow: 0 0 2cqi rgb(120 180 255 / .9), 0 .5cqi .8cqi rgb(0 0 0 / .6); transform: rotate(-12deg); animation: k3-zz 2.6s ease-in-out infinite; }
.k3__zz small { font-size: 70%; }
@keyframes k3-zz { 50% { transform: rotate(-12deg) translateY(-2cqi); opacity: .7; } }
.k3__kette {
  position: absolute; z-index: 6; left: -6%; right: -6%; top: 46%; height: 9cqi; pointer-events: none;
  background: radial-gradient(ellipse 3.4cqi 2.4cqi at 50% 50%, transparent 52%, #dfe3e7 58% 74%, #6b737c 78%, transparent 84%) 0 0 / 6.4cqi 100% repeat-x;
  filter: drop-shadow(0 .6cqi .6cqi rgb(0 0 0 / .6)); transform: rotate(-26deg);
}
.k3__kette + .k3__kette { transform: rotate(26deg); }
/* Treffer und Besiegt (kurze Reaktionen) */
.k3--treffer { animation: k3-wackeln .45s ease; }
@keyframes k3-wackeln { 20% { translate: -2.5% 0; } 40% { translate: 2.5% 0; } 60% { translate: -1.5% 0; } 80% { translate: 1% 0; } }
.k3__blitz { position: absolute; inset: 0; z-index: 8; border-radius: inherit; background: rgb(255 70 40 / .5); pointer-events: none; animation: k3-blitz .5s ease forwards; }
@keyframes k3-blitz { to { opacity: 0; } }
.k3__schaden { position: absolute; z-index: 9; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 26cqi; font-weight: 900; color: #fff;
  -webkit-text-stroke: 1.4cqi #b3160b; paint-order: stroke fill; pointer-events: none; animation: k3-hoch 1.1s ease-out forwards; }
@keyframes k3-hoch { 0% { scale: .4; opacity: 0; } 20% { scale: 1.15; opacity: 1; } 100% { translate: 0 -40%; opacity: 0; } }
.k3--besiegt { animation: k3-zerfall 1.1s ease-in forwards; }
@keyframes k3-zerfall { 30% { filter: brightness(1.6); } 100% { opacity: 0; scale: .8; translate: 0 8%; filter: blur(6px) grayscale(1); } }

/* Feldkarten Legendär/Mythisch deutlicher (Nutzer 2026-10-20: auf dem Feld zu wenig Effekt):
   kreisender, weich leuchtender Lichtring hinter der Karte, Glitzer im Rahmen, Lichtlauf auf dem Rahmen,
   kräftigerer Strahlenkranz, Funken in der Szene; Mythisch zusätzlich schimmerndes Namensband */
.k3-platz > .k3 { z-index: 1; }
.k3__halo { position: absolute; inset: -8%; z-index: 0; border-radius: 18% / 15%; pointer-events: none; filter: blur(9px); opacity: .9;
  background: conic-gradient(from var(--dreh), #ffd25a, transparent 22%, #fff3b8 50%, transparent 72%, #ffd25a);
  animation: k2-lauf 6s linear infinite; }
.k3__halo--wesen { inset: -10%; opacity: 1;
  background: conic-gradient(from var(--dreh), #b98bff, #7fd3ff 20%, transparent 33%, #ffb8ef 50%, #6fe0d0 66%, transparent 80%, #b98bff);
  animation-duration: 3.5s; }
.k3[data-sel="legendaer"] {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1px, transparent 2px) 0 0 / 17px 21px,
    radial-gradient(circle at 70% 20%, rgb(255 246 200 / .85) 0 1px, transparent 2px) 0 0 / 27px 31px,
    linear-gradient(135deg, var(--rand-a), var(--rand-b) 35%, var(--rand-a) 55%, var(--rand-b));
}
.k3--wesen {
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / .95) 0 1px, transparent 2px) 0 0 / 15px 19px,
    radial-gradient(circle at 70% 20%, rgb(200 240 255 / .9) 0 1px, transparent 2px) 0 0 / 23px 29px,
    conic-gradient(from var(--farbe), #c9a6ff, #7fd3ff, #ffd6f5, #9b6bff, #6fe0d0, #ffe9a6, #c9a6ff);
}
.k3[data-sel="legendaer"]::before, .k3--wesen::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 4.5%; pointer-events: none;
  background: conic-gradient(from var(--dreh), transparent 0 60%, var(--lauf, rgb(255 248 215 / .95)) 74%, transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mix-blend-mode: screen; animation: k2-lauf 4s linear infinite;
}
.k3--wesen::before { --lauf: rgb(240 225 255 / .95); animation-duration: 2.8s; }
.k3[data-sel="legendaer"] .k3__szene::before { background: repeating-conic-gradient(from 0deg, rgb(255 222 120 / .75) 0 5deg, transparent 5deg 14deg); animation-duration: 40s; }
.k3--wesen .k3__szene::before { animation-duration: 30s; }
.k3__szene .k2__funken { z-index: 2; }
.k2__funken--gold, .k2__funken--gold::before { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.15); }
.k3--wesen .k3__name {
  background: linear-gradient(90deg, #7a4cc4, #3aa7d8 25%, #c25ab8 50%, #3aa7d8 75%, #7a4cc4) 0 0 / 200% 100%;
  animation: k2-schrift 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .k3, .k3__zz, .k3__szene::before, .k3__halo, .k3::before, .k3__name, .k3__wind::before, .k3__schatten { animation: none !important; }
  .k3 { transform: none !important; }
  .k2 *, .k2::after, .k2 *::after { transition: none !important; }
  .k2::before, .k2f::before { animation: none !important; opacity: 0; }
  .k2, .k2f, .k2__fenster::before, .k2__funken, .k2__funken::before, .k2__name { animation: none !important; }
}

/* ---------- Einbau in die Website (2026-10-20) ---------- */
/* Größe wie die alte Karte über --b (Hand, Sammlung, Deck, Großansicht) */
.hk.k2 { width: var(--b, 112px); }
button.k2 { margin: 0; border: 0; font: inherit; cursor: pointer; }
.tk button.hk.k2, .vorschau .hk.k2, button.hk.k2 { color: var(--tinte); }
.tk button.hk.k2--wesen, .k2--wesen { color: #f2f0f8; }
/* Feldkarte als Knopf (Klickziel im Duell) */
button.k3-platz { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; aspect-ratio: 4 / 5; }
.k3 { display: block; }