/* Startseite, Entwurf A (v13 index.html). Grundregeln stehen in v13.css; hier nur, was echte Daten brauchen. */

/* Abstände der Abschnitte wie v13 (dort inline) */
.hm-how { padding-bottom: 60px; }
.hm-sets { padding-top: 60px; }
.hm-sort { padding-top: 40px; z-index: 3; }
.hm-sort .floatleaf { right: 3%; bottom: -170px; rotate: -28deg; }
.brands-sec { padding-top: 40px; }
.hm-rg { padding-top: 20px; }

/* Bühne: Wortmarke wie v13 inline, zweiter Chip links unten */
.h13 .stage-word { font-size: clamp(4rem, 9vw, 9.5rem); }
.h13 .chip-b { right: auto; left: 30%; top: 66%; }
/* Überschrift des Set-Vorschlags ist h2 (Reihenfolge h1 → h2), Aussehen wie v13 .stage-set h3 */
.stage-set h2 { font-size: .8rem; color: var(--lime); letter-spacing: 0; line-height: 1.25; font-weight: 700; margin-bottom: 10px; }
/* Die Karte ist schmal (36 % der Bühne): Rolle klein über dem Namen, der Name bekommt die ganze Breite bis zum Preis
   und darf zwei Zeilen haben, damit man die Teile erkennt */
.h13 .stage-set li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: end; }
.h13 .stage-set li small { grid-column: 1 / -1; line-height: 1.2; }
.h13 .stage-set li span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.hero-pick .pick-cta .link { display: inline-flex; align-items: center; gap: 8px; }
/* Weitere Größen (Auswahlliste) neben den Knöpfen */
.hero-pick .size-btns { align-items: center; }
.hero-pick .bd-more { height: 48px; border-radius: 14px; font-weight: 700; }
.hero-pick .bd-more.on { background: var(--slate); color: #fff; }

/* Bühne ohne Freisteller: die vier Kacheln wie auf der Set-Seite */
.stage-vis.sv { left: 6%; right: 42%; top: 13%; height: 46%; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 8px; transition: opacity .4s var(--ease); }
.stage-vis.sv.swap { opacity: 0; }
.stage-vis.sv > span { position: relative; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.stage-vis.sv > .sv-box { grid-row: 1 / span 3; }
.stage-vis.sv img { position: static; width: 100%; height: 100%; object-fit: cover; filter: none; transform: none; }
.stage-vis.sv .cut { background: #fff; }
.stage-vis.sv .cut img { object-fit: contain; }
.stage-vis.sv small { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(15, 24, 28, .72); color: #fff; font-size: .72rem; font-weight: 700; }

/* Fertige Sets: erste Karte breit wie v13 (ohne eigenes Set) */
.hm-kits:not(.has-own) > .kit:first-child, .hm-kits > .hm-own { grid-column: span 8; flex-direction: row; }
.hm-kits:not(.has-own) > .kit:first-child .kit-viz, .hm-own .kit-viz { flex: 1.2; height: auto; min-height: 380px; }
.hm-kits:not(.has-own) > .kit:first-child .kit-body, .hm-own .kit-body { flex: 1; }
.hm-own-vis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.hm-own-vis > span { position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); }
.hm-own-vis > .sv-box { grid-row: 1 / span 2; }
.hm-own-vis > .sv-filter { grid-column: 2 / span 2; }
.hm-own-vis img { position: static; width: 100%; height: 100%; object-fit: cover; filter: none; }

/* Set-Builder-Kachel: drei Freisteller übereinander wie v13 */
.c-sets .stack .st-0 { left: 0; bottom: 0; height: 100%; }
.c-sets .stack .st-1 { left: 18%; top: 14%; width: 62%; }
.c-sets .stack .st-2 { right: 0; bottom: 12%; width: 40%; }

/* Marken: Shop-Fotos (ohne Freisteller) als runde Fläche bis zum Rand */
.brand-float.photo { background: #fff; overflow: hidden; }
.brand-float.photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

/* Ratgeber: Beitragsbilder sind Fotos, also bis zum Rand */
.hm-rg .art-img img, .hm-rg .art-big .art-img img, .hm-rg .art-s1 .art-img img, .hm-rg .art-s2 .art-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.hm-rg .art-s1 .art-img, .hm-rg .art-s2 .art-img { padding: 0; }
/* ohne Bild keine Bildfläche: großer Beitrag als dunkle Fläche mit Adern-Struktur (wie v13 .tex), kleine als Textkarte */
.hm-rg .art-big.no-img { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; min-height: clamp(300px, 34vw, 460px); padding: clamp(26px, 3.4vw, 44px); border-radius: 40px 8px 40px 40px; background: var(--slate); color: #fff; }
.hm-rg .art-big.no-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(img/v12-adern.webp) center / cover; opacity: .3; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(90% 80% at 85% 0%, #000, transparent 80%); mask-image: radial-gradient(90% 80% at 85% 0%, #000, transparent 80%); }
.hm-rg .art-big.no-img .art-meta { color: var(--lime); margin-top: 0; }
.hm-rg .art-big.no-img p { color: rgba(255, 255, 255, .75); max-width: 36em; }
.hm-rg .art-s1.no-img, .hm-rg .art-s2.no-img { grid-template-columns: minmax(0, 1fr); padding: 22px 26px 24px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s var(--ease); }
.hm-rg .art-s1.no-img:hover, .hm-rg .art-s2.no-img:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.hm-rg .art.no-img .art-meta { margin-top: 0; }

@media (max-width: 1099px) {
  .hm-kits:not(.has-own) > .kit:first-child, .hm-kits > .hm-own { grid-column: 1 / -1; }
  /* Schild über der Bildfläche rechts, nicht über dem Preis */
  .h13 .chip-b { left: auto; right: 6%; top: 36%; }
}
@media (max-width: 760px) {
  .hm-kits:not(.has-own) > .kit:first-child, .hm-kits > .hm-own { flex-direction: column; }
  .hm-kits:not(.has-own) > .kit:first-child .kit-viz, .hm-own .kit-viz { min-height: 240px; flex: none; }
  .stage-vis.sv { left: 6%; right: 6%; top: 8%; height: 40%; }
  .hm-sort .floatleaf { display: none; }
}
/* Handy: Bühne im Fluss statt fester Höhe. Schild oben, darunter das Bild, darunter Name, Kennzahlen und Preis;
   so überdeckt nichts die Bildchips oder den Text, egal wie lang Name und Kennzahlen sind. */
@media (max-width: 640px) {
  .h13 .hero-stage { height: auto; padding: 90px 0 26px; }
  .h13 .stage-vis, .h13 .stage-vis.sv { position: relative; left: auto; right: auto; top: auto; height: 250px; margin: 0 6%; }
  .h13 .stage-glow { top: auto; bottom: 46%; }
  .h13 .stage-info { position: relative; left: auto; right: auto; bottom: auto; margin: 24px 7% 0; }
}

/* Kacheln: echte Bilder (Freisteller oder Shop-Foto auf Weiß) – Größe aus der Kachel, nie aus dem Bild; Weiß verschmilzt mit der Fläche */
.cats .cat img { width: auto; max-width: 58%; mix-blend-mode: multiply; filter: none; }
.cats .c-box img { height: 92%; top: -24px; }
.cats .c-led img { height: 100%; top: -30px; max-width: 64%; }
.cats .c-air img, .cats .c-filter img { height: 74%; top: auto; bottom: 10%; max-width: 64%; }
.cats .c-soil img { height: 84%; mix-blend-mode: normal; border-radius: 14px; }
.c-sets .stack img { mix-blend-mode: normal; max-width: none; }

/* ---------- Set-Builder-Kachel: 3D-Growbox baut sich auf (Wände fliegen ein, Lampe fällt und zündet, Lichtkegel mit Staub,
   Lüfter + Filter docken an, Keimling wächst), Glas-Chips haken die Teile ab, Gesamtpreis rollt herunter.
   Grundzustand = Endbild; Aufbau nur mit JS und wenn sichtbar (.in). Maße in --u (1 % der Bühnenhöhe je Breakpoint; container-type würde 3D in Chrome flach machen). ---------- */
.c-sets .sb-anim { position: absolute; z-index: -1; inset: 18px 18px 18px 38%; display: flex; align-items: center; justify-content: flex-end; gap: 3%; pointer-events: none; }
.sb-list { position: relative; z-index: 2; display: grid; gap: 6px; flex: 0 1 216px; min-width: 0; }
.sb-row { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px -14px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c-sets .sb-row small { color: rgba(255, 255, 255, .72); font-weight: 650; font-size: .78rem; }
.c-sets .sb-row b { margin: 0 0 0 auto; font-size: .84rem; font-weight: 750; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sb-ok { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 0 14px rgba(195, 234, 91, .45); }
.sb-ok svg { width: 12px; height: 12px; fill: none; stroke: var(--slate); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-total { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; margin-top: 4px; padding: 10px 12px 11px; border-radius: 14px; background: linear-gradient(135deg, rgba(195, 234, 91, .2), rgba(54, 178, 76, .08)); box-shadow: inset 0 0 0 1px rgba(195, 234, 91, .4), 0 14px 34px -14px rgba(195, 234, 91, .45); overflow: hidden; }
.c-sets .sb-total small { color: rgba(255, 255, 255, .75); font-weight: 650; font-size: .72rem; white-space: nowrap; }
.c-sets .sb-total b { margin: 0; grid-column: 2; grid-row: 1; align-self: center; color: var(--lime); font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* „bis X € Preisunterschied“ ist länger als „gespart“: eigene Zeile unter Text und Preis */
.sb-total em { grid-column: 1 / -1; font-style: normal; justify-self: start; font-size: .68rem; font-weight: 800; color: var(--slate); background: var(--lime); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sb-total::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); translate: -120% 0; }

/* Bühne */
.sb-stage { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: .82; --u: 2.84px; perspective: 760px; perspective-origin: 50% 30%; }
.sb-halo { position: absolute; left: 50%; top: 52%; width: calc(120 * var(--u)); height: calc(120 * var(--u)); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(195, 234, 91, .3), rgba(54, 178, 76, .1) 55%, transparent); filter: blur(6px); animation: sbHalo 5s ease-in-out infinite alternate; }
.sb-shadow { position: absolute; left: 50%; bottom: calc(4 * var(--u)); width: calc(70 * var(--u)); height: calc(12 * var(--u)); translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
/* Lichtschein, der vorne aus dem Zelt auf den Boden fällt */
.sb-spill { position: absolute; left: 44%; bottom: calc(1 * var(--u)); width: calc(80 * var(--u)); height: calc(16 * var(--u)); translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 255, 150, .45), rgba(195, 234, 91, .12) 60%, transparent); filter: blur(4px); }
.sb-sway { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: sbSway 9s ease-in-out infinite alternate; }
.sb-rig { --W: calc(44 * var(--u)); --D: calc(36 * var(--u)); --H: calc(66 * var(--u)); position: absolute; width: 0; height: 0; transform-style: preserve-3d; transition: transform .9s var(--ease);
  transform: translateY(calc(2 * var(--u))) rotateX(calc(-15deg + var(--my, 0) * 10deg)) rotateY(calc(-34deg + var(--mx, 0) * 30deg)); }
.sb-rig > * { position: absolute; left: 0; top: 0; display: block; transform-style: preserve-3d; }
.sb-f { backface-visibility: hidden; }
.sb-f.back, .sb-f.front { width: var(--W); height: var(--H); }
.sb-f.left, .sb-f.right { width: var(--D); height: var(--H); }
.sb-f.floor, .sb-f.top { width: var(--W); height: var(--D); }
.sb-f.back { transform: translate(-50%, -50%) translateZ(calc(var(--D) / -2)); }
.sb-f.left { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--W) / -2)); }
.sb-f.left.out { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--W) / -2)) rotateY(180deg); }
.sb-f.right { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--W) / -2)); }
.sb-f.right.out { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--W) / -2)) rotateY(180deg); }
.sb-f.floor { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--H) / -2)); }
.sb-f.top { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--H) / -2)) rotateY(180deg); }
.sb-f.front { transform: translate(-50%, -50%) translateZ(calc(var(--D) / 2)); backface-visibility: visible; border: calc(1.6 * var(--u)) solid #0a1013; border-radius: calc(1 * var(--u)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
/* innen Mylar, oben angestrahlt; außen schwarzer Stoff */
.sb-f.in { background: radial-gradient(90% 70% at 50% 0, rgba(236, 255, 190, .95), rgba(195, 234, 91, .25) 55%, transparent 80%), repeating-linear-gradient(100deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px calc(3.2 * var(--u))), linear-gradient(125deg, #b4bec2, #66737a 30%, #dbe3e5 50%, #5c686e 70%, #a5b0b4); box-shadow: inset 0 0 0 calc(.6 * var(--u)) #0b1013, inset 0 calc(-10 * var(--u)) calc(12 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, .6); }
.sb-f.in.left, .sb-f.in.right { filter: brightness(.85); }
.sb-f.in.floor { background: linear-gradient(135deg, #5a666c, #262f34); filter: none; }
.sb-spot { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 255, 170, .95), rgba(195, 234, 91, .25) 60%, transparent); animation: sbBreath 4s ease-in-out infinite alternate; }
.sb-f.out { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px calc(1.2 * var(--u))), linear-gradient(160deg, #26333a, #0c1316); box-shadow: inset 0 0 0 calc(.6 * var(--u)) #070b0d, inset calc(1 * var(--u)) 0 calc(2 * var(--u)) calc(-1 * var(--u)) rgba(195, 234, 91, .25); }
.sb-f.out.top { background: linear-gradient(135deg, #2c3a42, #121a1e); }
/* Lampe + Lichtkegel (zwei gekreuzte Flächen) */
.sb-lamp { width: calc(var(--W) * .7); height: calc(var(--D) * .7); transform: translate(-50%, -50%) translateY(calc(var(--H) / -2 + calc(5 * var(--u)))) rotateX(90deg); }
.sb-lamp span { position: absolute; inset: 0; border-radius: calc(.8 * var(--u)); background: radial-gradient(circle, #fffbe6 0 calc(.3 * var(--u)), transparent calc(.45 * var(--u))) 0 0 / calc(2.2 * var(--u)) calc(2.2 * var(--u)), radial-gradient(circle, #f4ffe0, #e9ffc2 55%, #c3ea5b); box-shadow: 0 0 0 calc(.6 * var(--u)) #11181c, 0 0 calc(9 * var(--u)) calc(3 * var(--u)) rgba(214, 255, 150, .75); }
.sb-beam { width: calc(var(--W) * .95); height: calc(var(--H) - calc(8 * var(--u))); background: linear-gradient(180deg, rgba(240, 255, 200, .7), rgba(195, 234, 91, .2) 60%, rgba(195, 234, 91, .03)); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); pointer-events: none; animation: sbBreath 4s ease-in-out infinite alternate; }
.sb-beam.a { transform: translate(-50%, -50%) translateY(calc(4 * var(--u))); }
.sb-beam.b { width: calc(var(--D) * .95); transform: translate(-50%, -50%) translateY(calc(4 * var(--u))) rotateY(90deg); }
/* Staub im Licht */
.sb-dust { width: calc(var(--W) * .8); height: calc(var(--H) * .8); transform: translate(-50%, -50%) translateY(calc(3 * var(--u))); }
.sb-dust b { position: absolute; left: var(--x); bottom: var(--y); width: calc(.9 * var(--u)); height: calc(.9 * var(--u)); border-radius: 50%; background: #fbffe8; box-shadow: 0 0 calc(1.4 * var(--u)) rgba(226, 255, 170, .9); opacity: 0; animation: sbDust var(--s) linear var(--d) infinite; }
/* Filter innen, Keimling am Boden, Lüfter außen an der rechten Wand */
.sb-filter { width: calc(9 * var(--u)); height: calc(20 * var(--u)); transform: translate(-50%, -50%) translate3d(calc(var(--W) * -.27), calc(var(--H) * -.17), calc(var(--D) * -.22)); border-radius: calc(2 * var(--u)); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 calc(.4 * var(--u)), transparent calc(.4 * var(--u)) calc(1.6 * var(--u))), linear-gradient(90deg, #0f1518, #3a474e 45%, #0f1518); box-shadow: inset 0 calc(1.4 * var(--u)) 0 calc(-.6 * var(--u)) #c3ea5b, 0 calc(2 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(0, 0, 0, .6); }
.sb-plant { width: calc(21 * var(--u)); height: calc(25 * var(--u)); transform: translate(-50%, -100%) translateY(calc(var(--H) / 2 - calc(1 * var(--u)))); }
.sb-plant svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; animation: sbLeaf 5s ease-in-out infinite alternate; }
.sb-plant .pot { fill: #1b2428; } .sb-plant .stem { stroke: #8ed155; stroke-width: 2; fill: none; } .sb-plant .lf { fill: #8ed155; filter: drop-shadow(0 0 2px rgba(195, 234, 91, .8)); }
.sb-fan { position: absolute; left: 50%; top: 14%; width: calc(17 * var(--u)); height: calc(17 * var(--u)); translate: -50% 0; }
.sb-fan svg { width: 100%; height: 100%; display: block; }
.sb-fan .ring { fill: #121a1e; stroke: #8ed155; stroke-width: 2.4; } .sb-fan .hub { fill: var(--lime); }
.sb-fan .bl { fill: rgba(255, 255, 255, .85); transform-origin: 20px 20px; animation: sbSpin 1s linear infinite; }
.c-sets:hover .sb-fan .bl { animation-duration: .35s; }

/* Aufbau-Sequenz (pausiert bis .in) */
.js .c-sets .sb-f.floor { animation: sbFloor .7s var(--ease) .05s both; }
.js .c-sets .sb-f.back { animation: sbInUp .8s cubic-bezier(.34, 1.4, .64, 1) .2s both, sbLit 1s ease 1.6s both; }
.js .c-sets .sb-f.left { animation: sbInL .8s cubic-bezier(.34, 1.4, .64, 1) .35s both, sbLit 1s ease 1.6s both; }
.js .c-sets .sb-f.right { animation: sbInR .8s cubic-bezier(.34, 1.4, .64, 1) .5s both, sbLit 1s ease 1.6s both; }
.js .c-sets .sb-f.top { animation: sbInUp .8s cubic-bezier(.34, 1.4, .64, 1) .7s both; }
.js .c-sets .sb-f.front { animation: sbFront .8s var(--ease) .85s both; }
.js .c-sets .sb-lamp { animation: sbDrop .9s cubic-bezier(.34, 1.6, .64, 1) 1.1s both; }
.js .c-sets .sb-lamp span { animation: sbIgnite .8s linear 1.55s both; }
.js .c-sets .sb-beam, .js .c-sets .sb-spot { animation: sbOn .9s ease 1.75s both, sbBreath 4s ease-in-out 2.8s infinite alternate; }
.js .c-sets .sb-spill { animation: sbOn 1s ease 1.9s both; }
.js .c-sets .sb-halo { animation: sbOn 1.2s ease 1.7s both, sbHalo 5s ease-in-out 3s infinite alternate; }
.js .c-sets .sb-dust { animation: sbOn 1s ease 2s both; }
.js .c-sets .sb-fan { animation: sbPop .6s cubic-bezier(.34, 1.6, .64, 1) 2.05s both; }
.js .c-sets .sb-filter { animation: sbFilter .7s cubic-bezier(.34, 1.4, .64, 1) 2.4s both; }
.js .c-sets .sb-plant { animation: sbGrow .9s cubic-bezier(.34, 1.6, .64, 1) 2.8s both; }
.js .c-sets .sb-row { animation: sbChip .6s cubic-bezier(.34, 1.4, .64, 1) calc(var(--t) - .3s) both; }
.js .c-sets .sb-ok { animation: sbCheck .5s cubic-bezier(.34, 1.8, .64, 1) var(--t) both; }
.js .c-sets .sb-total { animation: sbChip .7s cubic-bezier(.34, 1.4, .64, 1) 3.1s both; }
.js .c-sets .sb-total em { animation: sbCheck .5s cubic-bezier(.34, 1.8, .64, 1) 4.6s both; }
.js .c-sets .sb-total::after { animation: sbShine 1.1s ease 4.7s both; }
.js .c-sets:not(.in) .sb-anim *, .js .c-sets:not(.in) .sb-total::after { animation-play-state: paused !important; }

@keyframes sbFloor { from { opacity: 0; translate: 0 calc(6 * var(--u)) 0; } }
@keyframes sbInUp { from { opacity: 0; translate: 0 calc(-24 * var(--u)) 0; } }
@keyframes sbInL { from { opacity: 0; translate: calc(-26 * var(--u)) calc(-6 * var(--u)) 0; } }
@keyframes sbInR { from { opacity: 0; translate: calc(26 * var(--u)) calc(-6 * var(--u)) 0; } }
@keyframes sbFront { from { opacity: 0; scale: 1.15; } }
@keyframes sbDrop { from { opacity: 0; translate: 0 calc(-30 * var(--u)) 0; } }
@keyframes sbIgnite { 0% { filter: brightness(.2); } 25% { filter: brightness(1.3); } 40% { filter: brightness(.35); } 60% { filter: brightness(1.2); } 100% { filter: none; } }
@keyframes sbOn { from { opacity: 0; } }
@keyframes sbLit { from { filter: brightness(.35); } }
@keyframes sbBreath { to { opacity: .72; } }
@keyframes sbHalo { to { opacity: .6; scale: .92; } }
@keyframes sbPop { from { scale: 0; opacity: 0; } }
@keyframes sbFilter { from { opacity: 0; translate: 0 calc(-18 * var(--u)) 0; } }
@keyframes sbGrow { from { scale: 0; opacity: 0; } }
@keyframes sbLeaf { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes sbSway { from { transform: rotateY(-7deg); } to { transform: rotateY(7deg); } }
@keyframes sbSpin { to { rotate: 360deg; } }
@keyframes sbDust { 0% { opacity: 0; translate: 0 0; } 20% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; translate: calc(2 * var(--u)) calc(-22 * var(--u)); } }
@keyframes sbChip { from { opacity: 0; translate: -14px 0; scale: .9; } }
@keyframes sbCheck { from { scale: 0; } }
@keyframes sbShine { from { translate: -120% 0; } to { translate: 120% 0; } }

/* Aufteilung nach Kachelbreite (Container-Abfrage auf der Kachel; auf der Bühne selbst würde sie das 3D flach machen) */
.c-sets { container: sbt / inline-size; }
.c-sets:has(.sb-anim) > div { max-width: 36%; }
@media (max-width: 960px) { .sb-stage { --u: 2.48px; } }
@container sbt (max-width: 719px) {
  .c-sets:has(.sb-anim) > div { max-width: 32%; }
  .c-sets .sb-anim { inset: 16px 14px 16px 34%; }
  .sb-stage { aspect-ratio: .7; }
  .sb-list { flex: 0 1 176px; min-width: 0; gap: 5px; }
  .sb-row { padding: 6px 10px 6px 6px; }
  .sb-total { grid-template-columns: 1fr; }
  .c-sets .sb-total b { grid-column: 1; grid-row: auto; }
}
@container sbt (max-width: 559px) {
  .c-sets:has(.sb-anim) > div { max-width: 48%; }
  .c-sets .sb-anim { inset: 10px 8px 10px 48%; justify-content: center; }
  .sb-list { display: none; }
  .sb-stage { --u: 2.3px; height: 100%; aspect-ratio: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .c-sets .sb-anim *, .js .c-sets .sb-anim * { animation: none !important; } .sb-rig { transition: none; } }