/* Grundgerüst «Projekterfahrung» (Aufbau, Spur, Dialog, Bedienbarkeit).
   Farben, Schriften, Linien und Kartenstil setzt jede Variante selbst über die Klassen pj-*. */
.pj { position: relative; min-width: 0; }
.pj-steuerung { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.pj-pfeile { display: flex; gap: .5rem; }
.pj-pfeil { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer; }
.pj-pfeil:disabled { opacity: .35; cursor: default; }
.pj:not(.pj--js) .pj-pfeile, .pj:not(.pj--js) .pj-zaehler { visibility: hidden; }

.pj-spur { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(84%, 22rem); gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pj-spur::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .pj-spur { grid-auto-columns: clamp(18rem, 32vw, 25rem); } }
.pj-spur:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.pj-spur--zieht { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.pj-spur--zieht * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .pj--js .pj-spur { cursor: grab; } }

.pj-karte { scroll-snap-align: start; min-width: 0; display: flex; }
.pj-karte-innen { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.pj-bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; }
.pj-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-art { position: absolute; left: 10px; top: 10px; }
.pj-gross .pj-art { position: static; }
.pj-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pj-titel, .pj-dialog-titel { overflow-wrap: anywhere; hyphens: auto; }
.pj-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pj-oeffnen { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.pj:not(.pj--js) .pj-oeffnen { display: none; }

.pj-fortschritt { height: 2px; margin-top: 1.25rem; overflow: hidden; }
.pj-fortschritt-balken { display: block; height: 100%; transform-origin: left center; transform: scaleX(.05); transition: transform .25s ease-out; }

.pj--wartet .pj-karte { opacity: 0; transform: translateY(18px); }
.pj--da .pj-karte { animation: pj-rein .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pj-rein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pj--da .pj-karte { animation: none; } .pj-fortschritt-balken { transition: none; } }

/* Dialog */
html.pj-offen { overflow: hidden; }
.pj-dialog { width: min(1120px, 94vw); max-width: none; max-height: min(92vh, 980px); padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; }
.pj-dialog::backdrop { background: rgba(20, 22, 26, .55); }
.pj-dialog-innen { padding: clamp(18px, 3vw, 36px); }
.pj-dialog-kopf { position: relative; padding-right: 60px; margin-bottom: 1.25rem; }
.pj-zu { position: absolute; right: 0; top: 0; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer; }
.pj-dialog-rumpf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) {
  .pj-dialog-rumpf { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-areas: "gross fakten" "daumen fakten"; align-items: start; }
  .pj-gross { grid-area: gross; } .pj-daumen { grid-area: daumen; } .pj-fakten { grid-area: fakten; }
}
.pj-gross { margin: 0; min-width: 0; }
.pj-gross img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.pj-gross figcaption { margin-top: .6rem; }
.pj-daumen { display: flex; flex-wrap: wrap; gap: .5rem; }
.pj-daumen-knopf { width: 96px; height: 72px; padding: 0; overflow: hidden; cursor: pointer; }
.pj-daumen-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-fakten { margin: 0; display: grid; gap: .75rem; min-width: 0; }
.pj-fakten div { min-width: 0; }
.pj-fakten dt { margin: 0; }
.pj-fakten dd { margin: 0; overflow-wrap: anywhere; }
.pj-dialog-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.pj-wechsel { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; max-width: 100%; }
.pj-wechsel span { overflow-wrap: anywhere; text-align: left; }
.pj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }