/* Pinnwand als Startseite von visuellweb.de (16.10.2026, PLAN-2026-10-pinnwand.md). Übernommen aus prototyp/style.css
   (nj-hoffmann.de), alle Klassen mit Präfix pw-, Farben nur über die Farbrollen aus stil.css (Weiß und Silber, Schwarz,
   Kobalt als Akzent, nie als große Fläche, auf Kobalt Weiß), Schriften Playfair Display und Cabin.
   Ruhige Fassung: Klasse pw-ruhig am <html> (prefers-reduced-motion oder ?ruhig, gesetzt von js/pinnwand-frueh.js). */

.pw {
  --pw-rand: clamp(16px, 4.2vw, 64px);
  --pw-blatt: clamp(22px, 2.8vw, 42px);
  --pw-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --pw-weich: cubic-bezier(0.3, 1, 0.3, 1);
  --pw-ein: cubic-bezier(0.76, 0, 0.24, 1);
  --pw-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --pw-kipp: linear(0, 0.42 10%, 0.86 22%, 1.03 34%, 1.02 46%, 1);
}
.pw :where(p, h1, h2, h3, ul, ol, dl, dd, figure) { margin: 0; }
.pw :where(ul, ol) { list-style: none; padding: 0; }
.pw :where(img, svg, video) { display: block; max-width: 100%; }
.pw :where(a) { color: inherit; text-decoration: none; }
.pw :where(button, select) { font: inherit; color: inherit; }
.pw-oberzeile { font: 600 15px/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.pw-titel { font: 400 clamp(40px, 5.4vw, 80px)/1.02 var(--schrift-kopf); letter-spacing: -.015em; }

/* Wörter kippen hoch (A-101), Buchstabenwirbel beim Überfahren (A-109) */
.pw-kippwort .pw-wort { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .04em .12em; margin: -.08em -.04em -.12em; }
.pw-kippwort .pw-wort > span { display: inline-block; transform: translateY(120%) rotate(6deg); transform-origin: left bottom; transition: transform 1s var(--pw-kipp); transition-delay: calc(var(--i) * 50ms); }
.pw-kippwort.ist-da .pw-wort > span { transform: none; }

/* Blätter, die sich überlappen (D-020) */
.pw-blatt { position: relative; z-index: 2; margin-top: calc(var(--pw-blatt) * -1); border-radius: var(--pw-blatt) var(--pw-blatt) 0 0; }

/* Fortschritt oben */
.pw-fortschritt { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 3px; background: var(--akzent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------------- Intro-Ebene (Augen-Intro der Schale, js/intro-auge.js) ----------------
   Nur sichtbar, solange <html> intro-laeuft trägt, danach blendet js/pinnwand.js sie aus (ist-aus) und entfernt sie.
   Fenster und Name stehen mittig; die Linie am Nachnamen, Handy, Bildzeile und Punkte der Diashow entfallen hier. */
.pw-intro { display: none; }
html.intro-laeuft .pw-intro, .pw-intro.ist-aus { position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: calc(var(--kopf-hoehe) + 8px) 16px 24px; background: var(--dominant); overflow: hidden; }
.pw-intro.ist-aus { pointer-events: none; }
.pw-intro.ist-weg { opacity: 0; transition: opacity .35s ease; }
.pw-intro__text { text-align: center; }
.pw-intro .titel__name { display: inline-block; text-align: left; }
.pw-intro .titel__nachname::after { display: none; }
.pw-intro .titel__fach { margin-top: 8px; }
.pw-intro .hero__satz { display: none; }
.pw-intro .diashow { width: min(64vw, 760px, calc((100svh - 330px) * 1.5)); min-width: min(300px, 92vw); padding: 0; }
.pw-intro .diashow__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "buehne"; }
.pw-intro .handy-ort, .pw-intro .bildzeile, .pw-intro .steuerung { display: none; }
@media (max-width: 1023px) { .pw-intro .diashow { width: min(92vw, 640px); } }
html.intro-laeuft .pw-globus-dreh, html.intro-laeuft .pw-kompass { animation-play-state: paused; }

/* ---------------- Hero ---------------- */
.pw-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--dominant-tief); color: var(--sekundaer); }
.pw-hero__foto { position: absolute; top: -6%; left: -2%; width: 104%; height: 106%; max-width: none; object-fit: cover; object-position: 50% 28%; will-change: transform; transition: translate 1.2s var(--pw-aus); }
.pw-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .5) 0%, rgb(255 255 255 / 0) 24%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .6) 100%); }
.pw-hero__abzeichen { position: absolute; z-index: 4; left: 0; top: 47%; display: flex; align-items: center; gap: 26px; padding: 22px 22px 22px 30px;
  background: var(--sekundaer); color: var(--dominant); border-radius: 0 999px 999px 0; transition: translate 1s var(--pw-aus); }
.pw-hero__titel { font: 400 clamp(20px, 1.6vw, 24px)/1.22 var(--schrift-text); letter-spacing: 0; }
.pw-hero__globus { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sekundaer-linie); color: var(--dominant); }
.pw-hero__globus svg { width: 34px; height: 34px; }
.pw-globus-dreh { transform-origin: 20px 20px; animation: pw-globus 5s linear infinite; }
@keyframes pw-globus { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.pw-hero__rolle { position: absolute; z-index: 4; right: var(--pw-rand); top: 42%; font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--schrift-kopf); transition: translate 1s var(--pw-aus);
  background: rgb(255 255 255 / .72); padding: 14px 18px; border-radius: 14px; }
.pw-hero__pfeil { width: 24px; height: 24px; margin-bottom: clamp(14px, 2vw, 28px); }
.pw-laufband { position: absolute; z-index: 4; left: 0; right: 0; bottom: 3.5vh; overflow: hidden; pointer-events: none; }
.pw-laufband__spur { display: flex; width: max-content; will-change: transform; }
.pw-laufband__spur span { font: 400 clamp(88px, 15.5vw, 240px)/1 var(--schrift-kopf); letter-spacing: -.02em; padding-right: .25em; white-space: nowrap; }

/* Sprungleiste: Kapseln wie bei Fair for Fitness, fest unter der Kopfleiste; versteckt sich die Kopfleiste, rückt sie hoch */
.pw-sprung { position: fixed; z-index: 45; top: calc(var(--kopf-hoehe) + 6px); left: 50%; translate: -50% 0; max-width: calc(100vw - 2 * var(--pw-rand)); transition: transform .45s var(--kurve), opacity .45s var(--kurve), visibility 0s linear .45s;
  opacity: 0; visibility: hidden; }
/* erst nach dem Hero (Kopfleiste fest): der erste Bildschirm behält eine Haupthandlung (L-053, P20) */
.kopf[data-fest] ~ main .pw-sprung { opacity: 1; visibility: visible; transition: transform .45s var(--kurve), opacity .45s var(--kurve), visibility 0s; }
.kopf[data-fest][data-richtung="runter"]:not(:focus-within):not([data-menue-offen]) ~ main .pw-sprung { transform: translateY(calc(var(--kopf-luft) - var(--kopf-hoehe))); }
.pw-sprung__liste { position: relative; display: flex; gap: 8px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; transition: background .6s ease, box-shadow .6s ease; }
.pw-sprung__liste::-webkit-scrollbar { display: none; }
.pw-sprung__blase { position: absolute; top: 6px; bottom: 6px; left: 0; width: 100%; border-radius: 999px; background: var(--sekundaer); opacity: 0; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .55s var(--pw-aus), opacity .35s ease; pointer-events: none; }
.pw-sprung__blase.ist-an { opacity: 1; }
.pw-kapsel { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; font: 600 16px/1.2 var(--schrift-text); white-space: nowrap;
  background: rgb(255 255 255 / .86); border: 1px solid var(--linie); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.pw-kapsel.ist-ueber { background: transparent; border-color: transparent; color: var(--dominant); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pw-kapsel.ist-aktiv { background: var(--sekundaer); color: var(--dominant); border-color: var(--sekundaer); box-shadow: 0 0 0 3px rgb(69 92 233 / .45); }
.pw-sprung.ist-schwebend .pw-sprung__liste { background: rgb(17 18 20 / .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px rgb(17 18 20 / .55); }
.pw-sprung.ist-schwebend .pw-kapsel { background: transparent; border-color: var(--sekundaer-linie); color: var(--dominant); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pw-sprung.ist-schwebend .pw-kapsel.ist-aktiv { background: var(--dominant); color: var(--sekundaer); border-color: var(--dominant); }
.pw-sprung.ist-schwebend .pw-sprung__blase { background: var(--akzent); }
.pw-sprung.ist-schwebend :focus-visible { outline-color: var(--dominant); }
.pw-sprung__punkt { position: absolute; left: 0; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--akzent); pointer-events: none; transition: translate .6s var(--pw-weich), opacity .3s; opacity: 0; }
.pw-sprung.ist-schwebend .pw-sprung__punkt { background: var(--akzent-hell); bottom: -1px; }
.pw-sprung__punkt.ist-an { opacity: 1; }

/* ---------------- Reel ---------------- */
.pw-reel { height: clamp(460px, 80vh, 780px); overflow: hidden; background: var(--sekundaer); color: var(--dominant); }
.pw-reel__ring { position: absolute; border-radius: 50%; border: 1px solid var(--sekundaer-linie); will-change: transform; pointer-events: none; }
.pw-reel__ring--a { width: 22vw; height: 22vw; min-width: 160px; min-height: 160px; left: 6%; top: 12%; border-color: var(--leise); animation: pw-drift1 16s ease-in-out infinite alternate; }
.pw-reel__ring--b { width: 12vw; height: 12vw; min-width: 90px; min-height: 90px; right: 12%; top: 8%; border: 2px solid var(--akzent); animation: pw-drift2 13s ease-in-out infinite alternate; }
.pw-reel__ring--c { width: 7vw; height: 7vw; min-width: 56px; min-height: 56px; left: 44%; bottom: 10%; border-color: var(--leise-hell); animation: pw-drift3 11s ease-in-out infinite alternate; }
@keyframes pw-drift1 { to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes pw-drift2 { to { transform: translate(-10vw, 14vh) scale(.85); } }
@keyframes pw-drift3 { to { transform: translate(-6vw, -18vh) scale(1.3); } }
.pw-reel__licht { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 320px at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .1), transparent 70%); opacity: 0; transition: opacity .5s; }
@media (hover: hover) and (pointer: fine) { .pw-reel:hover .pw-reel__licht { opacity: 1; } }
.pw-datenzeile { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px var(--rand-schmal) 18px;
  border-bottom: 1px solid var(--sekundaer-linie); color: var(--leise-hell); font: 400 14px/1.4 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pw-datenzeile__etikett { margin-right: 6px; }
.pw-datenzeile__mitte { text-align: center; color: var(--dominant); }
.pw-datenzeile__wort { display: inline-block; min-width: 17ch; text-align: left; color: var(--akzent-hell); font-weight: 600; }
.pw-datenzeile__ort { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pw-kompass { width: 18px; height: 18px; animation: pw-kompass 2.4s ease-in-out infinite; }
@keyframes pw-kompass { 0% { transform: rotate(0); } 75%, 100% { transform: rotate(360deg); } }
.pw-fenster { position: absolute; display: block; background: var(--dominant-hell); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); will-change: transform; cursor: pointer; color: var(--sekundaer); }
.pw-fenster__leiste { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--dominant-tief); font: 400 13px/1 var(--schrift-text); color: var(--leise); }
.pw-fenster__leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .pw-fenster:hover .pw-fenster__leiste i:nth-child(1) { background: var(--akzent); } }
@media (hover: hover) and (pointer: fine) { .pw-fenster:hover .pw-fenster__leiste i:nth-child(2) { background: var(--leise); } }
@media (hover: hover) and (pointer: fine) { .pw-fenster:hover .pw-fenster__leiste i:nth-child(3) { background: var(--sekundaer); } }
.pw-fenster__leiste > span { margin-left: 10px; }
.pw-fenster__los { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--sekundaer); color: var(--dominant); font: 600 12px/1 var(--schrift-text); opacity: 0; transform: translateX(8px); transition: opacity .3s ease, transform .5s var(--pw-weich); }
.pw-fenster:focus-visible .pw-fenster__los { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .pw-fenster:hover .pw-fenster__los { opacity: 1; transform: none; } }
@media (hover: none) { .pw-fenster__los { opacity: 1; transform: none; } }
.pw-fenster__schirm { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dominant-tief); }
.pw-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.08); transition: opacity .9s ease; }
.pw-bild.ist-an { opacity: 1; animation: pw-schwenk 6s linear forwards; }
@keyframes pw-schwenk { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.08) translateY(-3.5%); } }
.pw-fenster--a { width: min(46vw, 700px); left: 8%; top: 18%; --r: -5deg; transform: rotate(var(--r)); }
.pw-fenster--b { width: min(34vw, 520px); right: 7%; top: 32%; --r: 6deg; transform: rotate(var(--r)); }
.pw-fenster--c { width: min(24vw, 360px); left: 44%; top: 60%; --r: -10deg; transform: rotate(var(--r)); }
.pw-reel__hinweis { position: absolute; z-index: 4; left: var(--pw-rand); bottom: 22px; font: 400 16px/1.3 var(--schrift-text); color: var(--leise-hell); }

/* ---------------- Bühne Website Design ---------------- */
.pw-buehne { height: 400vh; overflow: clip; background: var(--dominant-hauch); color: var(--sekundaer); }
.pw-buehne__marken { position: absolute; inset: 0; pointer-events: none; }
.pw-buehne__marke { position: absolute; left: 0; top: 0; width: 1px; height: 100vh; height: 100svh; }
.pw-buehne__klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--kopf-hoehe) + 72px) var(--pw-rand) 28px; }
.pw-buehne__kopf { display: flex; justify-content: space-between; align-items: center; font: 600 15px/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; }
.pw-buehne__etikett { display: flex; align-items: center; gap: 10px; }
.pw-buehne__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.pw-buehne__folien { position: relative; flex: 1; }
.pw-folie { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); align-items: center; gap: clamp(24px, 4vw, 70px); }
.pw-folie__oberzeile { font: 600 15px/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 14px; }
.pw-folie__titel { font: 400 clamp(38px, 4.6vw, 72px)/1 var(--schrift-kopf); letter-spacing: -.015em; overflow: hidden; padding: .06em 0 .12em; margin-bottom: 18px; }
.pw-kipp { display: inline-block; transform: translateY(110%) rotate(12deg); transform-origin: left bottom; transition: transform 1.1s var(--pw-expo); }
.pw-folie.ist-aktiv .pw-kipp { transform: none; }
.pw-folie__satz { max-width: 40ch; margin-bottom: 18px; font: 400 18px/1.5 var(--schrift-text); }
.pw-geraet { position: relative; display: grid; place-items: center; height: 100%; }
.pw-arten { display: grid; margin-bottom: 22px; max-width: 480px; border-top: 1px solid var(--linie); }
.pw-arten li { border-bottom: 1px solid var(--linie); }
.pw-arten__zeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 9px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pw-arten__zeile::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--akzent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.pw-arten__marke { font: 600 14px/1 var(--schrift-text); color: var(--leise); transition: color .3s; }
.pw-arten__name { font: 700 clamp(17px, 1.35vw, 20px)/1.25 var(--schrift-kopf); transition: transform .6s var(--pw-weich); }
.pw-arten__bsp { font: 400 15px/1.3 var(--schrift-text); color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .pw-arten__zeile:hover .pw-arten__name { transform: translateX(6px); } }
.pw-arten__zeile.ist-an .pw-arten__name { transform: translateX(10px); }
.pw-arten__zeile.ist-an .pw-arten__marke { color: var(--akzent-tief); }
.pw-arten__zeile.ist-an .pw-arten__bsp { color: var(--sekundaer); }
@media (min-width: 901px) and (max-height: 820px) { .pw-arten__zeile { padding: 4px 0; } .pw-arten { margin-bottom: 14px; } .pw-folie__satz { margin-bottom: 12px; } }
.pw-buehne__fortschritt { height: 2px; background: var(--linie); margin-top: 18px; }
.pw-buehne__fortschritt i { display: block; height: 100%; background: var(--akzent); transform-origin: left; transform: scaleX(0); }

/* Knopf mit Pfeilscheibe (A-315, A-319) */
.pw-los { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border: 1.5px solid currentColor; border-radius: 999px; background: none; font: 600 17px/1.2 var(--schrift-text); cursor: pointer; }
.pw-los__scheibe { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--akzent); overflow: hidden; transform: rotate(-45deg); transition: transform .2s cubic-bezier(.9, 0, .1, 1), translate .3s cubic-bezier(.6, 0, .1, 1); }
.pw-los__scheibe i { position: absolute; inset: 0; background: no-repeat center / 46% url("/assets/pfeil-weiss.svg"); transition: transform .5s cubic-bezier(.6, 0, .1, 1); }
.pw-los__scheibe i:nth-child(2) { transform: translateX(-150%); }
.pw-los__scheibe i:nth-child(3) { transform: translateX(-300%); }
@media (hover: hover) and (pointer: fine) { .pw-los:hover .pw-los__scheibe { transform: rotate(0); } }
@media (hover: hover) and (pointer: fine) { .pw-los:hover .pw-los__scheibe i:nth-child(1) { transform: translateX(150%); } }
@media (hover: hover) and (pointer: fine) { .pw-los:hover .pw-los__scheibe i:nth-child(2) { transform: translateX(0); } }
@media (hover: hover) and (pointer: fine) { .pw-los:hover .pw-los__scheibe i:nth-child(3) { transform: translateX(-150%); } }
.pw-los[data-stand="rein"] .pw-los__scheibe { translate: 12% 0; }
.pw-los[data-stand="raus"] .pw-los__scheibe i:nth-child(1) { transform: translateX(300%); }
.pw-los[data-stand="raus"] .pw-los__scheibe i:nth-child(2) { transform: translateX(150%); }
.pw-los[data-stand="raus"] .pw-los__scheibe i:nth-child(3) { transform: translateX(0); }
.pw-los[data-stand="null"] .pw-los__scheibe i { transition: none; }
.pw-los--hell { background: var(--dominant); color: var(--sekundaer); border-color: var(--dominant); }

/* Laptop und Handys (D-008, D-009) aus CSS */
.pw-laptop { position: relative; width: min(88%, 96vh, 720px); }
.pw-laptop__deckel { position: relative; aspect-ratio: 16 / 10.2; padding: 2.1%; background: var(--sekundaer); border-radius: 16px 16px 4px 4px; box-shadow: inset 0 0 0 1.5px var(--sekundaer-linie); }
.pw-laptop__deckel::before { content: ""; position: absolute; left: 50%; top: .9%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--sekundaer-linie); }
.pw-laptop__schirm { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: var(--sekundaer); }
.pw-laptop__fuss { position: relative; width: 116%; margin-left: -8%; height: 16px; background: linear-gradient(var(--dominant-tief), var(--leise-hell) 70%, var(--leise)); border-radius: 2px 2px 14px 14px / 2px 2px 100% 100%; box-shadow: 0 30px 40px -24px rgb(0 0 0 / .55); }
.pw-laptop__fuss::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 45%; margin-left: -8%; background: var(--leise-hell); border-radius: 0 0 10px 10px; }
.pw-laptop__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--dominant); }
.pw-ansicht { position: absolute; inset: 0; overflow: hidden; background: var(--dominant); clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--pw-expo); }
.pw-ansicht.war-an { z-index: 1; clip-path: inset(0); transition: none; }
.pw-ansicht.ist-an { z-index: 2; clip-path: inset(0); }
.pw-ki { position: absolute; z-index: 3; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: var(--sekundaer); color: var(--dominant); font: 600 12px/1.3 var(--schrift-text); }
.pw-handys { position: absolute; z-index: 2; right: -2%; bottom: 2%; display: flex; gap: 12px; align-items: flex-end; }
.pw-handy { width: clamp(92px, 9.6vw, 150px); aspect-ratio: 9 / 19; padding: 4px; background: var(--sekundaer); border-radius: 18px; box-shadow: 0 24px 40px -20px rgb(0 0 0 / .6), inset 0 0 0 1px var(--sekundaer-linie); will-change: transform; }
.pw-handy__schirm { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: var(--dominant); }
.pw-handy__schirm > [data-ansicht] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: translateY(10%); transition: opacity .5s ease, transform .9s var(--pw-weich); }
.pw-handy__schirm > [data-ansicht].ist-an { opacity: 1; transform: none; transition-delay: .15s; }
.pw-adresse { position: absolute; left: 6%; bottom: 3%; z-index: 3; display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--sekundaer); color: var(--dominant); font: 400 15px/1.2 var(--schrift-text); transition: transform .5s var(--pw-weich), background .3s, scale 160ms cubic-bezier(.16, 1, .3, 1); }
.pw-adresse__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-hell); }
.pw-adresse__pfeil { display: inline-block; transition: transform .45s var(--pw-weich); }
@media (hover: hover) and (pointer: fine) { .pw-adresse:hover { background: var(--akzent); } }
@media (hover: hover) and (pointer: fine) { .pw-adresse:hover .pw-adresse__pfeil { transform: translate(2px, -2px); } }

/* Anhalten der Bildschirmaufnahmen (WCAG 2.2.2, Schleifen über 5 s) */
.pw-pause { position: absolute; z-index: 3; right: 6%; top: 2%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid var(--linie);
  border-radius: 999px; background: var(--dominant); color: var(--sekundaer); font: 600 15px/1 var(--schrift-text); cursor: pointer; transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .pw-pause:hover { background: var(--dominant-hell); } }
.pw-pause svg { width: 14px; height: 14px; fill: var(--akzent-tief); }
.pw-pause__weiter, .pw-pause[aria-pressed="true"] .pw-pause__halt { display: none; }
.pw-pause[aria-pressed="true"] .pw-pause__weiter { display: block; }
.pw-ruhig .pw-pause { display: none; }

/* ---------------- Arbeiten ---------------- */
.pw-arbeiten { padding: clamp(72px, 8vw, 110px) var(--pw-rand) clamp(40px, 5vw, 72px); background: var(--dominant); }
.pw-satz { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3em; width: fit-content; max-width: 100%; margin: 0 auto clamp(36px, 5vw, 64px);
  padding: 16px 26px; background: var(--dominant-hauch); border-radius: 10px; font: 400 clamp(26px, 3vw, 40px)/1.3 var(--schrift-kopf); letter-spacing: -.01em; }
.pw-satz__wahl { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pw-satz__wahl select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0 20px 2px 0; border-bottom: 2px solid var(--akzent); border-radius: 0; font-weight: 700; max-width: 100%; }
.pw-satz__wahl svg { position: absolute; right: 0; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none; }
.pw-raster { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.4vw, 50px) clamp(16px, 2.4vw, 36px); max-width: 1500px; margin: 0 auto; }
.pw-kachel { display: block; transition: opacity .45s var(--pw-ein), transform .45s var(--pw-ein); }
.pw-kachel.ist-raus { opacity: 0; transform: scale(.96); pointer-events: none; }
.pw-kachel.ist-weg { display: none; }
.pw-kachel--breit, .pw-kachel--offen { grid-column: 1 / -1; }
.pw-kachel--halb { grid-column: auto; }
.pw-kachel__buehne { position: relative; display: block; }
.pw-kachel__geist { position: absolute; inset: 0; border: 1px solid var(--sekundaer); border-radius: 10px; opacity: 0; transition: opacity .4s cubic-bezier(.75, 0, .25, 1); pointer-events: none; }
.pw-kachel__bild { position: relative; overflow: hidden; border-radius: 10px; background: var(--dominant-hauch); aspect-ratio: 4 / 3; display: grid; place-items: center;
  clip-path: inset(100% 0 0 0 round 10px); transition: clip-path 1.2s var(--pw-ein), transform .4s cubic-bezier(.75, 0, .25, 1), box-shadow .4s; }
.pw-kachel.ist-gesehen .pw-kachel__bild { clip-path: inset(0 0 0 0 round 10px); }
@media (hover: hover) and (pointer: fine) { .pw-kachel:hover .pw-kachel__bild { transform: translate(12px, -12px); box-shadow: 0 0 0 1px var(--sekundaer); } }
@media (hover: hover) and (pointer: fine) { .pw-kachel:hover .pw-kachel__geist { opacity: 1; } }
.pw-kachel--breit .pw-kachel__bild { aspect-ratio: 16 / 7; }
.pw-kachel__bild img { width: 86%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -30px rgb(17 18 20 / .45); scale: 1.25; transition: scale 1.4s var(--pw-aus); }
.pw-kachel.ist-gesehen .pw-kachel__bild img { scale: 1; }
.pw-kachel--breit .pw-kachel__bild img { width: 64%; }
.pw-kachel__pillen { position: absolute; z-index: 2; left: 14px; top: 14px; display: flex; gap: 6px; }
.pw-kachel__pillen span { padding: 4px 10px; border-radius: 6px; background: var(--dominant); color: var(--sekundaer); font: 600 12px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--linie); }
.pw-kachel__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 2px 0; }
.pw-kachel__name { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--schrift-kopf); letter-spacing: -.01em; }
.pw-kachel__art { color: var(--leise); font: 400 16px/1.4 var(--schrift-text); text-align: right; }
.pw-kachel__bild--offen { border: 1.5px dashed var(--leise-hell); background: var(--dominant-hell); }
.pw-kachel__bild--offen > span:last-child { font: 400 clamp(26px, 3vw, 42px)/1.1 var(--schrift-kopf); color: var(--leise); transition: color .3s, letter-spacing .6s var(--pw-aus); }
@media (hover: hover) and (pointer: fine) { .pw-kachel--offen:hover .pw-kachel__bild--offen > span:last-child { color: var(--sekundaer); letter-spacing: .04em; } }

/* ---------------- Über mich ---------------- */
.pw-ueber { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(30px, 6vw, 110px); padding: clamp(48px, 6vw, 90px) var(--pw-rand) clamp(48px, 6vw, 90px); max-width: 1500px; margin: 0 auto; scroll-margin-top: 150px; }
.pw-ueber__haupt .pw-oberzeile { margin-bottom: 20px; }
.pw-kritzel { display: block; width: clamp(160px, 20vw, 300px); margin: 0 0 18px; color: var(--akzent); }
.pw-kritzel path { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); transition: stroke-dashoffset 2s var(--pw-aus); }
.pw-kritzel.ist-da path { stroke-dashoffset: 0; }
.pw-ueber__gross { font: 400 clamp(28px, 3.2vw, 46px)/1.22 var(--schrift-kopf); letter-spacing: -.01em; }
.pw-faerben .pw-w { color: var(--leise-hell); transition: color .25s linear; }
.pw-faerben .pw-w.ist-hell { color: var(--sekundaer); }
.pw-maske { display: grid; }
.pw-maske > * { grid-area: 1 / 1; }
.pw-maske__ebene { margin: -150px -40px; padding: 150px 40px; pointer-events: none; background: var(--sekundaer); color: var(--dominant);
  -webkit-mask-image: radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%), #000 98%, transparent 100%); mask-image: radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%), #000 98%, transparent 100%); }
.pw-ueber__seite { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding-top: 50px; }
.pw-ueber__seite p { max-width: 34ch; color: var(--leise); font: 400 18px/1.55 var(--schrift-text); }
.pw-ueber__verweis a { color: var(--akzent-tief); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Runde Knöpfe und Pillen */
.pw-rund { position: relative; display: grid; place-items: center; width: clamp(150px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; color: var(--dominant); text-align: center; font: 600 17px/1.2 var(--schrift-text); }
.pw-rund--dunkel { background: var(--sekundaer); }
.pw-rund--akzent { background: var(--akzent); }
.pw-rund__fuellung, .pw-pille__fuellung { position: absolute; left: -10%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: var(--akzent-tief); top: 100%; transition: top .6s var(--pw-ein); }
.pw-rund--dunkel .pw-rund__fuellung { background: var(--akzent); }
.pw-rund:focus-visible .pw-rund__fuellung { top: -10%; }
@media (hover: hover) and (pointer: fine) { .pw-rund:hover .pw-rund__fuellung { top: -10%; } }
.pw-rund__text, .pw-pille__text { position: relative; }
.pw-pille { position: relative; display: inline-flex; align-items: center; overflow: hidden; min-height: 44px; padding: 20px 32px; border-radius: 999px; border: 1px solid var(--sekundaer-linie); background: none; color: var(--dominant); cursor: pointer; font: 400 17px/1.2 var(--schrift-text); }
.pw-pille__fuellung { aspect-ratio: auto; height: 300%; top: 110%; background: var(--akzent); }
.pw-pille:focus-visible .pw-pille__fuellung { top: -100%; }
@media (hover: hover) and (pointer: fine) { .pw-pille:hover .pw-pille__fuellung { top: -100%; } }

/* So arbeite ich: gestapelte Karten */
.pw-stapel { max-width: 1300px; margin: 0 auto; padding: 0 var(--pw-rand) clamp(48px, 6vw, 90px); }
.pw-stapel__karte { position: sticky; top: calc(var(--kopf-hoehe) + 70px + var(--i) * 26px); display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 80px); align-items: end; min-height: clamp(280px, 46vh, 420px);
  margin-bottom: 8vh; padding: clamp(28px, 4vw, 60px); border-radius: 22px; transform-origin: center top; transform: scale(calc(1 - var(--p, 0) * .07)); will-change: transform; }
.pw-stapel__karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--p, 0) * .25); pointer-events: none; }
.pw-stapel__karte:last-child { margin-bottom: 0; }
.pw-stapel__karte--1 { background: var(--dominant-hauch); }
.pw-stapel__karte--2 { background: var(--sekundaer); color: var(--dominant); }
.pw-stapel__karte--3 { background: var(--dominant-tief); box-shadow: inset 0 -8px 0 var(--akzent); }
.pw-stapel__zeichen { display: grid; place-items: center; width: clamp(96px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; }
.pw-stapel__zeichen svg { width: 52%; }
.pw-stapel__karte--2 .pw-stapel__zeichen { color: var(--akzent-hell); }
.pw-stapel__karte--1 .pw-stapel__zeichen, .pw-stapel__karte--3 .pw-stapel__zeichen { color: var(--akzent-tief); }
.pw-stapel__karte h3 { font: 400 clamp(34px, 4vw, 54px)/1.1 var(--schrift-kopf); letter-spacing: -.02em; margin-bottom: 12px; }
.pw-stapel__karte p { max-width: 42ch; font: 400 18px/1.55 var(--schrift-text); }

/* Pinnwand zum Anfassen */
.pw-brett { padding: clamp(24px, 4vw, 60px) var(--pw-rand) clamp(72px, 8vw, 110px); max-width: 1500px; margin: 0 auto; }
.pw-brett__kopf { display: flex; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 32px; }
.pw-brett__kopf .pw-oberzeile { width: 100%; }
.pw-brett__unter { color: var(--leise); padding-bottom: 10px; font: 400 18px/1.5 var(--schrift-text); }
.pw-brett__flaeche { position: relative; height: clamp(520px, 70vh, 700px); border-radius: 18px; background: var(--dominant-tief); box-shadow: inset 0 0 0 10px var(--leise-hell), inset 0 0 40px rgb(17 18 20 / .14); overflow: hidden; touch-action: pan-y; }
.pw-zettel { position: absolute; left: var(--x); top: var(--y); width: clamp(150px, 16vw, 220px); padding: 14px 14px 16px; background: var(--dominant); border-radius: 3px; box-shadow: 0 14px 26px -12px rgb(17 18 20 / .45);
  transform: rotate(var(--r)); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.pw-zettel.ist-gezogen { cursor: grabbing; box-shadow: 0 34px 50px -18px rgb(17 18 20 / .5); }
.pw-zettel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 2px; pointer-events: none; }
.pw-zettel--foto img { aspect-ratio: 3 / 4; object-position: 55% 22%; }
.pw-zettel span { display: block; margin-top: 10px; font: 400 15px/1.3 var(--schrift-text); color: var(--leise); }
.pw-zettel p { font: 400 clamp(19px, 1.6vw, 23px)/1.2 var(--schrift-kopf); min-height: 5.5em; display: flex; align-items: flex-end; }
.pw-zettel--silber { background: var(--dominant-hauch); }
.pw-zettel--kobalt { background: var(--dominant); color: var(--akzent-tief); box-shadow: inset 0 6px 0 var(--akzent), 0 14px 26px -12px rgb(17 18 20 / .45); }
.pw-zettel--dunkel { background: var(--sekundaer); color: var(--dominant); }
.pw-nadel { position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--akzent); box-shadow: inset 0 0 0 3px var(--akzent-tief), 0 3px 4px rgb(0 0 0 / .35); }

/* Abschluss „Lassen Sie uns zusammenarbeiten“ */
.pw-schluss { position: relative; z-index: 2; background: var(--sekundaer); color: var(--dominant); padding: clamp(72px, 9vw, 120px) var(--pw-rand) clamp(40px, 5vw, 64px); overflow: hidden; border-radius: var(--pw-blatt) var(--pw-blatt) 0 0; scroll-margin-top: 80px; }
.pw-schluss__innen { will-change: transform; }
.pw-schluss__kopf { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); max-width: 1300px; margin: 0 auto; }
.pw-schluss__bild { flex-shrink: 0; width: clamp(70px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--dominant-tief); }
.pw-schluss__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pw-schluss__titel { font: 400 clamp(46px, 6.4vw, 96px)/1.02 var(--schrift-kopf); letter-spacing: -.015em; max-width: 12ch; }
.pw-schluss__linie { position: relative; max-width: 1300px; margin: clamp(56px, 7vw, 100px) auto clamp(56px, 6vw, 84px); height: 1px; background: var(--sekundaer-linie); }
.pw-schluss__linie .pw-rund { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); }
.pw-schluss__pillen { display: flex; flex-wrap: wrap; gap: 14px; max-width: 1300px; margin: 0 auto clamp(48px, 6vw, 84px); }
.pw-schluss__unten { display: flex; flex-wrap: wrap; gap: 44px; max-width: 1300px; margin: 0 auto; font: 400 16px/1.5 var(--schrift-text); }
.pw-schluss__etikett { font: 600 14px/1.3 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--leise-hell); margin-bottom: 8px !important; }
.pw-schluss__links { margin-left: auto; }
.pw-schluss__links a { display: inline-block; margin-right: 18px; padding: 10px 0; text-decoration: underline; text-decoration-color: var(--akzent-hell); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pw-schluss :focus-visible { outline-color: var(--dominant); }

/* ---------------- Leistungsblatt (Detailansicht) ---------------- */
.pw-blatt-ansicht { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--sekundaer); color: var(--dominant); clip-path: circle(0px at var(--x, 50%) var(--y, 50%)); transition: clip-path .85s var(--pw-ein); overscroll-behavior: contain; }
.pw-blatt-ansicht.ist-offen { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); }
.pw-blatt-ansicht :focus-visible { outline-color: var(--dominant); }
.pw-blatt-ansicht__innen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; max-width: 1300px; min-height: 100%; margin: 0 auto; padding: 120px var(--pw-rand) 80px; }
.pw-blatt-ansicht__text > * { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .9s var(--pw-aus); }
.pw-blatt-ansicht.ist-offen .pw-blatt-ansicht__text > * { opacity: 1; transform: none; transition-delay: .3s; }
.pw-blatt-ansicht .pw-oberzeile { color: var(--leise-hell); margin-bottom: 18px; }
.pw-blatt-ansicht h2 { font: 400 clamp(40px, 5vw, 72px)/1.02 var(--schrift-kopf); letter-spacing: -.015em; margin-bottom: 24px; }
.pw-blatt-ansicht__satz { font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--schrift-text); max-width: 44ch; margin-bottom: 24px !important; }
.pw-blatt-ansicht__arten { display: grid; margin-bottom: 32px !important; max-width: 560px; border-top: 1px solid var(--sekundaer-linie); }
.pw-blatt-ansicht__arten div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--sekundaer-linie); }
.pw-blatt-ansicht__arten dt { font: 700 18px/1.3 var(--schrift-kopf); }
.pw-blatt-ansicht__arten dd { font: 400 16px/1.5 var(--schrift-text); color: var(--leise-hell); }
.pw-blatt-ansicht__arten a, .pw-blatt-ansicht__mehr a { color: var(--dominant); text-decoration: underline; text-decoration-color: var(--akzent-hell); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pw-blatt-ansicht__mehr { margin-top: 22px !important; font: 400 17px/1.4 var(--schrift-text); }
.pw-blatt-ansicht__bild { display: grid; place-items: center; min-height: 320px; opacity: 0; transform: scale(.85) rotate(4deg); transition: opacity .6s ease .35s, transform 1.1s var(--pw-aus) .35s; }
.pw-blatt-ansicht.ist-offen .pw-blatt-ansicht__bild { opacity: 1; transform: none; }
.pw-blatt-ansicht__bild .pw-geraet { height: auto; width: 100%; }
.pw-blatt-ansicht__bild .pw-laptop { width: 100%; }
.pw-blatt-ansicht__bild .pw-handys { right: 0; bottom: -6%; }
.pw-blatt-ansicht__bild .pw-adresse { display: none; }
.pw-blatt-ansicht__zu { position: fixed; z-index: 2; top: 22px; right: var(--pw-rand); width: 64px; height: 64px; border-radius: 50%; border: 1px solid currentColor; background: var(--sekundaer); color: var(--dominant); cursor: pointer; transition: transform .6s var(--pw-aus); }
.pw-blatt-ansicht__zu span { position: absolute; left: 50%; top: 50%; width: 26px; height: 1.5px; margin-left: -13px; background: currentColor; transform: rotate(45deg); }
.pw-blatt-ansicht__zu span + span { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .pw-blatt-ansicht__zu:hover { transform: rotate(90deg); } }

/* Hinweis und Zeiger */
.pw-hinweis { position: fixed; z-index: 95; left: 50%; bottom: 28px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 14px 22px 14px 16px; border-radius: 999px; background: var(--dominant); color: var(--sekundaer);
  font: 400 16px/1.3 var(--schrift-text); box-shadow: 0 20px 40px -16px rgb(0 0 0 / .4); transform: translateY(160%); opacity: 0; transition: transform .6s var(--pw-aus), opacity .3s; pointer-events: none; }
.pw-hinweis.ist-an { transform: none; opacity: 1; }
.pw-hinweis svg { width: 22px; height: 22px; color: var(--akzent); }
.pw-hinweis__haken { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease .25s; }
.pw-hinweis.ist-an .pw-hinweis__haken { stroke-dashoffset: 0; }
.pw-zeiger { position: fixed; z-index: 97; left: 0; top: 0; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; background: var(--dominant); mix-blend-mode: difference; color: var(--dominant);
  display: grid; place-items: center; font: 600 15px/1 var(--schrift-text); pointer-events: none; transform: scale(.13); transition: transform .4s var(--pw-aus), background .3s, opacity .3s; will-change: transform; }
.pw-zeiger span { opacity: 0; visibility: hidden; white-space: nowrap; transition: opacity .2s; }
.pw-zeiger.ist-link { transform: scale(.45); }
.pw-zeiger.ist-an { transform: scale(1); background: var(--akzent); mix-blend-mode: normal; }
.pw-zeiger.ist-an span { opacity: 1; visibility: visible; }
.pw-zeiger.ist-weg, .pw-zeiger:not(.ist-bereit) { opacity: 0; }

/* ---------------- Responsiv ---------------- */
@media (max-width: 1200px) { .pw-kapsel { padding: 8px 14px; } }
@media (max-width: 900px) {
  .pw-sprung { display: none; }
  .pw-hero__foto { object-position: 72% 20%; }
  .pw-hero__abzeichen { top: auto; bottom: 26vh; padding: 14px 14px 14px 20px; gap: 14px; }
  .pw-hero__titel { font-size: 17px; }
  .pw-hero__globus { width: 46px; height: 46px; }
  .pw-hero__rolle { top: auto; bottom: 40vh; font-size: 21px; text-align: right; padding: 10px 14px; }
  .pw-hero__rolle .pw-hero__pfeil { margin-left: auto; margin-bottom: 8px; }
  .pw-datenzeile { grid-template-columns: 1fr; gap: 6px; text-align: left; font-size: 14px; }
  .pw-datenzeile__mitte { text-align: left; }
  .pw-datenzeile__ort { justify-content: flex-start; }
  .pw-fenster--a { width: 78vw; left: 6%; top: 22%; }
  .pw-fenster--b { width: 58vw; right: 4%; top: 52%; }
  .pw-fenster--c { display: none; }
  .pw-reel__hinweis { bottom: 16px; }
  .pw-arten { max-width: none; }
  .pw-adresse { left: 0; bottom: auto; top: -6px; }
  .pw-pause { right: 0; top: -6px; }
  .pw-geraet--web { padding-top: 40px; }
  .pw-maske__ebene { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .pw-ueber { grid-template-columns: 1fr; }
  .pw-ueber__seite { padding-top: 0; }
  .pw-raster { grid-template-columns: 1fr; }
  .pw-kachel--breit .pw-kachel__bild, .pw-kachel--offen .pw-kachel__bild { aspect-ratio: 4 / 3; }
  .pw-kachel--breit .pw-kachel__bild img { width: 86%; }
  .pw-kachel__meta { flex-direction: column; gap: 4px; }
  .pw-kachel__art { text-align: left; }
  @media (hover: hover) and (pointer: fine) { .pw-kachel:hover .pw-kachel__bild { transform: none; box-shadow: none; } }
  .pw-stapel__karte { grid-template-columns: 1fr; align-items: start; top: calc(var(--kopf-hoehe) + 12px + var(--i) * 20px); }
  .pw-brett__flaeche { height: 620px; }
  .pw-zettel { width: 44vw; }
  .pw-blatt-ansicht__innen { grid-template-columns: 1fr; padding-top: 110px; }
  .pw-blatt-ansicht__zu { width: 56px; height: 56px; top: 16px; }
  .pw-blatt-ansicht__arten div { grid-template-columns: 1fr; gap: 4px; }
  .pw-schluss__kopf { flex-direction: column; align-items: flex-start; }
  .pw-schluss__titel { font-size: clamp(36px, 10.5vw, 56px); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .pw-schluss__linie .pw-rund { right: 4%; }
  .pw-schluss__links { margin-left: 0; }
  .pw-pille { padding: 14px 22px; }
  .pw-zeiger { display: none; }
}
/* Bühne ohne Kleben: am Handy, auf Tablets und in der ruhigen Fassung steht Website Design als normaler Abschnitt */
@media (max-width: 900px) {
  .pw-buehne { height: auto; overflow: visible; }
  .pw-buehne__marken { display: none; }
  .pw-buehne__klebt { position: static; height: auto; padding: 56px var(--pw-rand) 48px; }
  .pw-buehne__fortschritt { display: none; }
  .pw-buehne__folien { flex: none; }
  .pw-folie { position: relative; inset: auto; grid-template-columns: 1fr; gap: 28px; margin-top: 18px; scroll-margin-top: 80px; }
  .pw-geraet { height: auto; }
  .pw-laptop { width: 92%; }
  .pw-handys { position: static; justify-content: center; margin-top: 22px; }
}
.pw-ruhig .pw-buehne { height: auto; overflow: visible; }
.pw-ruhig .pw-buehne__marken, .pw-ruhig .pw-buehne__fortschritt { display: none; }
.pw-ruhig .pw-buehne__klebt { position: static; height: auto; padding: calc(var(--pw-blatt) + 56px) var(--pw-rand) 56px; }
.pw-ruhig .pw-buehne__folien { flex: none; }
.pw-ruhig .pw-folie { position: relative; inset: auto; margin-top: 18px; }
.pw-ruhig .pw-geraet { height: auto; min-height: 420px; }

/* ---------------- Ruhige Fassung (prefers-reduced-motion oder ?ruhig) ---------------- */
html.pw-ruhig { scroll-behavior: auto; }
.pw-ruhig .pw *, .pw-ruhig .pw *::before, .pw-ruhig .pw *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
.pw-ruhig .pw-kippwort .pw-wort > span, .pw-ruhig .pw-kipp { transform: none !important; }
.pw-ruhig .pw-kachel__bild { clip-path: none; }
.pw-ruhig .pw-kachel__bild img { scale: 1; }
.pw-ruhig .pw-faerben .pw-w { color: var(--sekundaer); }
.pw-ruhig .pw-kritzel path { stroke-dashoffset: 0; }
.pw-ruhig .pw-ansicht { transition: none; }
.pw-ruhig .pw-stapel__karte { position: relative; top: auto; transform: none; margin-bottom: 24px; min-height: 0; }
.pw-ruhig .pw-stapel__karte::after { opacity: 0; }
.pw-ruhig .pw-blatt-ansicht__text > *, .pw-ruhig .pw-blatt-ansicht__bild { opacity: 1; transform: none; }
.pw-ruhig .pw-hero__foto { transform: none !important; }

/* Haken ohne eigene Gestaltung (Bezug für Skript und Lesbarkeit) */
.pw-buehne__stand, .pw-buehne__name { color: var(--leise); }
.pw-folie__text { min-width: 0; }
.pw-los__text, .pw-pause__text, .pw-bewegung__text { white-space: nowrap; }
.pw-zettel--bild { background: var(--dominant); }
.pw-ueberlagen { display: contents; }
.pw-ruhig .pw-fortschritt { display: none; }
.pw-ruhig .pw-fenster__los { opacity: 1; transform: none; }

/* Kobalt als Akzent auf vielen kleinen und mittleren Flächen (L-018, Messung farbregel 16.10.2026), nie als Fläche
   eines Abschnitts, einer Kachel oder Folie (L-015): Fensterleisten wie in der Schale, Versatzkante der Kacheln (D-443,
   12 px), Kanten der Stapelkarten, Rahmen der Pinnwand, Linien der Datenzeile. */
.pw-fenster__leiste { background: var(--akzent); color: var(--dominant); }
.pw-fenster__leiste i { background: rgb(255 255 255 / .55); }
@media (hover: hover) and (pointer: fine) { .pw-fenster:hover .pw-fenster__leiste i:nth-child(1) { background: var(--dominant); } }
.pw-fenster__los { background: var(--dominant); color: var(--sekundaer); }
.pw-datenzeile { border-top: 0; border-bottom: 0; }
.pw-datenzeile::before, .pw-datenzeile::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--akzent); }
.pw-datenzeile::before { top: 0; }
.pw-datenzeile::after { bottom: 0; }
.pw-hero__globus { background: var(--akzent); }
.pw-kachel__buehne::before { content: ""; position: absolute; inset: 12px 12px -12px -12px; border-radius: 10px; background: var(--akzent); }
.pw-kachel__buehne { margin: 0 0 12px 12px; }
.pw-kachel__bild { z-index: 1; }
.pw-kachel__geist { z-index: 0; }
.pw-kachel__pillen span:nth-child(2) { background: var(--akzent); color: var(--dominant); box-shadow: none; }
.pw-stapel__karte::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 22px 22px; background: var(--akzent); }
.pw-stapel__karte--3 { box-shadow: none; }
.pw-stapel__zeichen { border: 0; background: var(--akzent); color: var(--dominant) !important; }
.pw-brett__flaeche { box-shadow: inset 0 0 40px rgb(17 18 20 / .14); outline: 0; }
.pw-brett__rahmen { display: block; padding: 10px; border-radius: 24px; background: var(--akzent); }
.pw-schluss__linie { height: 4px; background: var(--akzent); border-radius: 2px; }
.pw-buehne__fortschritt { height: 6px; border-radius: 3px; }
.pw-buehne__fortschritt i { border-radius: 3px; }
.pw-arten__zeile.ist-an .pw-arten__marke { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: var(--dominant); margin-top: -4px; }
.pw-fenster { overflow: visible; }
.pw-fenster__schirm { border-radius: 0 0 12px 12px; }
.pw-fenster__leiste { border-radius: 12px 12px 0 0; }
.pw-fenster::before { content: ""; position: absolute; inset: 16px 16px -16px -16px; z-index: -1; border-radius: 12px; background: var(--akzent); }
.pw-zettel--kobalt { background: var(--akzent); color: var(--dominant); box-shadow: 0 14px 26px -12px rgb(17 18 20 / .45); }
.pw-zettel--kobalt .pw-nadel { background: var(--dominant); box-shadow: inset 0 0 0 3px var(--akzent-tief), 0 3px 4px rgb(0 0 0 / .35); }
.pw-rund--dunkel { background: var(--akzent); }
.pw-rund--dunkel .pw-rund__fuellung { background: var(--sekundaer); }
.pw-pille:first-child { background: var(--akzent); border-color: var(--akzent); }
.pw-pille:first-child .pw-pille__fuellung { background: var(--akzent-tief); }

/* Nachbesserung Runde 1 (16.10.2026) */
/* Befund 1: Zettel behalten ihr Seitenverhältnis (die Höhe aus dem HTML-Attribut darf nicht greifen) und liegen in der Fläche */
.pw-zettel img { height: auto; aspect-ratio: 4 / 3; }
.pw-zettel--foto img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.pw-zettel p { min-height: 4.2em; }
@media (max-width: 900px) {
  .pw-brett__flaeche { height: 640px; }
  .pw-zettel { width: 38vw; padding: 10px 10px 12px; }
  .pw-zettel p { font-size: 17px; min-height: 3.6em; }
  /* eigene Lagen am Handy, damit jeder Zettel ganz in der Fläche liegt (überschreibt die Lagen im HTML) */
  .pw-zettel:nth-child(1) { --x: 4% !important; --y: 3% !important; }
  .pw-zettel:nth-child(2) { --x: 48% !important; --y: 4% !important; }
  .pw-zettel:nth-child(3) { --x: 50% !important; --y: 35% !important; }
  .pw-zettel:nth-child(4) { --x: 46% !important; --y: 66% !important; }
  .pw-zettel:nth-child(5) { --x: 6% !important; --y: 50% !important; }
  .pw-zettel:nth-child(6) { --x: 8% !important; --y: 77% !important; }
}
/* Befund 2: am Handy steht der Kreis unter dem Titel auf der Linie, nichts überdeckt Titel oder Pillen */
@media (max-width: 700px) {
  .pw-schluss__linie { height: auto; display: flex; justify-content: flex-end; margin: 32px auto 32px;
    background: linear-gradient(var(--akzent), var(--akzent)) center / 100% 4px no-repeat; border-radius: 0; }
  .pw-schluss__linie .pw-rund { position: relative; right: auto; top: auto; transform: none; width: 132px; margin-right: 4%; }
}
/* Befund 3: Abschluss und Fuß sind beide Schwarz, der Verlauf in den Fuß beginnt hier Schwarz statt Weiß */
.fuss > .verlauf.von-pflaume { --von: var(--sekundaer); }
/* Befund 4: Intro und Hero aus einem Guss. Der Name des Intros steht einzeilig in der Schrift des Laufbands und fliegt
   nach intro-ende an den Anfang des Laufbands (js/pinnwand.js); bis er gelandet ist, ruhen Laufband, Abzeichen und Rolle. */
.pw-intro .titel__name { font: 400 clamp(30px, 5.2vw, 76px)/1.05 var(--schrift-kopf); letter-spacing: -.02em; white-space: nowrap; }
.pw-intro .titel__vorname, .pw-intro .titel__nachname { display: inline; }
html.intro-laeuft .pw-laufband, html.intro-laeuft .pw-hero__abzeichen, html.intro-laeuft .pw-hero__rolle,
html.pw-flug .pw-laufband, html.pw-flug .pw-hero__abzeichen, html.pw-flug .pw-hero__rolle { opacity: 0; }
.pw-hero__abzeichen, .pw-hero__rolle { transition: opacity .35s ease, translate 1s var(--pw-aus); }
.pw-flugname { position: fixed; z-index: 49; left: 0; top: 0; margin: 0; font: 400 40px/1 var(--schrift-kopf); letter-spacing: -.02em; white-space: nowrap;
  color: var(--sekundaer); transform-origin: 0 0; pointer-events: none; will-change: transform; }
.pw-intro.ist-aus .pw-intro__text, .pw-intro.ist-aus .diashow { opacity: 0; transition: opacity .25s ease; }

/* Nachbesserung Runde 1, Teil 2 (16.10.2026) */
/* Befund 5: Knopf „Bewegung anhalten“ für Namensband, Globus und Kompass (WCAG 2.2.2), oben links im Hero unter der Kopfleiste */
.pw-bewegung { position: absolute; z-index: 5; left: var(--pw-rand); top: calc(var(--kopf-hoehe) + 14px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 16px 8px 12px; border: 1px solid var(--linie); border-radius: 999px; background: rgb(255 255 255 / .9); color: var(--sekundaer); font: 600 15px/1 var(--schrift-text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pw-bewegung:hover { background: var(--dominant); } }
.pw-bewegung svg { width: 14px; height: 14px; fill: var(--akzent-tief); }
.pw-bewegung__weiter, .pw-bewegung[aria-pressed="true"] .pw-bewegung__halt { display: none; }
.pw-bewegung[aria-pressed="true"] .pw-bewegung__weiter { display: block; }
.pw-ruhig .pw-bewegung { display: none; }
html.intro-laeuft .pw-bewegung, html.pw-flug .pw-bewegung { opacity: 0; }
html.pw-still .pw-globus-dreh, html.pw-still .pw-kompass, html.pw-still .pw-reel__ring, .pw-reel__ring.ist-aussen { animation-play-state: paused; }
/* Befund 8: das Motiv füllt die breite Kachel (Desktop) */
@media (min-width: 901px) {
  .pw-kachel--breit .pw-kachel__bild { aspect-ratio: 16 / 8; place-items: stretch; }
  .pw-kachel--breit .pw-kachel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; box-shadow: none; }
}
/* Befund 11: „Mehr über mich“ als schlichter Textlink */
.pw-textlink { display: inline-flex; align-items: center; min-height: 44px; font: 600 18px/1.3 var(--schrift-text); color: var(--akzent-tief); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pw-textlink:hover { color: var(--sekundaer); } }
.pw-schluss__linie { margin-bottom: clamp(110px, 10vw, 130px); }
@media (max-width: 700px) { .pw-schluss__linie { margin-bottom: 12px; } }
/* Hinweis auf KI im Fenster des Reels */
.pw-ki--fenster { right: 10px; bottom: 10px; }
/* Druck am Knopf (Skill bewegung, Vorprüfung P25). scale statt transform, damit Skripte ihr transform behalten.
   Die großen Fenster reagieren an der inneren Fläche, die Klickfläche bleibt ruhig. Ruhige Fassung ohne Druck. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.pw-ruhig) .pw-adresse:active { scale: .97; }
  html:not(.pw-ruhig) .pw-rund { transition: scale 160ms cubic-bezier(.16, 1, .3, 1); }
  html:not(.pw-ruhig) .pw-rund:active { scale: .97; }
  html:not(.pw-ruhig) .pw-bewegung:active { scale: .97; }
  html:not(.pw-ruhig) .pw-fenster__schirm { transition: scale 160ms cubic-bezier(.16, 1, .3, 1); }
  html:not(.pw-ruhig) .pw-fenster:active .pw-fenster__schirm { scale: .985; }
}