/* shop.css — Shop, Produktseite, Kasse, Bestaetigung und "Meine Käufe".
   Die Shop-Seite (sp-*) folgt Enricos GPT-Entwurf vom 24.09.2026 (877 px breit, Inhalt 753 px → hier
   1292 px, also Faktor ~1,7). Bilder aus dem Entwurf in web/public/img/shop (Schrift entfernt, 4× Remacri).
   Die uebrigen Seiten teilen sich Preisblock, Vorteilsliste, Muenze und den Testmodus-Kasten (sh-*, ks-*, kf-*). */

/* ================================================================== Kopf (alle Shop-Seiten)
   Der Seitenkopf selbst kommt aus web.css (seitenkopf in layout.js), auf /shop so hoch wie die Startseite.
   Hier nur der Testmodus-Hinweis darunter. */

.sp-test { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-top: 14px; padding: 0 13px; border-radius: 7px;
           font: 800 12px/1 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: #fcd34d;
           background: rgba(24, 16, 2, .62); border: 1px solid rgba(245, 158, 11, .6);
           box-shadow: 0 0 18px -6px rgba(245, 158, 11, .5); }
.sp-test svg { width: 14px; height: 14px; flex: none; }

/* ================================================================== Shop-Seite */

/* Kartengrund wie im Entwurf: sattes Navy. Die Bilder haben an ihren Raendern genau diesen Ton
   (#061526), darum gehen sie ohne Kante in die Karten ueber. */
.sp-seite { --sp-karte: #061526; --sp-karte-2: #061322; --sp-rand: #142741; --sp-rand-hell: #22395c;
            --sp-txt-2: #c3cedf; --sp-txt-3: #8b9cb6; --sp-blau: #2c9dff; }

.sp { display: flex; flex-direction: column; gap: 50px; padding-top: 48px; padding-bottom: 64px; }
.sp-teil { scroll-margin-top: calc(var(--head-h) + 20px); }
.sp-kopf { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 24px; }
.sp-kopf h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-kopf h2 svg { width: 26px; height: 26px; flex: none; color: var(--sp-blau); }
.sp-kopf-r { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 4px; font-size: 14.5px; color: var(--sp-txt-3); }
.sp-kopf-r b { color: #fff; font-weight: 700; }
.sp-kopf-r img { width: 22px; height: 22px; border-radius: 5px; image-rendering: pixelated; }
.sp-kopf-r > svg { width: 16px; height: 16px; color: var(--sp-blau); }
.sp-leer { display: flex; align-items: center; gap: 10px; margin: 0; padding: 26px; border-radius: 14px;
           border: 1px dashed var(--sp-rand); color: var(--sp-txt-3); }
.sp-leer svg { width: 20px; height: 20px; }

/* Knoepfe der Seite */
.sp-gold { color: #241700; background: linear-gradient(180deg, #ffd45a -10%, #fbb424 45%, #e08a0b 100%);
           box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 28px -10px rgba(245, 158, 11, .75); }
.sp-gold:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 34px -10px rgba(245, 158, 11, .85); }
.sp-hast { cursor: default; color: #6ee7a0; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .35); }
.sp-hast:active { transform: none; }
.sp-kaufen { width: 100%; height: 42px; color: #e6edf6; background: rgba(9, 24, 43, .9); border: 1px solid #243a5c; }
.sp-kaufen:hover { color: #fff; border-color: var(--blue); background: rgba(47, 144, 255, .14); }
.sp-umriss { height: 44px; padding: 0 20px; color: #52b1ff; background: rgba(47, 144, 255, .06); border: 1.5px solid rgba(47, 144, 255, .65); }
.sp-umriss:hover { color: #fff; background: rgba(47, 144, 255, .16); border-color: var(--blue); }
.sp-umriss svg, .sp-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sp-umriss:hover svg, .sp-link:hover svg { transform: translateX(3px); }
.sp-link { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: #3aa0ff; text-decoration: none; }
.sp-link:hover { color: #6cb8ff; }

.sp-liste { list-style: none; display: flex; flex-direction: column; gap: 11px; width: 100%; margin: 0; padding: 0; text-align: left; }
.sp-liste li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: #d6deea; }
.sp-liste li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--m, var(--green)); stroke-width: 2.6; }

/* ---------------------------------------------------------------- Ränge */

.sp-raenge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 14px; }
.sp-rang { --m: var(--green); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
           padding-bottom: 26px; border-radius: 14px; background: linear-gradient(180deg, var(--sp-karte), var(--sp-karte-2));
           border: 1px solid var(--sp-rand); box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .9);
           transition: border-color var(--t), transform var(--t-slow), box-shadow var(--t-slow); }
.sp-rang:hover { border-color: var(--sp-rand-hell); transform: translateY(-3px); }
.sp-rang[data-rang="prime"] { --m: var(--gold); }
.sp-rang-top { border: 1.5px solid color-mix(in srgb, var(--gold) 72%, transparent);
               box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent), 0 26px 64px -26px color-mix(in srgb, var(--gold) 55%, transparent); }
.sp-rang-top:hover { border-color: var(--gold); }

.sp-band { position: absolute; top: -14px; left: 50%; z-index: 2; transform: translateX(-50%);
           display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px; border-radius: 8px; white-space: nowrap;
           font: 800 12px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: #05230f;
           background: linear-gradient(180deg, color-mix(in srgb, var(--m) 80%, white 20%), var(--m));
           box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--m) 85%, transparent); }
.sp-band svg { width: 13px; height: 13px; }
.sp-rang-top .sp-band { color: #241700; }

.sp-rang-bild { width: 100%; aspect-ratio: 912 / 368; overflow: hidden; border-radius: 13px 13px 0 0; }
.sp-rang-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease;
                    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.sp-rang:hover .sp-rang-bild img { transform: scale(1.04); }
.sp-chip { position: relative; z-index: 1; height: 42px; margin-top: -24px; padding: 0 22px; gap: 9px; border-radius: 9px; font-size: 17px;
           box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px -10px color-mix(in srgb, var(--m) 90%, transparent); }
.sp-chip svg { width: 17px; height: 17px; }
.sp-rang-satz { min-height: 3.1em; margin: 16px 0 0; padding: 0 26px; font-size: 14.5px; line-height: 1.55; color: var(--sp-txt-2); }
.sp-preis { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.sp-preis b { font: 800 36px/1.1 var(--f-head); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sp-preis i { margin-top: 2px; font-style: normal; font-size: 13px; color: var(--sp-txt-3); }
.sp-rang .sp-liste { margin: 22px 0 26px; padding: 0 30px; }
.sp-knopf { width: calc(100% - 52px); height: 50px; margin-top: auto; font-size: 15.5px; }

/* ---------------------------------------------------------------- Coins */

.sp-coins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sp-coin { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 20px 20px;
           border-radius: 14px; background: linear-gradient(180deg, #0a1d33 0%, #07192c 45%, var(--sp-karte-2) 100%);
           border: 1px solid var(--sp-rand); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .9);
           transition: border-color var(--t), transform var(--t-slow); }
.sp-coin:hover { border-color: var(--sp-rand-hell); transform: translateY(-3px); }
.sp-coin-top { border: 1.5px solid color-mix(in srgb, var(--gold) 72%, transparent);
               box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent), 0 24px 56px -30px color-mix(in srgb, var(--gold) 60%, transparent); }
.sp-coin-top:hover { border-color: var(--gold); }
.sp-coin-abz { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
               border-radius: 7px; font: 800 11.5px/1 var(--f-head); letter-spacing: .05em; text-transform: uppercase;
               color: #7cc2ff; background: rgba(47, 144, 255, .14); border: 1px solid rgba(47, 144, 255, .5); }
.sp-coin-abz[data-ton="gold"]   { color: #ffd766; background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .55); }
.sp-coin-abz[data-ton="purple"] { color: #d8b4fe; background: rgba(168, 85, 247, .14); border-color: rgba(168, 85, 247, .5); }
.sp-coin-abz[data-ton="green"]  { color: #6ee7a0; background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .45); }
.sp-coin-bild { display: block; width: 94%; max-width: none; height: auto; aspect-ratio: 544 / 264; object-fit: cover; margin-top: 6px;
                -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.sp-coin-zahl { margin-top: 4px; font: 800 32px/1.05 var(--f-head); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.sp-coin-lab { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9aabc3; }
.sp-bonus { display: inline-flex; align-items: center; height: 26px; margin-top: 12px; padding: 0 12px; border-radius: 999px;
            font-size: 12.5px; font-weight: 700; color: #5ee28e; background: rgba(34, 197, 94, .13); border: 1px solid rgba(34, 197, 94, .34); }
.sp-coin-fuss { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; padding-top: 16px; }
.sp-coin-fuss::before { content: ''; align-self: stretch; height: 1px; margin-bottom: 14px; background: var(--sp-rand); }
.sp-coin-preis { font: 800 24px/1.1 var(--f-head); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.sp-coin-je { margin-top: 5px; font-size: 12.5px; color: var(--sp-txt-3); font-variant-numeric: tabular-nums; }
.sp-coin .sp-kaufen { margin-top: 14px; }

/* ---------------------------------------------------------------- Mythisch
   Vier Karten mit grossem Bild (so sieht es im Spiel aus), je Artikel eine Leitfarbe (--m), darunter
   das Paket als breites Band. Rot ist die Seltenheit "Mythisch" aus der Lobby (Rarity.MYTHIC). */

.sp-myths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sp-myth { --m: var(--purple); position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
           background: linear-gradient(180deg, color-mix(in srgb, var(--m) 9%, var(--sp-karte)), var(--sp-karte-2) 62%);
           border: 1px solid color-mix(in srgb, var(--m) 34%, var(--sp-rand));
           box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--m) 55%, transparent);
           transition: border-color var(--t), transform var(--t-slow), box-shadow var(--t-slow); }
.sp-myth:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--m) 70%, transparent);
                 box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--m) 75%, transparent); }
.sp-myth-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sp-myth-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease;
                    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.sp-myth:hover .sp-myth-bild img { transform: scale(1.04); }
.sp-myth-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 2px 20px 20px; }
.sp-myth-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px;
                font: 800 11.5px/1 var(--f-head); letter-spacing: .07em; text-transform: uppercase;
                color: #ffd9d9; background: linear-gradient(180deg, #f0443a, #b3160f); box-shadow: 0 0 18px -4px rgba(240, 68, 58, .7); }
.sp-myth-chip svg { width: 13px; height: 13px; }
.sp-myth h3 { margin: 12px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-myth p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--sp-txt-2); }
.sp-myth .sp-liste { margin-top: 14px; gap: 8px; }
.sp-myth .sp-liste li { font-size: 13.5px; }
.sp-myth-fuss { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: auto; padding-top: 18px; }
.sp-myth-fuss b { font: 800 25px/1 var(--f-head); letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-myth-kaufen { flex: 1; width: auto; margin-left: auto; }
.sp-myth-kaufen:hover { border-color: var(--m); background: color-mix(in srgb, var(--m) 16%, transparent); }

.sp-paket { position: relative; margin-top: 22px; overflow: hidden; border-radius: 14px; background: var(--sp-karte-2);
            border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent), 0 26px 60px -32px color-mix(in srgb, var(--gold) 55%, transparent); }
.sp-paket-bild { aspect-ratio: 1440 / 370; overflow: hidden; }
.sp-paket-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%;
                     -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.sp-paket-text { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: -54px; padding: 0 30px 26px; position: relative; }
.sp-paket h3 { margin: 12px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-paket p { margin: 8px 0 0; max-width: 560px; font-size: 15px; line-height: 1.55; color: var(--sp-txt-2); }
.sp-paket-kasse { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sp-paket-kasse b { font: 800 34px/1 var(--f-head); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.sp-paket-kasse span { font-size: 13px; color: #fcd34d; font-variant-numeric: tabular-nums; }
.sp-paket-kasse .sp-knopf { width: auto; min-width: 220px; margin-top: 8px; }

@media (max-width: 1180px) { .sp-myths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .sp-paket-text { flex-direction: column; align-items: stretch; margin-top: -18px; padding: 0 20px 22px; gap: 18px; }
  .sp-paket-kasse { align-items: flex-start; }
  .sp-paket-kasse .sp-knopf { width: 100%; }
  .sp-paket-bild { aspect-ratio: 16 / 9; }
  .sp-paket h3 { font-size: 25px; }
}
@media (max-width: 560px) { .sp-myths { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------------- Extras + Kisten */

.sp-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sp-extra { position: relative; display: grid; grid-template-columns: 43% minmax(0, 1fr); min-height: 340px; overflow: hidden;
            border-radius: 14px; background: linear-gradient(180deg, var(--sp-karte), var(--sp-karte-2));
            border: 1px solid var(--sp-rand); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .9); transition: border-color var(--t); }
.sp-extra:hover { border-color: var(--sp-rand-hell); }
.sp-extra-bild { position: relative; min-height: 100%; }
.sp-extra-bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease;
                     -webkit-mask-image: linear-gradient(90deg, #000 74%, transparent); mask-image: linear-gradient(90deg, #000 74%, transparent); }
.sp-extra:hover .sp-extra-bild img { transform: scale(1.035); }
.sp-extra-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--purple); }
.sp-extra-ico svg { width: 64px; height: 64px; }
.sp-extra-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 26px 28px 24px 10px; }
.sp-extra h3 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-extra p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--sp-txt-2); }
.sp-extra .sp-liste { margin-top: 16px; gap: 9px; }
.sp-extra .sp-liste li { font-size: 14px; }
.sp-extra-fuss { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: auto; padding-top: 20px; }
.sp-extra-fuss b { font: 800 27px/1 var(--f-head); letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-extra-fuss .sp-kaufen { width: auto; flex: 1; max-width: 210px; margin-left: auto; }

.sp-neu, .sp-imspiel { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-bottom: 10px; padding: 0 9px; border-radius: 6px;
                       font: 800 11.5px/1 var(--f-head); letter-spacing: .05em; text-transform: uppercase; }
.sp-neu { color: #fff; background: linear-gradient(180deg, #3aa5ff, #1a7ae8); }
.sp-neu[data-ton="purple"] { background: linear-gradient(180deg, #b972f9, var(--purple-deep)); }
.sp-neu[data-ton="green"]  { background: linear-gradient(180deg, #2fd46c, var(--green-deep)); }
.sp-neu[data-ton="amber"]  { color: #241700; background: linear-gradient(180deg, #fbbf24, var(--amber-deep)); }
.sp-imspiel { color: #ffd766; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4); }
.sp-imspiel svg { width: 13px; height: 13px; }

.sp-kiste { grid-template-columns: 54% minmax(0, 1fr); min-height: 264px; }
.sp-kiste .sp-extra-text { padding-left: 6px; }
.sp-kiste-wo { font-size: 14px !important; color: var(--sp-txt-3) !important; }
.sp-kiste-wo code { padding: 1px 6px; border-radius: 5px; font: 600 13px var(--f-mono); color: #dbe6f5; background: rgba(255, 255, 255, .07); }
.sp-kiste .sp-umriss { margin-top: auto; }
.sp-kiste .sp-kiste-wo { margin-bottom: 18px; }

/* ---------------------------------------------------------------- Mit deinem Kauf unterstützt du Loraplex. */

.sp-dank { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.sp-dank-text { position: relative; z-index: 1; }
.sp-dank h2 { margin: 0; max-width: 500px; font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; color: #fff; }
.sp-dank h2 svg { display: inline-block; width: .86em; height: .86em; margin-right: 12px; vertical-align: -.1em; color: var(--sp-blau); }
.sp-dank h2 em { font-style: normal; color: #1aa0ff; }
.sp-dank p { max-width: 470px; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--sp-txt-2); }
.sp-dank .sp-dank-stark { margin-top: 14px; font-size: 18px; font-weight: 700; color: #fff; }
.sp-dank .sp-link { margin-top: 24px; font-size: 16px; }
.sp-dank-bild { margin-left: -70px; aspect-ratio: 1828 / 960; overflow: hidden; border-radius: 16px; }
.sp-dank-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
                    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }

/* ---------------------------------------------------------------- Häufige Fragen */

.sp-faq .sp-kopf { margin-bottom: 16px; }
.sp-faq .sp-kopf h2 { font-size: 22px; }
.sp-faq .sp-kopf h2 svg { width: 22px; height: 22px; }
.sp-faq-box { overflow: hidden; border-radius: 12px; background: rgba(7, 22, 40, .6); border: 1px solid var(--sp-rand); }
.sp-faq-box details + details { border-top: 1px solid var(--sp-rand); }
/* Der Standardpfeil laesst sich nicht faerben und sitzt links — also weg damit. */
.sp-faq-box summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
                      padding: 16px 22px; font-size: 15px; font-weight: 600; color: #d6deea; transition: color var(--t), background var(--t); }
.sp-faq-box summary::-webkit-details-marker { display: none; }
.sp-faq-box summary::marker { content: ""; }
.sp-faq-box summary:hover { color: #fff; background: rgba(255, 255, 255, .03); }
.sp-faq-pfeil { width: 18px; height: 18px; flex: none; color: #7d8fa9; transition: transform var(--t), color var(--t); }
.sp-faq-box details[open] > summary { color: #6cb8ff; }
.sp-faq-box details[open] > summary .sp-faq-pfeil { transform: rotate(180deg); color: var(--blue); }
.sp-faq-txt { max-width: 920px; padding: 0 22px 18px; font-size: 14.5px; line-height: 1.7; color: #a7b5c9; }

/* ---------------------------------------------------------------- schmale Fenster */

@media (max-width: 1180px) {
  .sp-coins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-extras { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .sp-raenge { grid-template-columns: 1fr; max-width: 520px; width: 100%; margin: 0 auto; gap: 34px; }
  .sp-dank { grid-template-columns: 1fr; gap: 26px; }
  .sp-dank-bild { margin-left: 0; }
  .sp-dank-bild img { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 720px) {
  .sp-extra, .sp-kiste { grid-template-columns: 1fr; min-height: 0; }
  .sp-extra-bild { aspect-ratio: 16 / 9; min-height: 0; }
  .sp-extra:not(.sp-kiste) .sp-extra-bild { aspect-ratio: 4 / 3; }
  .sp-extra-bild img { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .sp-extra-text, .sp-kiste .sp-extra-text { padding: 2px 22px 22px; }
  .sp { gap: 40px; padding-top: 36px; }
}
@media (max-width: 520px) {
  .sp-test { height: auto; min-height: 30px; padding: 7px 11px; line-height: 1.3; }
  .sp-coins { gap: 12px; }
  .sp-coin { padding: 12px 12px 14px; }
  .sp-coin-zahl { font-size: 26px; }
  .sp-coin-abz { top: 8px; right: 8px; }
  .sp-kopf h2 { font-size: 24px; }
  .sp-extra-fuss .sp-kaufen { max-width: none; }
}

/* ================================================================== gemeinsame Teile (Produktseite, Kasse) */

.sh-abz { height: 40px; padding: 0 20px; font-size: 17px; align-self: center; }
.sh-abz svg { width: 18px; height: 18px; }

/* Die Muenze ist kein Bild, sondern ein Kreis mit dem Symbol darin — so nimmt sie
   dieselbe Goldfarbe wie das PRIME-Abzeichen und bleibt bei jeder Groesse scharf. */
.sh-muenze { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
             color: var(--gold);
             background: radial-gradient(circle at 34% 28%,
                         color-mix(in srgb, var(--gold) 32%, transparent),
                         color-mix(in srgb, var(--gold) 10%, transparent));
             border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
             box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--gold) 80%, transparent); }
.sh-muenze svg { width: 28px; height: 28px; }

.sh-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 11px; }
.sh-preis b { font-family: var(--f-head); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sh-preis i { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--txt-3); }

.sh-liste { display: flex; flex-direction: column; gap: 10px; }
.sh-liste li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }
.sh-liste li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--m, var(--blue)); }

/* Der ehrliche Hinweis. Bernstein, nicht rot: es ist keine Warnung, sondern eine Ansage. */
.sh-test { display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-sm);
           background: color-mix(in srgb, var(--amber) 11%, transparent);
           border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
           font-size: 13px; line-height: 1.55; color: var(--txt-2); text-align: left; }
.sh-test b { color: color-mix(in srgb, var(--amber) 62%, var(--txt)); font-weight: 800; }
.sh-test span { display: block; color: var(--txt-3); }
.sh-test-ico { color: var(--amber); flex: none; }
.sh-test-ico svg { width: 18px; height: 18px; }

/* ================================================================== Produktseite */

.sh-p { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.sh-p-karte { min-width: 0; }
.sh-p-kopf { display: flex; align-items: center; gap: 18px; }
.sh-p-kopf .sh-abz { align-self: auto; }
.sh-p-name { font-size: 30px; }
.sh-p-tag { margin-top: 6px; font-size: 14px; color: var(--txt-2); line-height: 1.55; }
.sh-p-preis { margin: 22px 0 6px; }
.sh-p-bonus { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--txt-2); }
.sh-p-bonus svg { width: 15px; height: 15px; color: var(--green); }
.sh-p-bonus b { color: var(--green); }
.sh-p-h3 { display: flex; align-items: center; gap: 9px; margin: 24px 0 14px; padding-top: 20px;
           border-top: 1px solid var(--line-soft); font-size: 15.5px; }
.sh-p-h3 svg { width: 17px; height: 17px; color: var(--gold); }
.sh-p-liste { --m: var(--green); }
.sh-p-konto { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 14px;
              border-radius: var(--r-sm); background: var(--card-hi); border: 1px solid var(--line-soft);
              font-size: 13px; color: var(--txt-2); }
.sh-p-konto b { color: var(--txt); }

.sh-best { position: sticky; top: calc(var(--head-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.sh-best-h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; margin-bottom: 4px; }
.sh-best-h3 svg { width: 17px; height: 17px; color: var(--blue); }
.sh-best-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
                 font-size: 13.5px; color: var(--txt-3); }
.sh-best-zeile b { color: var(--txt); font-weight: 700; text-align: right; }
.sh-best-zeile s { color: var(--txt-4); }
.sh-best-summe { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sh-best-summe b { font-family: var(--f-head); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sh-best-fuss { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--txt-4); }
.sh-best-fuss svg { width: 14px; height: 14px; flex: none; }

.sh-p-vgl { grid-column: 1 / -1; }
.sh-vgl { overflow-x: auto; padding-bottom: 4px; }
.sh-vgl .table { min-width: 620px; }
.sh-vgl th { padding-top: 14px; }
.sh-vgl-abz { height: 26px; padding: 0 12px; font-size: 12px; }
.sh-vgl td[data-rang="vip"]      { --m: var(--green); }
.sh-vgl td[data-rang="vip_plus"] { --m: var(--green); }
.sh-vgl td[data-rang="prime"]    { --m: var(--gold); }
.sh-vgl-ja { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
             color: var(--m, var(--green));
             background: color-mix(in srgb, var(--m, var(--green)) 14%, transparent); }
.sh-vgl-ja svg { width: 14px; height: 14px; }
.sh-vgl-nein { color: var(--txt-4); }
.sh-vgl-karte { margin-top: 8px; }

.sh-weg { max-width: 760px; }

/* ================================================================== Kasse */

.ks { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.ks-haupt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ks-form { display: flex; flex-direction: column; gap: 16px; }

.ks-schritt-kopf { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.ks-nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
         background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue-lite);
         font-family: var(--f-head); font-size: 14px; font-weight: 800; }
.ks-schritt h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.ks-schritt h2 svg { width: 19px; height: 19px; color: var(--blue); }
.ks-hint { font-size: 13px; line-height: 1.6; color: var(--txt-3); margin-bottom: 14px; }
.ks-klein { margin-top: 12px; font-size: 12px; color: var(--txt-4); text-align: center; }

/* ---- Schritt 1: Spielkonto */

.ks-konto { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-radius: var(--r);
            background: var(--card-hi); border: 1px solid var(--line-soft); }
.ks-konto-kopf { width: 56px; height: 56px; border-radius: var(--r-sm); flex: none;
                 border: 1px solid var(--line-soft); background: var(--inset); }
.ks-konto-txt { min-width: 0; flex: 1; }
.ks-konto-txt > b { display: block; font-family: var(--f-head); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ks-konto-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.ks-konto-zeile i { display: inline-flex; align-items: center; gap: 5px; font-style: normal;
                    font-size: 12.5px; color: var(--txt-3); }
.ks-konto-zeile i svg { width: 14px; height: 14px; color: var(--txt-4); }
.ks-rang-mini { height: 22px; padding: 0 10px; gap: 5px; font-size: 11px; }
.ks-rang-mini svg { width: 11px; height: 11px; }
.ks-konto-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
                   color: var(--txt-3); flex: none; }

.ks-sperre { flex-direction: row; }
.ks-sperre b { display: block; }
.ks-sperre span { display: block; margin-top: 3px; color: var(--txt-2); }
.ks-sperre-ip { margin-top: 8px !important; font-size: 12.5px; }
.ks-sperre-btns { gap: 12px; margin-top: 16px; }

/* ---- Schritt 2: Zahlungsart. Vier Kacheln, kein einziges Eingabefeld. */

.ks-zahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ks-m { display: block; position: relative; cursor: pointer; }
.ks-m input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ks-m-in { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r);
           background: var(--inset); border: 1px solid var(--line);
           transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.ks-m:hover .ks-m-in { border-color: var(--line-strong); }
.ks-m input:checked + .ks-m-in { border-color: var(--blue-line); background: var(--blue-ghost);
                                 box-shadow: 0 0 0 3px var(--blue-ghost); }
.ks-m input:focus-visible + .ks-m-in { outline: 2px solid var(--blue); outline-offset: 2px; }
.ks-m-ico { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
            background: var(--card-hi); border: 1px solid var(--line-soft); color: var(--txt-2);
            transition: color var(--t), border-color var(--t); }
.ks-m-ico svg { width: 18px; height: 18px; }
.ks-m-in b { font-size: 14px; font-weight: 700; }
.ks-m input:checked + .ks-m-in .ks-m-ico { color: var(--blue-lite); border-color: var(--blue-line); }
.ks-m-haken { margin-left: auto; width: 21px; height: 21px; border-radius: 50%; flex: none;
              display: grid; place-items: center; border: 1px solid var(--line-strong); color: transparent;
              transition: background var(--t), border-color var(--t), color var(--t); }
.ks-m-haken svg { width: 13px; height: 13px; }
.ks-m input:checked + .ks-m-in .ks-m-haken { background: var(--blue); border-color: var(--blue); color: var(--txt); }

/* ---- Schritt 3: bestaetigen */

.ks-agb { margin: 16px 0 18px; align-items: flex-start; line-height: 1.55; }
.ks-agb input { margin-top: 2px; flex: none; }
.ks-agb a { color: var(--blue-lite); font-weight: 600; }
.ks-fehler { margin-bottom: 2px; }

.ks-stopp { display: flex; gap: 18px; align-items: flex-start; }
.ks-stopp-ico { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: none;
                background: color-mix(in srgb, var(--amber) 14%, transparent);
                border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); color: var(--amber); }
.ks-stopp-ico svg { width: 23px; height: 23px; }
.ks-stopp h2 { font-size: 21px; }
.ks-stopp p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--txt-2); max-width: 540px; }

/* ---- rechte Spalte */

.ks-side { display: flex; flex-direction: column; gap: 16px;
           position: sticky; top: calc(var(--head-h) + 16px); }
.ks-sum { display: flex; flex-direction: column; gap: 10px; }
.ks-sum-h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; }
.ks-sum-h3 svg { width: 17px; height: 17px; color: var(--blue); }
.ks-sum-prod { display: flex; align-items: center; gap: 12px; padding: 12px 0 14px;
               border-bottom: 1px solid var(--line-soft); }
.ks-sum-prod .sh-abz { height: 30px; padding: 0 13px; font-size: 13.5px; align-self: auto; }
.ks-sum-prod .sh-abz svg { width: 14px; height: 14px; }
.ks-sum-prod .sh-muenze { width: 38px; height: 38px; }
.ks-sum-prod .sh-muenze svg { width: 20px; height: 20px; }
.ks-sum-prod > b { font-family: var(--f-head); font-size: 16px; font-weight: 800; }
.ks-sum-v { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--txt-3); }
.ks-sum-v svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green); }
.ks-sum-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
                font-size: 13.5px; color: var(--txt-3); }
.ks-sum-zeile b { color: var(--txt); font-weight: 700; }
.ks-sum-zeile s { color: var(--txt-4); }
.ks-sum-summe { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ks-sum-summe b { font-family: var(--f-head); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ks-sum-mwst { font-size: 11.5px; color: var(--txt-4); }

.ks-sicher { display: flex; flex-direction: column; gap: 11px; }
.ks-sicher-z { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--txt-2); }
.ks-sicher-z svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.ks-sicher-z a { color: var(--blue-lite); font-weight: 600; }

/* ================================================================== Fertig */

.ks-fertig-wrap { display: flex; justify-content: center; }
.ks-fertig { position: relative; overflow: hidden; width: 100%; max-width: 720px; text-align: center;
             padding-top: 38px; }

.ks-haken { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px;
            color: var(--green);
            background: color-mix(in srgb, var(--green) 15%, transparent);
            border: 2px solid color-mix(in srgb, var(--green) 48%, transparent);
            box-shadow: 0 0 46px -10px color-mix(in srgb, var(--green) 80%, transparent);
            animation: ks-pop .5s cubic-bezier(.2,.9,.3,1.25) both; }
.ks-haken svg { width: 46px; height: 46px; stroke-width: 2.6; }
@keyframes ks-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.ks-fertig-bad .ks-haken { color: var(--red);
            background: color-mix(in srgb, var(--red) 15%, transparent);
            border-color: color-mix(in srgb, var(--red) 48%, transparent);
            box-shadow: 0 0 46px -10px color-mix(in srgb, var(--red) 80%, transparent); }

.ks-fertig h1 { font-size: 34px; }
.ks-fertig-satz { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--txt-2); }
.ks-fertig-satz b { color: var(--txt); }
.ks-fertig-hint { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--txt-3);
                  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 520px; text-align: left; }
.ks-fertig-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blue); }

.ks-daten { margin: 24px 0 16px; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden;
            text-align: left; }
.ks-daten-z { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; }
.ks-daten-z + .ks-daten-z { border-top: 1px solid var(--line-soft); }
.ks-daten-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt-3); }
.ks-daten-lab svg { width: 15px; height: 15px; color: var(--txt-4); }
.ks-daten-z b { font-size: 13.5px; font-weight: 700; text-align: right; }

.ks-fertig-test { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill);
                  font-size: 12.5px; color: var(--txt-2);
                  background: color-mix(in srgb, var(--amber) 11%, transparent);
                  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); }
.ks-fertig-test svg { width: 15px; height: 15px; color: var(--amber); }
.ks-fertig-test b { color: color-mix(in srgb, var(--amber) 62%, var(--txt)); }
.ks-fertig-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* Konfetti aus zwoelf Rechtecken in den vier Modusfarben. Einmal, drei Sekunden, dann weg —
   `both` haelt den Endzustand (unsichtbar), sonst blitzen sie am Ende wieder auf. */
.ks-konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ks-konfetti i { position: absolute; top: -18px; left: var(--x); width: 7px; height: 13px; border-radius: 2px;
                 opacity: 0; animation: ks-fall 3s cubic-bezier(.3,.5,.6,1) var(--d) both; }
.ks-konfetti i:nth-child(4n+1) { background: var(--m-solo); }
.ks-konfetti i:nth-child(4n+2) { background: var(--m-doubles); }
.ks-konfetti i:nth-child(4n+3) { background: var(--m-fours); }
.ks-konfetti i:nth-child(4n)   { background: var(--m-4v4); }
@keyframes ks-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(520px) rotate(540deg); }
}

/* ================================================================== Meine Käufe */

.kf-tab { overflow-x: auto; }
.kf-tab .table { min-width: 720px; }
.kf-tab .table th:first-child, .kf-tab .table td:first-child { padding-left: 22px; }
.kf-tab .table th:last-child,  .kf-tab .table td:last-child  { padding-right: 22px; }
.kf-datum { color: var(--txt-2); white-space: nowrap; }
.kf-prod { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.kf-prod b { font-weight: 700; }
.kf-coins { font-style: normal; font-size: 12px; color: var(--txt-4); }
.kf-muenze { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
             color: var(--gold);
             background: color-mix(in srgb, var(--gold) 14%, transparent);
             border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); }
.kf-muenze svg { width: 15px; height: 15px; }
.kf-leer h2 { font-size: 20px; }
.kf-leer .btn { margin-top: 6px; }

/* ================================================================== schmale Fenster (Produktseite, Kasse) */

@media (max-width: 1180px) {
  .ks { grid-template-columns: 1fr; }
  .ks-side { position: static; }
  .sh-p { grid-template-columns: 1fr; }
  .sh-best { position: static; }
}
@media (max-width: 980px) {
  .ks-konto { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .ks-zahl { grid-template-columns: 1fr; }
  .sh-p-kopf { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sh-p-name { font-size: 24px; }
  .ks-fertig h1 { font-size: 26px; }
  .ks-fertig-btns { flex-direction: column; align-items: stretch; }
  .ks-daten-z { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ks-daten-z b { text-align: left; }
}

/* Wer Bewegung abbestellt hat, bekommt das Ergebnis ohne die Show. */
@media (prefers-reduced-motion: reduce) {
  .ks-konfetti { display: none; }
  .ks-haken { animation: none; }
  .sp-rang, .sp-coin, .sp-rang-bild img, .sp-extra-bild img { transition: none; }
  .sp-rang:hover, .sp-coin:hover { transform: none; }
}

/* ---------------------------------------------------------------- Kasse: Fuer wen?
   Der Gast-Schritt. Er steht an derselben Stelle wie die Kontokarte beim Angemeldeten —
   die Kasse hat fuer beide denselben Ablauf, nur der erste Schritt sieht anders aus. */
.ks-wer-reihe { display: flex; gap: 10px; margin: 12px 0 10px; }
.ks-wer-feld { font-family: var(--f-mono); font-size: 16px; letter-spacing: .03em; }
.ks-wer-reihe .btn { flex: none; }
.ks-wer-wechsel { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
                  font-size: 12.5px; color: var(--txt-3); }
.ks-wer-wechsel svg { width: 13px; height: 13px; }
.ks-wer-wechsel:hover { color: var(--blue-lite); }
@media (max-width: 560px) { .ks-wer-reihe { flex-direction: column; } .ks-wer-reihe .btn { width: 100%; } }

/* ================================================================== Kauf-Fenster
   Der Kauf passiert dort, wo er beginnt. Das Fenster liegt ueber der Seite, die Seite
   bleibt sichtbar dahinter — man verliert nicht den Zusammenhang, aus dem man kam. */

.kf { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
      background: rgba(4, 7, 15, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      animation: kf-ein .16s ease; overflow-y: auto; }
@keyframes kf-ein { from { opacity: 0; } }
/* DAS FENSTER LAG VON ANFANG AN UEBER DEM SHOP. `display: grid` in .kf schlaegt das
   `hidden`-Attribut (die Browser-Regel [hidden]{display:none} hat weniger Gewicht als eine
   Klasse) — das Fenster war also nie zu: ein leerer Kasten mit x ueber der ganzen Seite, der
   jeden Klick auf "Kaufen" abfing. Enrico: "was verdeckt das, dass ich den nutzen kann?" */
.kf[hidden] { display: none; }
body.kf-offen { overflow: hidden; }

.kf-box { position: relative; width: 100%; max-width: 520px; border-radius: var(--r-xl);
          background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
          border: 1px solid var(--line-strong); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
          padding: 26px 26px 24px; animation: kf-hoch .22s cubic-bezier(.2,.9,.3,1); }
@keyframes kf-hoch { from { transform: translateY(14px) scale(.985); opacity: 0; } }

.kf-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: var(--r-sm);
        display: grid; place-items: center; color: var(--txt-3); }
.kf-x svg { width: 17px; height: 17px; }
.kf-x:hover { background: rgba(255,255,255,.06); color: var(--txt); }

.kf-laedt { padding: 50px 0; text-align: center; color: var(--txt-3); font-size: 14px; }

.kf-kopf { display: flex; align-items: flex-start; gap: 16px; padding-right: 34px; }
.kf-kopf-txt { flex: 1; min-width: 0; }
.kf-schild { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
             text-transform: uppercase; color: var(--blue-lite); margin-bottom: 4px; }
.kf-kopf h2 { font-size: 24px; letter-spacing: -.02em; }
.kf-kopf p { font-size: 13px; color: var(--txt-2); margin-top: 3px; }
.kf-preis { text-align: right; flex: none; }
.kf-preis b { display: block; font-family: var(--f-head); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.kf-preis i { font-style: normal; font-size: 11.5px; color: var(--txt-3); }

.kf-test { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; padding: 11px 13px;
           border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; color: var(--txt-2);
           background: color-mix(in srgb, var(--amber) 10%, transparent);
           border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.kf-test svg { width: 16px; height: 16px; color: var(--amber); flex: none; margin-top: 1px; }
.kf-test b { color: var(--txt); }

.kf-schritt { padding-top: 18px; margin-top: 14px; border-top: 1px solid var(--line-soft); }
.kf-schritt:first-of-type { border-top: 0; }
.kf-schritt h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 10px; }
.kf-nr { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
         background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue-lite);
         font-size: 11.5px; font-weight: 800; }
.kf-hint { font-size: 12.5px; color: var(--txt-3); line-height: 1.55; margin-bottom: 10px; }
.kf-klein { font-size: 11.5px; color: var(--txt-4); margin-top: 9px; line-height: 1.5; }
.kf-klein b { color: var(--txt-2); font-family: var(--f-mono); }

.kf-namereihe { display: flex; gap: 9px; }
.kf-name { font-family: var(--f-mono); font-size: 15.5px; letter-spacing: .03em; }
.kf-namereihe .btn { flex: none; }

.kf-fehler { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; margin-bottom: 10px;
             border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; color: #ffb4b4;
             background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.30); }
.kf-fehler svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.kf-konto { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-sm);
            background: var(--inset); border: 1px solid var(--line); }
.kf-konto img { border-radius: var(--r-xs); flex: none; }
.kf-konto b { display: block; font-size: 14.5px; }
.kf-konto span { font-size: 12px; color: var(--txt-3); }
.kf-online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
             font-size: 11.5px; color: var(--txt-3); }
.kf-wechsel { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
              font-size: 12.5px; color: var(--txt-3); }
.kf-wechsel svg { width: 13px; height: 13px; }
.kf-wechsel:hover { color: var(--blue-lite); }

.kf-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kf-weg { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: var(--r-sm);
          background: var(--card-hi); border: 1px solid var(--line-soft); color: var(--txt-2);
          font-size: 13px; font-weight: 600; text-align: left; transition: all var(--t); }
.kf-weg svg { width: 17px; height: 17px; color: var(--txt-3); flex: none; }
.kf-weg:hover { border-color: var(--line-strong); color: var(--txt); }
.kf-weg.ist-an { background: var(--blue-ghost); border-color: var(--blue-line); color: var(--blue-lite); }
.kf-weg.ist-an svg { color: var(--blue); }

.kf-agb { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--txt-2);
          line-height: 1.5; margin-bottom: 14px; cursor: pointer; }
.kf-agb input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; margin-top: 1px; }
.kf-agb a { color: var(--blue-lite); }
.kf-kaufen[disabled] { opacity: .55; pointer-events: none; }

/* ---- nach dem Kauf */
.kf-fertig { text-align: center; padding: 10px 0 4px; }
.kf-haken { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px;
            background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green);
            border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
            animation: kf-pop .34s cubic-bezier(.2,1.3,.4,1); }
.kf-haken svg { width: 30px; height: 30px; stroke-width: 2.6; }
@keyframes kf-pop { from { transform: scale(.55); opacity: 0; } }
.kf-fertig h2 { font-size: 24px; }
.kf-fertig-satz { font-size: 15px; color: var(--txt); margin-top: 8px; }
.kf-fertig-hint { font-size: 13px; color: var(--txt-2); margin-top: 6px; line-height: 1.55; }
.kf-zeilen { margin: 18px 0; text-align: left; }
.kf-zeilen > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
                   border-top: 1px solid var(--line-soft); font-size: 13px; }
.kf-zeilen dt { color: var(--txt-3); }
.kf-zeilen dd { font-weight: 600; }
.kf-zeilen dd i { font-style: normal; font-weight: 400; color: var(--txt-4); font-size: 11.5px; }
.kf-fertig-btns { display: flex; gap: 10px; }
.kf-fertig-btns > * { flex: 1; }

@media (max-width: 560px) {
  .kf { padding: 0; place-items: end stretch; }
  .kf-box { max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 22px 18px 20px; }
  .kf-wege { grid-template-columns: 1fr; }
  .kf-namereihe { flex-direction: column; } .kf-namereihe .btn { width: 100%; }
  .kf-fertig-btns { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .kf, .kf-box, .kf-haken { animation: none; } }
.sp-neu[data-ton="red"]    { color: #ffe1e1; background: linear-gradient(180deg, #f0443a, #b3160f); }