/* Adopted from the supplied project-magazine reference. */
/* Projekt-Präsentation: Gestaltung der drei Varianten.
   Lädt nach css/styles.css. Die Überschrift des Abschnitts bleibt wie auf der Startseite.
   Alle Bilder sind aktuelle Aufnahmen der Kunden-Websites (siehe capture.mjs). */

.pj {
    --pj-ink: #07110f;
    --pj-mint: #22e6bd;
    --pj-frame: #0c1715;
    --pj-rule: rgba(7, 17, 15, 0.14);
    --pj-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    --pj-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pj-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pj .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pj img { max-width: 100%; }

/* Gemeinsame Bausteine: Browserleiste, Farbfelder, Link zur Website, Abspielen */
.pj-bar {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 0.8rem;
    padding: 0 0.9rem;
    background: var(--pj-frame);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
}

.pj-dots { display: inline-flex; flex: 0 0 auto; gap: 0.32rem; }
.pj-dots i { width: 0.55rem; aspect-ratio: 2 / 1.732; background: rgba(255, 255, 255, 0.28); clip-path: var(--pj-hex); }
.pj-dots i:first-child { background: var(--pj-mint); }
.pj-bar__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pj-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem 0.95rem; margin: 0; padding: 0; list-style: none; }
.pj-swatches li { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Ein feiner Rand in Schriftfarbe hält auch Farben sichtbar, die der Bühne gleichen */
.pj-swatch {
    position: relative;
    width: 1.3rem;
    flex: 0 0 auto;
    aspect-ratio: 2 / 1.732;
    background: color-mix(in srgb, currentColor 55%, transparent);
    clip-path: var(--pj-hex);
}

.pj-swatch::after { position: absolute; inset: 1.5px; background: var(--c); clip-path: var(--pj-hex); content: ""; }

.pj-swatches code { font: 600 0.74rem/1 var(--font); letter-spacing: 0.03em; }

.pj-visit {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.55rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.92rem;
    font-weight: 620;
}

.pj-visit .icon-arrow { width: 1rem; height: 1rem; transition: transform 180ms ease; }
.pj-visit:hover .icon-arrow { transform: translate(2px, -2px); }

.pj-icon { width: 1.15rem; height: 1.15rem; fill: currentColor; }
[aria-pressed="false"] > .pj-icon--play,
[aria-pressed="true"] > .pj-icon--pause { display: none; }

/* ------------------------------------------------------------------ */

.pj-tone-dark { --tone-ink: #1b1f1b; --tone-soft: rgba(27, 31, 27, 0.72); --tone-rule: rgba(27, 31, 27, 0.2); }
.pj-tone-light { --tone-ink: #ffffff; --tone-soft: rgba(255, 255, 255, 0.78); --tone-rule: rgba(255, 255, 255, 0.26); }