/* ============================================================
   Eduard — ATELIER
   One system for the whole portfolio. A night-time atelier wall in the
   ONLY GLOBAL house: burnt merlot wall and wood, natural cork, golden apricot tape.
   Materials have jobs:
     paper  = content           tape  = navigation and way back
     3D icon = what a work or platform is (glyph stacked in depth)
     cork   = boards that hold work
   Everything is matte: paper fibre texture, crepe tape, no glass, no glare
   (Eduard: weniger shiny, mehr Papier). A faint paper grain drifts over the page.
   ============================================================ */

:root{
  /* Palette (Eduard, 21.10.2026): Burnt Merlot and Golden Apricot, as a dark, cozy room at night.
     Merlot is the wall, the stained wood and the ink; apricot is the lamp light, the tape and the
     writing on the wall. Paper is dimmed so nothing glares. Photographs keep their colour, cork stays natural. */
  --merlot:#3b0000; --apricot:#ffd482; --deep:#1c0000;
  /* dark mode, cozy (Eduard): a deep, slightly brown merlot that the lamp warms up */
  --wall-0:#120202; --wall-1:#220605; --wall-2:#34100a;
  --lamp:var(--apricot);
  --paper:#f1dbb1; --paper-2:#e2c493; --paper-edge:#cfae78;
  --ink:var(--merlot); --ink-2:#6e2a22; --ink-line:rgba(59,0,0,.16);
  --chalk:var(--apricot); --chalk-2:rgba(255,212,130,.74); --chalk-3:rgba(255,212,130,.46);
  --signal:var(--merlot);

  /* Tape: one golden apricot crepe for everything; merlot text on it stays readable on the wall.
     The per-section hooks stay so a section can get its own tone later. */
  --tape-kraft:var(--apricot);
  --tape-projects:var(--tape-kraft); --tape-graphic:var(--tape-kraft); --tape-social:var(--tape-kraft);
  --tape-videos:var(--tape-kraft); --tape-assets:var(--tape-kraft); --tape-contact:var(--tape-kraft);


  --font:'BIZ UDPGothic',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.5,.64,1);
  --gutter:clamp(16px,3.2vw,56px);
  --top:clamp(64px,9vh,84px);
  --frame:clamp(10px,1.25vw,17px);

  /* paper: a real fibre texture (cloudy formation, grain, light and dark fibres), matte */
  --grain:url("graphic/papier-faser.webp");
  /* every paper surface: flat and matte, no directional sheen; fibres and a faint darker rim like real paper */
  --paper-fill:var(--grain),radial-gradient(150% 130% at 50% 45%,rgba(0,0,0,0) 58%,rgba(110,68,28,.14)),var(--paper);
  --wallgrain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .52 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --torn:polygon(0 4%,6% 0,17% 3%,29% 0,41% 2%,55% 0,67% 3%,80% 0,92% 2%,100% 0,99% 22%,100% 47%,98% 71%,100% 100%,88% 97%,74% 100%,61% 97%,47% 100%,33% 97%,20% 100%,8% 97%,0 100%,1% 74%,0 50%,2% 26%);
  /* tape: straight long edges, serrated ends like torn from a dispenser; translucent crepe */
  --tape-end:polygon(2.5% 0,97.5% 0,100% 12.5%,97.5% 25%,100% 37.5%,97.5% 50%,100% 62.5%,97.5% 75%,100% 87.5%,97.5% 100%,2.5% 100%,0 87.5%,2.5% 75%,0 62.5%,2.5% 50%,0 37.5%,2.5% 25%,0 12.5%);
  /* crepe tape: matte, fine crinkles across and along, the paper fibres show through; no gloss */
  --tape-skin:var(--grain),repeating-linear-gradient(0deg,rgba(70,40,15,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,248,230,.05) 0 1px,rgba(70,40,15,.07) 1px 2px,transparent 2px 5px);
  --tape-alpha:88%;
  --tape-cut:polygon(0 8%,4% 0,8% 10%,12% 2%,88% 0,92% 9%,96% 1%,100% 11%,98% 31%,100% 52%,97% 73%,100% 93%,95% 100%,91% 91%,86% 100%,13% 98%,8% 90%,3% 100%,0 89%,2% 67%,0 45%,3% 24%);
}

/* ---------- base ---------- */
/* long German compounds must break inside their paper, never run out of it */
.bio-card p,.pw-chapter p,.pw-chapter li,.pw-detail-intro,.pv-dialog-detail p,.pv-card-title,.pw-project-caption{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--wall-0);color-scheme:dark}
body{height:100%;margin:0;overflow:hidden;color:var(--chalk);background:var(--wall-0);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
button,a,summary{font:inherit;color:inherit}
button{border:0;padding:0;background:none;cursor:pointer}
/* browser defaults are blue (text selection, tap flash, form accents): all of them follow the palette */
*{-webkit-tap-highlight-color:transparent}
:root{accent-color:var(--apricot)}
::selection{background:rgba(255,212,130,.42);color:inherit}
/* dragging prints or tapping the menu must not paint a text selection over them */
.claim,.board-object,.pw-project-card,.pv-card,.channel{-webkit-user-select:none;user-select:none}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.view:focus,.view:focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* a very light paper grain over the whole page, shifting in small steps like film grain (Eduard).
   Dark and light specks in normal blending: no blend mode over the whole screen; only the layer moves
   (compositor), the noise itself is drawn once. Still with reduced motion. */
body::after{content:'';position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.32;will-change:transform;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 2.4 0 0 0 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E") 0 0/220px 220px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .86 0 2.4 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") 0 0/260px 260px;
  animation:paper-grain 1.1s steps(1) infinite}
@keyframes paper-grain{0%{transform:translate(0,0)}17%{transform:translate(-37px,23px)}33%{transform:translate(29px,-41px)}50%{transform:translate(-53px,-11px)}67%{transform:translate(41px,37px)}83%{transform:translate(-13px,47px)}}

/* ---------- the wall: deep merlot at night, a merlot-stained wood panel behind the stage ---------- */
.wall{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    var(--wallgrain) 0 0/220px 220px,
    radial-gradient(130% 95% at 66% 42%,var(--wall-2) 0%,var(--wall-1) 48%,var(--wall-0) 100%)}
.wall::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 100% at 45% 40%,transparent 45%,rgba(6,0,0,.72) 100%)}
/* warm lamp light: a pool over the navigation and a softer one on the board; static apart from a tiny mouse parallax */
.wall-light{position:absolute;inset:-25%;
  background:
    radial-gradient(26% 34% at 30% 36%,rgba(255,176,86,.2),rgba(255,176,86,.06) 55%,transparent 75%),
    radial-gradient(34% 42% at 63% 47%,rgba(255,186,104,.14),transparent 72%);
  transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform 1.4s var(--ease)}

/* ---------- materials ---------- */
/* paper: content surface with real grain */
.sheet{position:relative;color:var(--ink);background:var(--paper-fill)}

/* tape: a translucent strip with cut ends; colour from --tape */
.taped{position:relative}
.taped::before{content:'';position:absolute;z-index:3;top:calc(var(--tape-h,18px) * -.5);left:var(--tape-x,50%);width:var(--tape-w,clamp(46px,28%,92px));height:var(--tape-h,18px);
  translate:-50% 0;rotate:var(--tape-r,-4deg);pointer-events:none;opacity:.86;
  background:var(--tape-skin),color-mix(in srgb,var(--tape,var(--tape-kraft)) var(--tape-alpha),transparent);
  clip-path:var(--tape-end)}

/* tape buttons: every way back and every action label. Mono caps echo the ONLY GLOBAL pill. */
.tape-button,.tape-link,.pw-tape-button,.pw-links a,.pv-original{
  --tape:var(--tape-kraft);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:10px 20px 10px 17px;border:0;border-radius:0;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  font:700 13.5px/1.2 var(--font);letter-spacing:-.01em;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);
  clip-path:var(--tape-end);rotate:-1.2deg;cursor:pointer;
  transform-origin:50% 100%;transition:rotate .25s var(--ease),translate .25s var(--ease),transform .3s var(--ease)}
.tape-button svg,.tape-link svg{width:16px;height:16px;flex:none}
.tape-button:hover,.tape-link:hover,.pw-tape-button:hover,.pw-links a:hover,.pv-original:hover{rotate:0deg;translate:0 -1px;transform:perspective(420px) rotateX(-18deg)}
.tape-button:focus-visible,.tape-link:focus-visible,.pw-tape-button:focus-visible,.pw-links a:focus-visible,.pv-original:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.tape-label{--tape:var(--tape-kraft);display:inline-block;padding:7px 15px 8px;color:var(--ink);font:700 13.5px/1.2 var(--font);letter-spacing:-.01em;background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end);rotate:-2deg}

/* print: a photo/screenshot on paper, the unit of every board */
.print{position:relative;display:block;padding:clamp(5px,.5vw,8px);color:var(--ink);text-align:left;background:var(--paper-fill);
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 10px 18px -8px rgba(0,0,0,.6)}
.print img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--deep)}
.print.is-square img{aspect-ratio:1}
.print .caption{display:block;padding:.6em .25em .15em;font-weight:700;font-size:clamp(10px,.78vw,13px);line-height:1.15;letter-spacing:-.01em;overflow-wrap:normal;word-break:normal;hyphens:manual}

/* chips and hotspots: matte paper instead of glass (Eduard: weniger shiny, mehr Papier) */
.glass,.orb{color:var(--ink);border:0;background:var(--paper-fill);
  box-shadow:0 1px 1px rgba(0,0,0,.35),0 8px 14px -6px rgba(0,0,0,.55)}
.orb{position:relative;display:grid;place-items:center;align-content:center;gap:5px;width:var(--orb,84px);aspect-ratio:1;border-radius:50%;text-align:center;transition:translate .3s var(--ease),border-color .2s,background-color .2s;}
.orb .ui-icon{width:calc(var(--orb,84px) * .3);height:auto;aspect-ratio:1;stroke-width:1.4;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.orb:hover{translate:0 -2px;border-color:rgba(255,255,255,.4)}

/* board: frame and cork tile come from the posterless pinboard image, stained to the palette */
.board-frame{position:relative;display:flex;flex-direction:column;min-height:0;
  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)}
.board-frame::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)}
.cork{position:relative;flex:1;min-height:0;
  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}
.scroll{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}
.scroll:focus-visible{outline:2px solid var(--lamp);outline-offset:-4px}

.ui-icon{display:block;flex:none}

/* ---------- top bar ---------- */
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:env(safe-area-inset-top) var(--gutter) 0;pointer-events:none}
.topbar>*{pointer-events:auto}
/* the monogram is a mask and takes the text colour */
.signature{display:inline-flex;align-items:center;gap:13px;min-height:44px;color:var(--apricot);text-decoration:none}
.monogram{display:block;width:clamp(42px,3.6vw,54px);aspect-ratio:108/59;background:currentColor;
  -webkit-mask:url("graphic/eduard-monogramm-klein.webp") center/contain no-repeat;mask:url("graphic/eduard-monogramm-klein.webp") center/contain no-repeat}
.lang-switch{display:flex;gap:2px;padding:4px;border-radius:999px}
.lang-switch button{min-width:42px;min-height:34px;padding:0 10px;border-radius:999px;color:var(--ink-2);font:700 12.5px/1 var(--font);letter-spacing:.01em;transition:background-color .2s,color .2s}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button[aria-pressed=true]{color:var(--apricot);background:var(--merlot)}
@media (pointer:coarse){.lang-switch button{min-height:40px;min-width:46px}}

/* ---------- layout ---------- */
.app{position:relative;z-index:1;height:100%;height:100dvh;display:grid;grid-template-columns:minmax(290px,.74fr) minmax(0,1.26fr);gap:clamp(24px,4.2vw,76px);padding:calc(var(--top) + 6px) var(--gutter) clamp(18px,4vh,44px)}
.side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0;padding-bottom:4vh}
.stage{position:relative;min-height:0;min-width:0;container-type:size}

/* paper words: the navigation */
.claim{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5px,1.15vh,12px);font-weight:700;font-size:clamp(28px,3.15vw,52px);line-height:1;letter-spacing:-.045em}
.slab{--r:-1.4deg;--x:0em;--tape:var(--tape-kraft);position:relative;translate:var(--x) 0;rotate:var(--r);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)) drop-shadow(0 9px 12px rgba(0,0,0,.32));
  transform-origin:50% 0;transition:translate .45s var(--ease),rotate .45s var(--ease),transform .45s var(--ease),opacity .3s}
.slab:nth-child(2){--r:.9deg;--x:.42em}
.slab:nth-child(3){--r:-.6deg;--x:.12em}
.slab:nth-child(4){--r:1.3deg;--x:.5em}
.slab:nth-child(5){--r:-1.8deg;--x:.22em}
.slab:nth-child(6){--r:.5deg;--x:.06em}
.slab:nth-child(7){--r:-1deg;--x:.36em}
.slab[data-tape=projects]{--tape:var(--tape-projects)}
.slab[data-tape=graphic]{--tape:var(--tape-graphic)}
.slab[data-tape=social]{--tape:var(--tape-social)}
.slab[data-tape=videos]{--tape:var(--tape-videos)}
.slab[data-tape=assets]{--tape:var(--tape-assets)}
.slab[data-tape=contact]{--tape:var(--tape-contact)}
.paper-word{display:inline-flex;align-items:baseline;gap:.24em;padding:.15em .34em .21em;clip-path:var(--torn)}
.slab::before{content:'';position:absolute;z-index:3;top:-.2em;left:var(--tx,64%);width:clamp(30px,1.25em,64px);height:.36em;translate:-50% 0;rotate:var(--tr,5deg);opacity:.88;pointer-events:none;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end);transition:width .35s var(--ease),height .35s var(--ease),opacity .3s}
.slab:nth-child(even)::before{--tx:22%;--tr:-6deg}
.slab:nth-child(3n)::before{--tx:80%;--tr:8deg}
.key{position:static;color:var(--ink);text-align:left;letter-spacing:inherit}
.key::after{content:'';position:absolute;inset:0;z-index:2}
.key:focus-visible{outline:none}
.slab:has(.key:focus-visible){outline:2px solid var(--lamp);outline-offset:5px}
.slab:hover{--x-hover:.14em;translate:calc(var(--x) + .14em) 0;rotate:calc(var(--r) * .4);transform:perspective(600px) rotateX(9deg) rotateY(-10deg) translateZ(14px)}
.slab[data-active=true]{translate:calc(var(--x) + .32em) 0;rotate:0deg;z-index:2}
.slab[data-active=true]::before{--tape-alpha:100%;width:clamp(44px,2.1em,96px);height:.48em;opacity:1}
.is-open .slab[data-active=false]{opacity:.5}
.is-open .slab[data-active=false]:hover{opacity:1}
.key[data-view=bio]{position:relative}
.name-stroke{position:absolute;left:-2%;bottom:-.13em;width:104%;height:.26em;overflow:visible;pointer-events:none}
.name-stroke path{fill:none;stroke:var(--signal);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .name-stroke path{animation:draw-name .95s cubic-bezier(.3,.7,.2,1) 1.05s 1 forwards}
@keyframes draw-name{to{stroke-dashoffset:0}}

.board-toggle{display:none}

/* ---------- stage, home board ---------- */
.home-frame{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100%,100cqh * 1.52);aspect-ratio:16/10.5;transform:translate3d(calc(var(--mx,0px) * -.7),calc(var(--my,0px) * -.6),0);transition:opacity .35s,scale .5s var(--ease),transform 1.2s var(--ease),visibility 0s}
.home-board{overflow:hidden;touch-action:pan-y}
.board-object{--tape:var(--tape-kraft);position:absolute;left:var(--x);top:var(--y);width:var(--w);rotate:var(--r);translate:var(--drag-x,0px) var(--drag-y,0px);
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  transition:scale .25s var(--ease),rotate .35s var(--ease)}
.board-object::before{content:'';position:absolute;z-index:3;top:-9px;left:var(--tx,50%);width:clamp(34px,30%,78px);height:17px;translate:-50% 0;rotate:var(--tr,-5deg);opacity:.86;pointer-events:none;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.board-object:hover{scale:1.035;z-index:15}
.board-object:focus-visible{outline:2px solid var(--lamp);outline-offset:4px;z-index:15}
.board-object.is-dragging{cursor:grabbing;scale:1.05;rotate:calc(var(--r) * .3);transition:none;box-shadow:0 1px 1px rgba(0,0,0,.28),0 26px 34px -12px rgba(0,0,0,.75)}
.board-object img{pointer-events:none}
/* groups as small piles (Eduard, 22.10.2026): within a group the prints touch or overlap a little but never hide a picture
   or a name; between groups there is room. ONLY GLOBAL and ONLY GLOBAL TV stand alone; covers, games and apps,
   DaVinci Resolve plugins each sit in one spot. --x/--y/--r come from portfolio-work/pinnwand-layout/solve.py (apply.py);
   the HTML order of the prints is the stacking order. */
.b-onlyglobal{--x:2%;--y:1.6%;--w:30%;--r:-2deg;--tape:var(--tape-projects);--tx:30%}
.b-farbspiel{--x:39.7%;--y:5.5%;--w:14%;--r:-3deg;--tape:var(--tape-graphic);--tx:62%;--tr:6deg}
.b-rotstudie{--x:53.1%;--y:11.5%;--w:14%;--r:3deg;--tape:var(--tape-graphic);--tx:38%}
.b-ogtv{--x:69.8%;--y:5.3%;--w:29%;--r:1.5deg;--tape:var(--tape-videos)}
.b-hub{--x:2.8%;--y:45.2%;--w:21%;--r:-2deg;--tape:var(--tape-projects);--tx:42%}
.b-party{--x:23.3%;--y:38.2%;--w:12%;--r:2.5deg;--tape:var(--tape-projects);--tx:58%;--tr:4deg}
.b-poker{--x:34.6%;--y:50.5%;--w:12%;--r:-2.5deg;--tape:var(--tape-projects);--tx:40%}
.b-chess{--x:12.5%;--y:68.4%;--w:12%;--r:1.5deg;--tape:var(--tape-projects);--tx:70%}
.b-food{--x:23.8%;--y:65.9%;--w:12%;--r:-1deg;--tape:var(--tape-projects)}
.b-elementa{--x:35.4%;--y:76.5%;--w:18%;--r:2deg;--tape:var(--tape-projects);--tx:62%;--tr:5deg}
.b-autolut{--x:60%;--y:47.1%;--w:22%;--r:-2deg;--tape:var(--tape-assets);--tx:34%}
.b-kartenwerk{--x:72.7%;--y:66.7%;--w:22%;--r:3deg;--tape:var(--tape-assets);--tr:7deg}
/* one 3D icon per pile (Eduard, 22.10.2026): it overlaps its group and never covers a picture or a name. */
.icon-stage.board-icon{--size:var(--s,6.5%);--depth:1.1px;position:absolute;left:var(--x);top:var(--y);pointer-events:none}
/*ICON-POS*/
.bi-og{--x:30.8%;--y:24.2%}
.bi-tv{--x:92.3%;--y:33%}
.bi-covers{--x:60.3%;--y:32.1%}
.bi-games{--x:44.9%;--y:67.5%}
.bi-plugins{--x:91.8%;--y:87.4%}
/*ICON-POS-END*/
.home-frame .board-icon{animation:orb-in .6s var(--ease-pop) backwards;animation-delay:calc(900ms + var(--n,0) * 90ms)}
.print.is-phone .phone{display:grid;place-items:center;aspect-ratio:1;background:radial-gradient(80% 80% at 50% 30%,var(--merlot),var(--deep))}
.print.is-phone .phone img{width:44%;height:auto;aspect-ratio:auto;border-radius:9px;border:2px solid #140000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 12px rgba(0,0,0,.6);background:#000}

/* a portrait stage (phones, tablets upright, tall windows) gets an upright board */
@container (orientation:portrait){
  /* eleven prints in five loose rows; the board is a little taller for them */
  .home-frame{width:min(100%,100cqh * .536);aspect-ratio:3/5.6}
  .home-board .caption{font-size:clamp(10px,2.6cqi,13px)}
  .b-food .caption{font-size:clamp(9px,2.4cqi,12px);letter-spacing:-.02em}
  .b-onlyglobal{--x:4.1%;--y:2%;--w:57%;--r:-2deg}
  .b-ogtv{--x:66.3%;--y:2.3%;--w:32%;--r:2deg}
  .b-farbspiel{--x:3.7%;--y:27.7%;--w:26%;--r:-3deg}
  .b-rotstudie{--x:29%;--y:31.4%;--w:26%;--r:4deg}
  .b-autolut{--x:60.3%;--y:27.5%;--w:35%;--r:-4deg}
  .b-kartenwerk{--x:61.5%;--y:42.2%;--w:35%;--r:5deg}
  .b-hub{--x:8.2%;--y:59%;--w:44%;--r:-1deg}
  .b-party{--x:51.4%;--y:62.9%;--w:24%;--r:3deg}
  .b-poker{--x:74.8%;--y:63.3%;--w:24%;--r:-1deg}
  .b-chess{--x:5.3%;--y:76.5%;--w:24%;--r:2deg}
  .b-food{--x:28.7%;--y:74.3%;--w:24%;--r:-3.5deg}
  .b-elementa{--x:51.6%;--y:84.9%;--w:36%;--r:2deg}
  /*ICON-POS*/
  .icon-stage.board-icon{--s:12%}
  .bi-og{--x:52%;--y:19.4%}
  .bi-tv{--x:85.8%;--y:14.6%}
  .bi-covers{--x:42%;--y:44.7%}
  .bi-games{--x:63.3%;--y:79.3%}
  .bi-plugins{--x:86.4%;--y:53%}
  /*ICON-POS-END*/
}
/*SMALL-PORTRAIT*/
/* short phone screens (iPhone SE and the like): the names wrap into more lines, so the piles sit a little differently */
@container (orientation:portrait) and (max-height:590px){
  .b-onlyglobal{--x:4.4%;--y:1.9%;--r:-2deg}
  .b-farbspiel{--x:4.6%;--y:28.1%;--r:-3deg}
  .b-rotstudie{--x:28.9%;--y:31.6%;--r:4deg}
  .b-ogtv{--x:65.5%;--y:1.1%;--r:1.5deg}
  .b-hub{--x:7.4%;--y:57.7%;--r:-2deg}
  .b-party{--x:50.7%;--y:60.9%;--r:2.5deg}
  .b-poker{--x:73.9%;--y:61.9%;--r:-2.5deg}
  .b-chess{--x:6.4%;--y:76.8%;--r:2deg}
  .b-food{--x:29.8%;--y:75.8%;--r:-4.5deg}
  .b-elementa{--x:53.7%;--y:84.2%;--r:2deg}
  .b-autolut{--x:59.3%;--y:25.7%;--r:-3.5deg}
  .b-kartenwerk{--x:61.4%;--y:41.7%;--r:4deg}
  .b-elementa{--w:34%}
  .bi-og{--x:50.2%;--y:18.3%}
  .bi-tv{--x:83.7%;--y:16.5%}
  .bi-covers{--x:43.7%;--y:44.3%}
  .bi-games{--x:64.9%;--y:79%}
  .bi-plugins{--x:84.6%;--y:52.4%}
}
/*SMALL-PORTRAIT-END*/
/*TINY-PORTRAIT*/
/* the smallest phones (320 × 568): a board of about 210 px needs its own arrangement */
@container (orientation:portrait) and (max-height:450px){
  .b-onlyglobal{--x:3.8%;--y:1.5%;--r:-2deg}
  .b-farbspiel{--x:4%;--y:27.6%;--r:-3deg}
  .b-rotstudie{--x:27.8%;--y:32%;--r:4deg}
  .b-ogtv{--x:65.7%;--y:0.9%;--r:1deg}
  .b-hub{--x:3.5%;--y:55.5%;--r:-2deg}
  .b-party{--x:44.3%;--y:62.5%;--r:3deg}
  .b-poker{--x:74.3%;--y:65.2%;--r:-1deg}
  .b-chess{--x:1.8%;--y:79.2%;--r:1deg}
  .b-food{--x:23.9%;--y:74.6%;--r:-3.5deg}
  .b-elementa{--x:47.2%;--y:83.5%;--r:1deg}
  .b-autolut{--x:61.5%;--y:25.5%;--r:-1deg}
  .b-kartenwerk{--x:62.4%;--y:42.3%;--r:3deg}
  .bi-og{--x:49.4%;--y:17.5%}
  .bi-tv{--x:77.3%;--y:17.2%}
  .bi-covers{--x:44.4%;--y:44.3%}
  .bi-games{--x:65.5%;--y:78.6%}
  .bi-plugins{--x:83.5%;--y:56.9%}
}
/*TINY-PORTRAIT-END*/
}

/* ---------- panel and views ---------- */
/* visibility flips at once on open (so focus can land) and waits for the fade on close */
.panel{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.is-open .panel{visibility:visible;opacity:1;transition:opacity .35s,visibility 0s}
.is-open .home-frame{opacity:0;visibility:hidden;scale:.96;transition:opacity .35s,scale .5s var(--ease),visibility 0s .35s}
.view{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.view>.board-frame{flex:1}
.view-heading{flex:none;display:flex;align-items:center;min-height:0}
.view-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.back{position:absolute;z-index:12;top:calc(var(--frame) * -.4 - 12px);left:clamp(-14px,-1vw,-6px);--tape:var(--tape-kraft)}
.is-open[data-view=projects] .back{--tape:var(--tape-projects)}
.is-open[data-view=graphic] .back{--tape:var(--tape-graphic)}
.is-open[data-view=social] .back{--tape:var(--tape-social)}
.is-open[data-view=videos] .back{--tape:var(--tape-videos)}
.is-open[data-view=assets] .back{--tape:var(--tape-assets)}
.is-open[data-view=contact] .back{--tape:var(--tape-contact)}
.mobile-board-return{display:none}
.is-open .view:not([hidden]){animation:view-in .45s var(--ease) backwards}
@keyframes view-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ---------- graphic design board ---------- */
.art-board{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:clamp(30px,5cqh,56px) clamp(18px,4cqi,48px);padding:clamp(30px,6cqh,64px) clamp(14px,3cqi,40px) 64px}
.art-board:not(:has(.art-group[open])){align-content:center}
.art-group{position:relative;width:clamp(170px,30cqi,300px)}
.art-group>summary{position:relative;display:block;padding-bottom:28px;outline:none}
.art-group>summary:focus-visible .art-stack{outline:2px solid var(--lamp);outline-offset:8px}
.art-stack{position:relative;display:block;aspect-ratio:16/9;transition:rotate .35s var(--ease)}
.art-group.is-square .art-stack{aspect-ratio:1}
.art-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:6px;background:var(--grain),var(--paper);
  box-shadow:0 1px 1px rgba(0,0,0,.26),0 12px 18px -10px rgba(0,0,0,.66);rotate:calc(var(--i) * 6deg - 4deg);translate:calc(var(--i) * 7px) calc(var(--i) * -4px);transition:rotate .4s var(--ease),translate .4s var(--ease)}
.art-group>summary:hover .art-stack img{rotate:calc(var(--i) * 11deg - 7deg);translate:calc(var(--i) * 16px) calc(var(--i) * -7px)}
.art-group .tape-label{position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:3}
.art-group[data-group=cover] .tape-label{--tape:var(--tape-graphic)}
.art-group[data-group=banner] .tape-label{--tape:var(--tape-videos)}
.art-group[data-group=thumbnails] .tape-label{--tape:var(--tape-social)}
.art-group[open]{width:100%;order:-1}
.art-group[open]>summary{width:clamp(150px,22cqi,220px);margin:0 auto}
.art-prints{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(22px,4cqi,40px);margin:26px auto 0;max-width:980px}
.art-group.is-square .art-prints{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),340px));justify-content:center}
.art-print{--tape:var(--tape-graphic);cursor:zoom-in;rotate:-1.2deg;transition:rotate .3s var(--ease),scale .3s var(--ease)}
.art-print:nth-child(even){rotate:1.6deg}
.art-print::before{content:'';position:absolute;z-index:3;top:-9px;left:50%;width:30%;height:17px;translate:-50% 0;rotate:-4deg;opacity:.86;background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.art-print:hover{rotate:0deg;scale:1.02}
.art-group.is-square .art-print img{aspect-ratio:1}
.art-group[open] .art-prints{animation:prints-in .45s var(--ease) both}
@keyframes prints-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}

/* ---------- über mich: portrait in front of paper letters, readable cards, marked placeholders ---------- */
.bio-scroll{display:block}
.bio-layout{display:grid;grid-template-columns:minmax(240px,44%) minmax(0,1fr);gap:clamp(12px,2.6cqi,36px);min-height:100%}
/* Experience and qualifications continue below the portrait in the left column. */
.bio-profile{min-width:0;align-self:start}
.bio-hero{position:relative;top:0;height:100cqh;min-height:440px;isolation:isolate}
.bio-profile-notes{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:clamp(30px,4.4cqh,44px);padding:30px 6px 24px 4px}
/* the name as six paper letters stuck to the wall behind the portrait; they drift against the figure for depth */
.bio-letters{position:absolute;left:0;right:0;top:9%;z-index:0;display:flex;justify-content:center;gap:.03em;font-weight:700;font-size:clamp(46px,8.6cqi,120px);line-height:.95;letter-spacing:-.04em;
  transform:translate3d(calc(var(--mx,0px) * -1.6),calc(var(--my,0px) * -1.4),0);transition:transform 1.2s var(--ease)}
.bio-letter{position:relative;display:block;rotate:var(--r);filter:drop-shadow(0 9px 12px rgba(0,0,0,.45));transform-origin:50% 0;animation:stick-on .62s var(--ease-pop) backwards;animation-delay:calc(160ms + var(--i) * 80ms)}
.bio-letter:nth-child(odd){translate:0 .12em}
.bio-letter>.sheet{display:block;padding:.04em .1em .1em;clip-path:var(--torn)}
.bio-letter:nth-child(2)::before,.bio-letter:nth-child(5)::before{content:'';position:absolute;z-index:2;top:-.08em;left:50%;width:.8em;height:.2em;translate:-50% 0;rotate:-6deg;
  background:var(--tape-skin),color-mix(in srgb,var(--tape-kraft) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
/* the portrait: a shutter cut through four photos, aligned on the face; the jacket photo holds */
.bio-shots{position:absolute;left:50%;bottom:0;z-index:1;height:93%;aspect-ratio:991/1606;max-width:116%;translate:-50% 0;pointer-events:none;
  transform:translate3d(calc(var(--mx,0px) * 1.1),0,0);transition:transform 1.2s var(--ease)}
.bio-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0;filter:drop-shadow(-16px 20px 20px rgba(0,0,0,.55))}
.is-still .is-final,.is-shooting .is-final{opacity:1}
.is-shooting .bio-shot:not(.is-final){animation:shot-frame 150ms linear forwards;animation-delay:calc(var(--k) * 150ms)}
.is-shooting .is-final{animation:shot-hold 450ms linear,shot-settle .7s var(--ease) 450ms}
.shutter-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 50% 42%,rgba(255,236,206,.55),rgba(255,212,130,.12) 60%,transparent 80%)}
.is-shooting .shutter-flash{animation:shutter-flash 150ms ease-out 4}
@keyframes shot-frame{0%,99%{opacity:1}100%{opacity:0}}
@keyframes shot-hold{0%,100%{opacity:0}}
@keyframes shot-settle{from{scale:1.035}to{scale:1}}
@keyframes shutter-flash{0%{opacity:1}100%{opacity:0}}
/* readable cards instead of bubbles */
.bio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));align-items:start;gap:clamp(30px,4.4cqh,44px) clamp(16px,2.4cqi,28px);padding:clamp(34px,6cqh,64px) 8px 24px 4px}
.bio-card{--r:-.8deg;position:relative;padding:30px 18px 18px;font-size:14px;line-height:1.62;rotate:var(--r);
  box-shadow:0 1px 1px rgba(0,0,0,.25),0 16px 26px -14px rgba(0,0,0,.7)}
.bio-card:nth-child(3n+2){--r:1.1deg}.bio-card:nth-child(3n){--r:-.3deg}
.bio-card::before{content:'';position:absolute;z-index:3;top:-9px;right:22%;width:74px;height:17px;rotate:4deg;pointer-events:none;
  background:var(--tape-skin),color-mix(in srgb,var(--tape-kraft) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.bio-card h3{margin:0 0 8px;font-size:18px;line-height:1.2;letter-spacing:-.03em}
.bio-card p+p{margin-top:9px}
.bio-card .card-icon{--size:44px;--depth:1.35px;position:absolute;top:-20px;left:12px;z-index:4}
.bio-card .card-icon .icon3d{animation-duration:9s}
.bio-cards .bio-card[data-fact=tools]{grid-column:1 / -1}
/* placeholders: plainly marked, never mistaken for facts */
.bio-card.is-placeholder{color:var(--ink-2);background:var(--grain),repeating-linear-gradient(135deg,rgba(59,0,0,.06) 0 10px,transparent 10px 20px),var(--paper-2)}
.bio-card.is-placeholder::after{content:'';position:absolute;inset:9px;border:1.5px dashed rgba(59,0,0,.38);pointer-events:none}
.bio-card[data-fact=intro]{grid-column:1 / -1;padding:26px 22px 20px;font-size:15px}
.bio-card[data-fact=intro] h3{font-size:clamp(22px,3.2cqi,30px)}
.placeholder-stamp{position:absolute;top:12px;right:14px;margin:0;rotate:3deg}
.photo-slot{display:grid;place-items:center;aspect-ratio:1;margin:0 0 12px;background:rgba(30,23,18,.06);perspective:600px}
.photo-slot .icon3d{position:relative;inset:auto;width:38%;aspect-ratio:1;--depth:1.45px}
.has-slot{padding-top:18px}

/* ---------- placeholders: text that still needs Eduard's own words ----------
   Marked in the palette (Eduard: no blue/mint): merlot label with apricot text, dashed merlot
   underline for single lines, a faint merlot edge for sections. Reads as "to do", not decoration.
   The full list with reasons: docs/INPUT-VON-EDUARD.md. Remove each marker once the text is his. */
:root{--input:var(--merlot)}
.input-tag{display:inline-block;margin:0 0 8px;padding:3px 8px 2px;color:var(--apricot);background:var(--input);font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.01em;rotate:-1.5deg;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.needs-input{position:relative;padding-left:14px;box-shadow:inset 4px 0 0 var(--input);background:linear-gradient(90deg,rgba(59,0,0,.08),rgba(59,0,0,0) 70%)}
.needs-input-text{padding:0 2px;background:rgba(59,0,0,.08);text-decoration:underline dashed rgba(59,0,0,.6);text-decoration-thickness:1.5px;text-underline-offset:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* note when no mail program took over the mailto link */
.mail-note{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:60;translate:-50% 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  width:max-content;max-width:min(92vw,560px);padding:14px 16px 14px 20px;color:var(--ink);background:var(--paper-fill);box-shadow:0 1px 1px rgba(0,0,0,.3),0 18px 30px -12px rgba(0,0,0,.8);
  rotate:-.6deg;animation:pin-on .5s var(--ease-pop) backwards;-webkit-user-select:text;user-select:text}
.mail-note p{margin:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.mail-note .tape-button{--tape:var(--tape-kraft)}
/* ---------- social and contact: free-standing 3D icons, paper usernames ---------- */
.view>.scroll{display:flex;flex-direction:column}
/* a loose collage: sizes, angles and places differ; the handle hangs right next to the profile picture */
.channels{position:relative;flex:1;width:100%;min-height:600px;margin:0;padding:0;container-type:inline-size}
.channel{--c:150px;--tape:var(--tape-kraft);position:absolute;left:var(--x,0);top:var(--y,0);display:block;width:var(--c);color:var(--ink);text-decoration:none;outline:none;rotate:var(--r,0deg)}
.channel .icon-stage{--size:var(--c);--depth:2.1px;position:relative;z-index:2}
.channel .scrap{position:absolute;z-index:1;left:calc(100% - 4px);top:88%;translate:0 -50%;padding:10px 16px 12px 24px;font-weight:700;font-size:clamp(14px,1.9cqi,18px);line-height:1.15;letter-spacing:-.02em;white-space:nowrap;clip-path:var(--torn);rotate:var(--sr,-3deg);
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));transition:rotate .35s var(--ease),translate .35s var(--ease)}
.channel .badge{position:absolute;z-index:3;right:-6%;bottom:-6%;width:42%;height:42%;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:0 6px 12px rgba(0,0,0,.5);background:#0e0b0a}
.channel .badge.is-logo{padding:8%;object-fit:contain;background:var(--grain),var(--paper)}
.channel:hover .scrap,.channel:focus-visible .scrap{rotate:0deg;translate:4px -50%}
.channel:hover .icon3d,.channel:focus-visible .icon3d{animation-duration:2.2s}
.channel:focus-visible .icon-stage{outline:2px solid var(--lamp);outline-offset:8px;border-radius:14px}
#view-social .channel:nth-child(1){--c:clamp(150px,24cqi,230px);--x:5%;--y:4%;--r:-7deg;--sr:-4deg}
#view-social .channel:nth-child(2){--c:clamp(120px,17cqi,165px);--x:58%;--y:8%;--r:8deg;--sr:3deg}
/* ONLY GLOBAL on YouTube and the website belong together: one row, side by side */
#view-social .channel:nth-child(3){--c:clamp(130px,19cqi,185px);--x:6%;--y:54%;--r:-4deg;--sr:-2deg}
#view-social .channel:nth-child(4){--c:clamp(130px,19cqi,185px);--x:56%;--y:56%;--r:5deg;--sr:3deg}
#view-contact .channels{min-height:520px}
#view-contact .channel:nth-child(1){--c:clamp(140px,22cqi,210px);--x:6%;--y:4%;--r:-6deg;--sr:-3deg}
#view-contact .channel:nth-child(2){--c:clamp(120px,17cqi,165px);--x:60%;--y:38%;--r:7deg;--sr:3deg}
#view-contact .channel:nth-child(3){--c:clamp(120px,17cqi,160px);--x:14%;--y:64%;--r:-10deg;--sr:-4deg}
/* just above the stacked layout the handles get tight (Eduard, 22.10.2026): two pieces move left so nothing overlaps or leaves the view */
@container (min-width:600px) and (max-width:680px){
  #view-social .channel:nth-child(3){--x:2%}
  #view-contact .channel:nth-child(2){--x:57%}
}
/* narrow: the same pieces stacked, still offset and tilted (selectors match the per-item ones above so these win) */
@container (max-width:599px){
  .channels,#view-contact .channels{min-height:0;padding:28px 8px 40px}
  :is(#view-social,#view-contact) .channels>.channel{position:relative;left:auto;top:auto;--c:112px;margin:0 0 64px var(--nx,0px)}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(1){--nx:2%}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(2){--nx:20%}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(3){--nx:6%}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(4){--nx:16%}
  .channel .scrap{font-size:15px}
}
@container (max-width:380px){
  :is(#view-social,#view-contact) .channels>.channel{--c:84px}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(n){--nx:0px}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(even){--nx:10%}
  .channel .scrap{font-size:13px;padding:8px 10px 10px 16px}
}
.contact-lead{align-self:center;margin:clamp(14px,4cqh,40px) 0 0;padding:.14em .34em .2em;color:var(--ink);font-weight:700;font-size:clamp(30px,5.2cqi,52px);line-height:1;letter-spacing:-.045em;rotate:-1.5deg;
  background:var(--paper-fill);clip-path:var(--torn);filter:drop-shadow(0 9px 12px rgba(0,0,0,.35))}

/* ---------- image lightbox ---------- */
.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);max-width:min(1100px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 32px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);margin:auto;padding:10px;border:0;background:var(--grain),var(--paper);overflow:visible;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.lightbox[open]{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lightbox::backdrop{background:rgba(26,0,0,.86)}
.lightbox img{display:block;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 120px);width:auto;height:auto;object-fit:contain;align-self:center}
.image-close{min-width:56px;font-size:22px;letter-spacing:0;margin:-24px -18px 0 0}

/* ---------- motion: one entrance, the words get stuck on ---------- */
.slab{animation:stick-on .62s var(--ease-pop) backwards;animation-delay:calc(140ms + var(--i) * 70ms)}
@keyframes stick-on{from{opacity:0;transform:perspective(700px) translate3d(-8px,-18px,60px) rotateX(-70deg) rotate(-5deg)}55%{opacity:1}to{opacity:1;transform:perspective(700px) translate3d(0,0,0) rotateX(0deg) rotate(0deg)}}
.home-frame .board-object{animation:pin-on .7s var(--ease-pop) backwards;animation-delay:calc(420ms + var(--d,0) * 60ms)}
.b-onlyglobal{--d:0}.b-farbspiel{--d:1}.b-ogtv{--d:2}.b-rotstudie{--d:3}.b-autolut{--d:4}.b-party{--d:5}.b-food{--d:6}.b-chess{--d:7}.b-kartenwerk{--d:8}.b-hub{--d:9}.b-poker{--d:10}.b-elementa{--d:11}
@keyframes pin-on{from{opacity:0;transform:perspective(900px) translate3d(0,-12px,120px) rotateX(18deg)}to{opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .board-object,.pw-project-card,.pv-card,.art-print,.bio-card,.slab,.tape-button,.tape-link,.pw-tape-button,.pw-links a,.pv-original,.home-frame{transform:none!important}
  .name-stroke path{stroke-dashoffset:0}
  .wall-light{transform:none}
}
@media (forced-colors:active){
  .sheet,.print,.paper-word{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .slab[data-active=true] .paper-word{outline:2px solid Highlight}
  .tape-button,.tape-link,.pw-tape-button,.pv-original{border:1px solid ButtonText;clip-path:none}
}

/* ---------- tablet ---------- */
@media (max-width:1100px) and (min-width:761px){
  .app{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:24px;padding-left:24px;padding-right:24px}
  .claim{font-size:clamp(24px,3.6vw,38px)}
  .print .caption{font-size:10px}
}

/* ---------- short desktop / landscape phones ---------- */
@media (max-height:560px) and (min-width:761px){
  :root{--top:54px;--frame:9px}
  .claim{font-size:clamp(18px,5.4vh,30px);gap:4px}
  .side{padding-bottom:0}
  .print .caption{display:none}
  .board-object::before{height:12px;top:-6px}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--top:calc(68px + env(safe-area-inset-top,0px));--frame:9px}
  .topbar{padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}
  .app{display:block;padding:var(--top) 18px max(18px,env(safe-area-inset-bottom))}
  .side{height:100%;align-items:center;justify-content:center;gap:clamp(22px,4vh,36px);padding-bottom:2vh}
  .claim{align-items:center;font-size:clamp(25px,min(8.4vw,5.2vh),42px);gap:clamp(5px,1.1vh,10px)}
  .slab:nth-child(n){--x:0em}
  .slab:nth-child(even){--x:.3em}
  .slab:hover,.slab[data-active=true]{translate:var(--x) 0}
  .board-toggle{display:inline-flex}
  .show-mobile-board .side,.is-open .side{visibility:hidden}

  .stage{position:fixed;inset:0;z-index:20;visibility:hidden;container-type:size;padding:var(--top) 12px calc(78px + env(safe-area-inset-bottom))}
  .show-mobile-board .stage,.is-open .stage{visibility:visible}
  .home-frame{position:relative;left:auto;top:auto;translate:none;margin:0 auto;max-height:100%}
  .show-mobile-board .home-frame{animation:view-in .45s var(--ease) backwards}
  .home-frame :is(.board-object,.board-icon){animation:none}
  .board-object::before{height:13px;top:-7px}

  .panel{position:absolute;inset:var(--top) 12px calc(78px + env(safe-area-inset-bottom))}
  .view-heading{margin:0 0 14px;justify-content:center}
  .view-heading h2{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
    padding:.12em .34em .18em;color:var(--ink);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.04em;rotate:-1.2deg;
    background:var(--paper-fill);clip-path:var(--torn);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
  .back,.mobile-board-return{position:fixed;z-index:30;top:auto;left:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  .show-mobile-board:not(.is-open) .mobile-board-return{display:inline-flex}

  .art-board{padding:28px 12px 48px;background-attachment:scroll}
  .art-board:not(:has(.art-group[open])){align-content:flex-start}
  .art-group{width:min(100%,250px)}
  .bio-layout{grid-template-columns:1fr;gap:0}
  .bio-hero{position:relative;height:min(74cqh,560px);min-height:360px}
  .bio-letters{font-size:clamp(40px,14vw,64px);top:6%}
  .bio-profile-notes{padding:30px 6px 0}
  .bio-cards{grid-template-columns:1fr;padding:30px 6px 40px}
  .mail-note{bottom:calc(78px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - var(--top) - 94px - env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
}
@media (max-width:760px) and (max-height:560px){
  .side{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,212,130,.35) transparent;padding:16px 0 24px}
  .claim,.side-extras{flex-shrink:0}
}
@media (max-width:360px){
  .tape-button,.tape-link{padding:10px 14px;letter-spacing:.08em}
}

/* ============================================================
   3D ICONS AND MOTION
   Motion: the lamp switches on, sections swing in and their works get
   pinned one after another, prints lean toward the mouse (no glare).
   Everything stops with prefers-reduced-motion.
   ============================================================ */

.slab:hover::before{rotate:calc(var(--tr,5deg) * 1.7)}

/* the lamp switches on once */
.wall-light{animation:lamp-on 1.5s linear both}
@keyframes lamp-on{0%{opacity:0}12%{opacity:.75}16%{opacity:.12}24%{opacity:.9}29%{opacity:.35}42%,100%{opacity:1}}

/* opening a section: the board swings in, then the works are pinned one by one */
.is-open .view:not([hidden]) :is(.board-frame,.pw-shell,.pv-scroll){animation:hang-in .75s var(--ease-pop) backwards}
:is(.board-frame,.pw-shell,.pv-scroll){transform-origin:50% 0}
@keyframes hang-in{from{opacity:0;transform:perspective(1400px) rotateX(24deg) translateY(-18px)}60%{opacity:1;transform:perspective(1400px) rotateX(-3deg) translateY(0)}to{opacity:1;transform:perspective(1400px) rotateX(0deg) translateY(0)}}
.is-open .view:not([hidden]) :is(.pw-project-card,.pv-card,.art-group,.channel,.contact-lead,.bio-card){animation:pin-on .65s var(--ease-pop) backwards;animation-delay:calc(260ms + var(--n,0) * 75ms)}
:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(2){--n:1}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(3){--n:2}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(4){--n:3}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(5){--n:4}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(6){--n:5}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(7){--n:6}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(8){--n:7}:is(.pw-project-card,.pv-card,.art-group,.channel,.bio-card):nth-child(9){--n:8}
@keyframes orb-in{from{opacity:0;transform:perspective(500px) rotateY(-110deg) scale(.55)}to{opacity:1;transform:perspective(500px) rotateY(0deg) scale(1)}}

.channel{--n:var(--i,0)}

/* ---------- 3D icons: the glyph stacked in depth and turned in space ----------
   Used where the icon is the content or the control: platforms (social, contact),
   play on videos, the + on graphic stacks. Monochrome: light front, graphite depth. */
.icon-stage{--size:120px;--depth:1.25px;position:relative;display:block;flex:none;width:var(--size);aspect-ratio:1;perspective:700px}
.icon3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-24deg);
  animation:icon-sway 7s ease-in-out infinite alternate;animation-delay:calc(var(--n,0) * -1.6s)}
.icon3d>svg{position:absolute;inset:0;width:100%;height:100%;stroke-width:2.2;
  color:color-mix(in srgb,var(--apricot) calc(100% - var(--l) * 7%),var(--merlot));transform:translateZ(calc(var(--l) * var(--depth) * -1))}
.icon3d>svg:first-child{color:#f6e2bb}
.icon3d>svg:last-child{filter:drop-shadow(10px 18px 14px rgba(0,0,0,.55))}
@keyframes icon-sway{from{transform:rotateX(14deg) rotateY(-26deg)}to{transform:rotateX(6deg) rotateY(18deg)}}
.print-icon{--size:clamp(30px,2.7vw,44px);--depth:1.1px;position:absolute;right:-13px;bottom:-13px;z-index:4;pointer-events:none}
.print-icon .icon3d{animation:none;transform:rotateX(16deg) rotateY(-28deg);transition:transform .55s var(--ease)}
.print-icon .icon3d>svg{stroke-width:2.5}
.group-icon{--size:clamp(36px,5cqi,48px);right:-17px;bottom:-17px;z-index:5}
.group-icon .icon3d{transition:transform .5s var(--ease-pop)}
.art-group>summary:hover .group-icon .icon3d{transform:rotateX(8deg) rotateY(18deg)}
.art-group[open] .group-icon .icon3d{transform:rotateX(14deg) rotateY(-24deg) rotateZ(45deg)}
.is-open .view:not([hidden]) :is(.print-icon,.icon-stage){animation:orb-in .5s var(--ease-pop) backwards;animation-delay:calc(560ms + var(--n,var(--d,0)) * 75ms)}

/* sound toggle beside the language switch */
.utilities{display:flex;align-items:center;gap:8px}
.sound-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:104px;height:42px;padding:0 12px;border-radius:999px;color:var(--ink-2);transition:color .2s}
.sound-toggle:hover,.sound-toggle[aria-pressed=true]{color:var(--ink)}
.sound-toggle .ui-icon{width:18px;height:18px;flex:none}
.sound-label{font:700 12px/1 var(--font);white-space:nowrap}
.sound-toggle[aria-pressed=true] .sound-off,.sound-toggle[aria-pressed=false] .sound-on{display:none}
@media (pointer:coarse){.sound-toggle{height:46px}}

/* wood and anthracite: a walnut veneer wall behind the stage, the navigation stays on anthracite.
   The veneer is cut from the hallway of onlyglobal.de (onlyglobal_floor_day.webp), lighting flattened,
   book-matched in pairs; one panel spans the full wall height. */
.wall::before{content:'';position:absolute;top:0;bottom:0;left:38.5vw;right:0;transition:opacity .5s;
  background:
    linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0) 4%),
    radial-gradient(55% 48% at 52% 46%,rgba(255,180,96,.1),transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 30%,rgba(0,0,0,.28)),
    url("graphic/merlot-paneel.webp") 0 0/auto 100% repeat-x,
    var(--merlot);
  box-shadow:-22px 0 44px rgba(0,0,0,.6)}
@media (max-width:1100px) and (min-width:761px){.wall::before{left:33vw}}
@media (max-width:760px){
  .wall::before{left:0;opacity:0}
  body:has(.app.is-open) .wall::before,body:has(.app.show-mobile-board) .wall::before{opacity:1}
}

/* prints lean toward a fine pointer (set by app.js) and lift off the board toward you on hover */
.board-object,.pw-project-card,.pv-card,.art-print,.bio-card{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(var(--lift,0px));
  transition:transform .35s var(--ease),rotate .35s var(--ease),scale .3s var(--ease)}
:is(.board-object,.pw-project-card,.pv-card,.art-print):is(:hover,:focus-visible){--lift:22px}
.is-tilting{will-change:transform}
/* the deeper hover shadow sits on its own layer and only fades, so the print itself is never repainted */
:is(.board-object,.pw-project-card,.pv-card)::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 28px 34px -14px rgba(0,0,0,.75);opacity:0;transition:opacity .35s}
:is(.board-object,.pw-project-card,.pv-card):is(:hover,:focus-visible)::after{opacity:1}

@media (max-width:760px){
}

/* A small paper route to ONLY GLOBAL, kept with the mobile pinboard action. */
.side-extras{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.side-global-link{font-size:12px;min-height:40px;padding:9px 15px;rotate:1.1deg}
@media(max-width:760px){.side-extras{justify-content:center;gap:10px;margin-top:0}.side-global-link{min-height:44px}}
@media(max-height:560px) and (min-width:761px){.side-extras{margin-top:14px}.side-global-link{min-height:34px;padding-top:7px;padding-bottom:7px}}

/* Destination controls keep their paper styling and native link behavior. */
a.key,a.board-object,a.pw-project-card,a.pv-card,a.tape-label{text-decoration:none;cursor:pointer}
a.key{display:inline-block}

/* Mobile channel alignment: centered icons with their paper labels underneath. */
@media (max-width:760px){
  :is(#view-social,#view-contact) .channels{display:flex;flex-direction:column;align-items:center;flex:none;gap:44px;min-height:0;padding:30px 12px 48px}
  :is(#view-social,#view-contact) .channels>.channel:nth-child(n){position:relative;left:auto;top:auto;display:flex;flex-direction:column-reverse;align-items:center;gap:18px;--c:clamp(84px,24vw,112px);width:min(100%,280px);max-width:100%;margin:0;rotate:0deg}
  :is(#view-social,#view-contact) .channel .icon-stage{flex:none}
  :is(#view-social,#view-contact) .channel .scrap{position:relative;left:auto;top:auto;translate:none;max-width:100%;padding:10px 16px 12px;font-size:clamp(13px,4vw,15px);white-space:normal;overflow-wrap:anywhere;text-align:center}
}