/* TCG Direkt – Eigene Sammelkarte. Nur auf /produkt/eigene-sammelkarte.html geladen, zusätzlich zu eigen.css.
   Full Art (28.10.): Immer Full Art. Ein Aufbau für alle Stile (.kk), das Foto füllt alles innerhalb des Rands, Texte liegen auf Verläufen darüber.
   Haut je Stil: Spezial hell mit Rand nach Farbe, Trainer hell mit Silberrand (Unterstützer-Look), Max dunkel mit gelbem Rand.
   1:1 in px (750×1048) in .tk-skala, skaliert über --s (karte.js setzt Breite/750).
   Schrift Jost (SIL OFL 1.1, assets/fonts/Jost-OFL.txt), geometrisch wie Futura. Eigene Zeichnung: keine Logos, keine Set- oder Original-Energiesymbole. */
@font-face{font-family:"Jost";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:italic;font-weight:500 800;font-display:swap;src:url(/assets/fonts/jost-latin-italic.woff2) format("woff2")}
:root{
  --kk-schrift:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --kk-tinte:#141418; --kk-weiss:#FFFFFF;
  --tk-navy:#0B1230; --tk-night:#04050F; --tk-volt:#FFD21A; --tk-hell-1:#D6DBEB; --tk-weiss-a25:#ffffff40; --tk-weiss-a90:#ffffffe6; --tk-ultra-a70:#1b2bc9b3; --tk-schatten:#000b;
  --tk-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --tk-mono:"Martian Mono",ui-monospace,SFMono-Regular,monospace; --tk-ease:cubic-bezier(.16,1,.3,1);
}
.tk{position:relative;width:100%;aspect-ratio:750/1048;perspective:1400px;--rx:0deg;--ry:0deg;--flip:0deg;--s:.373;filter:drop-shadow(0 18px 26px var(--tk-schatten))}
.tk-skala{position:absolute;left:0;top:0;width:750px;height:1048px;transform:scale(var(--s));transform-origin:0 0;container-type:inline-size}
.tk-dreh{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--flip)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--tk-ease)}
.tk.kippt .tk-dreh{transition:transform .12s linear}
.tk.hinten{--flip:180deg}
.tk-vorn,.tk-hinten{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px}
.tk-vorn{transform:translateZ(3px)}
.tk-hinten{transform:rotateY(180deg) translateZ(3px);background:var(--tk-navy)}
/* Typfarbe für Abzeichen und Rahmenlinien */
.tk{--typ:#e0482c}
.tk[data-typ=wasser]{--typ:#2a7fd0}.tk[data-typ=pflanze]{--typ:#3c9441}.tk[data-typ=elektro]{--typ:#d9a40a}.tk[data-typ=psycho]{--typ:#9a4fb0}.tk[data-typ=metall]{--typ:#6f7c89}.tk[data-typ=farblos]{--typ:#8a8578}
/* Rand: Spezial nach Farbe, Trainer Silber, Max Gelb. Feine Innenkante trennt Rand und Bild. */
.tk-vorn{font-family:var(--kk-schrift);color:var(--kk-tinte);--rand:linear-gradient(160deg,#eef0f4,#a9aeb8 22%,#e4e7ec 45%,#9da3ad 70%,#d9dce2)}
.tk[data-stil=vmax] .tk-vorn{--rand:linear-gradient(160deg,#ffe36a,#f2c21c 30%,#ffe58a 55%,#e3ae10 80%,#f7d04a)}
.tk[data-stil=ex][data-farbe=rare] .tk-vorn{--rand:linear-gradient(160deg,#4a5060,#262a33 35%,#555b6a 65%,#20242c)}
.tk[data-stil=ex][data-farbe=gold] .tk-vorn{--rand:linear-gradient(160deg,#9a7420,#f0ce64 25%,#fff0b0 50%,#c4962e 75%,#8c6418)}
.tk[data-stil=ex][data-farbe=regenbogen] .tk-vorn{--rand:linear-gradient(135deg,#ff9aa2,#ffd59a 20%,#fbf59a 35%,#a8f0b8 50%,#9ad8ff 65%,#c6a8ff 82%,#ff9aa2)}
.tk-vorn{background:var(--rand)}
/* Bild: füllt alles innerhalb des Rands */
.tk-bild{position:absolute;inset:26px;overflow:hidden;border-radius:14px;background:linear-gradient(160deg,#cfd6e6,#7f8cab);touch-action:none;box-shadow:0 0 0 2px #0000002e}
.tk-bild.zieh{cursor:grab}.tk-bild.zieh:active{cursor:grabbing}
.tk-foto{position:absolute;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}
.tk-leer{position:absolute;left:0;right:0;top:34%;display:grid;justify-items:center;gap:14px;color:var(--kk-weiss);font:700 34px/1 var(--tk-font);text-shadow:0 2px 8px #0006}
.tk-leer .ico{width:80px;height:80px;padding:14px;border:5px dashed currentColor;border-radius:50%;box-sizing:content-box}
/* Textebene: liegt über dem Bild, nur Kopf und Feld fangen keine Zeiger (Foto bleibt ziehbar) */
.kk{position:absolute;z-index:2;inset:26px;border-radius:14px;overflow:hidden;pointer-events:none}
.kk p{margin:0}
[class^=nur-]{display:none}
.tk[data-stil=ex] .nur-ex,.tk[data-stil=trainer] .nur-trainer,.tk[data-stil=vmax] .nur-vmax{display:contents}
.en{display:inline-block;width:1em;height:1em;vertical-align:middle}
/* Kopf */
.kk-kopf{position:absolute;left:0;right:0;top:0;padding:14px 24px 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:end;
 background:linear-gradient(180deg,#ffffffeb 0,#ffffffc4 52%,#ffffff00)}
.kk-zeile1{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;height:26px;font:italic 600 19px/1 var(--kk-schrift);letter-spacing:.02em}
.kk-name{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap}
.kk-name b{min-width:0;overflow:hidden;font:700 50px/1.1 var(--kk-schrift);letter-spacing:-.01em}
.kk-zus{flex:none;font:italic 800 42px/1 var(--kk-schrift);color:var(--typ);letter-spacing:-.02em}
.kk-kp{display:flex;align-items:center;gap:6px;white-space:nowrap}
.kk-kp small{align-self:flex-end;margin-bottom:8px;font:700 20px/1 var(--kk-schrift)}
.kk-kp b{font:700 54px/1 var(--kk-schrift);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kk-typ .en{width:52px;height:52px;margin-left:4px;filter:drop-shadow(0 2px 2px #0005)}
.kk-unter{grid-column:1/-1;display:flex;gap:14px;margin-top:4px!important;font:italic 500 21px/1.2 var(--kk-schrift);white-space:nowrap;overflow:hidden}
.kk-unter span:empty{display:none}
.kk-unter span+span::before{content:"·";margin-right:14px}
/* Feld unten */
.kk-feld{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:120px 26px 12px;
 background:linear-gradient(180deg,#ffffff00 0,#ffffffa8 110px,#ffffffd6 260px,#ffffffe6)}
.kk-f{display:flex;align-items:center;gap:14px;white-space:nowrap}
.kk-badge{flex:none;height:30px;padding:0 14px;border-radius:6px;background:var(--typ);color:var(--kk-weiss);font:italic 700 18px/30px var(--kk-schrift);letter-spacing:.03em;text-transform:uppercase}
.kk-f b{min-width:0;overflow:hidden;font:700 33px/1.15 var(--kk-schrift);color:var(--typ)}
.kk-ft{margin-top:6px!important;font:400 24px/1.3 var(--kk-schrift);overflow-wrap:anywhere}
.kk-ft:empty{display:none}
.kk-a{display:flex;align-items:center;gap:14px;margin-top:18px!important;padding-top:14px;border-top:1.5px solid #14141833;white-space:nowrap}
.kk-kosten{flex:none;display:inline-flex;gap:3px;min-width:116px}
.kk-kosten .en{width:36px;height:36px}
.kk-a b{flex:1;min-width:0;overflow:hidden;font:700 36px/1.1 var(--kk-schrift)}
.kk-dmg{flex:none;font:700 54px/1 var(--kk-schrift);letter-spacing:-.02em}
.kk-dmg:empty{display:none}
.kk-swr{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:8px 2px 0;border-top:1.5px solid #14141833;font:600 17px/1 var(--kk-schrift);white-space:nowrap}
.kk-swr span{display:flex;align-items:center;gap:6px}
.kk-swr i{display:inline-flex;gap:2px}
.kk-swr .en{width:26px;height:26px}
.kk-regel{display:flex;align-items:center;gap:14px;min-height:46px;margin-top:12px!important;padding:6px 18px;border-radius:10px;border:2px solid var(--typ);background:#ffffffb8;font:500 20px/1.2 var(--kk-schrift);white-space:nowrap}
.kk-regel b{min-width:0;overflow:hidden;font-weight:500}
.kk-regel:has(b:empty){display:none}
.kk-rl{flex:none;font:italic 800 21px/1 var(--kk-schrift);color:var(--typ)}
.kk-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:10px!important;font:600 15px/1 var(--kk-schrift);letter-spacing:.02em;opacity:.85}
.kk-nr{display:flex;align-items:center;gap:8px}
.kk-nr i{width:12px;height:12px;background:currentColor;transform:rotate(45deg)}   /* eigenes Rang-Zeichen statt Set-Symbol */
/* Trainer: Unterstützer-Look, Kartenart oben, kein KP, keine Attacke und Leiste, Regel-Box mittig */
.tk[data-stil=trainer] .kk-kp,.tk[data-stil=trainer] .kk-unter,.tk[data-stil=trainer] .kk-a,.tk[data-stil=trainer] .kk-at,.tk[data-stil=trainer] .kk-swr{display:none}
.tk[data-stil=trainer]{--typ:#2b3442}
.tk[data-stil=trainer] .kk-zeile1{height:34px;margin:0 -10px 4px}
.kk-tag{height:34px;padding:0 16px;border-radius:8px;background:#2b3442;color:var(--kk-weiss);font:italic 600 20px/34px var(--kk-schrift);letter-spacing:.02em}
.kk-art{font:italic 800 28px/1 var(--kk-schrift);letter-spacing:.14em;color:#4a505c}
.tk[data-stil=trainer] .kk-regel{justify-content:center;text-align:center;margin-top:18px!important;border-color:#2b3442;background:#eef0f4d9}
/* Spezial: kein Typ-Abzeichen in Typfarbe auf Rare (dunkler Rand) nötig, nur Ausrichtung */
.tk[data-stil=ex] .kk-name b{max-width:400px}
/* Max: dunkle Haut, weiße Schrift, Gelb als Akzent */
.tk[data-stil=vmax] .kk{color:var(--kk-weiss)}
.tk[data-stil=vmax] .kk-kopf{background:linear-gradient(180deg,#0b0c12e0 0,#0b0c12a8 55%,#0b0c1200)}
.tk[data-stil=vmax] .kk-zus{color:#ffd21a;-webkit-text-stroke:2px #0b0c12;paint-order:stroke fill}
.tk[data-stil=vmax] .kk-feld{background:linear-gradient(180deg,#0b0c1200 0,#0b0c12a8 110px,#0b0c12d6 260px,#0b0c12eb)}
.tk[data-stil=vmax] .kk-f b{color:#ffd21a}
.tk[data-stil=vmax] .kk-a,.tk[data-stil=vmax] .kk-swr{border-top-color:#ffffff40}
.tk[data-stil=vmax] .kk-regel{border-color:#ffd21a;background:#0b0c12b3}
.tk[data-stil=vmax] .kk-rl{color:#ffd21a}
/* Glanz folgt Maus bzw. Neigung */
/* 3D-Karte (1.5.54, selbst geschrieben): karte.js setzt --rx/--ry (Winkel) und --px/--py (-1…1, Zeiger bzw. Neigung) per requestAnimationFrame.
   Bewegt wird nur per transform und opacity: Veredelung und Glanzlicht sind übergroße Ebenen, die verschoben werden. */
.tk{--px:0;--py:0}
.tk-skala{perspective:1700px}
.tk.js3d{perspective:none}
.tk.js3d .tk-dreh{transition:none;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.tk-kante{position:absolute;inset:0;border-radius:30px;background:#d9dce4;transform:translateZ(var(--z));box-shadow:inset 0 0 0 2px #b9bdc8}
.tk-glanz{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light;opacity:.5}
.tk-glanz i{position:absolute;inset:-60%;background:radial-gradient(circle at 50% 50%,#fff 0,#ffffff80 10%,transparent 28%);transform:translate(calc(var(--px) * 26%),calc(var(--py) * 26%))}
/* Veredelung (data-ver): Standard ohne Folie; Holo Regenbogen-Bänder, Glitzer Funkenraster, Textur geprägte Rillen. Alle wandern mit dem Winkel. */
.tk-holo{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;display:none}
.tk-holo i{position:absolute;inset:-50%;transform:translate(calc(var(--px) * -18%),calc(var(--py) * -14%))}
.tk[data-ver=holo] .tk-holo,.tk[data-ver=glitzer] .tk-holo,.tk[data-ver=textur] .tk-holo{display:block}
.tk[data-ver=holo] .tk-holo{mix-blend-mode:color-dodge;opacity:.75}
.tk[data-ver=holo] .tk-holo i{background:repeating-linear-gradient(118deg,#0000 0,#ff5f6d80 3%,#ffc37190 5%,#f9f87190 7%,#5cf2a590 9%,#4fc3ff90 11%,#9b7bff80 13%,#0000 16%,#0000 24%)}
.tk[data-ver=glitzer] .tk-holo{mix-blend-mode:color-dodge;opacity:1}
.tk[data-ver=glitzer] .tk-holo i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 18 -12.6 0 0 0 18 -12.9 0 0 0 18 -12.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/320px 320px,linear-gradient(120deg,#0000 30%,#ffffff40 47%,#0000 62%);
  -webkit-mask:linear-gradient(120deg,#0000 15%,#000 40%,#000 60%,#0000 85%);mask:linear-gradient(120deg,#0000 15%,#000 40%,#000 60%,#0000 85%)}   /* zufällige Funken (SVG-Rauschen mit Schwelle), am stärksten im Lichtband, das mit dem Winkel wandert */
.tk[data-ver=textur] .tk-holo{mix-blend-mode:overlay;opacity:.42}
.tk[data-ver=textur] .tk-holo i{background:repeating-radial-gradient(circle at 38% 42%,#ffffff 0 2px,#00000000 2px 5px,#0000004d 5px 6px,#00000000 6px 9px),linear-gradient(120deg,transparent 35%,#ffffff99 50%,transparent 65%)}
.kv-tipp{margin-top:10px;text-align:center;font-size:var(--fs-13-5);color:var(--ink-3)}
/* Slab: das ganze Gehäuse dreht sich, Karte darin; Tiefe über Rück- und Vorderscheibe */
.kv-karte{perspective:1600px}
.kv-slab{position:relative}
.kv-slab.an{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.kv-slab.an::before,.kv-slab.an::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none}
.kv-slab.an::before{transform:translateZ(-12px);border:2px solid #ffffff2e;background:#ffffff0d}
.kv-slab.an::after{transform:translateZ(10px);border:2px solid #ffffff38;background:linear-gradient(125deg,#ffffff1f,transparent 40%,#ffffff12 70%,transparent)}
.kv-slab.an .kv-et{transform:translateZ(6px);backface-visibility:hidden}
.kv-slab.an .tk,.kv-slab.an .tk-skala{transform-style:preserve-3d;filter:none;perspective:none}
.kv-slab.an .tk-skala{transform:scale(var(--s))}
/* Rückseite: Wirbel (eigenes Motiv von Marketing) oder TCG Direkt, optional mit Widmung; Hinweis auf KI */
.tk-rs-wirbel{position:absolute;inset:0;background:url(/assets/img/z-karte-rueck-wirbel-750.webp) center/cover}
.tk-rs-td{position:absolute;inset:0;display:none;place-content:center;justify-items:center;gap:30px;background:radial-gradient(70% 55% at 50% 42%,var(--tk-ultra-a70),transparent 70%),var(--tk-navy);box-shadow:inset 0 0 0 22px var(--tk-navy),inset 0 0 0 27px var(--tk-volt)}
.tk[data-rueck=td] .tk-rs-td{display:grid}.tk[data-rueck=td] .tk-rs-wirbel{display:none}
.tk-rs-td .marke{flex-direction:column;gap:30px;font-size:64px}
.tk-rs-td .marke svg{order:-1;width:225px;height:auto}
.tk-rs-td>span{font:600 22px/1 var(--tk-mono);text-transform:uppercase;letter-spacing:.2em;color:var(--tk-hell-1)}
.tk-widmung{position:absolute;left:60px;right:60px;bottom:110px;padding:22px 27px;border-radius:22px;background:var(--tk-weiss-a90);color:#0F1222;text-align:center;font:italic 600 32px/1.35 var(--tk-font);overflow-wrap:anywhere}
.tk-ki{position:absolute;left:0;right:0;bottom:40px;text-align:center;font:600 20px/1 var(--tk-mono);color:var(--tk-hell-1);letter-spacing:.04em;text-shadow:0 1px 3px #000a}
@media (prefers-reduced-motion:reduce){.tk-dreh,.tk.kippt .tk-dreh{transition:none}.tk{--px:.35;--py:-.3}}   /* statischer, leichter Glanz */
/* Slab-Vorschau mit eigenem Etikett (TCG-Direkt-Stil, kein Grading-Logo) */
.kv-slab.an{padding:14px;border:2px solid #ffffff40;border-radius:26px;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff26}
.kv-et{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin-bottom:14px;padding:12px 14px;border-radius:12px;background:var(--navy);box-shadow:inset 4px 0 0 var(--volt);color:var(--white)}
.kv-et[hidden]{display:none}
.kv-et>div:first-child{display:grid;gap:3px;min-width:0}
.kv-et b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.02em}
.kv-et b:empty{display:none}
.kv-et-r{display:grid;justify-items:end;align-content:start;gap:2px;font:600 12px/1.2 var(--mono);color:var(--dk-6)}
.kv-et-r b{font:900 28px/1 var(--display,inherit);color:var(--volt)}
.kv-et small{grid-column:1/-1;font:600 12px/1 var(--mono);color:var(--dk-9);letter-spacing:.06em}
/* Reiter je Karte, Stilwahl mit Muster */
.kf-tabs{display:flex;gap:8px;flex-wrap:wrap}
.kf-tabs[hidden],.kf-tab[hidden]{display:none}
.kf-tab{min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--white);font-weight:700;font-size:var(--fs-15);cursor:pointer}
.kf-tab[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--volt)}
.kf-stile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kf-stil{position:relative;cursor:pointer}
.kf-stil input{position:absolute;opacity:0;width:1px;height:1px}
.kf-stil>span{display:grid;gap:6px;justify-items:center;padding:8px;border:2px solid var(--line);border-radius:var(--r-lg);background:var(--white);font-weight:800;font-size:var(--fs-15)}
.kf-stil img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.kf-stil input:checked+span{border-color:var(--navy);box-shadow:0 0 0 2px var(--volt)}
.kf-stil input:focus-visible+span{outline:3px solid var(--ultra);outline-offset:2px}
[data-nur][hidden]{display:none!important}
.kf-slab{display:grid;gap:10px}
.kf-slab[hidden]{display:none}
.kt-konfig{background:var(--paper)}
/* Seite */
.kt-konfig{background:var(--paper)}
.kt-g{display:grid;gap:20px;margin-top:clamp(24px,4vw,40px)}
.kv{display:contents}
.kf{order:1}.kp,.kv-ok{order:2}
@media (min-width:900px){
  .kt-g{grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:clamp(32px,4vw,56px);align-items:start}
  .kv{display:block;position:sticky;top:calc(var(--head-h) + 16px);order:1}
  .kf{order:0}
}
.kv-karte{padding:clamp(20px,3vw,32px);border-radius:var(--r-3xl);background:radial-gradient(70% 60% at 50% 40%,var(--ultra-a70),transparent 75%),var(--night)}
.kv-karte .tk{max-width:280px;margin-inline:auto}
@media (min-width:900px){.kv-karte .tk{max-width:340px}}
.kv-knopf{display:flex;justify-content:center;margin-top:12px}
.kv-knopf .btn[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.kf{display:grid;gap:16px}
.kf fieldset{display:grid;gap:16px;min-width:0;margin:0;padding:20px;border:0;border-radius:var(--r-3xl);background:var(--white);box-shadow:0 1px 2px var(--ink-a06)}
.kf legend{float:left;width:100%;padding:0;font-weight:800;font-size:var(--fs-20)}
.kf-f{display:grid;gap:6px;min-width:0}
.kf-f>span{display:flex;justify-content:space-between;gap:8px;font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.kf-f>span small{font:inherit;text-transform:none;letter-spacing:0}
.kf .inp,.kf .sel{width:100%;border-radius:var(--r);font-size:var(--fs-16)}
.kf textarea.inp{height:auto;min-height:76px;padding:12px 14px;line-height:1.4;resize:vertical}
.kf-reihe{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px}
.kf-reihe.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.kf-att{display:grid;gap:12px}
.kf-att+.kf-check,[data-a2]{padding-top:4px}
.wahlen{display:flex;flex-wrap:wrap;gap:8px}
.wahl{position:relative}
.wahl input{position:absolute;width:1px;height:1px;opacity:0}
.wahl>span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--white);font-weight:700;font-size:var(--fs-14-5);cursor:pointer;transition:background .2s,color .2s}
.wahl>span:hover{background:var(--card)}
.wahl>span small{font:500 12px/1 var(--mono)}
.wahl .ico{width:20px;height:20px}
.wahl input:checked+span{background:var(--ultra);border-color:var(--ultra);color:var(--white)}
.wahl input:checked+span:hover{background:var(--ultra-deep)}
.wahl input:focus-visible+span{outline:3px solid var(--ultra);outline-offset:3px}
.kf-check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding-top:10px;font-size:var(--fs-16);line-height:1.45;cursor:pointer}
.kf-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ultra)}
.kf-check small{font:500 12.5px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.kf-up{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;cursor:pointer}
.kf-up input:focus-visible+.btn{outline:3px solid var(--ultra);outline-offset:3px}
.kf-up-t{max-width:36ch;font-size:var(--fs-14-5);line-height:1.4;color:var(--ink-2)}
.kf-zoom{display:grid;gap:4px}
.kf input[type=range]{width:100%;height:44px;accent-color:var(--ultra)}
.kf-tipp{font-size:var(--fs-13-5);line-height:1.4;color:var(--ink-3)}
.kf-fehler{font-weight:600;font-size:var(--fs-14-5);color:var(--warn)}
.kp{padding:18px 20px;border-radius:var(--r-3xl);background:var(--white);box-shadow:0 1px 2px var(--ink-a06)}
@media (min-width:900px){.kp{margin-top:16px}}
.kp h3{margin-bottom:6px;font-weight:800;font-size:var(--fs-17)}
.kp-z{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:var(--fs-15);color:var(--ink-2)}
.kp-z>span:last-child{font:500 var(--fs-14)/1.4 var(--mono);color:var(--ink)}
.kp-sum{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:8px;padding-top:12px;border-top:1.5px solid var(--ink)}
.kp-sum small{display:block;font-size:var(--fs-12-5);color:var(--ink-3)}
.kp-sum b{font-weight:800;font-size:var(--fs-28);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv-ok{display:grid;gap:12px}
@media (min-width:900px){.kv-ok{margin-top:12px}}
.kf-pflicht{padding:14px 16px;border-radius:var(--r-lg);background:var(--white);font-size:var(--fs-14-5)}
.kf-pflicht.fehlt{box-shadow:0 0 0 2px var(--warn)}
.kv-ok .merkhint{margin-top:0}
.kv-widerruf{padding:14px 16px;border:1.5px solid var(--hinweis-line);border-radius:var(--r-lg);background:var(--hinweis-bg);font-size:var(--fs-14-5);line-height:1.45}
.buybar.weg{transform:translateY(110%)}.kv-stil{margin-top:14px;text-align:center;font:500 12.5px/1.4 var(--mono);color:var(--dk-6)}
.kv-stil b{color:var(--white)}
/* Handy: mitlaufende Mini-Vorschau unter dem Kopf (ca. 32 % Breite), verdeckt keine Felder dank scroll-padding, einklappbar */
.kv-mini{display:none}
@media (max-width:899px){
  .kv-mini{position:fixed;left:0;right:0;top:var(--head-h);z-index:40;display:flex;align-items:center;gap:14px;padding:8px var(--gutter);
   background:radial-gradient(60% 120% at 15% 50%,var(--ultra-a70),transparent 70%),var(--night);color:var(--white);box-shadow:0 10px 24px -10px var(--black-a73);
   transform:translateY(-120%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .kv-mini.an{transform:none;visibility:visible}
  .kv-mini-karte{position:relative;flex:none;width:32vw;max-width:150px;aspect-ratio:63/88;pointer-events:none}
  .kv-mini-karte .tk{position:absolute;left:0;top:0;width:300px;transform-origin:0 0;filter:none}
  .kv-mini-t{display:grid;gap:4px;min-width:0;flex:1}
  .kv-mini-t b:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 900 var(--fs-18)/1.1 var(--display);font-stretch:116%;text-transform:uppercase}
  .kv-mini-t span{font:500 12px/1.2 var(--mono);color:var(--dk-6)}
  .kv-mini-t b:last-child{font-weight:800;font-size:var(--fs-17)}
  .kv-mini-zu{flex:none;align-self:start;min-height:44px;min-width:44px;padding:0 14px;border:1.5px solid var(--white-a35);border-radius:var(--r-pill);background:none;color:var(--white);font-weight:700;font-size:var(--fs-14);cursor:pointer}
  .kv-mini.zu .kv-mini-karte{display:none}
  .kv-mini.zu .kv-mini-zu{align-self:center}
  html.mit-mini{scroll-padding-top:calc(var(--head-h) + 32vw * 88 / 63 + 32px)}
  html.mit-mini.mini-zu{scroll-padding-top:calc(var(--head-h) + 84px)}
}
@media (max-width:899px) and (min-width:470px){html.mit-mini{scroll-padding-top:calc(var(--head-h) + 242px)}}
@media (prefers-reduced-motion:reduce){.kv-mini{transition:none}}
.buybar.eg-bar.weg{transform:translateY(160%)}

/* 1.5.36: Schnellweg in 4 Schritten, „Alles selbst gestalten“, Benachrichtigen per E-Mail, kleinere Galerie am Handy (Titel und Preis im ersten Bildschirm) */
.kf legend{display:flex;align-items:center;gap:10px}
.kf-nr{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--volt);font-size:var(--fs-15);font-weight:800}
.kf-hilfe{font-size:var(--fs-13-5);line-height:1.4;color:var(--ink-3)}
.kf-alles{justify-self:start;min-height:48px}
.kf-mehr{display:grid;gap:inherit}
.kf-mehr[hidden]{display:none}
.kv-merk,.kv-ki{display:grid;gap:12px}
.kv-merk-o,.kv-ki output{font-weight:700;font-size:var(--fs-15);line-height:1.4}
.kv-ki{padding:16px;border:1.5px solid var(--line);border-radius:var(--r-lg)}
.kv-ki h3{font-weight:800;font-size:var(--fs-17)}
@media (max-width:899px){.eg-bild{max-height:34svh}.eg-bild img{object-fit:contain}.eg-thumbs{display:none}}   /* Handy: Titel und Preis im ersten Bildschirm, Wischen und Pfeile bleiben */
.eg-anl-l a{display:grid;gap:4px;color:inherit;text-decoration:none}
.eg-anl-l a:hover b{text-decoration:underline}
@media (min-width:1100px){.eg-anl-l{grid-template-columns:repeat(4,minmax(0,1fr))}}