/* NIKdesign · Projektseite im Aufbau »Magazin« (Entwurf B, übernommen 04.10.2026)
   Gehört zu nikdesign.de. Seiten entstehen mit werkzeuge/projekte-bauen.py. Siehe dokumentation/TECHNIK.md, Abschnitt 6.
   Alle Klassen beginnen mit "pm-". Je Projekt setzt das Werkzeug am <main> die Farben
   --akzent (Kundenfarbe), --akzent-tief (Schrift, mind. 4,6 : 1 auf Weiß) und --akzent-hell (Flächen). */

.pm{padding-top:50px;overflow-x:clip;--akzent:var(--petrol);--akzent-tief:var(--petrol-tief);--akzent-hell:var(--hell)}
.pm-rand{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
.pm .pj-hinweis{margin-inline:clamp(1.2rem,4vw,2.4rem)}
@media(min-width:1260px){.pm .pj-hinweis{margin-inline:auto;max-width:calc(1180px - 4.8rem)}}
.pm-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--matt);font-variation-settings:"wdth" 88,"wght" 600}
.pm-nr{display:block;font-size:.72rem;letter-spacing:.2em;color:var(--akzent-tief);font-variation-settings:"wdth" 88,"wght" 700;margin-bottom:.8rem}
.pm figure{margin:0}
.pm figcaption{margin-top:.7rem;font-size:.78rem;color:var(--matt);font-variation-settings:"wdth" 92,"wght" 400}
.pm figcaption b{font-weight:normal;color:var(--akzent-tief);font-variation-settings:"wdth" 88,"wght" 700;margin-right:.4em}

/* ---------- Auftakt ---------- */
.pm-auf{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem)}
.pm-auf-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:center}
/* Schriftgröße höchstens so groß, dass das längste Wort (--w in em, aus projekte-bauen.py) in die Spalte passt */
.pm-auf-raster>:first-child{container-type:inline-size}
.pm-titel{margin-top:1.4rem;font-size:min(clamp(3rem,8.4vw,7rem),calc(100cqi / var(--w,5)));line-height:.95;letter-spacing:-.035em;color:var(--grau);
  font-variation-settings:"wdth" 80,"wght" 300;overflow-wrap:break-word;hyphens:manual}
.pm-titel span{display:block}
/* zweite Zeile fett in der Akzentfarbe: fett braucht bei der Open Sans mehr Luft als die leichte Zeile */
.pm-titel span+span{color:var(--akzent-tief);letter-spacing:-.01em;font-variation-settings:"wdth" 80,"wght" 560}
/* einzeiliger Projektname (ohne Schlagzeile) etwas kleiner, er ist meist länger */
.pm-titel span:only-child{font-size:.62em;line-height:1.02;letter-spacing:-.03em}
.pm-unter{margin-top:1.6rem;max-width:34ch;font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.5;color:var(--matt)}
.pm-auf-zeichen svg{display:block;width:100%;max-width:440px;margin-inline:auto;overflow:visible}
.pm-auf-buehne .pj-buehne{aspect-ratio:5/4.3}
/* Sammlung: die Zeichen im Auftakt als Raster, eines nach dem anderen (--vor) */
.pm-auf-sammlung{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1.6rem,3vw,2.8rem) clamp(1.2rem,2.5vw,2.2rem)}
.pm-auf-sammlung figure{display:grid;place-items:center;width:calc((100% - 2*clamp(1.2rem,2.5vw,2.2rem))/3);height:clamp(5rem,9vw,8rem)}
.pm-auf-sammlung svg{display:block;max-width:100%;max-height:100%;width:auto;height:100%;overflow:visible}
.pm-auf-buehne .pj-objekt{left:-2%;right:-2%;bottom:4%}
.pm-auf-buehne .pj-buehne.pj-logo .pj-objekt{left:18%;right:18%;top:36%;bottom:auto}
.pm-daten{margin-top:clamp(2.5rem,6vw,4.5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;
  border-top:1px solid var(--grau);padding-top:1rem}
.pm-daten dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--matt);font-variation-settings:"wdth" 88,"wght" 600}
.pm-daten dd{margin-top:.3rem;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:820px){
  .pm-auf-raster{grid-template-columns:1fr}
  .pm-auf-zeichen{order:-1;max-width:260px}
  .pm-auf-sammlung{order:-1;gap:1.2rem .9rem}.pm-auf-sammlung figure{height:4.2rem}
  .pm-auf-buehne{margin-inline:3%;margin-top:2.5rem}   /* Objekte ragen oben aus der Bühne – Abstand zur Unterzeile */
  .pm-daten{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Zeichen baut sich auf: Teile im SVG tragen data-ein (links | rechts | oben | pop | wisch | wachsen | drehen, sonst Einblenden)
   und ihre Verzögerung als --ab, z. B. <path data-ein="pop" style="--ab:.85s">. wachsen und drehen gehen von --ox/--oy aus
   (Ursprung in Prozent des Teils, meist die Mitte des ganzen Zeichens). data-ruhe (atmen | pendeln | fliessen) = Ruhebewegung danach. */
.pm-bau [data-ein]{animation:pm-blende .9s var(--uebergang) calc(var(--ab,0s) + var(--vor,0s)) both}
.pm-bau [data-ein="links"]{animation-name:pm-links;animation-duration:1.1s}
.pm-bau [data-ein="rechts"]{animation-name:pm-rechts;animation-duration:1.1s}
.pm-bau [data-ein="oben"]{animation-name:pm-oben;animation-duration:1.1s}
.pm-bau [data-ein="pop"]{transform-box:fill-box;transform-origin:center;animation-name:pm-pop;animation-duration:.75s;animation-timing-function:cubic-bezier(.34,1.56,.5,1)}
.pm-bau [data-ein="wisch"]{animation-name:pm-wisch;animation-duration:1.3s}
.pm [data-ein="wachsen"],.pm [data-ein="drehen"]{transform-box:fill-box;transform-origin:var(--ox,50%) var(--oy,50%)}
.pm-bau [data-ein="wachsen"]{animation-name:pm-wachsen;animation-duration:1.25s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
.pm-bau [data-ein="drehen"]{animation-name:pm-drehen;animation-duration:1.7s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
.pm-bau [data-ein="wachsen"][data-ruhe="atmen"]{animation:pm-wachsen 1.25s cubic-bezier(.2,.85,.25,1) calc(var(--ab,0s) + var(--vor,0s)) both,pm-atmen 7s ease-in-out calc(var(--ab,0s)*2.2 + 2.4s + var(--vor,0s)) infinite}
.pm-bau [data-ein="drehen"][data-ruhe="pendeln"]{animation:pm-drehen 1.7s cubic-bezier(.2,.85,.25,1) calc(var(--ab,0s) + var(--vor,0s)) both,pm-pendeln 11s ease-in-out calc(var(--ab,0s) + 2.6s + var(--vor,0s)) infinite}
.pm-bau [data-ein="wisch"][data-ruhe="fliessen"]{animation:pm-wisch 1.3s var(--uebergang) calc(var(--ab,0s) + var(--vor,0s)) both,pm-fliessen 6s ease-in-out calc(var(--ab,0s) + 1.6s + var(--vor,0s)) infinite}
.pm-bau [data-ein="wisch"][data-ruhe="ziehen"]{animation:pm-wisch 1.3s var(--uebergang) calc(var(--ab,0s) + var(--vor,0s)) both,pm-ziehen 5s ease-in-out calc(var(--ab,0s)*3 + 1.8s + var(--vor,0s)) infinite}
/* Ruhebewegung an einer Gruppe ohne eigenen Auftritt (z. B. der ganze Vogel, die ganze Fahne) */
.pm-bau [data-ruhe="pendeln"]:not([data-ein]){animation:pm-pendeln 9s ease-in-out calc(2.4s + var(--vor,0s)) infinite}
.pm-bau [data-ruhe="wehen"]:not([data-ein]){animation:pm-wehen 7s ease-in-out calc(2.2s + var(--vor,0s)) infinite}
.pm [data-ruhe]:not([data-ein]),.pm [data-ruhe="ziehen"]{transform-box:fill-box;transform-origin:var(--ox,50%) var(--oy,50%)}
.pm [data-ruhe="ziehen"]{--ox:100%}
@keyframes pm-blende{from{opacity:0}}
@keyframes pm-links{from{opacity:0;transform:translateX(-7px)}}
@keyframes pm-rechts{from{opacity:0;transform:translateX(7px)}}
@keyframes pm-oben{from{opacity:0;transform:translateY(-7px)}}
@keyframes pm-pop{from{transform:scale(0)}}
@keyframes pm-wisch{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pm-wachsen{from{opacity:0;transform:scale(.35)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes pm-drehen{from{opacity:0;transform:rotate(-95deg) scale(.9)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes pm-atmen{0%,100%{transform:none}50%{transform:scale(1.02)}}
@keyframes pm-pendeln{0%,100%{transform:none}50%{transform:rotate(3deg)}}
@keyframes pm-fliessen{0%,100%{transform:none}50%{transform:scaleY(1.12)}}
.pm [data-ruhe="fliessen"]{transform-box:fill-box;transform-origin:50% 100%}
@keyframes pm-kreisen{to{transform:rotate(360deg)}}
@keyframes pm-wehen{0%,100%{transform:none}50%{transform:skewY(-1.6deg)}}
@keyframes pm-ziehen{0%,100%{transform:none}50%{transform:scaleX(1.035)}}
/* Zusätze, die nur in bestimmten Phasen von »Die Idee« stehen (data-nur), sind sonst unsichtbar – auch ohne JavaScript und im Auftakt */
.pm [data-nur]:not(.an){opacity:0}
.pm-geist{fill:var(--linie)}                                  /* Bauplan: der Umriss, bevor sich das Zeichen aufbaut */
.pm-konstruktion{fill:none;stroke:var(--petrol)}              /* Konstruktionslinien, z. B. der »perfekte Kreis« */

/* ---------- Die Idee: Anatomie des Zeichens ---------- */
.pm-idee{padding-block:clamp(3rem,8vw,6rem);background:var(--papier);border-block:1px solid var(--linie)}
.pm-idee-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem)}
.pm-idee-links{position:sticky;top:calc(50vh - min(19vw,210px));align-self:start}
.pm-anatomie svg{display:block;width:100%;max-width:420px;overflow:visible}
.pm-anatomie [data-teil]{transition:opacity .6s var(--uebergang),transform .6s var(--uebergang)}
.pm-anatomie [data-ein="pop"]{transform-box:fill-box;transform-origin:center}
.pm-anatomie [data-teil].aus{opacity:.13}           /* projekte.js: alles, was nicht zum gelesenen Kapitel gehört */
.pm-anatomie .hervor[data-ein="pop"]{transform:scale(1.18)}
.pm-anatomie .hervor[data-ein="wisch"]{transform:translateY(-1px)}
/* Die Idee in Phasen (Standard seit 08.10.2026): Jedes Kapitel hat data-phasen Schritte (meist 3). Die Leselinie läuft durchs Kapitel,
   je Drittel eine Phase; projekte.js setzt am SVG data-stand und .pm-phasen, an den Teilen:
     .da       ab data-phase erreicht        .vor      erreicht, aber noch vor data-fertig (Vorstufe)
     .zurueck  gehört zu einem früheren Kapitel (data-kapitel), tritt zurück – außer im Kapitel mit data-ganz
     .an       Phase steht in data-nur ("3", "10 11", "0-11")      data-klasse="10:blass 11:atmet" → Klasse in dieser Phase
     .fertig   (am SVG) letzte Phase erreicht → Ruhebewegung (data-ruhe) */
.pm-phasen-bereit [data-phase]{transition:transform 1.1s cubic-bezier(.2,.85,.25,1),opacity .7s var(--uebergang),clip-path 1.1s var(--uebergang);transition-delay:var(--verz,0s)}
.pm-phasen-bereit [data-nur]{transition:opacity 1s var(--uebergang)}
.pm-phasen-bereit [data-klasse]:not([data-phase]){transition:opacity .7s var(--uebergang)}   /* z. B. Buchstaben, die in einer Phase zurücktreten */
.pm-phasen [data-phase]:not(.da){opacity:0}
.pm-phasen [data-ein="wachsen"]:not(.da){transform:scale(.35)}
.pm-phasen [data-ein="drehen"]:not(.da){transform:rotate(-95deg) scale(.9)}
.pm-phasen [data-ein="links"]:not(.da){transform:translateX(-7px)}
.pm-phasen [data-ein="rechts"]:not(.da){transform:translateX(7px)}
.pm-phasen [data-ein="oben"]:not(.da){transform:translateY(-7px)}
.pm-phasen [data-ein="pop"]:not(.da){transform:scale(0)}
.pm-phasen [data-ein="wisch"]:not(.da){clip-path:inset(0 100% 0 0)}
.pm-phasen [data-ein="wachsen"].vor{transform:scale(.3)}
.pm-phasen [data-ein="drehen"].vor{transform:rotate(-20deg)}
.pm-phasen [data-ein="links"].vor{transform:translateX(-4px)}
.pm-phasen [data-ein="rechts"].vor{transform:translateX(4px)}
.pm-phasen [data-ein="oben"].vor{transform:translateY(-4px)}
.pm-phasen [data-ein="pop"].vor{transform:scale(.6)}
.pm-phasen [data-ein="wisch"].vor{clip-path:inset(0 50% 0 0)}
.pm-phasen [data-ein="blende"].vor{opacity:.45}
.pm-phasen .zurueck{opacity:.38}
.pm-phasen .blass{opacity:.5}
.pm-phasen .atmet{animation:pm-atmen 3.2s ease-in-out calc(var(--ab,0s)*1.5) infinite}
.pm-phasen .pm-konstruktion > *{transform-box:fill-box;transform-origin:center;transform:rotate(-50deg) scale(.94);transition:transform 1.6s cubic-bezier(.2,.85,.25,1)}
.pm-phasen .pm-konstruktion.an > *{transform:none}
.pm-phasen .pm-konstruktion.kreist > *{animation:pm-kreisen 30s linear infinite}
.pm-phasen.fertig [data-ruhe="atmen"]{animation:pm-atmen 7s ease-in-out calc(var(--ab,0s)*2.2 + 1.8s) infinite}
.pm-phasen.fertig [data-ruhe="pendeln"]{animation:pm-pendeln 11s ease-in-out calc(var(--ab,0s) + 2s) infinite}
.pm-phasen.fertig [data-ruhe="fliessen"]{animation:pm-fliessen 6s ease-in-out .8s infinite}
.pm-phasen.fertig [data-ruhe="wehen"]{animation:pm-wehen 7s ease-in-out .6s infinite}
.pm-phasen.fertig [data-ruhe="ziehen"]{animation:pm-ziehen 5s ease-in-out calc(var(--ab,0s)*3) infinite}
.pm-kapitel[data-phasen]{min-height:84vh}
/* Sammlung (»art«: »sammlung«): je Eintrag ein Idee-Abschnitt mit Kopf, einem Kapitel und Bildern */
.pm-eintrag + .pm-eintrag{border-top:0}
.pm-eintrag.pm-eintrag-b{background:transparent}
.pm-eintrag-titel{margin-top:.9rem;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.03em;color:var(--grau);font-variation-settings:"wdth" 80,"wght" 300}
.pm-eintrag-umfang{margin-top:.8rem;color:var(--matt);font-size:.95rem}
.pm-eintrag .pm-kapitel h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2;color:var(--akzent-tief);font-variation-settings:"wdth" 88,"wght" 500}
.pm-eintrag .pm-kapitel[data-phasen]:first-of-type{min-height:70vh}
.pm-eintrag-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-bottom:1rem}
.pm-eintrag-bilder figure:only-child{grid-column:1 / -1}
.pm-eintrag-bilder .pm-foto{aspect-ratio:var(--format,4/3)}
.pm-kapitel[data-phasen]:first-of-type{min-height:76vh}
.pm-kapitel{min-height:62vh;display:flex;flex-direction:column;justify-content:center;max-width:31rem;opacity:.55;transition:opacity .6s var(--uebergang)}
.pm-kapitel:first-of-type{min-height:52vh}
.pm-kapitel.aktiv{opacity:1}
.pm-kapitel h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1;color:var(--grau);font-variation-settings:"wdth" 84,"wght" 400;letter-spacing:-.015em}
.pm-kapitel p{margin-top:1rem;color:var(--matt)}
@media(max-width:820px){
  .pm-idee-raster{grid-template-columns:1fr;gap:0}
  .pm-idee-links{top:50px;z-index:2;background:linear-gradient(var(--papier) 82%,rgb(251 251 249 / 0));padding-block:1rem 1.6rem}   /* direkt unter der Kopfleiste, sonst scheint Text durch */
  .pm-anatomie svg{max-width:190px;margin-inline:auto}
  .pm-kapitel{min-height:58vh;opacity:1}
  .pm-kapitel[data-phasen],.pm-kapitel[data-phasen]:first-of-type{min-height:74vh}
  .pm-eintrag .pm-kapitel[data-phasen]:first-of-type{min-height:62vh}
  .pm-eintrag-bilder{grid-template-columns:1fr}
}

/* ---------- Abschnitte ---------- */
.pm-abschnitt{padding-block:clamp(3.5rem,9vw,7rem)}
.pm-abschnitt > * + *{margin-top:clamp(2rem,5vw,3.5rem)}
.pm-abschnitt > .pm-blaetter-band,.pm-abschnitt > .pm-voll{margin-top:clamp(3rem,8vw,6rem)}
.pm-papier{background:var(--papier);border-top:1px solid var(--linie)}
.pm-eng{padding-top:clamp(1rem,3vw,2rem)}
.pm-abschnitt:has(> .pm-blaetter-band:last-child){padding-bottom:0}

.pm-kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.pm-kopfzeile h2{margin-top:1rem;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.03em;color:var(--grau);font-variation-settings:"wdth" 80,"wght" 300}
.pm-kopfzeile p{color:var(--matt);max-width:40ch}
@media(max-width:820px){.pm-kopfzeile{grid-template-columns:1fr}}

.pm-foto{position:relative;overflow:hidden;border-radius:4px;background:var(--hell)}
.pm-foto-innen{position:absolute;inset:-10% 0;transform:translate3d(0,calc(var(--p,0) * -28px),0);will-change:transform}
/* Nie umgesetzte Arbeiten (»konzept« im JSON): Marke oben links, gestrichelter Rahmen – damit niemand ein Konzept für ein fertiges Stück hält */
.pm-ist-konzept .pm-foto{outline:1.5px dashed var(--matt);outline-offset:6px}
.pm-konzept-marke{position:absolute;left:.8rem;top:.8rem;z-index:2;padding:.22rem .65rem;border-radius:99px;background:var(--weiss);color:var(--grau);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:"wdth" 92,"wght" 600;box-shadow:0 4px 12px -6px rgba(0,0,0,.35)}
.pm-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.pm-doppel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.8rem);align-items:end}
.pm-doppel > .pm-a{grid-column:1 / span 8}
.pm-doppel > .pm-b{grid-column:9 / span 4;padding-bottom:2.2rem}
.pm-doppel.pm-ohne-bild > .pm-b{grid-column:1 / span 7;padding-bottom:0}
.pm-b h3{font-size:1rem;color:var(--grau);font-variation-settings:"wdth" 96,"wght" 600;margin-bottom:.4rem}
.pm-b p{color:var(--matt);font-size:.98rem}
.pm-b p + p,.pm-b p + h3{margin-top:1rem}
@media(max-width:820px){.pm-doppel > .pm-a,.pm-doppel > .pm-b{grid-column:1 / -1}.pm-doppel > .pm-b{padding-bottom:0}}

/* Blätter mit eigener Tiefe auf einem Band in der hellen Akzentfarbe, optional mit Wellenkante */
.pm-blaetter-band{position:relative;background:var(--akzent-hell);padding-block:clamp(3rem,7vw,5.5rem)}
.pm-blaetter-band.pm-mit-welle{padding-bottom:0}
.pm-blaetter{position:relative;height:clamp(420px,56vw,720px);max-width:1180px;margin-inline:auto}
.pm-blatt{position:absolute;width:clamp(170px,27%,320px);
  transform:translate3d(0,calc(var(--p,0) * var(--t) * 70px),0) rotate(var(--r));will-change:transform}
.pm-blatt img{display:block;width:100%;height:auto;box-shadow:0 1px 2px rgba(20,40,45,.12),0 24px 40px -12px rgba(20,40,45,.28)}
.pm-blatt.b1{left:8%;top:14%;--t:.35;--r:-7deg}
.pm-blatt.b2{left:36%;top:3%;--t:.9;--r:2deg;z-index:2}
.pm-blatt.b3{left:63%;top:17%;--t:1.5;--r:8deg;z-index:3}
.pm-blatt figcaption{position:absolute;left:0;top:100%;white-space:nowrap}
.pm-welle-kante{display:block;width:100%;height:clamp(40px,7vw,110px);margin-top:-1px;fill:var(--akzent-hell)}
.pm-mit-welle .pm-welle-kante{position:relative;top:clamp(40px,7vw,110px);margin-top:calc(-1 * clamp(40px,7vw,110px))}
@media(max-width:640px){.pm-blatt{width:44%}.pm-blatt.b1{left:2%}.pm-blatt.b2{left:28%}.pm-blatt.b3{left:54%}.pm-blatt figcaption{display:none}}

/* Aussage: großes Zitat, daneben ein Stück, das sich beim Scrollen leicht dreht */
.pm-aussage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.pm-aussage.pm-solo{grid-template-columns:minmax(0,1fr);max-width:62rem}
.pm-aussage blockquote{font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.12;letter-spacing:-.025em;color:var(--akzent-tief);
  font-variation-settings:"wdth" 84,"wght" 300;text-wrap:balance}
.pm-aussage blockquote::before{content:"»"}.pm-aussage blockquote::after{content:"«"}
.pm-quelle{margin-top:1rem;color:var(--matt);font-size:.92rem}
.pm-schild{transform:translate3d(0,calc(var(--p,0) * 60px),0) rotate(calc(3deg + var(--p,0) * -2deg))}
.pm-schild img{display:block;width:100%;height:auto;box-shadow:0 2px 3px rgba(20,40,45,.1),0 30px 50px -18px rgba(20,40,45,.35)}
.pm-frei-schild img{box-shadow:none;filter:drop-shadow(0 24px 26px rgba(20,40,45,.25)) drop-shadow(0 4px 6px rgba(20,40,45,.12))}
@media(max-width:820px){.pm-aussage{grid-template-columns:1fr}.pm-schild{max-width:300px;justify-self:center}.pm-aussage figure{justify-self:center}}

/* Zahlen: groß und hohl, beim Erscheinen füllen sie sich und werden fett */
.pm-jubel{margin-top:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem)}
.pm-zahl{display:block;font-size:clamp(6rem,17vw,14rem);line-height:.82;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.5px var(--akzent);font-variation-settings:"wdth" 75,"wght" 200;
  transition:font-variation-settings 1.6s var(--uebergang),color 1.6s var(--uebergang),letter-spacing 1.6s var(--uebergang)}
/* fett gesetzt braucht die Open Sans Luft: die Sperrung läuft mit dem Gewicht von eng auf leicht gesperrt */
.pm-jahr.sichtbar .pm-zahl{font-variation-settings:"wdth" 80,"wght" 640;color:var(--akzent);letter-spacing:.03em}
.pm-jahr h3{margin-top:1.4rem;font-size:1.2rem;color:var(--grau);font-variation-settings:"wdth" 92,"wght" 600}
.pm-jahr p{margin-top:.6rem;color:var(--matt);max-width:40ch}
.pm-jahr img{display:block;height:clamp(110px,14vw,150px);width:auto;margin-top:1.6rem}
@media(max-width:720px){.pm-jubel{grid-template-columns:1fr}}

.pm-voll .pm-foto{border-radius:0}
@media(max-width:720px){.pm .pm-voll .pm-foto{aspect-ratio:4/3}.pm .pm-voll.pm-ganz .pm-foto{aspect-ratio:var(--format,21/9)}}
.pm-voll figcaption{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}

/* Mosaik: versetztes Raster aus Fotos und Freistellern */
.pm-alltag{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.8rem)}
.pm-alltag .x1{grid-column:1 / span 7}.pm-alltag .x1 .pm-foto{aspect-ratio:var(--format,4/3)}
.pm-alltag .x2{grid-column:8 / span 5;align-self:center}.pm-alltag .x2 .pm-foto{aspect-ratio:var(--format,4/5)}
.pm-alltag .x3{grid-column:1 / span 5;align-self:center}.pm-alltag .x3 .pm-foto{aspect-ratio:var(--format,4/5)}
.pm-alltag .x4{grid-column:6 / span 7}.pm-alltag .x4 .pm-foto{aspect-ratio:var(--format,3/2)}
/* genau zwei Bilder: Hochformat links, Querformat rechts, etwas tiefer gesetzt */
.pm-alltag .y1{grid-column:1 / span 5}.pm-alltag .y1 .pm-foto{aspect-ratio:var(--format,4/5)}
.pm-alltag .y2{grid-column:6 / span 7;margin-top:18%}.pm-alltag .y2 .pm-foto{aspect-ratio:var(--format,3/2)}
.pm-doppel > .pm-a .pm-foto{aspect-ratio:var(--format,4/3)}
.pm-voll .pm-foto{aspect-ratio:var(--format,21/9)}
.pm-frei{position:relative;background:var(--akzent-hell);border-radius:4px;aspect-ratio:4/5;display:grid;place-items:center;overflow:visible}
.pm-frei img{width:78%;height:auto;filter:drop-shadow(0 24px 26px rgba(20,40,45,.25)) drop-shadow(0 4px 6px rgba(20,40,45,.12));
  transform:translate3d(0,calc(var(--p,0) * 50px),0);will-change:transform}
.pm-frei.pm-schwebend{background:none;aspect-ratio:auto;min-height:320px}
.pm-frei.pm-schwebend img{width:auto;height:auto;max-width:min(62%,260px);max-height:min(500px,60vh);transform:translate3d(0,calc(var(--p,0) * 110px),0) rotate(calc(-12deg + var(--p,0) * 8deg))}
.pm-frei.pm-schwebend.pm-gruppe{min-height:0}
/* Freisteller ohne object-fit: Die Bildfläche entspricht dem Motiv – Safari legt den drop-shadow sonst um die ganze Fläche (10.10.2026).
   .pm-ohne-schatten: Folien und Aufkleber ohne Schatten; --y versetzt ein Teil in der Höhe */
.pm-ohne-schatten img{filter:none!important}
.pm-gruppe{display:flex;justify-content:center;align-items:flex-start;gap:6%;padding-block:1rem clamp(2.5rem,5vw,4rem)}   /* unten Luft: die Teile wandern beim Scrollen bis 70 px nach unten und dürfen die Bildunterschrift nicht verdecken */.pm-gruppe .pm-teil{display:flex;justify-content:center;width:var(--teil-b,min(34%,150px));margin-top:var(--y,0)}.pm-gruppe .pm-teil img{width:auto;height:auto;max-width:100%;max-height:min(500px,60vh);transform:translate3d(0,calc(var(--p,0) * 70px * var(--tiefe,1)),0) rotate(calc(var(--dreh,-12deg) + var(--p,0) * 8deg * var(--tiefe,1)))}
@media(max-width:820px){.pm-alltag > *{grid-column:1 / -1 !important;margin-top:0 !important}.pm-frei{aspect-ratio:1}}

/* ---------- Regal (seit 08.10.2026): Arbeiten über die Jahre in einer Reihe, für Auftritt-Projekte ----------
   Ohne JavaScript und bei »Bewegung reduzieren« eine wischbare Reihe. projekte.js setzt .pm-regal-an: Der Abschnitt wird
   (n × 50 + 100) Bildschirmhöhen hoch, die Bühne bleibt stehen, die Reihe läuft beim Scrollen vorbei. --nah (0–1) je Stück
   = Nähe zur Mitte: Das Stück in der Mitte hebt sich vom Boden, wird größer, bekommt mehr Schatten. Die Stücke stehen im
   Größenverhältnis ihrer echten Formate (--h, --format aus dem Werkzeug). */
.pm-regal-abschnitt{padding-block:0;background:var(--papier);border-block:1px solid var(--linie)}
.pm-regal{--regal-h:clamp(190px,36vh,380px);--luecke:clamp(1.8rem,4.5vw,4rem)}
.pm-regal-buehne{padding-block:clamp(3.5rem,8vw,6rem)}
.pm-regal-kopf{width:100%;display:flex;justify-content:space-between;align-items:end;gap:1.5rem}
.pm-regal-kopf h2{margin-top:.8rem;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.05;letter-spacing:-.025em;color:var(--grau);font-variation-settings:"wdth" 80,"wght" 300}
.pm-regal-zaehler{font-size:.8rem;letter-spacing:.18em;color:var(--matt);font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-regal-zaehler b{color:var(--akzent-tief);font-weight:inherit;font-variation-settings:"wdth" 100,"wght" 600}
.pm-regal:not(.pm-regal-an) .pm-regal-zaehler{display:none}   /* zählt nur mit, wenn die Reihe läuft */
.pm-regal-spur{position:relative;display:flex;align-items:flex-start;gap:var(--luecke);margin-top:clamp(2rem,5vh,3.5rem);
  padding-inline:max(1.2rem,calc(50% - 7.5rem));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:6px}
.pm-regal-spur::-webkit-scrollbar{display:none}
.pm-regal-stueck{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;scroll-snap-align:center}
.pm-regal-fach{position:relative;height:calc(1.35 * var(--regal-h));display:flex;align-items:flex-end;justify-content:center;align-self:stretch}
.pm-regal-fach::after{content:"";position:absolute;bottom:-1px;left:calc(var(--luecke) / -2);right:calc(var(--luecke) / -2);height:1px;background:var(--grau);opacity:.2}   /* Regalboden */
.pm-regal-objekt{height:calc(var(--h) * var(--regal-h));aspect-ratio:var(--format);transform-origin:50% 100%}
.pm-regal-objekt img{display:block;width:100%;height:100%;object-fit:cover;background:var(--weiss);
  box-shadow:0 1px 2px rgba(20,40,45,.14),0 18px 30px -14px rgba(20,40,45,.35)}
.pm-regal-stueck figcaption{width:15rem;max-width:72vw;margin-top:1.1rem;text-align:center;font-size:.9rem;line-height:1.4;color:var(--matt)}
.pm-regal-stueck figcaption > *{display:block}
.pm-regal-jahr{font-size:.75rem;letter-spacing:.2em;color:var(--petrol);font-variation-settings:"wdth" 88,"wght" 600}
.pm-regal-stueck figcaption b{margin-block:.2rem;color:var(--grau);font-weight:inherit;font-variation-settings:"wdth" 92,"wght" 600}
/* mit JavaScript: Bühne steht, Reihe läuft */
.pm-regal-an{height:calc(var(--n) * 50vh + 100vh)}
.pm-regal-an .pm-regal-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:clamp(4.5rem,10vh,6.5rem) clamp(1.5rem,4vh,3rem)}
.pm-regal-an .pm-regal-spur{align-self:flex-start;width:max-content;overflow:visible;scroll-snap-type:none;padding-inline:0;will-change:transform}
.pm-regal-an .pm-regal-objekt{transform:translateY(calc(var(--nah,0) * -16px)) scale(calc(.84 + var(--nah,0) * .16))}
.pm-regal-an .pm-regal-objekt img{box-shadow:0 1px 2px rgba(20,40,45,.14),0 calc(10px + var(--nah,0) * 24px) calc(22px + var(--nah,0) * 26px) -14px rgba(20,40,45,calc(.22 + var(--nah,0) * .2))}
.pm-regal-an .pm-regal-stueck figcaption{opacity:calc(.22 + var(--nah,0) * .78)}
.pm-regal-an .pm-regal-stueck.aktiv .pm-regal-jahr{color:var(--akzent-tief)}
@media(max-width:820px){
  .pm-regal{--regal-h:clamp(140px,31svh,270px)}
  .pm-regal-stueck figcaption{width:12.5rem;font-size:.85rem}
}

/* ---------- Nachspann ---------- */
.pm-schluss{padding-top:0}
.pm-nachspann{border-top:1px solid var(--grau);padding-top:1.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.pm-nachspann ul{list-style:none;margin-top:.5rem}
.pm-nachspann li{padding-block:.35rem;border-bottom:1px solid var(--linie);font-size:.95rem}
.pm-nachspann p{margin-top:.5rem;font-size:.95rem;color:var(--matt)}
.pm-nachspann > div:last-child{grid-column:-2}
.pm-weiter{display:block;margin-top:.6rem;font-size:1.5rem;line-height:1.15;color:var(--grau);font-variation-settings:"wdth" 88,"wght" 400;transition:font-variation-settings .35s var(--uebergang)}
.pm-weiter::after{content:" ›";color:var(--orange)}
.pm-weiter:hover{text-decoration:none;font-variation-settings:"wdth" 100,"wght" 500}
@media(max-width:820px){.pm-nachspann{grid-template-columns:1fr}.pm-nachspann > div:last-child{grid-column:auto}}

/* ---------- Auftritt beim Hereinscrollen (projekte.js setzt .sichtbar; ohne JavaScript bleibt alles sichtbar) ---------- */
.pm-js .pm [data-auf]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--uebergang),transform 1s var(--uebergang)}
.pm-js .pm [data-auf].sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pm-bau [data-ein]{animation:none!important}
  .pm-js .pm [data-auf]{opacity:1;transform:none}
  .pm-foto-innen,.pm-blatt,.pm-schild,.pm-frei img,.pm-teil img{transform:none!important}
  .pm-blatt{rotate:var(--r)}
  .pm-kapitel{opacity:1}
  .pm-zahl{transition:none}
  .pm-anatomie [data-teil]{transition:none}
  .pm-bau [data-ruhe],.pm-phasen [data-phase],.pm-phasen [data-nur],.pm-phasen *{transition:none!important;animation:none!important}
}
@media print{
  .pm [data-auf]{opacity:1!important;transform:none!important}
  .pm-idee-links{position:static}
  .pm-phasen [data-phase]{opacity:1!important;transform:none!important;clip-path:none!important}
  .pm [data-nur]{opacity:0!important}
  .pm-kapitel{min-height:0;opacity:1;margin-bottom:1.5rem}
  .pm-blaetter{height:auto;display:flex;gap:1rem}.pm-blatt{position:static;transform:none;width:30%}
  .pm-regal{height:auto!important}.pm-regal-buehne{position:static!important;height:auto!important}
  .pm-regal-spur{flex-wrap:wrap;overflow:visible;padding-inline:0;transform:none!important;width:auto!important}
  .pm-regal-objekt{transform:none!important}.pm-regal-stueck figcaption{opacity:1!important}
}