/* Projects: a cork pinboard first; ONLY GLOBAL opens into its own night room
   with the glass hotspots of onlyglobal.de; every detail is a paper dossier.
   Tokens and materials come from atelier.css. */
.pw-view{container-type:size}
.pw-shell{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  border:var(--frame) solid #2a0603;border-image:url("graphic/rahmen-merlot.webp") 23 / var(--frame) stretch;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.78),0 10px 22px rgba(0,0,0,.42);container-type:size}
.pw-shell::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 4px 9px rgba(22,0,0,.5),inset 0 0 34px rgba(22,0,0,.3)}
.pw-board{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,212,130,.35) transparent;
  background:radial-gradient(130% 110% at 50% 45%,transparent 48%,rgba(26,3,0,.58)),linear-gradient(rgba(36,6,0,.26),rgba(36,6,0,.26)),url("graphic/kork-kachel.webp") 0 0/330px auto;
  background-color:#8a6447;background-attachment:scroll,scroll,local;transition:filter .35s}
.pw-board:focus-visible,.pw-detail-scroll:focus-visible{outline:2px solid var(--lamp);outline-offset:-4px}
.pw-view button:focus-visible,.pw-view a:focus-visible,.pw-view summary:focus-visible{outline:2px solid var(--lamp);outline-offset:4px}

/* overview: prints pinned on cork; every row sits centred under ONLY GLOBAL (Eduard, 22.10.2026).
   Widths keep the 12-column measure: --pw-col is one column, --pw-gap the gap between two columns
   (own names: the tilt sets --gx/--gy on a hovered card for its glare). */
.pw-overview{--pw-gap:clamp(12px,2.2cqi,26px);--pw-col:calc((100% - 11 * var(--pw-gap)) / 12);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:center;min-height:100%;gap:clamp(30px,6cqh,52px) var(--pw-gap);padding:clamp(28px,6cqh,52px) clamp(14px,3.2cqi,40px) 56px}
.pw-project-card{--tape:var(--tape-projects);position:relative;flex:none;display:block;width:calc(var(--pw-col) * 4 + var(--pw-gap) * 3);min-width:0;padding:clamp(5px,.9cqi,8px);color:var(--ink);text-align:left;
  background:var(--paper-fill);
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 12px 20px -10px rgba(0,0,0,.65);rotate:var(--pw-angle,0deg);
  transition:rotate .3s var(--ease),scale .3s var(--ease);touch-action:manipulation}
.pw-project-card::before{content:'';position:absolute;z-index:3;top:-9px;left:50%;width:clamp(34px,32%,80px);height:17px;translate:-50% 0;rotate:-4deg;opacity:.86;pointer-events:none;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.pw-project-card:nth-child(3n+1)::before{left:28%;rotate:-8deg}
.pw-project-card:nth-child(3n)::before{left:70%;rotate:6deg}
.pw-project-card:nth-child(2n){margin-top:clamp(8px,2.4cqh,22px)}
.pw-project-card:hover,.pw-project-card:focus-visible{z-index:4;rotate:0deg;scale:1.025}
.pw-project-image{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.pw-project-image>img{display:block;width:100%;height:100%;object-fit:cover}
.pw-project-symbol .pw-project-image{aspect-ratio:1;background:transparent}
.pw-project-symbol .pw-project-image>img{object-fit:contain;padding:10%}
.pw-project-caption{display:block;padding:.65em .25em .2em}
.pw-project-caption>strong{display:block;font-size:clamp(13px,1.8cqi,16px);line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.pw-project-caption>small{display:block;margin-top:3px;color:var(--ink-2);font-size:11.5px;line-height:1.35}
.pw-project-note{display:grid;place-items:center;height:100%;padding:12px;color:var(--chalk);font-weight:700;font-size:18px;text-align:center}
/* the lead fills its own row: eight columns wide, the rest as margin */
.pw-project-lead{width:calc(var(--pw-col) * 8 + var(--pw-gap) * 7);margin-inline:calc(var(--pw-col) * 2 + var(--pw-gap) * 2 - 1px);--tape:var(--tape-projects)}
.pw-project-lead .pw-project-caption>strong{font-size:clamp(18px,2.8cqi,26px);letter-spacing:-.04em}
.pw-project-card[data-project-id=autolut],.pw-project-card[data-project-id=kartenwerk]{--tape:var(--tape-assets)}
.pw-project-symbol{width:calc(var(--pw-col) * 3 + var(--pw-gap) * 2)}
/* square pictures get square, narrower cards */
.pw-project-card.is-square{width:calc(var(--pw-col) * 3 + var(--pw-gap) * 2)}
.pw-project-card.is-square .pw-project-image{aspect-ratio:1}
/* plugins & tools have only two prints: larger cards */
#view-assets .pw-project-card{width:calc(var(--pw-col) * 5 + var(--pw-gap) * 4)}

/* detail: a paper dossier pinned over the board */
.pw-reading>.pw-board{filter:brightness(.55) saturate(.8)}
.pw-reading>.pw-board>*{visibility:hidden}
.pw-detail{position:absolute;inset:clamp(10px,2.6cqi,28px) clamp(10px,3.2cqi,36px) clamp(8px,2cqh,22px);z-index:5;display:flex;flex-direction:column;min-height:0;color:var(--ink);
  background:var(--paper-fill);
  box-shadow:0 1px 1px rgba(0,0,0,.3),0 30px 50px -18px rgba(0,0,0,.85);animation:pw-reveal .35s var(--ease) both}
.pw-detail::before,.pw-detail::after{content:'';position:absolute;z-index:3;top:-10px;width:88px;height:20px;opacity:.88;pointer-events:none;background:var(--tape-skin),color-mix(in srgb,var(--tape-projects) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.pw-detail::before{left:-16px;rotate:-26deg}
.pw-detail::after{right:-16px;rotate:24deg}
.pw-detail-header{display:flex;align-items:center;gap:14px;flex:none;padding:clamp(16px,2.6cqi,26px) clamp(16px,3cqi,34px) 12px;border-bottom:1px solid var(--ink-line)}
.pw-detail-header h3{flex:1;min-width:0;font-size:clamp(22px,3.6cqi,36px);line-height:1.05;letter-spacing:-.045em;overflow-wrap:anywhere;outline:none}
.pw-close.pw-tape-button{flex:none;--tape:var(--tape-projects)}
.pw-detail-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:clamp(16px,2.6cqi,26px) clamp(16px,3cqi,34px) 40px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(30,23,18,.35) transparent}
.pw-detail-intro{max-width:62ch;margin:0 0 20px;font-size:16px;line-height:1.6}
.pw-chapter{max-width:68ch;padding:20px 0 4px;border-top:1px solid var(--ink-line)}
.pw-detail-scroll>.pw-media+.pw-chapter,.pw-detail-scroll>.pw-chapter:first-child{border-top:0}
.pw-chapter h4{margin:0 0 9px;font-size:17px;line-height:1.3;letter-spacing:-.02em}
.pw-chapter p,.pw-chapter li{font-size:14.5px;line-height:1.72;white-space:pre-line;overflow-wrap:anywhere}
.pw-chapter ul{margin:10px 0 0;padding-left:18px;list-style:disc}
.pw-chapter li+li{margin-top:6px}
.pw-media{margin:0 0 22px;padding:6px;max-width:860px;background:#f6e6c8;box-shadow:0 1px 1px rgba(0,0,0,.2),0 10px 16px -10px rgba(0,0,0,.55);rotate:-.4deg}
.pw-media+.pw-media{rotate:.5deg}
.pw-chapter .pw-media{margin:16px 0 4px}
.pw-image-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.7vw,18px);margin:20px 0 18px;transform-origin:50% 50%;animation:pw-row-float 11s ease-in-out infinite;animation-play-state:paused}
.pw-image-row.is-visible{animation-play-state:running}
.pw-image-row:hover,.pw-image-row:focus-within{animation-play-state:paused}
.pw-image-row.is-single{grid-template-columns:minmax(0,1fr)}
.pw-image-row.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.pw-chapter .pw-image-row .pw-media{min-width:0;margin:0;align-self:start}
.pw-image-row.is-portrait .pw-media-trigger{aspect-ratio:9/16;background:transparent}
.pw-image-row.is-portrait .pw-media-trigger>img{height:auto;object-fit:contain}
.pw-image-row figcaption{font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
@keyframes pw-row-float{0%,100%{transform:translate3d(0,0,0) rotate(-.08deg)}50%{transform:translate3d(0,-4px,0) rotate(.08deg)}}
@media(max-width:1100px){.pw-image-row:not(.is-single){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pw-image-row,.pw-image-row.is-pair,.pw-image-row:not(.is-single){grid-template-columns:minmax(0,1fr);gap:18px}.pw-image-row.is-portrait{max-width:320px;margin-inline:auto}}
.pw-media-trigger{display:block;width:100%;aspect-ratio:16/9;padding:0;background:var(--deep);cursor:zoom-in;overflow:hidden}
/* app logos keep their own proportions on black, no letterbox bars */
.pw-media-logo .pw-media-trigger{aspect-ratio:auto;background:#000}
.pw-media-logo .pw-media-trigger>img{height:auto;object-fit:contain}
.pw-media-logo.is-square{max-width:min(100%,360px)}
.pw-media-trigger>img{display:block;width:100%;height:100%;object-fit:contain}
.pw-media>video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--deep)}
.pw-media figcaption{padding:8px 3px 2px;color:var(--ink-2);font-size:12px;line-height:1.45}
.pw-media-symbol{max-width:340px;margin-inline:auto;background:transparent;box-shadow:none;rotate:0deg}
.pw-media-symbol>.pw-media-trigger{aspect-ratio:1;background:transparent}
.pw-media-symbol>.pw-media-trigger>img{object-fit:contain;padding:8%}
/* download area (Eduard, 22.10.2026): installer as a tape button, other platforms with their real state,
   the notarization notice readable at once, details folded away */
.pw-downloads{max-width:68ch;margin:4px 0 26px;padding:16px clamp(14px,2.4cqi,22px) 14px;border:1.5px dashed var(--ink-line);background:rgba(59,0,0,.045)}
.pw-downloads>h4{margin:0 0 8px;font-size:17px;line-height:1.3;letter-spacing:-.02em}
.pw-downloads+.pw-chapter{border-top:0}
.pw-download{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 0}
.pw-download+.pw-download{border-top:1px solid var(--ink-line)}
.pw-download-button{--tape:var(--tape-assets);max-width:100%;min-width:0;white-space:normal}
.pw-download-button>span:not(.pw-download-arrow){min-width:0;overflow-wrap:anywhere}
.pw-download.is-primary .pw-download-button{min-height:50px;padding:12px 24px 12px 20px;font-size:15px}
.pw-download-arrow{flex:none;font-size:1.1em}
.pw-download-meta{color:var(--ink-2);font-size:13px;line-height:1.4}
.pw-download-label{font-weight:700;font-size:14.5px}
.pw-download-state{display:inline-block;padding:3px 9px 2px;border:1.5px solid currentColor;border-radius:3px;color:var(--ink-2);font:700 12px/1.3 var(--font)}
.pw-download-note{flex-basis:100%;margin:0;font-weight:700;font-size:13.5px;line-height:1.5}
.pw-download-notice{margin:10px 0 0;padding:10px 12px;border-left:4px solid var(--merlot);background:rgba(255,212,130,.4);font-size:14px;line-height:1.55}
.pw-download-help{margin:12px 0 0}
.pw-download-help>summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none}
.pw-download-help>summary::-webkit-details-marker{display:none}
.pw-download-help>summary::before{content:'▸';transition:rotate .2s var(--ease)}
.pw-download-help[open]>summary::before{rotate:90deg}
.pw-download-help>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pw-download-help h5{margin:14px 0 6px;font-size:14.5px;line-height:1.3}
.pw-download-help p,.pw-download-help li{font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.pw-download-help p{margin:0 0 8px}
.pw-download-help ol{margin:0 0 8px;padding-left:20px;list-style:decimal}
.pw-download-help code{padding:1px 4px;font-size:.92em;background:rgba(59,0,0,.07)}
.pw-terminal pre{max-width:100%;overflow:auto;margin:8px 0 14px;padding:14px;border:1px solid var(--ink-line);background:rgba(59,0,0,.05);font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
.pw-terminal pre code{padding:0;background:none;font:inherit;white-space:pre}
.pw-terminal-copy{min-height:44px}
.pw-terminal-status{display:inline-block;margin:8px 0 0 12px;font-size:13px}
.pw-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.pw-links a{--tape:var(--tape-projects);min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}

/* lightbox */
.pw-lightbox{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);width:min(1100px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 32px));max-width:none;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);margin:auto;padding:10px;border:0;color:var(--ink);background:var(--grain),var(--paper);overflow:visible;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.pw-lightbox[open]{display:flex;flex-direction:column;gap:8px}
.pw-lightbox::backdrop{background:rgba(26,0,0,.86)}
.pw-lightbox-close{align-self:flex-end;margin:-24px -18px 0 0}
.pw-lightbox-stage{display:block;width:100%;aspect-ratio:16/9;min-height:0;background:var(--deep)}
.pw-lightbox-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.pw-lightbox.is-portrait{width:min(480px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 32px),calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 140px) * 9 / 16 + 20px))}
.pw-lightbox.is-portrait .pw-lightbox-stage{aspect-ratio:9/16}
.pw-lightbox-caption{padding:0 4px 4px;color:var(--ink-2);font-size:12.5px;line-height:1.45}

@keyframes pw-reveal{from{opacity:0;translate:0 14px;rotate:-.6deg}to{opacity:1;translate:0 0;rotate:0deg}}

@container (max-width:520px){
  .pw-overview{--pw-gap:12px;--pw-col:calc((100% - 5 * var(--pw-gap)) / 6);gap:30px var(--pw-gap);padding:26px 12px 40px}
  .pw-project-card,.pw-project-symbol,.pw-project-card.is-square{width:calc(var(--pw-col) * 3 + var(--pw-gap) * 2)}
  .pw-project-lead{width:100%;margin-inline:0}
  #view-assets .pw-project-card{width:100%}
  .pw-project-caption>strong{font-size:13px}
  .pw-project-caption>small{font-size:10.5px}
  .pw-detail{inset:8px 6px 6px}
  .pw-detail::before,.pw-detail::after{width:60px;height:16px}
  .pw-detail-header{flex-wrap:wrap;gap:8px}
  .pw-detail-header h3{flex-basis:100%;order:2}
  .pw-close.pw-tape-button{order:1}
}
@media (max-width:760px){.pw-board{background-attachment:scroll}}
@media (max-width:600px){.pw-lightbox-stage{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.pw-view *,.pw-view *::before{animation:none!important;transition:none!important}}