/* AUS DER APP: Stile der Sammelkarte aus karteibox_1.jsx (.reise-sammel bis vor
   .wk-fragen-chips), Stand 3.10.2026, Kopie fuer die Startseite. Was die Website
   anders macht (ruhigere Karte ohne Holo, Folie, Glanz, Kante), steht NICHT hier,
   sondern in start.css - diese Datei bleibt nah an der App.
   Einzige Aenderung hier: die Chips hinten (siehe .sk-chips), gleich wie in der App. */
.reise-sammel{ display:flex; flex-direction:column; gap:10px; }
.rs-oben{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 -4px; }
.rs-zahl{ font-family:var(--ui); font-size:14px; font-weight:800; color:#C4A6FF; }
.rs-abfragen{ border:none; background:var(--card); color:var(--ink); font-family:var(--ui); font-size:14px; font-weight:800; border-radius:999px; padding:9px 16px; min-height:40px; cursor:pointer; }
/* DER SCHEIN LAEUFT UEBER DEN GANZEN SCHIRM (Marc, 3.10.2026 am iPhone: "Die
   Sonnenanimation hoert in einem gewissen Bildschirmbereich auf ... Wenn es schon
   aus der Karte rauslaeuft, dann muss es auch ueber den ganzen Screen laufen"):
   Die Reihe scrollt quer und schneidet darum alles an ihrem Rand ab. Sie reicht
   deshalb unsichtbar bis an alle vier Bildschirmraender (Polster plus gleich grosser
   Gegenrand, ReiseSammlung misst die Werte) - der Inhalt bleibt, wo er war. Kopf,
   Zahl und Punkte liegen mit z-index darueber und bleiben antippbar. */
.rs-reihe{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; margin:calc(-1 * var(--rs-oben, 0px)) calc(-1 * var(--rs-r, 16px)) calc(-1 * var(--rs-unten, 0px)) calc(-1 * var(--rs-l, 16px)); padding:var(--rs-oben, 0px) 0 var(--rs-unten, 0px); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.reise-sammel > :not(.rs-reihe){ z-index:2; }
.rs-reihe::-webkit-scrollbar{ display:none; }
.rs-platz{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; justify-content:center; padding:0 var(--rs-r, 16px) 0 var(--rs-l, 16px); box-sizing:border-box; }
.wk-schiff-bild{ display:grid; place-items:center; }
.wk-schiff-bild svg{ width:92%; height:auto; max-height:100%; transform:rotate(-8deg); filter:drop-shadow(0 14px 26px rgba(139,54,253,.35)); animation:wkSchweben 4.5s ease-in-out infinite; }
@keyframes wkSchweben{ 50%{ transform:rotate(-5deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .wk-schiff-bild svg{ animation:none; } }
.wk-blase{ position:absolute; left:12px; right:12px; top:12px; z-index:3; background:rgba(20,30,42,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:18px; padding:10px 13px; text-align:left; box-shadow:inset 0 0 0 1px rgba(245,247,250,.08), 0 10px 30px rgba(0,0,0,.4); opacity:0; transition:opacity .25s ease-in-out; pointer-events:none; }
.wk-blase.an{ opacity:1; }
.wk-blase b{ display:block; color:#C4A6FF; font-family:var(--ui); font-size:14px; font-weight:900; }
.wk-blase p{ margin:2px 0 0; font-family:var(--ui); font-size:15px; font-weight:600; line-height:1.4; color:var(--ink); }
/* SAMMELKARTE (A, Deck "Meine Reise") und BESTAUNEN (B, Sternkarte) - Marc,
   3.10.2026, Kartendesign "Mischung": vorn echte Sammelkarte (grosse Ecken,
   glaeserne leuchtende Kante statt Rand, leiser Holo-Schimmer, Neigung, das
   Objekt ragt oben heraus), hinten die Quartett-Seite. In der Sternkarte keine
   Karte, sondern Bestaunen mit Blatt zum Hochziehen. */
.wk-sk{ position:relative; width:100%; perspective:1100px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:pan-x pan-y; --wk-grund:#0C1B25; }
.wk-sk[data-nah][data-kugel], .wk-staunen[data-nah][data-kugel]{ touch-action:none; }
.sk-karte{ position:absolute; left:20px; top:60px; width:300px; height:430px; transform-style:preserve-3d; cursor:pointer; border-radius:30px; will-change:transform; outline:none; -webkit-tap-highlight-color:transparent; }
.sk-karte:focus-visible{ outline:2.5px solid #C4A6FF; outline-offset:3px; }
.sk-seite{ position:absolute; inset:0; border-radius:30px; }
.sk-vorn{ transform-style:preserve-3d; }
.sk-vorn > *, .sk-hinten{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.sk-hinten{ transform:rotateY(180deg); }
.sk-karte[data-um] .sk-vorn > *, .sk-karte:not([data-um]) .sk-hinten{ pointer-events:none; }
.sk-grund{ position:absolute; inset:0; border-radius:30px; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 18% 22%, rgba(120,70,200,.30), rgba(120,70,200,0) 62%), radial-gradient(circle at 90% 50%, rgba(40,110,160,.22), rgba(40,110,160,0) 58%), radial-gradient(circle at 40% 86%, rgba(150,60,140,.16), rgba(150,60,140,0) 58%), linear-gradient(162deg, #151236 0%, #0B1430 55%, #070B18 100%);
  box-shadow:0 0 0 1px rgba(196,166,255,.10), 0 0 22px rgba(196,166,255,.16), 0 14px 30px rgba(0,0,0,.42); transition:opacity .6s ease-in-out; }
.sk-sterne{ position:absolute; inset:-14px; background-size:cover; background-position:center; transform:translate(var(--px,0px), var(--py,0px)); }
.sk-schatten{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,6,14,0) 46%, rgba(4,6,14,.55) 76%, rgba(4,6,14,.74)); }
.sk-holo{ position:absolute; inset:-2px; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:linear-gradient(112deg, rgba(255,255,255,0) 28%, rgba(255,140,220,.24) 37%, rgba(150,200,255,.32) 44%, rgba(140,255,215,.26) 51%, rgba(255,236,160,.22) 58%, rgba(255,255,255,0) 67%);
  background-size:260% 260%; background-position:var(--hx,50%) var(--hy,50%); }
.sk-folie{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.3; background:repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.07) 6px 7px); }
.sk-glanz{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.14), rgba(255,255,255,0) 46%); }
.sk-kante{ position:absolute; inset:0; border-radius:30px; padding:1.5px; pointer-events:none; opacity:.7; filter:blur(.3px);
  background:conic-gradient(from var(--kw,0deg), rgba(196,166,255,.95), rgba(140,215,255,.55), rgba(255,255,255,.12), rgba(255,190,240,.7), rgba(150,255,220,.35), rgba(196,166,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sk-kante-innen{ position:absolute; inset:0; border-radius:30px; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 22px rgba(196,166,255,.10); }
.sk-hinten .sk-grund{ background:linear-gradient(160deg, #1A1838 0%, #121B2E 46%, #0D1724 100%); }
.sk-hinten .sk-holo{ opacity:.3; }
.sk-vorn > .wk-himmel{ position:absolute; display:block; pointer-events:none; }
.sk-pop{ position:absolute; display:grid; place-items:center; pointer-events:none; }
.sk-pop .wk-bild{ width:72%; height:72%; margin:0; filter:none; }
.sk-pop .wk-schiff-bild{ width:100%; height:100%; }
.sk-unten{ position:absolute; left:0; right:0; bottom:18px; padding:0 14px; text-align:center; transition:opacity .6s ease-in-out; }
.sk-unten .wk-q-name{ margin:0; font-size:32px; font-weight:900; line-height:1.12; text-shadow:0 2px 16px rgba(0,0,0,.75); }
.sk-unten .wk-q-art{ margin:4px 0 0; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.sk-unten .wk-q-live, .st-infos .wk-q-live{ margin:10px 0 0; gap:8px; }
.sk-live-zeile{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px; }
.sk-live-zeile b{ font-family:var(--ui); font-size:22px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.sk-unten .wk-q-wo, .st-infos .wk-q-wo{ background:rgba(32,44,58,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sk-unten .wk-q-neugier{ margin-top:10px; }
.sk-unten .wk-q-noch{ margin-bottom:0; }
.sk-karte[data-eng] .sk-unten{ bottom:12px; }
.sk-karte[data-eng] .sk-unten .wk-q-name{ font-size:26px; }
.sk-rueck{ position:absolute; inset:0; padding:18px 16px 14px; display:flex; flex-direction:column; text-align:left; }
.sk-rueck .wk-q-name{ margin:0; font-size:26px; font-weight:900; line-height:1.15; }
.sk-rueck .wk-q-art{ margin:2px 0 10px; }
.sk-werte{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-around; gap:6px; }
.sk-wert.wk-q{ background:none; box-shadow:none; padding:5px 6px 4px; border-radius:14px; gap:0; transition:background .25s ease-in-out; }
.sk-wert.wk-q.an{ background:rgba(196,166,255,.12); }
.sk-w-zeile{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; line-height:1.2; }
.sk-w-zeile span{ font-size:14px; font-weight:800; color:var(--ink-soft); }
.sk-w-zeile b{ font-size:21px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap; color:var(--ink); }
.sk-balken{ position:relative; display:block; height:10px; margin:6px 6px 0; border-radius:5px; background:rgba(245,247,250,.1); }
.sk-fuell{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:5px; background:linear-gradient(90deg, rgba(196,166,255,.35), #C4A6FF); transition:width .8s cubic-bezier(.65,0,.35,1) .35s; }
.sk-karte[data-um] .sk-fuell{ width:var(--w); }
.sk-balken i{ position:absolute; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(245,247,250,.45); }
/* Die Erde: blauer Punkt mit Schein, auf jeder Skala (Marc, 5.10.2026). */
.sk-balken i.erde{ width:10px; height:10px; margin:-5px 0 0 -5px; background:#6FB7FF; box-shadow:0 0 0 2px rgba(111,183,255,.28); }
.sk-balken i.du{ width:16px; height:16px; margin:-8px 0 0 -8px; background:var(--ink); box-shadow:0 0 0 3px #C4A6FF, 0 0 14px rgba(196,166,255,.8); opacity:0; transition:opacity .4s ease-in-out .9s; }
.sk-karte[data-um] .sk-balken i.du{ opacity:1; }
.sk-enden{ display:flex; justify-content:space-between; gap:10px; margin-top:3px; font-size:14px; font-weight:700; color:#7E92A6; line-height:1.3; }
.sk-enden span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48%; }
.sk-karte[data-eng] .sk-enden{ display:none; }
.sk-karte[data-eng] .sk-rueck .wk-q-art{ margin-bottom:6px; }
/* CHIPS NEBENEINANDER ODER UNTEREINANDER, NIE UEBEREINANDER (Marc, 4.10.2026, Screenshot
   Sonnenkarte: "Atmen? Nein" und "Essen? Nichts" lagen uebereinander). Vorher durfte ein Chip
   schmaler werden als sein Inhalt (min-width:0, Wort ohne Umbruch) - der Rest lief in den
   Nachbarn. Jetzt steht die Antwort unter der Frage (Symbol links), ein Chip ist nie schmaler
   als sein Inhalt, und reicht der Platz nicht, rutscht der zweite darunter. Wie in der App. */
.sk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px; }
.sk-chip.wk-q{ flex:1 1 0; max-width:100%; display:grid; grid-template-columns:auto 1fr; column-gap:7px; row-gap:1px; align-items:center; padding:8px 10px; border-radius:14px; background:rgba(32,44,58,.72); }
.sk-chip.wk-q svg{ width:18px; height:18px; margin:0; grid-row:span 2; }
.sk-chip span{ font-size:14px; font-weight:700; color:var(--ink-soft); white-space:nowrap; line-height:1.2; }
.sk-chip.wk-q b{ font-size:16px; line-height:1.2; text-align:left; }
.sk-karte[data-eng] .sk-chips{ gap:4px 6px; padding-top:4px; }
.sk-karte[data-eng] .sk-chip.wk-q{ padding:6px 7px; column-gap:5px; }
.sk-karte[data-eng] .sk-chip.wk-q svg{ width:16px; height:16px; }
.sk-karte[data-eng] .sk-chip.wk-q b{ font-size:15px; }
/* QRAKI SPRICHT HELL (Marc, 3.10.2026 am iPhone: "Qrakis Tipps gehen voll
   darauf unter ... weisser Hintergrund und dunkler Text, oder das muss
   einfahren"): beides. Die Karte dunkelt ab, die Blase ist hell mit dunkler
   Schrift und faehrt weich ein (ease-in-out). Tipp irgendwo schliesst. */
.sk-qraki{ position:absolute; inset:0; z-index:2; display:flex; gap:10px; align-items:flex-start; padding:14px 12px; border-radius:inherit;
  background:rgba(6,13,20,0); opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(.65,0,.35,1), background-color .3s cubic-bezier(.65,0,.35,1); }
.sk-qraki.unten{ align-items:flex-end; } .sk-qraki.oben{ align-items:flex-start; }
.sk-qraki.an{ opacity:1; pointer-events:auto; background:rgba(6,13,20,.66); }
.sk-qraki > :first-child{ flex:none; width:40px !important; height:40px !important; transform:translateY(10px) scale(.9); transition:transform .34s cubic-bezier(.65,0,.35,1); }
.sk-qraki p{ margin:0; flex:1; background:#F7F9FC; color:#0C1B25; border-radius:18px 18px 18px 6px; padding:12px 14px; font-family:var(--ui); font-size:16px; font-weight:700; line-height:1.42;
  box-shadow:0 14px 34px rgba(0,0,0,.5); transform:translateY(16px) scale(.96); transform-origin:0 100%; transition:transform .34s cubic-bezier(.65,0,.35,1); }
.sk-qraki.oben p{ border-radius:6px 18px 18px 18px; transform:translateY(-16px) scale(.96); transform-origin:0 0; }
.sk-qraki.oben > :first-child{ transform:translateY(-10px) scale(.9); }
.sk-qraki.an p, .sk-qraki.an > :first-child{ transform:none; }
.sk-hinweis{ position:absolute; left:0; right:0; bottom:4px; margin:0; text-align:center; font-family:var(--ui); font-size:14px; font-weight:800; color:var(--ink-soft); pointer-events:none; transition:opacity .3s ease-in-out; }
.sk-hinweis .h{ display:none; }
.sk-karte[data-um] ~ .sk-hinweis .v{ display:none; }
.sk-karte[data-um] ~ .sk-hinweis .h{ display:inline; }
.wk-sk[data-klein] .sk-hinweis{ display:none; }
.wk-sk[data-nah] .sk-grund, .wk-sk[data-nah] .sk-unten, .wk-sk[data-nah] .sk-hinweis{ opacity:0; pointer-events:none; }
.wk-sk > .wk-blase, .wk-staunen > .wk-blase{ z-index:6; }
.wk-staunen{ position:fixed; inset:0; width:100%; height:100%; overflow:hidden; isolation:isolate; --wk-grund:#010204; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:pan-y; }
.wk-staunen > .wk-himmel{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.wk-staunen > .wk-q-zu{ z-index:7; top:calc(env(safe-area-inset-top) + 14px); }
.st-pop{ position:absolute; display:grid; place-items:center; pointer-events:none; z-index:1; }
.st-pop .wk-bild{ width:72%; height:72%; margin:0; filter:none; }
.st-infos{ position:absolute; left:0; right:0; top:61%; z-index:3; padding:0 16px; text-align:center; transform-origin:50% 0; transition:opacity .6s ease-in-out; }
.st-infos .wk-q-name{ margin:0; font-size:36px; font-weight:900; line-height:1.12; text-shadow:0 2px 16px rgba(0,0,0,.75); }
.st-infos .wk-q-art{ margin:4px 0 0; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.st-infos .wk-q-neugier{ margin-top:12px; }
.st-blatt{ position:absolute; left:8px; right:8px; bottom:0; z-index:5; border-radius:28px 28px 0 0; padding:0 14px calc(env(safe-area-inset-bottom) + 16px); background:rgba(14,24,36,.86); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 -18px 44px rgba(0,0,0,.4); transition:opacity .6s ease-in-out; will-change:transform; }
.st-griff{ width:100%; height:52px; border:none; background:none; color:var(--ink); font-family:var(--ui); font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; cursor:grab; touch-action:none; }
.st-griff svg{ width:20px; height:20px; color:#C4A6FF; transition:transform .3s ease-in-out; }
.st-blatt.auf .st-griff svg{ transform:rotate(180deg); }
.st-inhalt{ display:flex; flex-direction:column; gap:12px; }
.wk-staunen .wk-q{ background:rgba(32,44,58,.72); }
.st-antwort.wk-antwort{ margin:0; min-height:96px; animation:none; }
.st-antwort.wk-antwort p{ flex:1; font-size:15px; background:rgba(32,44,58,.9); }
.st-antwort.wk-antwort p::before{ background:rgba(32,44,58,.9); }
.st-antwort.wk-antwort p.leise{ color:var(--ink-soft); }
.wk-staunen[data-nah] .st-infos, .wk-staunen[data-nah] .st-blatt{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .sk-grund, .sk-unten, .sk-fuell, .sk-balken i.du, .sk-qraki, .sk-hinweis, .sk-wert.wk-q, .st-infos, .st-blatt, .st-griff svg{ transition:none; } }
.rs-punkte{ display:flex; justify-content:center; gap:2px; flex-wrap:wrap; }
.rs-punkte button{ width:16px; height:22px; border:none; background:none; padding:0; display:grid; place-items:center; cursor:pointer; }
.rs-punkte button::before{ content:""; width:7px; height:7px; border-radius:50%; background:rgba(245,247,250,.25); transition:width .2s, background .2s; }
.rs-punkte button.an::before{ width:14px; border-radius:4px; background:#C4A6FF; }
.wk-q-zu{ position:absolute; top:14px; right:14px; width:44px; height:44px; border:none; border-radius:50%; background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; z-index:2; }
.wk-q-zu svg{ width:20px; height:20px; }
.wk-bild{ width:210px; height:210px; margin:6px auto 10px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.wk-q-name{ margin:4px 0 0; font-family:var(--disp); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.wk-q-art{ margin:4px 0 18px; font-family:var(--ui); font-size:14px; font-weight:700; color:#C4A6FF; }
.wk-q-live{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:22px; }
.wk-q-live b{ font-family:var(--ui); font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.wk-q-wo{ display:flex; gap:3px; background:var(--card); border-radius:999px; padding:3px; }
.wk-q-wo button{ border:none; background:none; color:var(--ink-soft); font-family:var(--ui); font-size:14px; font-weight:800; padding:6px 11px; border-radius:999px; cursor:pointer; }
.wk-q-wo button.an{ background:color-mix(in srgb, var(--ink) 12%, var(--card)); color:var(--ink); }
.wk-q-neugier{ margin:0; font-family:var(--ui); font-size:16px; font-weight:700; color:#C4A6FF; }
.wk-q-noch{ margin:3px 0 14px; font-family:var(--ui); font-size:14px; font-weight:600; color:var(--ink-soft); }
.wk-q-kacheln{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; flex:none; }
.wk-q{ border:none; background:var(--card); border-radius:18px; padding:14px 14px 13px; text-align:left; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; gap:2px; font-family:var(--ui); }
.wk-q svg{ width:21px; height:21px; color:#C4A6FF; margin-bottom:2px; }
.wk-q b{ font-size:17px; font-weight:700; line-height:1.2; }
.wk-q small{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.wk-q.an{ box-shadow:inset 0 0 0 2px var(--primary); }
.wk-q.leer{ cursor:default; } .wk-q.leer b{ color:rgba(245,247,250,.25); letter-spacing:.2em; }
.wk-live{ background:linear-gradient(135deg, #2E2447, #1E2A3C); border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; margin-bottom:14px; box-shadow:inset 0 0 0 1.5px rgba(196,166,255,.22); }
.wk-live-marke{ display:flex; align-items:center; gap:7px; font-family:var(--ui); font-size:14px; font-weight:900; letter-spacing:.14em; color:#57C8A5; }
.wk-live-marke i{ width:8px; height:8px; border-radius:50%; background:#57C8A5; animation:wkLive 1.6s ease-in-out infinite; }
@keyframes wkLive{ 0%,100%{ box-shadow:0 0 0 0 rgba(87,200,165,.6) } 50%{ box-shadow:0 0 0 6px rgba(87,200,165,0) } }
.wk-live b{ font-family:var(--disp); font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wk-live small{ font-family:var(--ui); font-size:14px; font-weight:700; color:var(--ink-soft); }
.wk-live .wk-auto{ color:#C4A6FF; }