/* Bombelli Analytics, Demo-Spiel «Drei in einer Reihe», November 2026. Präfix ds-, Radien 16 / 10 / 6.
   Rahmen in den Farben der Website, das Spielfeld im Look des jeweiligen Shops. */
.ds {
  --ds-tinte: #141414; --ds-tinte-2: #474747; --ds-tinte-3: #6B6B6B; --ds-linie: #D2D2D2; --ds-linie-2: #E5E5E5;
  --ds-mark: #DFE6EE; --ds-blau: #1D4E89; --ds-flaeche: #EAEFF5; --ds-akzent: #1D4E89;
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ds-serif: 'Literata', Georgia, serif;
  container-type: inline-size; position: relative; width: 100%; min-width: 0;
  color: var(--ds-tinte); font-family: var(--ds-sans); font-size: 16px; line-height: 1.45; text-align: left;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds p, .ds h3, .ds ul { margin: 0; }
.ds button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.ds button:focus-visible, .ds li:focus-visible { outline: 2px solid var(--ds-blau); outline-offset: 2px; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Umschalter */
.ds-kopf { margin-bottom: 16px; }
.ds-wahl-t { color: var(--ds-tinte-2); font-size: .98rem; margin-bottom: 10px; }
.ds-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ds-wahl button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left;
  background: #fff; border: 1px solid var(--ds-linie); border-radius: 14px; padding: 9px 12px; min-height: 56px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.ds-wahl button:hover { border-color: var(--ds-tinte-3); }
.ds-wahl button[aria-pressed="true"] { border-color: var(--ds-tinte); box-shadow: inset 0 0 0 1px var(--ds-tinte); }
.ds-wahl b { font-weight: 650; font-size: .98rem; letter-spacing: -.01em; line-height: 1.2; }
.ds-wahl small { grid-column: 2; font-size: .82rem; color: var(--ds-tinte-3); line-height: 1.25; }
.ds-mus { grid-row: span 2; display: flex; gap: 3px; }
.ds-mus i { width: 12px; height: 12px; border-radius: 50%; display: block; }
@container (max-width: 440px) {
  .ds-wahl { grid-template-columns: 1fr; gap: 6px; }
  .ds-wahl button { grid-template-columns: auto auto minmax(0, 1fr); min-height: 46px; padding: 8px 12px; }
  .ds-mus { grid-row: auto; }
  .ds-wahl small { grid-column: auto; text-align: right; }
}

/* Raster: Spiel links, Legende rechts; schmal untereinander */
.ds-raster { display: grid; gap: 28px; }
@container (min-width: 760px) {
  .ds-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5cqi, 64px); align-items: start; }
}

/* Spielkarte im Shop-Look */
.ds-spiel { position: relative; background: var(--ds-flaeche); border-radius: 14px; padding: clamp(14px, 3.4cqi, 24px); transition: background-color .5s var(--ds-ease); }
.ds-marke { display: flex; align-items: center; gap: 10px; min-height: 34px; border-radius: 8px; }
.ds-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--ds-akzent); color: #fff; display: grid; place-items: center; transition: background-color .5s var(--ds-ease); }
.ds-logo svg { width: 20px; height: 20px; }
.ds-name { font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.15; }
.ds-ort { color: var(--ds-tinte-3); font-size: .95rem; }
.ds-ort:not(:empty)::before { content: ', '; }
.ds-ort { margin-left: -10px; }
[data-look="velo"] .ds-name { font-weight: 780; letter-spacing: -.035em; font-size: 1.18rem; }
[data-look="confiserie"] .ds-name, [data-look="confiserie"] .ds-spruch, [data-look="confiserie"] .ds-ek-h { font-family: var(--ds-serif); font-style: italic; font-weight: 600; letter-spacing: -.005em; }
[data-look="confiserie"] .ds-name { font-size: 1.22rem; }

.ds-werte { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 12px; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--ds-tinte-2); }
.ds-wert { border-radius: 8px; padding: 3px 6px; margin: -3px -6px; }
.ds-wert b { color: var(--ds-tinte); font-weight: 650; display: inline-block; }
.ds-ziel { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.ds-zi { width: 28px; height: 28px; flex: none; display: block; }
.ds-zi .ds-f { border-radius: 8px; }
.ds-zahl { min-width: 1.2em; text-align: right; }

/* Spielfeld */
.ds-marke, .ds-werte, .ds-feld, .ds-spruch { max-width: 480px; margin-inline: auto; }
.ds-feld { position: relative; }
.ds-brett { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; border-radius: 14px; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.ds-brett:focus-visible { box-shadow: 0 0 0 2px var(--ds-flaeche), 0 0 0 4px var(--ds-tinte); }
.ds-s { position: absolute; left: 0; top: 0; width: var(--ds-p, 48px); height: var(--ds-p, 48px); padding: calc(var(--ds-p, 48px) * .055); will-change: transform; }
.ds .ds-f { width: 100%; height: 100%; border-radius: 14px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); transition: background-color .35s var(--ds-ease), transform .25s var(--ds-ease), box-shadow .2s; }
.ds svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ds .ds-f svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ds-gew .ds-f { transform: scale(.88); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ds-tinte); }
.ds-tipp .ds-f { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ds-tinte-3); }
.ds-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: var(--ds-p, 48px); height: var(--ds-p, 48px); border: 2px solid var(--ds-tinte); border-radius: 14px; pointer-events: none; opacity: 0; transition: transform .2s var(--ds-ease), opacity .2s; }
.ds-tasten .ds-cursor { opacity: 1; }
.ds-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ds-p { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }
.ds-schwebe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ds-tinte); color: #fff; padding: 9px 16px; border-radius: 14px; font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; pointer-events: none; }
.ds-flug { position: absolute; z-index: 8; pointer-events: none; padding: calc(var(--ds-p, 48px) * .055); }

.ds-spruch { margin-top: 14px; min-height: 1.5em; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; text-align: center; text-wrap: balance; border-radius: 8px; }

/* Endkarte */
.ds-ende { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; overflow: hidden; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--ds-flaeche) 86%, transparent); }
.ds-ende[hidden] { display: none; }
.ds-ek { width: min(100%, 360px); background: #fff; border-radius: 14px; padding: 22px 20px 12px; text-align: center; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 26px 50px -30px rgba(20, 20, 20, .5); }
.ds-ek-stein { width: 52px; height: 52px; margin: 0 auto 12px; }
.ds-ek-h { font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.ds-ek-t { margin: 6px 0 16px; color: var(--ds-tinte-2); text-wrap: balance; }
.ds-code { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--ds-akzent); border-radius: 14px; padding: 5px 5px 5px 14px; }
.ds-code-w { flex: 1; min-width: 0; text-align: left; font-weight: 650; font-size: 1.25rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.ds-kopier { flex: none; font-weight: 600; font-size: .92rem; background: var(--ds-akzent); color: #fff !important; border: 0; border-radius: 8px; padding: 0 14px; min-height: 44px; cursor: pointer; }
.ds-kopier:hover { background: var(--ds-tinte); }
@container (max-width: 420px) {
  .ds-ek { padding: 18px 14px 10px; }
  .ds-ek-stein { width: 40px; height: 40px; margin-bottom: 8px; }
  .ds-ek-h { font-size: 1.35rem; }
  .ds-ek-t { font-size: .95rem; margin-bottom: 12px; }
  .ds-code { flex-wrap: wrap; padding: 10px; gap: 8px; }
  .ds-code-w { flex: 1 1 100%; text-align: center; white-space: nowrap; overflow-wrap: normal; }
  .ds-kopier { flex: 1 1 100%; }
  .ds-werte { gap: 4px 14px; }
}
.ds-ek-preis { margin-top: 10px; font-weight: 600; }
.ds-muster { margin-top: 12px; background: var(--ds-mark); border-radius: 8px; padding: 9px 11px; font-size: .9rem; line-height: 1.4; text-align: left; }
.ds-nochmal { font-weight: 600; font-size: .98rem; background: none; border: 0; min-height: 44px; padding: 8px 4px; margin-top: 4px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: var(--ds-linie); }
.ds-nochmal:hover { text-decoration-color: var(--ds-tinte); }

/* Legende: was alles individuell ist */
.ds-lh { font-size: 1.22rem; font-weight: 650; letter-spacing: -.018em; line-height: 1.25; text-wrap: balance; margin-bottom: 14px; }
.ds-legende ul { list-style: none; padding: 0; border-top: 1px solid var(--ds-tinte); }
.ds-legende li { position: relative; padding: 12px 10px; margin: 0 -10px; border-bottom: 1px solid var(--ds-linie-2); cursor: default; transition: background-color .25s; }
.ds-legende li b { font-weight: 650; }
.ds-legende li.ds-an { background: #F4F6F9; }
.ds-hier { display: block; color: var(--ds-tinte-3); font-size: .92rem; margin-top: 2px; }
.ds-mini { display: flex; gap: 5px; margin-top: 8px; }
.ds-mini .ds-f { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.ds-mini .ds-f svg { stroke-width: 2; }
.ds-lfuss { margin-top: 14px; color: var(--ds-tinte-2); font-size: .95rem; }

/* Aufleuchten beim Umschalten und beim Zeigen */
.ds-zeig { box-shadow: 0 0 0 3px var(--ds-blau) !important; }
.ds-blitz { animation: ds-ring 1.3s var(--ds-ease); }
.ds-legende li.ds-blitz { animation: ds-mark 1.5s var(--ds-ease); }
@keyframes ds-ring { 0% { box-shadow: 0 0 0 0 rgba(29, 78, 137, 0); } 18% { box-shadow: 0 0 0 3px rgba(29, 78, 137, 1); } 100% { box-shadow: 0 0 0 3px rgba(29, 78, 137, 0); } }
@keyframes ds-mark { 0% { background-color: rgba(223, 230, 238, 0); } 18% { background-color: rgba(223, 230, 238, 1); } 100% { background-color: rgba(223, 230, 238, 0); } }

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds-spiel { transition-duration: .01ms !important; }
  .ds-blitz, .ds-legende li.ds-blitz { animation-duration: 2.2s; }
}

/* ===== Fassung 2, 08.11.2026: glossy 3D-Steine (Google-KI, freigestellt), tiefes Brett, ruhige Erklärung ===== */
.ds { --ds-brett: #16304F; --ds-brett-2: #0F223A; --ds-mulde: rgba(255,255,255,.06); }
.ds[data-look="velo"] { --ds-brett: #1F3A2C; --ds-brett-2: #142820; --ds-flaeche: #EEF2EF; }
.ds[data-look="confiserie"] { --ds-brett: #3A2219; --ds-brett-2: #28160F; --ds-flaeche: #F5EEEC; }
.ds[data-look="bombelli"] { --ds-flaeche: #EEF2F7; }
.ds-spiel { border-radius: 14px; padding: clamp(16px, 3.6cqi, 28px); }
.ds-brett { background: var(--ds-brett); border-radius: 14px; padding: 2.2%; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -10px 30px rgba(0,0,0,.35), 0 30px 60px -30px rgba(10,20,40,.55); transition: background .6s var(--ds-ease); }
.ds .ds-f { background: none !important; box-shadow: none; border-radius: 0; color: inherit; }
.ds .ds-f img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); transition: transform .35s var(--ds-ease), filter .35s var(--ds-ease); pointer-events: none; }
.ds-brett .ds-f { position: relative; }
.ds-brett .ds-f::before { content: ''; position: absolute; inset: 4%; border-radius: 22%; background: var(--ds-mulde); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); z-index: -1; }
.ds-brett .ds-f img { width: 92%; height: 92%; margin: 4%; }
.ds-gew .ds-f { transform: none; box-shadow: none; }
.ds-gew .ds-f img { transform: scale(1.14) translateY(-4%); filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)) brightness(1.08); }
.ds-gew .ds-f::before { background: rgba(255,255,255,.22); }
.ds-tipp .ds-f { box-shadow: none; }
.ds-tipp .ds-f img { animation: ds-wippen 1.2s var(--ds-ease) infinite; }
@keyframes ds-wippen { 0%,100% { transform: none; } 50% { transform: scale(1.1) rotate(-6deg); } }
.ds-zi .ds-f, .ds-ek-stein .ds-f, .ds-mini .ds-f, .ds-logo .ds-f { border-radius: 0; }
.ds-logo { background: none !important; width: 40px; height: 40px; }
.ds-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.ds-zi .ds-f img, .ds-mini .ds-f img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.ds-mini { gap: 8px; }
.ds-mini .ds-f { width: 40px; height: 40px; }
.ds-ek-stein { width: 96px; height: 96px; }
.ds-ek-stein img { animation: ds-heben 1.4s var(--ds-ease) both; }
@keyframes ds-heben { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ds-mus { display: block; width: 40px; height: 40px; }
.ds-mus img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.ds-wahl button { border-radius: 14px; min-height: 64px; }
/* Erklärung ruhiger: keine Linien, keine Flächen */
.ds-legende ul { border-top: 0; display: grid; gap: 18px; }
.ds-legende li { border-bottom: 0; padding: 0 0 0 16px; margin: 0; }
.ds-legende li.ds-an { background: none; }
.ds-legende li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--ds-linie); transition: background .3s, transform .3s var(--ds-ease); }
.ds-legende li.ds-an::before, .ds-legende li.ds-blitz::before { background: var(--ds-blau); transform: scale(1.6); }
@media (prefers-reduced-motion: reduce) { .ds-tipp .ds-f img, .ds-ek-stein img { animation: none; } }

/* Hervorheben weich statt Ring */
.ds-blitz { animation: ds-weich 1.6s var(--ds-ease) !important; box-shadow: none !important; outline: 0 !important; }
@keyframes ds-weich { 0% { background-color: rgba(223,230,238,0); } 25% { background-color: rgba(223,230,238,.9); } 100% { background-color: rgba(223,230,238,0); } }
.ds-brett.ds-blitz { animation: none !important; }
.ds[data-look="bombelli"] { --ds-brett: #DCE4EE; --ds-mulde: rgba(255,255,255,.7); }
.ds[data-look="bombelli"] .ds-brett { box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -8px 24px rgba(29,78,137,.12), 0 30px 60px -34px rgba(10,20,40,.45); }
.ds[data-look="bombelli"] .ds-brett .ds-f::before { box-shadow: inset 0 2px 5px rgba(29,78,137,.14); }
.ds[data-look="bombelli"] .ds-f img { filter: drop-shadow(0 6px 6px rgba(20,40,70,.22)); }
.ds-mus { grid-row: span 2; }
@container (max-width: 440px) {
  .ds-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ds-wahl button { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; min-height: 0; padding: 10px 6px; }
  .ds-wahl .ds-mus { grid-row: auto; width: 36px; height: 36px; }
  .ds-wahl small { display: none; }
}

/* Gewinn-Regen */
.ds-spiel { overflow: hidden; }
.ds-regen { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.ds-regen-s { position: absolute; top: 0; }
.ds-regen-s img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }

/* Velo: helles Brett, damit das dunkle Rad Kontrast hat (10.11.2026) */
.ds[data-look="velo"] { --ds-brett: #D9E2DB; --ds-mulde: rgba(255,255,255,.72); }
.ds[data-look="velo"] .ds-brett { box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -8px 24px rgba(31,90,61,.14), 0 30px 60px -34px rgba(10,30,20,.45); }
.ds[data-look="velo"] .ds-brett .ds-f::before { box-shadow: inset 0 2px 5px rgba(31,90,61,.16); }
.ds[data-look="velo"] .ds-f img { filter: drop-shadow(0 6px 6px rgba(20,40,30,.24)); }