/* DARGE JET — home problem carousel + full topic bank + "Ihre Auswahl" in the check */

/* Rows: motion is driven by problem-carousel.js (transform), not by CSS keyframes */
.dj-carousel .carousel-row{overflow:hidden;padding:12px 4px;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.dj-carousel .carousel-row.is-dragging{cursor:grabbing}
.dj-carousel .carousel-row.is-dragging .djtag2{pointer-events:none}
.dj-carousel .carousel-track{animation:none!important;will-change:transform;gap:16px}
.dj-carousel .carousel-group{gap:16px}
.dj-carousel .carousel-category{margin:26px 0 6px 4px}
.carousel-head p{max-width:420px}

/* Problem cards: calm, readable; selected = the plate gets brighter (no check mark, no solid fill) */
.dj-carousel .djtag2{gap:14px;padding:18px 24px;font-size:16px;border-radius:14px;color:var(--text-2)!important;background-color:var(--bg-surface)!important;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);user-select:none;-webkit-user-select:none}
.dj-carousel .djtag2:hover{transform:none;border-color:rgba(16,187,130,.45);color:var(--text-1)!important;background-color:rgba(16,187,130,.045)!important;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.dj-carousel .djtag2.djon{transform:none;font-weight:500;color:#F5F3ED!important;background-color:rgba(16,187,130,.16)!important;border-color:rgba(16,187,130,.75);box-shadow:0 0 22px -6px rgba(16,187,130,.45)}

/* CTA under the carousel: always usable */
.dj-carousel .carousel-cta,.dj-carousel .carousel-cta.show{opacity:1;pointer-events:auto;color:#0B241A!important;background-color:var(--accent);border-color:var(--accent);box-shadow:0 0 18px rgba(16,187,130,.28)}
.dj-carousel .carousel-cta:not(.has-selection)::after{display:none}
.carousel-selection-status strong{color:var(--text-1);font-weight:600}
.pb-more{appearance:none;display:inline-block;margin:10px 0 0;padding:6px 2px;border:0;background:none;color:var(--text-2);font:inherit;font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(16,187,130,.5);text-underline-offset:4px;cursor:pointer}
.pb-more:hover{color:var(--text-1);text-decoration-color:var(--accent)}

/* Full topic bank (under the carousel and inside the check) */
.pb-bank{max-width:1000px;margin:34px auto 0;text-align:left}
.pb-bank[hidden]{display:none}
.pb-layer+.pb-layer{margin-top:26px}
.pb-layer h4{margin:0 0 12px 2px;color:var(--accent);font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.pb-chips{display:flex;flex-wrap:wrap;gap:10px}
.pb-chip{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--border-2);border-radius:11px;background:rgba(255,255,255,.025);color:var(--text-2);font:inherit;font-size:14.5px;line-height:1.35;text-align:left;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)}
.pb-chip:hover{border-color:rgba(16,187,130,.45);color:var(--text-1)}
.pb-chip[aria-pressed="true"]{border-color:rgba(16,187,130,.75);background:rgba(16,187,130,.16);color:#F5F3ED;box-shadow:0 0 18px -6px rgba(16,187,130,.4)}
.pb-chip:focus-visible,.pb-more:focus-visible,.pb-x:focus-visible,.pb-add summary:focus-visible{outline:3px solid rgba(16,187,130,.75);outline-offset:3px}

/* Step 2 "Ihre Auswahl": compact tags with × */
#djStep2 .djtaggrid{gap:10px;margin-bottom:26px}
.pb-sel{display:inline-flex;align-items:center;gap:4px;padding:7px 6px 7px 15px;border:1px solid rgba(16,187,130,.6);border-radius:11px;background:rgba(16,187,130,.07);color:var(--text-1);font-size:14.5px;line-height:1.35}
.pb-x{appearance:none;display:grid;place-items:center;width:28px;height:28px;flex:none;border:0;border-radius:8px;background:none;color:var(--text-2);font:400 19px/1 "Inter",sans-serif;cursor:pointer}
.pb-x:hover{color:var(--text-1);background:rgba(255,255,255,.06)}
.pb-empty{margin:0;color:var(--text-3);font-size:15px;text-align:center}
.pb-add{max-width:1000px;margin:0 auto 40px}
.pb-add summary{display:block;width:max-content;margin:0 auto;padding:8px 4px;color:var(--text-2);font-size:15px;cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:rgba(16,187,130,.5);text-underline-offset:4px}
.pb-add summary::-webkit-details-marker{display:none}
.pb-add summary::before{content:"+ ";color:var(--accent)}
.pb-add[open] summary::before{content:"− "}
.pb-add .pb-bank{margin-top:22px}

@media(max-width:640px){
  .dj-carousel .djtag2{padding:15px 18px;font-size:15px}
  .pb-chip{font-size:14px;padding:10px 14px}
}

/* Reduced motion: static rows that scroll sideways; no duplicate set */
@media(prefers-reduced-motion:reduce){
  .dj-carousel .carousel-row{overflow-x:auto;cursor:auto;touch-action:auto;scrollbar-width:thin}
  .dj-carousel .carousel-track{transform:none!important}
  .dj-carousel .carousel-group[aria-hidden="true"]{display:none}
  .dj-carousel .djtag2,.pb-chip{transition:none}
}


/* v183 phones: no moving rows; the first five topics of each group wrap into lines, the rest is under "Alle Themen ansehen" */
@media(max-width:640px){
  .dj-carousel .carousel-row{overflow:visible;padding:4px 0;cursor:auto;touch-action:auto;-webkit-mask-image:none;mask-image:none}
  .dj-carousel .carousel-track{transform:none!important;display:block;width:auto!important}
  .dj-carousel .carousel-group{display:flex;flex-wrap:wrap;gap:8px;width:100%;flex-shrink:1}
  .dj-carousel .carousel-group[aria-hidden="true"]{display:none}
  .dj-carousel .carousel-group .djtag2:nth-child(n+6){display:none}
  .dj-carousel .djtag2{padding:10px 14px;font-size:14.5px;line-height:1.3;border-radius:11px;white-space:normal;text-align:left;flex:0 1 auto}
  .dj-carousel .carousel-category{margin:22px 0 10px 2px}
}