/* Projekt-Präsentation, zweite Runde: Varianten 4 bis 6.
   Lädt nach pj.css (Browserleiste, Farbfelder, Link zur Website, Umschalter).
   Keine der drei Varianten bewegt die Websites selbst; gezeigt werden erste Bildschirme. */

.pj {
    --pj-paper: #ffffff;
    --pj-book: cubic-bezier(0.65, 0.05, 0.25, 1);
    --pj-spring: cubic-bezier(0.3, 1.25, 0.45, 1);
}

/* ================================================================== */
/* Variante 4: Kiosk                                                    */
/* Jedes Projekt ist eine Ausgabe des Projektmagazins. Der Titel ist    */
/* der Name, das Titelbild das Handy, das Titelthema eine Aussage der   */
/* Website. Ein Klick schlägt das Heft auf: links drei Screenshots,     */
/* rechts Logo, Farben, Leistungen und der Weg zur Case Study.          */
/* ================================================================== */
.pj-kiosk { margin-top: clamp(2.6rem, 5vw, 4.2rem); }

.pj-rack {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: clamp(2.4rem, 4.5vw, 3.8rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pj-rack__slot { display: grid; align-content: start; padding: 0 clamp(0.6rem, 1.5vw, 1.5rem); }

.pj-rack__cover {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 16px;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Die Leiste des Zeitschriftenregals */
.pj-rack__cover::after {
    position: absolute;
    right: calc(clamp(0.6rem, 1.5vw, 1.5rem) * -1);
    bottom: 0;
    left: calc(clamp(0.6rem, 1.5vw, 1.5rem) * -1);
    height: 12px;
    background: linear-gradient(var(--pj-frame), var(--pj-frame)) top / 100% 4px no-repeat, linear-gradient(rgba(7, 17, 15, 0.16), transparent) 0 4px / 100% 8px no-repeat;
    content: "";
}

.pj-rack__cover:focus-visible { outline: none; }
.pj-rack__cover:focus-visible .pj-cover { outline: 3px solid var(--pj-mint); outline-offset: 4px; }

.pj-cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--stage);
    color: var(--tone-ink);
    text-align: left;
    container-type: inline-size;
}

.pj-rack .pj-cover {
    box-shadow: 0 22px 34px -22px rgba(7, 17, 15, 0.7), 0 2px 5px rgba(7, 17, 15, 0.14);
    transform: rotate(var(--tilt, 0deg));
    transition: transform 520ms var(--pj-pop), box-shadow 420ms ease;
}

.pj-rack__cover:disabled { cursor: default; }
.pj-rack__cover:not(:disabled):is(:hover, :focus-visible) .pj-cover { box-shadow: 0 40px 56px -28px rgba(7, 17, 15, 0.7), 0 2px 5px rgba(7, 17, 15, 0.12); transform: translateY(-12px) scale(1.035); }

/* Glanz von Hochglanzpapier */
.pj-cover::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.1) 100%);
    content: "";
    pointer-events: none;
}

.pj-cover__top { position: absolute; z-index: 3; top: 4.2cqi; right: 5cqi; left: 5cqi; display: flex; justify-content: space-between; font-size: max(8px, 3.3cqi); font-weight: 650; letter-spacing: 0.02em; }

.pj-cover__mast {
    position: absolute;
    z-index: 1;
    top: 9.5cqi;
    right: 3.5cqi;
    left: 4cqi;
    display: grid;
    color: var(--line);
    font-size: calc(var(--mast) * 1cqi);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.84;
    white-space: nowrap;
}

/* Das Handy ist das Titelbild. Es beginnt unter dem Namen (--phone-top aus build-kiosk.cjs) und läuft unten aus dem Heft */
.pj-cover__phone {
    position: absolute;
    z-index: 2;
    top: calc(var(--phone-top, 21) * 1cqi);
    right: 7cqi;
    width: 46cqi;
    aspect-ratio: 390 / 844;
    padding: 1.5cqi;
    border-radius: 6.5cqi;
    background: var(--pj-frame);
    box-shadow: -5cqi 7cqi 12cqi -5cqi rgba(0, 0, 0, 0.55);
    transform: rotate(4deg);
}

.pj-cover__phone img { display: block; width: 100%; height: 100%; border-radius: 5cqi; object-fit: cover; object-position: top; }

/* Die Zeilen enden vor dem schräg stehenden Handy; lange Wörter werden getrennt */
.pj-cover__lines { position: absolute; z-index: 3; bottom: calc(20cqi + 4px); left: 5cqi; display: grid; width: 36.5cqi; gap: 1.8cqi; hyphens: auto; overflow-wrap: break-word; }
.pj-cover__kicker { color: var(--line); font-size: max(8px, 3.4cqi); font-weight: 700; }
.pj-tone-dark .pj-cover__kicker { color: var(--tone-ink); }

.pj-cover__story {
    display: -webkit-box;
    overflow: hidden;
    font-size: max(9px, 4.6cqi);
    font-weight: 650;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.pj-cover__dots { display: flex; gap: 1.2cqi; }
.pj-cover__dots i { width: 3.6cqi; aspect-ratio: 2 / 1.732; background: color-mix(in srgb, currentColor 55%, transparent); clip-path: var(--pj-hex); }
.pj-cover__dots i::after { display: block; width: 100%; height: 100%; background: var(--c); clip-path: inset(0.35cqi round 0); content: ""; }
/* Kleine Hefte (Handy, Tablet): weniger Zeilen für das Titelthema */
@container (max-width: 190px) {
    .pj-cover__story { -webkit-line-clamp: 3; }
}

.pj-cover__code {
    position: absolute;
    z-index: 3;
    bottom: 4.6cqi;
    left: 5cqi;
    display: grid;
    /* Die Domain steht auf einer Zeile; lange Domains machen das Etikett breiter statt höher */
    width: max-content;
    min-width: 27cqi;
    max-width: 37cqi;
    gap: 0.6cqi;
    white-space: nowrap;
    padding: 1.4cqi 1.6cqi 1.1cqi;
    background: var(--white);
    color: var(--pj-ink);
    font-size: max(6px, 2.3cqi);
    font-weight: 600;
}

.pj-barcode { display: block; width: 100%; height: 7cqi; fill: var(--pj-ink); }

.pj-rack__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 0.8rem; margin-top: 0.9rem; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.pj-rack__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-weight: 600; }
.pj-rack__link .icon-arrow { width: 0.8rem; height: 0.8rem; }
.pj-rack__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pj-rack__case { margin-top: 0.45rem; font-size: 0.82rem; line-height: 1.4; }
.pj-rack__case a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* Websites im Aufbau: ein Heft, das gerade gesetzt wird. Hilfslinien statt Druckfarbe, das Handy nur als Umriss */
.pj-cover--soon {
    --stage: var(--pj-paper);
    --line: var(--pj-ink);
    --tone-ink: #3e4945;
    background: var(--pj-paper);
}

/* Hilfslinien: Satzspiegel und Mittelachse (cqi gilt hier, weil das Cover selbst der Container ist) */
.pj-cover--soon::before {
    position: absolute;
    inset: 3.2cqi;
    border: 1px solid rgba(51, 180, 162, 0.55);
    background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(51, 180, 162, 0.4) 0 calc(50% + 0.5px), transparent 0);
    content: "";
    pointer-events: none;
}

.pj-cover--soon .pj-cover__phone { padding: 0; border: 1.5px dashed rgba(7, 17, 15, 0.32); background: rgba(255, 255, 255, 0.6); box-shadow: none; }
.pj-cover__stamp {
    position: absolute;
    z-index: 4;
    bottom: 22cqi;
    left: 5cqi;
    padding: 1.6cqi 2.6cqi 1.8cqi;
    background: var(--pj-mint);
    color: var(--pj-ink);
    font-size: max(9px, 4.6cqi);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1.6cqi 3cqi -1.6cqi rgba(7, 17, 15, 0.5);
    transform: rotate(-6deg);
}

/* Das aufgeschlagene Heft */
.pj-reader {
    width: 100vw;
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--pj-ink);
}

.pj-reader::backdrop { background: rgba(5, 12, 10, 0.86); backdrop-filter: blur(6px); }
.pj-reader[open] { display: grid; place-items: center; }

.pj-reader__bar {
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem var(--page-gutter);
    color: var(--white);
}

.pj-reader__count { font-size: 0.9rem; font-weight: 650; }
.pj-reader__nav { display: flex; gap: 0.5rem; }

.pj-reader__step {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    color: var(--white);
    font: 600 0.88rem/1 var(--font);
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.pj-reader__step:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.pj-reader__step svg { width: 1.1rem; height: 1.1rem; }

.pj-reader__close {
    display: grid;
    width: 50px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    background: var(--pj-mint);
    color: var(--pj-ink);
    cursor: pointer;
    clip-path: var(--pj-hex);
}

.pj-reader__close svg { width: 1.3rem; height: 1.3rem; }
.pj-reader :focus-visible { outline: 2px solid var(--pj-mint); outline-offset: 3px; }
.pj-reader__close:focus-visible { clip-path: none; }

.pj-book {
    --pw: min(43vw, calc((100svh - 140px) * 0.75));
    position: relative;
    width: calc(var(--pw) * 2);
    height: calc(var(--pw) * 4 / 3);
    margin-top: 44px;
    perspective: 2800px;
    transform: translateX(calc(var(--pw) * -0.5)) scale(0.96);
    transition: transform 1000ms var(--pj-book);
}

.pj-book.is-open { transform: none; }
.pj-book__right,
.pj-book__cover { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.pj-book__right { background: var(--pj-paper); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7); container-type: inline-size; }

/* Falz in der Mitte */
.pj-book__right::before { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent); content: ""; pointer-events: none; }

.pj-book__cover {
    z-index: 3;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 1100ms var(--pj-book);
}

.pj-book.is-open .pj-book__cover { transform: rotateY(-180deg); }

/* Die abgewandte Seite ist unsichtbar, würde aber sonst die Maus abfangen */
.pj-book.is-open .pj-book__face--front,
.pj-book:not(.is-open) .pj-book__face--back { pointer-events: none; }
.pj-book__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: inline-size; }
.pj-book__face--front .pj-cover { height: 100%; aspect-ratio: auto; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7); }
.pj-book__face--back { background: var(--pj-paper); transform: rotateY(180deg); }
.pj-book__face--back::after { position: absolute; z-index: 6; inset: 0 0 0 auto; width: 9%; background: linear-gradient(270deg, rgba(0, 0, 0, 0.16), transparent); content: ""; pointer-events: none; }

/* Linke Heftseite: drei Screenshots, übereinandergelegt wie Abzüge auf dem Innencover */
.pj-collage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 85% at 22% 12%, color-mix(in srgb, var(--stage) 80%, #ffffff), transparent 62%),
        radial-gradient(110% 80% at 88% 100%, color-mix(in srgb, var(--stage) 78%, #000000), transparent 66%),
        var(--stage);
}

.pj-collage__shot {
    position: absolute;
    z-index: var(--z);
    top: var(--y);
    left: var(--x);
    width: var(--w);
    margin: 0;
    overflow: hidden;
    border-radius: 0.9cqi;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(7, 17, 15, 0.1), 0 2.4cqi 5cqi -1.6cqi rgba(7, 17, 15, 0.55);
    transform: rotate(var(--r));
    transition: transform 280ms var(--pj-ease), box-shadow 280ms ease;
    will-change: transform;
}

.pj-collage__shot--1 { --x: 6cqi; --y: 7cqi; --w: 76cqi; --r: -2.2deg; --z: 1; }
.pj-collage__shot--2 { --x: 20cqi; --y: 43cqi; --w: 73cqi; --r: 1.7deg; --z: 2; }
.pj-collage__shot--3 { --x: 8cqi; --y: 80cqi; --w: 70cqi; --r: -1.1deg; --z: 3; }
.pj-collage__bar { display: flex; align-items: center; gap: 0.9cqi; height: 3.2cqi; padding: 0 1.8cqi; background: #0f1a17; }
.pj-collage__bar i { width: 1cqi; height: 1cqi; border-radius: 50%; background: rgba(255, 255, 255, 0.38); }
.pj-collage__bar i:first-child { background: var(--pj-mint); }
.pj-collage__shot img { display: block; width: 100%; height: auto; }

/* Der Abzug unter dem Zeiger kommt nach vorn und richtet sich gerade. Er bleibt vorn, bis ein anderer berührt wird
   (pj2.js); so springt an den Rändern nichts hin und her. */
.pj-collage__shot.is-front { z-index: 5; box-shadow: 0 0 0 1px rgba(7, 17, 15, 0.1), 0 3.5cqi 7cqi -2cqi rgba(7, 17, 15, 0.6); transform: rotate(0deg) translateY(-1cqi); }

/* Rechte Heftseite */
.pj-leaf { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6.5cqi 7cqi 6cqi 8.5cqi; color: #1b1f1b; }
.pj-leaf__head { display: flex; justify-content: space-between; padding-bottom: 2cqi; border-bottom: 1px solid rgba(7, 17, 15, 0.16); color: #5c6461; font-size: max(10px, 2.5cqi); font-weight: 650; }

/* Der Titel bekommt beim Öffnen den Fokus, damit Screenreader die Ausgabe ansagen; er ist kein Bedienelement */
.pj-leaf__title:focus { outline: none; box-shadow: none; }
.pj-leaf__title { margin-top: 4.5cqi; font-size: calc(var(--t, 11) * 1cqi); font-stretch: 76%; font-weight: 640; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.pj-leaf__branche { margin-top: 2cqi; color: #4b5753; font-size: max(11px, 3.3cqi); line-height: 1.35; }
/* Handy links, Angaben rechts in einer Spalte */
.pj-leaf__body { display: grid; grid-template-columns: 29% minmax(0, 1fr); align-items: start; gap: 5cqi; margin-top: 5cqi; }
.pj-leaf__phone { margin: 0; padding: 1.4cqi; border-radius: 5cqi; background: var(--pj-frame); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.6); }
/* Viele Leistungen (ab 11, build-kiosk.cjs): Die Angaben umfließen das Handy, die Tags laufen darunter in voller Breite weiter */
.pj-leaf__body--flow { display: flow-root; }
.pj-leaf__body--flow .pj-leaf__phone { float: left; width: 29%; margin: 0 5cqi 2.4cqi 0; }
.pj-leaf__phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 3.8cqi; object-fit: cover; object-position: top; }
.pj-leaf__facts { margin: 0; }
.pj-leaf__facts > div + div { margin-top: 3cqi; }
.pj-leaf__facts dt { margin-bottom: 1.3cqi; color: #5c6461; font-size: max(10px, 2.5cqi); font-weight: 650; }
.pj-leaf__facts dd { margin: 0; }
/* Logo und Farben stehen in eigenen Blöcken, die sich dem Platz neben dem Handy anpassen; nur die Leistungen fließen darunter weiter */
.pj-leaf__facts > div:not(.pj-leaf__services) { display: flow-root; }
.pj-leaf__logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 12cqi; }
.pj-leaf .pj-swatches { gap: 1.4cqi 2.2cqi; }
.pj-leaf .pj-swatch { width: max(14px, 3.8cqi); }
.pj-leaf .pj-swatches code { font-size: max(9px, 2.3cqi); }

/* Leistungen als Schlagwörter */
/* Als Zeilen gesetzt (nicht als Flexbox), damit sie um das Handy fließen können */
.pj-tags { margin: 0 0 -0.9cqi; padding: 0; list-style: none; }
.pj-tags li { display: inline-block; margin: 0 0.9cqi 0.9cqi 0; padding: 0.55cqi 1.4cqi 0.65cqi; border: 1px solid rgba(7, 17, 15, 0.2); background: #ffffff; font-size: max(10px, 2.1cqi); font-weight: 560; line-height: 1.2; }

.pj-leaf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2cqi 3cqi; margin: auto 0 0; padding-top: 4cqi; }

.pj-case {
    display: inline-flex;
    min-height: max(40px, 8.5cqi);
    align-items: center;
    gap: 2cqi;
    padding: 0 3.6cqi 0 3.2cqi;
    background: var(--pj-ink);
    color: #ffffff;
    font-size: max(12px, 3cqi);
    font-weight: 620;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.6cqi), calc(100% - 1.5cqi) 100%, 0 100%);
    transition: background-color 200ms ease;
}

.pj-case:hover { background: #1d2a26; }
.pj-case:focus-visible { clip-path: none; }
.pj-case__slash { width: max(3px, 0.7cqi); height: 1em; background: var(--pj-mint); transform: skewX(-30deg); }
.pj-leaf__visit { color: var(--pj-ink); font-size: max(12px, 3cqi); }

/* ================================================================== */

/* Original magazine breakpoints; two covers per row on phones. */
@media (max-width: 1100px) { .pj-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) {
    .pj-reader { overflow-y: auto; }
    .pj-reader[open] { display: block; place-items: normal; }
    .pj-reader__bar { position: sticky; background: rgba(5, 12, 10, 0.94); }
    .pj-book { --pw: min(calc(100vw - 2rem), 620px); display: grid; width: var(--pw); height: auto; gap: 1rem; margin: 1rem auto 2.5rem; transform: none; perspective: none; }
    .pj-book__right, .pj-book__cover { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; transform: none !important; }
    .pj-book__cover { order: 2; }
    .pj-book__face--front { display: none; }
    .pj-book__face--back { transform: none; }
    .pj-leaf { padding: 6cqi; }
    .pj-book__right { aspect-ratio: auto; }
    .pj-book__right .pj-leaf { position: relative; min-height: calc(var(--pw) * 4 / 3); }
}
@media (max-width: 760px) {
    .pj-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pj-rack__slot { padding: 0 0.5rem; }
    .pj-reader__step span { display: none; }
    .pj-reader__count { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pj-rack .pj-cover, .pj-book, .pj-book__cover { transition: none !important; }
}
/* Access to the curated archive without the removed pile or explanatory block. */
.pj-kiosk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: clamp(2.8rem, 5vw, 4.2rem); padding-top: clamp(1.4rem, 2.4vw, 2rem); border-top: 1px solid var(--pj-rule); }
.pj-kiosk__actions .project-cta { margin-top: 0; }
.pj-kiosk__overview { isolation: isolate; background: var(--ink); color: var(--ink); }
.pj-kiosk__overview::before { position: absolute; z-index: -1; inset: 1.5px; background: var(--white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - (var(--cut) - 1px) * .577) 100%, 0 100%); content: ''; transition: opacity 200ms ease; }
.pj-kiosk__overview:hover { color: var(--white); }
.pj-kiosk__overview:hover::before { opacity: 0; }
.pj-kiosk__overview:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pj-kiosk__fallback ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
html:has(.pj-reader[open]) { overflow: hidden; }

/* Reader layout 20261016: six tags, text-only overflow hint, protected CTAs. */
.pj-tags li.pj-tags__more { padding-inline: 0; border-color: transparent; background: transparent; white-space: nowrap; }
.pj-leaf__head, .pj-leaf__title, .pj-leaf__branche, .pj-leaf__actions { flex-shrink: 0; }
.pj-leaf__body { min-height: 0; overflow-x: hidden; overflow-y: auto; padding-bottom: 1cqi; scrollbar-width: thin; }
@media (max-width: 980px) {
    .pj-leaf__body { overflow: visible; flex-shrink: 0; }
}
/* End reader layout 20261016. */