/* /projekte/ (Chat B, 02.10.2026) · nur unter .unterseite--projekte, flach (Gerüst).
   Hero mit Triptychon (Rahmen seite_hero, ohne Raster-Linien) · je Projekt eine Fallstudie in seiner Farbwelt
   (forest · wood · dusk aus base.css .ph[data-tone], dazu wein für Gasthaus Mühle): links Film am Laptop und Handy, darunter die Fakten, rechts die
   Kundenstimme · Kunden-Laufband · Projekt-Ansicht (Dialog). Schriften bewusst ruhiger als auf der Startseite (Gründer). */
@keyframes pj-lauf { to { transform: scaleX(1); } }

.unterseite--projekte { --pj-gap: clamp(8px, calc(.7 * var(--u)), 14px); }
/* Farbwelten: a Fläche · b Tiefe · c Linie/Schimmer · hell Kennzahlen auf Dunkel (≥ 7:1) · ink Schleier (RGB) */
.unterseite--projekte [data-ton="forest"] { --ton-a: #2a5a45; --ton-b: #07120e; --ton-c: #3f8a66; --ton-hell: #8fd8aa; --ton-ink: 6, 21, 15; }
.unterseite--projekte [data-ton="wood"] { --ton-a: #7a5236; --ton-b: #150e09; --ton-c: #d8a878; --ton-hell: #e6bf94; --ton-ink: 21, 14, 9; }
.unterseite--projekte [data-ton="dusk"] { --ton-a: #3b2c7a; --ton-b: #0c0b14; --ton-c: #9c87ff; --ton-hell: #cdc2ff; --ton-ink: 12, 11, 20; }
/* Wein und Gold aus dem Logo von Gasthaus Mühle (seit 24.10.2026) */
.unterseite--projekte [data-ton="wein"] { --ton-a: #7d2f25; --ton-b: #140807; --ton-c: #d9b66e; --ton-hell: #ecd29a; --ton-ink: 20, 8, 7; }
/* Rollbild (Projekt ohne Film, base.css) in der Farbwelt des Projekts */
.unterseite--projekte [data-ton] .tw-roll { --roll-a: var(--ton-a); --roll-b: var(--ton-b); --roll-c: var(--ton-c); }
.unterseite--projekte .pj-bald { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.unterseite--projekte .pj-bald__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--ton-c, #d9b66e); }
.unterseite--projekte .pj-plus { margin-left: .04em; color: var(--ton-hell, var(--c-mint)); }
.unterseite--projekte .pj-rund { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, box-shadow .3s, transform .5s var(--ease-out); }
.unterseite--projekte .pj-rund svg { width: 16px; height: 16px; }
.unterseite--projekte .pj-rund:hover { background: rgba(242, 244, 238, .08); box-shadow: inset 0 0 0 1px rgba(242, 244, 238, .34); }
.unterseite--projekte .pj-rund:active { transform: scale(.94); }

/* ---------- 0 · Hero (seite_hero): ohne Raster-Linien, kleinere Schrift, Triptychon rechts ---------- */
.unterseite--projekte .pj-hero .sub-hero__raster { display: none; }
.unterseite--projekte .pj-hero { gap: 0; min-height: min(92svh, 920px); padding-bottom: clamp(48px, calc(5 * var(--u)), 88px); background: radial-gradient(52% 62% at 0% 0%, color-mix(in srgb, var(--c-forest) 50%, transparent), transparent 72%), var(--c-ink); }
.unterseite--projekte .pj-hero .sub-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, calc(3 * var(--u)), 64px); align-items: center; flex: 1 1 auto; }
.unterseite--projekte .pj-hero .sub-hero__titel { font-size: clamp(36px, calc(3.5 * var(--u)), 66px); line-height: 1; letter-spacing: -0.045em; }
.unterseite--projekte .pj-hero .sub-hero__akzent { font-size: .86em; }
.unterseite--projekte .pj-hero .sub-hero__lead { max-width: 30em; font-size: clamp(16px, calc(1.1 * var(--u)), 19px); }
.unterseite--projekte .pj-hero .sub-hero__slot { align-self: stretch; display: flex; }
.unterseite--projekte .pj-trip { flex: 1 1 auto; }
/* Festes Raster 1 : 1 : 1 (: 1) – das Layout ändert sich beim Überfahren nie (CLS 0). --pj-n = Anzahl Tafeln (Markup) */
.unterseite--projekte .pj-trip {
  --pj-wmax: calc((100cqw - (var(--pj-n, 3) - 1) * var(--pj-gap)) * 1.75 / (var(--pj-n, 3) + .75));   /* Breite einer gewachsenen Tafel */
  position: relative;
  min-height: clamp(380px, 50vh, 600px);
  container-type: inline-size;
}
.unterseite--projekte .pj-trip__reihe { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--pj-n, 3), minmax(0, 1fr)); column-gap: var(--pj-gap); margin: 0; padding: 0; list-style: none; }
.unterseite--projekte .pj-tafel { position: relative; min-width: 0; }
.unterseite--projekte .pj-tafel__auftritt { position: relative; height: 100%; display: flex; flex-direction: column; gap: clamp(12px, calc(1 * var(--u)), 18px); isolation: isolate; }
.unterseite--projekte .pj-tafel__fenster {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  border-radius: calc(var(--radius) / var(--pj-s, 1)) / var(--radius);   /* gleicht die Streckung aus (--pj-s aus JS) */
  background: rgb(var(--ton-ink));
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8);
  transform-origin: 0 50%; isolation: isolate;
}
/* Inhalt etwas breiter als eine gewachsene Tafel (Reserve fürs Nachschwingen), mittig: Das Video ändert seine Grösse nie */
.unterseite--projekte .pj-tafel__inhalt { --pj-iw: calc(var(--pj-wmax) * 1.02); position: absolute; top: 0; bottom: 0; left: 50%; width: var(--pj-iw); margin-left: calc(var(--pj-iw) / -2); }
.unterseite--projekte .pj-tafel__inhalt img, .unterseite--projekte .pj-tafel__inhalt video { object-position: var(--pj-fx, 50%) 50%; }
/* Rollbild in der Tafel: Handy so breit, dass es in die ungewachsene Tafel passt (Inhalt ist 1,75-mal breiter) */
.unterseite--projekte .pj-tafel__roll { --roll-handy-b: .44; }
.unterseite--projekte .pj-tafel__schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; transition: opacity .6s var(--ease-out);
  background: linear-gradient(0deg, rgba(var(--ton-ink), .82) 0%, rgba(var(--ton-ink), .35) 26%, rgba(var(--ton-ink), 0) 46%); }
.unterseite--projekte .pj-tafel__text { position: absolute; left: 0; bottom: 0; z-index: 2; width: var(--pj-wmax); display: grid; gap: 6px; padding: clamp(16px, calc(1.5 * var(--u)), 28px); transform-origin: 0 50%; pointer-events: none; }
.unterseite--projekte .pj-tafel__name { font-size: clamp(26px, calc(2.3 * var(--u)), 46px); font-weight: 650; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.unterseite--projekte .pj-tafel__meta { font-size: var(--fs-small); font-weight: 500; color: rgba(242, 244, 238, .84); }
.unterseite--projekte .pj-tafel__name, .unterseite--projekte .pj-tafel__meta { transform: translateY(110%); transition: transform .45s var(--ease-out); }
.unterseite--projekte .pj-tafel.is-gross .pj-tafel__name { transform: none; transition: transform .7s var(--ease-out) .12s; }
.unterseite--projekte .pj-tafel.is-gross .pj-tafel__meta { transform: none; transition: transform .7s var(--ease-out) .18s; }
.unterseite--projekte .pj-tafel.is-gross .pj-tafel__schleier { opacity: 1; }
.unterseite--projekte .pj-tafel__dunkel { position: absolute; inset: 0; z-index: 3; background: #030b08; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease-out); }
.unterseite--projekte .pj-trip.is-zeigt .pj-tafel:not(.is-gross) .pj-tafel__dunkel { opacity: .38; }

/* Beschriftung: Haarlinie (wächst mit der Tafel, zeigt den Takt des laufenden Films), Index, Name, Plattform */
.unterseite--projekte .pj-tafel__label { position: relative; min-height: calc(2.7em + 12px); padding-top: 12px; font-size: var(--fs-small); line-height: 1.35; }   /* zwei Zeilen Platz: «Gasthaus Mühle» bricht in der schmalen Tafel um, alle Fenster bleiben gleich hoch */
.unterseite--projekte .pj-tafel__strich { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.unterseite--projekte .pj-tafel__lauf { position: absolute; inset: 0; background: var(--ton-hell); transform: scaleX(0); transform-origin: 0 50%; }
.unterseite--projekte .pj-trip.is-wandel .pj-tafel.is-aktiv .pj-tafel__lauf { animation: pj-lauf var(--pj-takt, 7s) linear both; }
.unterseite--projekte .pj-tafel.is-gross .pj-tafel__lauf { transform: none; animation: none; }
.unterseite--projekte .pj-tafel__link { display: block; color: var(--fg); }
.unterseite--projekte .pj-tafel__link::after { content: ""; position: absolute; inset: 0; z-index: 4; cursor: pointer; }   /* ganze Tafel klickbar */
.unterseite--projekte .pj-tafel__link:focus-visible { outline: none; }
.unterseite--projekte .pj-tafel:has(.pj-tafel__link:focus-visible) .pj-tafel__fenster { outline: 2px solid var(--c-signal-bright); outline-offset: 3px; }
.unterseite--projekte .pj-tafel__zeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; }
.unterseite--projekte .pj-tafel__nr { color: var(--ton-hell); font-weight: 600; }
.unterseite--projekte .pj-tafel__nm { font-weight: 600; }
.unterseite--projekte .pj-tafel__pf { color: var(--muted); }

/* ---------- 1 · Fallstudien: links Film und Handy, darunter Fakten; rechts die Stimme (klebt mit) ---------- */
.unterseite--projekte .pj-fall { padding-block: clamp(80px, calc(8 * var(--u)), 150px); background: radial-gradient(55% 45% at 0% 0%, color-mix(in srgb, var(--ton-a) 40%, transparent), transparent 72%), radial-gradient(40% 40% at 100% 100%, color-mix(in srgb, var(--ton-a) 22%, transparent), transparent 70%), var(--ton-b); }
.unterseite--projekte .pj-fall + .pj-fall { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton-c) 20%, transparent); }
.unterseite--projekte .pj-fall__kopf { display: grid; justify-items: start; gap: 8px; margin-bottom: clamp(28px, calc(3 * var(--u)), 56px); }
.unterseite--projekte .pj-fall__eyebrow { font-size: clamp(15px, calc(1 * var(--u)), 18px); }
.unterseite--projekte .pj-fall__eyebrow .eyebrow__dot { transform: none; }
.unterseite--projekte .pj-fall__eyebrow .eyebrow__meta { color: rgba(242, 244, 238, .7); }
.unterseite--projekte .pj-fall__name { margin-top: 6px; font-size: clamp(34px, calc(3.1 * var(--u)), 58px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; outline: none; }
.unterseite--projekte .pj-fall__unter { font-size: clamp(16px, calc(1.1 * var(--u)), 19px); color: var(--muted); }
.unterseite--projekte .pj-fall__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.unterseite--projekte .pj-fall__werk { grid-column: 1 / span 7; }
.unterseite--projekte .pj-fall__seite { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-h) + 40px); padding-top: clamp(8px, calc(2 * var(--u)), 40px); }
/* Film am Laptop (H06–H08) mit Handy, das unten rechts überlappt; Rand und Schatten im Projektton */
.unterseite--projekte .pj-fall__geraete { position: relative; margin: 0 0 clamp(36px, calc(3.4 * var(--u)), 64px); padding: 0 8% 9% 0; }
.unterseite--projekte .pj-fall__film { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: rgb(var(--ton-ink));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ton-c) 32%, transparent), 0 50px 100px -50px rgba(0, 0, 0, .85); }
.unterseite--projekte .pj-fall__zoom { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.unterseite--projekte .pj-fall__zoom .scene-poster img, .unterseite--projekte .pj-fall__zoom .scene-video--desktop { object-position: 62% 50%; }
.unterseite--projekte .pj-fall__handy { position: absolute; right: 0; bottom: 0; width: 23%; padding: clamp(4px, calc(.4 * var(--u)), 7px); border-radius: clamp(18px, calc(2 * var(--u)), 34px); background: #090c0b; will-change: transform;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ton-c) 55%, transparent), 0 40px 80px -24px rgba(0, 0, 0, .9), 0 0 60px -16px color-mix(in srgb, var(--ton-c) 45%, transparent); }
.unterseite--projekte .pj-handy__screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: clamp(14px, calc(1.6 * var(--u)), 28px); background: #fff; }
.unterseite--projekte .pj-handy__fahrt { display: block; width: 100%; height: auto; }
.unterseite--projekte .pj-fall .pj-handy__fahrt { will-change: transform; }
.unterseite--projekte .pj-fall__satz { max-width: 34em; margin-top: 4px; font-size: clamp(16px, calc(1.1 * var(--u)), 19px); line-height: 1.5; color: rgba(242, 244, 238, .82); text-wrap: pretty; }
.unterseite--projekte .pj-fall__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(20px, calc(1.8 * var(--u)), 32px); }
.unterseite--projekte .pj-fall .link-u { color: var(--c-paper); }
.unterseite--projekte .pj-fall .link-u::after { background: var(--ton-hell); }
/* Kennzahlen: Zahl oben, Beschriftung darunter, Trennlinien im Projektton */
.unterseite--projekte .pj-zahlen { display: flex; margin: 0 0 clamp(16px, calc(1.4 * var(--u)), 24px); }
.unterseite--projekte .pj-zahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 0 clamp(16px, calc(1.8 * var(--u)), 32px); border-left: 1px solid color-mix(in srgb, var(--ton-c) 45%, transparent); }
.unterseite--projekte .pj-zahlen > div:first-child { padding-left: 0; border-left: 0; }
.unterseite--projekte .pj-zahlen dt { font-size: var(--fs-small); color: rgba(242, 244, 238, .7); white-space: nowrap; }
.unterseite--projekte .pj-zahlen dd { margin: 0; font-size: clamp(28px, calc(2.2 * var(--u)), 40px); font-weight: 650; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ton-hell); }
.unterseite--projekte .pj-zahlen dd > span[aria-hidden] { display: inline-flex; align-items: flex-start; }
.unterseite--projekte .pj-zahlen--gross { margin: 0; }
.unterseite--projekte .pj-zahlen--gross dd { font-size: clamp(36px, calc(3.6 * var(--u)), 64px); letter-spacing: -0.045em; }
/* Stimme: die grösste Schrift der Fallstudie */
.unterseite--projekte .pj-stimme { display: grid; justify-items: start; gap: clamp(20px, calc(2 * var(--u)), 32px); margin: 0; padding-top: clamp(20px, calc(2 * var(--u)), 32px); border-top: 1px solid color-mix(in srgb, var(--ton-c) 40%, transparent); }
.unterseite--projekte .pj-stimme__zeichen { height: .42em; margin-top: .08em; font-family: var(--font-serif); font-weight: 400; font-variation-settings: var(--serif-axes); font-size: clamp(80px, calc(7 * var(--u)), 128px); line-height: .8; color: var(--ton-hell); opacity: .75; }
.unterseite--projekte .pj-stimme__text { margin: 0; font-family: var(--font-serif); font-style: italic; font-variation-settings: var(--serif-axes); font-size: clamp(26px, calc(2.5 * var(--u)), 46px); line-height: 1.16; letter-spacing: -0.012em; text-wrap: pretty; }
.unterseite--projekte .pj-stimme__wer { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); color: var(--muted); }
.unterseite--projekte .pj-stimme__wer strong { display: block; font-size: clamp(16px, calc(1.1 * var(--u)), 18px); color: var(--fg); }
.unterseite--projekte .pj-stimme__bild { flex: none; width: clamp(64px, calc(5 * var(--u)), 84px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--ton-a); box-shadow: 0 0 0 2px var(--ton-b), 0 0 0 3px color-mix(in srgb, var(--ton-hell) 55%, transparent); }
.unterseite--projekte .pj-stimme__initial { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ton-a); color: #fff; font-size: 19px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
/* Ohne freigegebene Stimme: Aufgabe und Umsetzung an ihrer Stelle */
.unterseite--projekte .pj-fall__auftrag { display: grid; gap: 10px; padding-top: clamp(20px, calc(2 * var(--u)), 32px); border-top: 1px solid color-mix(in srgb, var(--ton-c) 40%, transparent); }
.unterseite--projekte .pj-fall__auftrag h4, .unterseite--projekte .pj-projekt__branche, .unterseite--projekte .pj-auftrag h3, .unterseite--projekte .pj-drin h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ton-hell); }
.unterseite--projekte .pj-fall__auftrag h4 + p { margin-bottom: 18px; }
.unterseite--projekte .pj-fall__auftrag p { font-size: clamp(16px, calc(1.1 * var(--u)), 19px); line-height: 1.5; color: rgba(242, 244, 238, .82); }

/* ---------- 2 · Kunden-Laufband ---------- */
.unterseite--projekte .pj-band { display: flex; align-items: center; gap: clamp(20px, calc(2.4 * var(--u)), 44px); padding-block: clamp(22px, calc(2.2 * var(--u)), 36px); border-block: 1px solid var(--line); }
.unterseite--projekte .pj-band__label { flex: none; width: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.unterseite--projekte .pj-band__lauf { flex: 1 1 auto; min-width: 0; --marquee-gap: clamp(36px, calc(3.4 * var(--u)), 64px); }
.unterseite--projekte .pj-marke { font-size: clamp(22px, calc(1.8 * var(--u)), 32px); font-weight: 650; letter-spacing: -0.03em; color: rgba(242, 244, 238, .8); white-space: nowrap; }
.unterseite--projekte .pj-band__punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-mint); opacity: .5; }

/* ---------- Gemeinsame Bausteine auf dieser Seite ruhiger (Gründer: Schriften zu gross) ---------- */
.unterseite--projekte .faq-title { font-size: clamp(32px, calc(3.2 * var(--u)), 60px); }
.unterseite--projekte .faq-head { margin-bottom: clamp(48px, calc(5 * var(--u)), 96px); }
.unterseite--projekte .end-title__sans, .unterseite--projekte .end-title__serif { font-size: clamp(38px, calc(4.6 * var(--u)), 88px); }

/* ---------- Projekt-Ansicht (Dialog) ---------- */
.unterseite--projekte .pj-ansicht { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-paper); overflow-y: auto; overscroll-behavior: contain; }
.unterseite--projekte .pj-ansicht::backdrop { background: rgba(3, 9, 7, .72); }
/* Farbfläche: wächst beim Öffnen aus der angeklickten Karte (transform, projekte.js) */
.unterseite--projekte .pj-ansicht__platte { position: fixed; inset: 0; overflow: hidden; transform-origin: 0 0; will-change: transform;
  background: radial-gradient(70% 50% at 88% 0%, color-mix(in srgb, var(--ton-a) 60%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--ton-a) 28%, var(--ton-b)) 0%, var(--ton-b) 60%); }
.unterseite--projekte .pj-ansicht__schimmer { position: absolute; left: 10%; top: 30%; width: 70%; height: 60%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ton-c) 18%, transparent), transparent); }
.unterseite--projekte .pj-ansicht__blatt { position: relative; z-index: 1; padding-bottom: clamp(48px, calc(5 * var(--u)), 96px); }
.unterseite--projekte .pj-ansicht__leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px;
  background: color-mix(in srgb, var(--ton-b) 94%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--ton-c) 22%, transparent); }
.unterseite--projekte .pj-ansicht__nr { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.unterseite--projekte .pj-ansicht__nr .eyebrow__dot { transform: none; }
.unterseite--projekte .pj-ansicht__knoepfe { display: flex; gap: 10px; }
.unterseite--projekte .pj-rund--zu { background: var(--c-paper); color: var(--c-ink); }
.unterseite--projekte .pj-rund--zu:hover { background: #fff; }
.unterseite--projekte .pj-projekt { display: grid; gap: clamp(56px, calc(5.6 * var(--u)), 104px); padding-top: clamp(16px, calc(2.4 * var(--u)), 48px); }
.unterseite--projekte .pj-projekt[hidden] { display: none; }
.unterseite--projekte .pj-steckbrief { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: end; }
.unterseite--projekte .pj-steckbrief .pj-zahlen { grid-column: 1 / span 7; }
.unterseite--projekte .pj-daten { grid-column: 9 / span 4; display: grid; margin: 0; }
.unterseite--projekte .pj-daten > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ton-c) 30%, transparent); }
.unterseite--projekte .pj-daten > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ton-c) 30%, transparent); }
.unterseite--projekte .pj-daten dt { font-size: var(--fs-small); color: rgba(242, 244, 238, .62); }
.unterseite--projekte .pj-daten dd { margin: 0; font-weight: 500; }
.unterseite--projekte .pj-ansicht .link-u::after { background: var(--ton-hell); }
.unterseite--projekte .pj-ansicht .link-u { color: var(--c-paper); }
/* Gerätebühne: Desktop-Rahmen, Handy überlappt unten rechts; Rand und Schatten im Projektton */
.unterseite--projekte .pj-geraete { position: relative; margin: 0; padding-bottom: clamp(48px, calc(5 * var(--u)), 96px); }
.unterseite--projekte .pj-geraete__desktop { width: 80%; border-radius: 12px; overflow: hidden; background: #0d1210;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ton-c) 45%, transparent), 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 90px -30px color-mix(in srgb, var(--ton-c) 40%, transparent); }
.unterseite--projekte .pj-geraete__desktop img { display: block; width: 100%; height: auto; }
.unterseite--projekte .pj-browser { display: flex; align-items: center; gap: 16px; height: clamp(30px, calc(2.2 * var(--u)), 40px); padding: 0 14px; background: color-mix(in srgb, var(--ton-a) 30%, #0d1210); border-bottom: 1px solid rgba(242, 244, 238, .08); }
.unterseite--projekte .pj-browser__punkte { display: flex; gap: 6px; }
.unterseite--projekte .pj-browser__punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 244, 238, .22); }
.unterseite--projekte .pj-browser__adresse { flex: 0 1 26em; margin-inline: auto; padding: 4px 14px; border-radius: 999px; background: rgba(242, 244, 238, .07); font-size: 12px; color: rgba(242, 244, 238, .7); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-30px); }
.unterseite--projekte .pj-geraete__handy { position: absolute; right: 3%; bottom: 0; width: 21%; padding: clamp(5px, calc(.45 * var(--u)), 9px); border-radius: clamp(20px, calc(2.4 * var(--u)), 46px); background: #090c0b;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ton-c) 55%, transparent), 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 70px -16px color-mix(in srgb, var(--ton-c) 45%, transparent); }
.unterseite--projekte .pj-geraete__legende { margin-top: clamp(18px, calc(1.6 * var(--u)), 28px); max-width: 70%; font-size: var(--fs-small); color: rgba(242, 244, 238, .62); }
.unterseite--projekte .pj-auftrag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, calc(5 * var(--u)), 120px); }
.unterseite--projekte .pj-auftrag h3, .unterseite--projekte .pj-drin h3 { margin-bottom: clamp(14px, calc(1.4 * var(--u)), 24px); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ton-hell); }
.unterseite--projekte .pj-auftrag p { max-width: 30em; font-size: clamp(17px, calc(1.25 * var(--u)), 22px); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty; }
.unterseite--projekte .pj-drin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.unterseite--projekte .pj-drin h3 { grid-column: 1 / span 3; padding-top: 12px; }
.unterseite--projekte .pj-chips { grid-column: 4 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.unterseite--projekte .pj-chips li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px; border-radius: 999px; font-size: clamp(15px, calc(.95 * var(--u)), 18px); font-weight: 500;
  background: color-mix(in srgb, var(--ton-a) 22%, rgba(242, 244, 238, .04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton-c) 38%, transparent); }
.unterseite--projekte .pj-chips li::before { content: ""; flex: none; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid var(--ton-hell); border-bottom: 2px solid var(--ton-hell); transform: rotate(-45deg); }
.unterseite--projekte .pj-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding-top: clamp(28px, calc(2.6 * var(--u)), 48px); border-top: 1px solid color-mix(in srgb, var(--ton-c) 30%, transparent); }
.unterseite--projekte .pj-aktionen__thema { margin-left: auto; color: rgba(242, 244, 238, .76) !important; }
.unterseite--projekte .pj-ansicht__naechstes { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 24px; margin-top: clamp(64px, calc(6 * var(--u)), 120px); color: inherit; }
.unterseite--projekte .pj-ansicht__klein { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--ton-c) 30%, transparent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ton-hell); }
.unterseite--projekte .pj-ansicht__folge { font-size: clamp(36px, calc(4 * var(--u)), 72px); font-weight: 750; line-height: .95; letter-spacing: -0.05em; }
.unterseite--projekte .pj-ansicht__naechstes .btn__icon { width: clamp(48px, calc(4 * var(--u)), 72px); height: clamp(48px, calc(4 * var(--u)), 72px); margin-bottom: .6em; background: var(--c-paper); color: var(--c-ink); }
.unterseite--projekte .pj-ansicht__naechstes:hover .btn__icon { transform: rotate(-45deg); }
.unterseite--projekte .pj-projekt__kopf { display: grid; grid-template-columns: auto minmax(48px, 1fr); grid-template-areas: "eyebrow eyebrow" "name linie" "unter unter"; column-gap: clamp(20px, calc(2.2 * var(--u)), 44px); row-gap: 8px; align-items: center; }
.unterseite--projekte .pj-projekt__name { grid-area: name; font-size: clamp(40px, calc(4.4 * var(--u)), 80px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; color: #fff; }
.unterseite--projekte .pj-projekt__linie { grid-area: linie; display: block; height: 2px; margin-top: .3em; background: linear-gradient(90deg, var(--ton-hell), color-mix(in srgb, var(--ton-c) 30%, transparent)); transform-origin: 0 50%; }
.unterseite--projekte .pj-projekt__unter { grid-area: unter; font-size: clamp(16px, calc(1.15 * var(--u)), 20px); color: rgba(242, 244, 238, .8); }

/* ---------- Mittlere Breiten, Handy ---------- */
@media (max-width: 1180px) and (min-width: 801px) {
  .unterseite--projekte .pj-hero .sub-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .unterseite--projekte .pj-fall__werk { grid-column: 1 / span 7; }
  .unterseite--projekte .pj-fall__seite { grid-column: 8 / span 5; }
  .unterseite--projekte .pj-steckbrief .pj-zahlen { grid-column: 1 / -1; }
  .unterseite--projekte .pj-daten { grid-column: 1 / span 8; }
}
@media (max-width: 800px) {
  .unterseite--projekte .pj-hero { min-height: 0; }
  .unterseite--projekte .pj-hero .sub-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .unterseite--projekte .pj-hero .sub-hero__titel { font-size: clamp(34px, calc(9.6 * var(--u)), 44px); }
  .unterseite--projekte .pj-trip { --pj-wmax: 100%; min-height: 0; }
  .unterseite--projekte .pj-trip__reihe { position: relative; inset: auto; }
  /* Seit vier Projekten (24.10.2026) zwei mal zwei statt vier schmale Streifen nebeneinander */
  .unterseite--projekte .pj-trip__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .unterseite--projekte .pj-tafel__fenster { flex: none; aspect-ratio: 4 / 5; }
  .unterseite--projekte .pj-tafel__roll { --roll-handy-b: .6; }
  .unterseite--projekte .pj-tafel__text, .unterseite--projekte .pj-tafel__pf { display: none; }
  .unterseite--projekte .pj-tafel__label { min-height: 3.2em; font-size: 13px; }
  .unterseite--projekte .pj-tafel__zeile { display: grid; row-gap: 1px; }

  .unterseite--projekte .pj-fall { padding-block: 64px 72px; }
  .unterseite--projekte .pj-fall__name { font-size: clamp(32px, calc(9 * var(--u)), 40px); }
  .unterseite--projekte .pj-fall__werk, .unterseite--projekte .pj-fall__seite { grid-column: 1 / -1; }
  .unterseite--projekte .pj-fall__seite { position: static; padding-top: 0; }
  .unterseite--projekte .pj-fall__geraete { padding: 0 10% 12% 0; }
  .unterseite--projekte .pj-fall__film { aspect-ratio: 4 / 5; }
  .unterseite--projekte .pj-fall__zoom .scene-poster img, .unterseite--projekte .pj-fall__zoom .scene-video--mobile { object-position: 50% 45%; }
  .unterseite--projekte .pj-fall__handy { width: 32%; }
  .unterseite--projekte .pj-fall__aktionen .btn { width: 100%; justify-content: space-between; }
  .unterseite--projekte .pj-zahlen > div { padding: 0 14px; }
  .unterseite--projekte .pj-zahlen dd { font-size: 26px; }
  .unterseite--projekte .pj-zahlen dt { font-size: 13px; }
  .unterseite--projekte .pj-stimme__text { font-size: clamp(22px, calc(6.4 * var(--u)), 28px); }
  .unterseite--projekte .pj-band { flex-direction: column; align-items: flex-start; gap: 14px; }
  .unterseite--projekte .pj-band__label { padding-inline: var(--margin); }
  .unterseite--projekte .pj-band__lauf { width: 100%; }

  .unterseite--projekte .pj-ansicht__leiste { height: 72px; }
  .unterseite--projekte .pj-projekt { gap: 56px; }
  .unterseite--projekte .pj-projekt__kopf { grid-template-columns: auto minmax(16px, 1fr); column-gap: 14px; }
  .unterseite--projekte .pj-projekt__name { font-size: min(44px, calc(11 * var(--u))); }
  .unterseite--projekte .pj-steckbrief .pj-zahlen, .unterseite--projekte .pj-daten, .unterseite--projekte .pj-drin h3, .unterseite--projekte .pj-chips { grid-column: 1 / -1; }
  .unterseite--projekte .pj-zahlen--gross dd { font-size: clamp(34px, calc(10 * var(--u)), 48px); }
  .unterseite--projekte .pj-daten > div { grid-template-columns: 6.5em minmax(0, 1fr); }
  .unterseite--projekte .pj-geraete { padding-bottom: 12%; }
  .unterseite--projekte .pj-geraete__desktop { width: 88%; }
  .unterseite--projekte .pj-geraete__handy { width: 30%; right: 0; }
  .unterseite--projekte .pj-geraete__legende { max-width: 62%; }
  .unterseite--projekte .pj-auftrag { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .unterseite--projekte .pj-aktionen .btn { width: 100%; justify-content: space-between; }
  .unterseite--projekte .pj-aktionen__thema { margin-left: 0; }
}
/* «Bewegung reduzieren»: ruhender, vollständiger Endzustand */
@media (prefers-reduced-motion: reduce) {
  .unterseite--projekte .pj-fall__zoom, .unterseite--projekte .pj-fall__handy, .unterseite--projekte .pj-fall .pj-handy__fahrt, .unterseite--projekte .pj-ansicht__platte { will-change: auto; }
  .unterseite--projekte .pj-tafel__lauf { animation: none !important; }
}
html.pj-offen { overflow: hidden; }