/* ─────────────────────────────────────────────────────────────
   Schriften liegen im Projekt und werden nicht extern geladen.
   Source Serif 4 trägt die Aussagen, Inter den Apparat.
   Beide SIL Open Font License.
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:"Source Serif 4";src:url(assets/fonts/source-serif-4-400.woff2?v=02194deb) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-400.woff2?v=8909904a) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-700.woff2?v=6f56409f) format("woff2");font-weight:700;font-style:normal;font-display:swap}

html { font-size:16px; }
@media (min-width:1600px) and (min-height:900px){html{font-size:17px}}
@media (min-width:2400px) and (min-height:1100px){html{font-size:18px}}
:root { --ink:#171b19; --paper:#eeeae0; --acid:#d6ff3f; --signal:#fbf8ef; --signal-line:rgba(255,255,255,.18); --signal-shadow:rgba(0,0,0,.35); --line:rgba(23,27,25,.22); --max:82.5rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x:hidden; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-5rem; padding:.8rem 1rem; background:var(--acid); }
.skip-link:focus { top:1rem; }
.site-header { max-width:var(--max); margin:0 auto; min-height:5.375rem; padding:0 clamp(1.2rem,4vw,3.5rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.identity { font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.site-header p { margin:0; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.edition { justify-self:end; font-size:.76rem; }
.intro { max-width:var(--max); min-height:0; margin:0 auto; padding:min(clamp(3.5rem,7vw,7rem),8svh) clamp(1.2rem,4vw,3.5rem) clamp(4rem,8vw,7rem); }
.kicker { margin:0 0 1.2rem; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; }
h1 { max-width:66.25rem; margin:0; font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:clamp(2.8rem,min(10.5vw,13svh),10rem); font-weight:400; line-height:.91; letter-spacing:-.055em; }
.intro-text { max-width:35.625rem; margin:clamp(2.5rem,5vw,4.5rem) 0 0 0; font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:clamp(1.25rem,2.2vw,1.9rem); line-height:1.3; }
.scroll-hint { display:inline-flex; gap:1rem; align-items:center; margin-top:3rem; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; text-decoration:none; border-bottom:1px solid; padding-bottom:.45rem; }
.poster-section { padding:clamp(4rem,8vw,8rem) max(clamp(1.2rem,4vw,3.5rem),calc((100vw - var(--max))/2 + 3.5rem)); background:#121614; color:#f5f1e8; }
.section-head { margin-bottom:2rem; display:flex; justify-content:space-between; align-items:baseline; gap:2rem; border-bottom:1px solid rgba(255,255,255,.25); }
.section-head h2 { margin:0 0 1rem; font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:clamp(2.5rem,5vw,4.8rem); font-weight:400; }
.section-head p { margin:0 0 1.2rem; color:rgba(255,255,255,.65); }
.poster-wall { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2vw,2rem); align-items:start; }
.poster { position:relative; min-height:38.125rem; overflow:hidden; color:white; background:#252b28; border:1px solid rgba(255,255,255,.18); text-decoration:none; isolation:isolate; }
.poster-featured { grid-column:span 6; cursor:pointer; }
.wall-note { position:relative; grid-column:span 4; min-height:16.25rem; margin-top:6rem; padding:1.4rem; color:#171b19; background:#d8d2c5; }
.wall-note p { max-width:12rem; margin:5rem 0 1rem; font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:clamp(1.8rem,3vw,3rem); line-height:.98; letter-spacing:-.04em; }
.wall-note small { display:block; max-width:16rem; font-size:.78rem; line-height:1.45; }
.scene-deck { position:absolute; inset:0; z-index:-2; overflow:hidden; background:#252b28; }
.scene { position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity 1s ease,transform 7s cubic-bezier(.2,.8,.2,1); }
.scene:first-child, .scene.is-active { opacity:1; transform:scale(1.01); }
.scene img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.72); }
.scene-signal { position:absolute; top:1.2rem; right:1.2rem; z-index:2; display:grid; gap:.25rem; text-align:right; color:rgba(255,255,255,.86); font-size:.62rem; letter-spacing:.14em; }
.scene-signal b { color:var(--acid); font-size:.58rem; }
.poster-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom,rgba(0,0,0,.03) 25%,rgba(0,0,0,.75)); }
.poster-index { position:absolute; top:1.2rem; left:1.2rem; font-size:.74rem; letter-spacing:.13em; }
.poster-copy { position:absolute; left:1.4rem; right:1.4rem; bottom:1.5rem; display:grid; gap:.45rem; transition:transform .45s ease; }
.poster-type,.poster-artist { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.poster-copy strong { font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:clamp(2.8rem,5vw,5.5rem); font-weight:400; line-height:.9; letter-spacing:-.045em; }
.poster-action { position:absolute; z-index:2; top:50%; left:50%; min-width:11.25rem; padding:.95rem 1.1rem; display:flex; justify-content:space-between; gap:1rem; color:#121614; background:var(--acid); border-radius:99px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:0; transform:translate(-50%,-35%) scale(.92); transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1); }
.plus { position:absolute; top:50%; left:50%; font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-size:7rem; opacity:.32; transform:translate(-50%,-50%); }
.poster-featured:hover .scene img,.poster-featured:focus-visible .scene img { filter:grayscale(0) contrast(1.03) brightness(.95); transition:filter .65s ease; }
.poster-featured:hover .poster-action,.poster-featured:focus-visible .poster-action { opacity:1; transform:translate(-50%,-50%) scale(1); }
.poster-featured:hover .poster-copy,.poster-featured:focus-visible .poster-copy { transform:translateY(-.6rem); }
.poster-featured:focus-visible { outline:4px solid var(--acid); outline-offset:5px; }

/* Rueckkehr aus einem Projekt: die zugehoerige Karte meldet sich kurz,
   damit man wieder weiss, wo man war. Reines CSS, kein Skript. */
.poster:target,
.wall-note:target{
  outline:3px solid var(--acid);
  outline-offset:6px;
  animation:karte-zurueck 2.4s cubic-bezier(.2,.8,.2,1) 1 forwards;
  scroll-margin-block:clamp(3rem,10vh,7rem);
}
@keyframes karte-zurueck{
  0%   {outline-color:var(--acid);   outline-offset:6px}
  55%  {outline-color:var(--acid);   outline-offset:6px}
  100% {outline-color:transparent;   outline-offset:14px}
}
@media (prefers-reduced-motion:reduce){
  .poster:target,.wall-note:target{animation:none;outline-color:var(--acid)}
}
.js-ready [data-reveal] { opacity:0; transform:translateY(1.5rem); transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.js-ready [data-reveal].is-visible { opacity:1; transform:none; }
/* Die per Anker angesteuerte Karte darf nicht auf den Observer warten. */
.js-ready [data-reveal]:target{ opacity:1; transform:none; }
.poster-wall [data-reveal]:nth-child(2) { transition-delay:80ms; }
.poster-wall [data-reveal]:nth-child(3) { transition-delay:160ms; }
footer { max-width:var(--max); margin:0 auto; padding:3rem clamp(1.2rem,4vw,3.5rem); display:flex; justify-content:space-between; gap:2rem; font-size:.8rem; }
footer p { margin:0; }
@media (max-width:900px) { .site-header{grid-template-columns:1fr auto}.site-header p{display:none}.poster-featured{grid-column:span 12}.wall-note{grid-column:span 12;margin-top:0} }
@media (max-width:620px) { .site-header{min-height:70px}.intro{padding-top:3.5rem}h1{max-width:100%;font-size:clamp(2.8rem,15vw,5rem);line-height:.94;overflow-wrap:break-word}.intro-text{margin-left:0;max-width:100%;font-size:clamp(1.1rem,5vw,1.45rem)}.section-head{align-items:flex-start;flex-direction:column;gap:0}.poster{grid-column:span 12;min-height:72svh;margin:0}.wall-note{min-height:220px;margin:0}.scene img{filter:grayscale(1) contrast(1.05) brightness(.82)}.poster-action{top:1rem;right:1rem;left:auto;min-width:0;opacity:1;transform:none}.poster-featured:hover .poster-action,.poster-featured:focus-visible .poster-action{transform:none}footer{flex-direction:column} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.scene,.poster-action,.poster-copy,[data-reveal]{transition:none!important;opacity:1!important;transform:none!important}.scene:not(:first-child){display:none} }

.poster-build{
  grid-column:span 6;
  min-height:38.125rem;
  margin-top:0;
  color:#fff;
  background:#252b28;
  border-color:rgba(255,255,255,.18);
}
.poster-build .poster-index,.poster-build .scene-signal{color:#fff}
.poster-build .poster-copy{left:1.4rem;right:1.4rem;bottom:1.4rem}
.poster-build .poster-copy strong{font-size:clamp(2.4rem,4vw,4rem)}
.poster-build .poster-artist{max-width:20ch;color:rgba(255,255,255,.78)}
.poster-build{cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .45s ease}
.poster-build:hover,.poster-build:focus-visible{transform:translateY(-.35rem)}
.poster-build:hover .scene img,.poster-build:focus-visible .scene img{filter:grayscale(0) contrast(1.03) brightness(.95);transition:filter .65s ease}
.material-collage{position:absolute;z-index:-2;inset:0;overflow:hidden;background:#252b28}
.collage-image{position:absolute;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.52);box-shadow:0 1rem 2rem rgba(0,0,0,.22);filter:grayscale(1) contrast(1.08) brightness(.72);transition:filter .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.collage-image img{display:block;width:100%;height:100%;object-fit:cover}
.collage-main{inset:9% 27% 10% 7%;transform:translateZ(0)}
.collage-blue{width:34%;height:31%;top:8%;right:6%;transform:translate(0,0)}
.collage-orange{width:36%;height:29%;right:4%;bottom:9%;transform:translate(0,0)}
.poster-build:hover .collage-image,.poster-build:focus-visible .collage-image{filter:grayscale(0) contrast(1.03) brightness(.95)}
.poster-build:hover .collage-main,.poster-build:focus-visible .collage-main{transform:scale(1.015)}
.poster-build:hover .poster-copy,.poster-build:focus-visible .poster-copy{transform:translateY(-.6rem)}
.poster-build:hover .poster-action,.poster-build:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
.poster-build:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
@media (max-width:900px){.poster-build{grid-column:span 12;margin-top:0}}
@media (max-width:620px){.poster-build{min-height:72svh}.poster-build .poster-copy{bottom:1.2rem}}


/* ============================================================
   v1.71 — TYPOGRAPHIC POLISH
   Keep the existing editorial identity: Source Serif 4 = voice,
   Inter = apparatus. No new typeface, no generic redesign.
   ============================================================ */

html{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"liga" 1,"kern" 1;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site-header,
.kicker,
.scroll-hint,
.poster-index,
.poster-type,
.poster-artist,
.scene-signal{
  font-feature-settings:"liga" 1,"kern" 1;
}
.identity{
  letter-spacing:.095em;
}
.kicker{
  letter-spacing:.17em;
  line-height:1.15;
}
.scroll-hint{
  letter-spacing:.09em;
  border-bottom-width:1.5px;
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.scroll-hint:hover,
.scroll-hint:focus-visible{
  color:#334238;
  transform:translateY(-1px);
}
.section-head h2{
  line-height:.96;
  letter-spacing:-.04em;
}
.section-head p{
  max-width:30ch;
  line-height:1.45;
}
.poster-copy strong{
  letter-spacing:-.05em;
  line-height:.9;
}
.poster-type,
.poster-artist{
  letter-spacing:.115em;
}
.wall-note p{
  letter-spacing:-.045em;
  line-height:.96;
}
.wall-note small{
  line-height:1.5;
}

@media (max-width:620px){
  .kicker{letter-spacing:.15em}
}


/* ============================================================
   v1.73 — UNIFIED ART DIRECTION / HOME
   Source Serif = authored voice. Inter = interface / metadata.
   ============================================================ */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.intro h1{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(2.9rem,min(11vw,13.5svh),10.5rem);
  font-weight:400;
  line-height:.89;
  letter-spacing:-.055em;
  max-width:15ch;
  text-wrap:balance;
  font-feature-settings:"kern" 1,"liga" 1;
}
.kicker{
  margin-bottom:1.35rem;
  font-size:.71rem;
  font-weight:700;
  letter-spacing:.18em;
  opacity:.72;
}
.intro-text{
  max-width:34rem;
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(1.28rem,2.15vw,1.85rem);
  line-height:1.38;
  letter-spacing:-.01em;
  text-wrap:pretty;
  font-feature-settings:"kern" 1,"liga" 1;
}
.scroll-hint{
  gap:.9rem;
  margin-top:3.2rem;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.13em;
  padding-bottom:.4rem;
}
.portfolio-download{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin-top:1.35rem;
  color:inherit;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1.2;
  text-decoration:none;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:.4rem;
  opacity:.74;
  transition:opacity .2s ease,transform .2s ease;
}
.portfolio-download:hover,
.portfolio-download:focus-visible{
  opacity:1;
  transform:translateY(-1px);
}
@media(max-width:620px){
  .intro h1{
    font-size:clamp(2.7rem,13.2vw,5rem);
    line-height:.92;
    max-width:13ch;
  }
  .intro-text{
    font-size:clamp(1.18rem,5.5vw,1.48rem);
    line-height:1.46;
  }
  .portfolio-download{margin-top:1.1rem}
}

/* ============================================================
   v1.132 — PLASTIKZEIT / IRIDESCENT SIGNAL
   At rest the wall stays monochrome. Hover and keyboard focus
   reveal the spectral colour of the plastic membrane.
   ============================================================ */
.poster-plastikzeit{
  grid-column:span 6;
  min-height:38.125rem;
  color:var(--signal);
  background:#111;
  cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.poster-plastikzeit:hover,.poster-plastikzeit:focus-visible{transform:translateY(-.35rem)}
.poster-plastikzeit:focus-visible{outline:4px solid #f7f4ed;outline-offset:5px}
.poster-plastikzeit .poster-index{z-index:3}
.poster-plastikzeit .poster-copy{z-index:3;inset:0;max-width:none;display:block;transition:none}
.poster-plastikzeit .poster-copy strong{position:absolute;inset:0;display:block;font-family:Inter,Arial,sans-serif;font-size:clamp(3.4rem,6.2vw,6.2rem);font-weight:700;line-height:.72;letter-spacing:-.09em;text-transform:uppercase}
.poster-plastikzeit .poster-copy strong span{position:absolute;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.poster-plastikzeit .poster-copy strong span:first-child{left:1.4rem;top:21%;color:#f7f4ed}
.poster-plastikzeit .poster-copy strong span:last-child{right:1.4rem;bottom:8%;color:transparent;-webkit-text-stroke:1.5px #f7f4ed}
.poster-plastikzeit .poster-type{position:absolute;top:1.2rem;right:1.3rem;max-width:22rem;text-align:right;color:rgba(255,255,255,.8)}
.poster-plastikzeit .poster-artist{position:absolute;left:1.4rem;bottom:1.35rem;color:rgba(255,255,255,.78)}
.poster-plastikzeit .poster-action{color:#111;background:var(--acid)}
.poster-plastikzeit:hover .poster-action,.poster-plastikzeit:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
.signal-poster{position:absolute;inset:0;z-index:-1;overflow:hidden;background:
  linear-gradient(90deg,transparent 0 9.5%,rgba(255,255,255,.2) 9.6% 9.75%,transparent 9.85%),
  radial-gradient(circle at 72% 18%,rgba(78,199,213,.82),transparent 31%),
  radial-gradient(circle at 25% 78%,rgba(237,111,97,.72),transparent 35%),
  radial-gradient(circle at 72% 82%,rgba(113,99,232,.72),transparent 38%),
  #15151b;
  filter:grayscale(1) contrast(1.08);
  transition:filter .65s ease}
.signal-poster::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:2.25rem 2.25rem;opacity:.28}
.signal-poster::after{content:"";position:absolute;inset:1.15rem;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.signal-disc{position:absolute;width:clamp(24rem,47vw,39rem);aspect-ratio:1;right:-6%;top:5%;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 8px,rgba(116,228,236,.2) 9px 10px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.signal-disc::after{content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:repeating-conic-gradient(from 40deg,rgba(255,255,255,.12) 0 2deg,transparent 2deg 8deg)}
.signal-scan{position:absolute;z-index:2;left:-4%;right:-4%;height:3px;clip-path:polygon(0 45%,8% 8%,16% 80%,25% 21%,33% 68%,42% 4%,51% 92%,61% 28%,70% 72%,79% 12%,88% 83%,100% 40%);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.signal-scan-a{background:#f7f4ed}
.signal-scan-b{background:#7fe3e8}
.signal-scan-a{top:52%;transform:scaleY(6)}
.signal-scan-b{top:54%;transform:scaleY(2);opacity:.34}
.signal-coordinate{position:absolute;left:.1rem;top:4.5rem;font-size:.56rem;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.62);writing-mode:vertical-rl;transform:rotate(180deg)}
.signal-monogram{position:absolute;right:1.35rem;top:43%;font-family:Inter,Arial,sans-serif;font-size:clamp(5rem,11vw,10rem);font-weight:700;line-height:.7;letter-spacing:-.12em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18)}
.poster-plastikzeit:hover .signal-poster,.poster-plastikzeit:focus-visible .signal-poster{filter:grayscale(0) contrast(1.02) saturate(.92)}
.poster-plastikzeit:hover .signal-disc,.poster-plastikzeit:focus-visible .signal-disc{transform:translate(-7%,2%) rotate(9deg)}
.poster-plastikzeit:hover .signal-scan-a,.poster-plastikzeit:focus-visible .signal-scan-a{transform:scaleY(15)}
.poster-plastikzeit:hover .signal-scan-b,.poster-plastikzeit:focus-visible .signal-scan-b{transform:translateY(1.2rem) scaleY(5);opacity:.62}
.poster-plastikzeit:hover .poster-copy strong span:first-child,.poster-plastikzeit:focus-visible .poster-copy strong span:first-child{transform:translateX(.8rem)}
.poster-plastikzeit:hover .poster-copy strong span:last-child,.poster-plastikzeit:focus-visible .poster-copy strong span:last-child{transform:translateX(-.8rem)}

@media(max-width:900px){
  .poster-plastikzeit{grid-column:span 12;margin-top:0}
}

@media(max-width:620px){
  .poster-plastikzeit{min-height:72svh}
  .poster-plastikzeit .poster-copy{inset:0}
  .poster-plastikzeit .poster-copy strong{font-size:clamp(3.5rem,17vw,5.6rem)}
  .poster-plastikzeit .poster-copy strong span:first-child{top:23%;left:1rem}
  .poster-plastikzeit .poster-copy strong span:last-child{right:1rem;bottom:10%}
  .poster-plastikzeit .poster-type{top:4.5rem;right:1rem;max-width:13rem;line-height:1.5}
  .poster-plastikzeit .poster-artist{left:1rem;bottom:1.2rem}
  .signal-disc{width:32rem;right:-50%;top:-4%}
  .signal-coordinate{left:0;top:5.2rem}
}

@media(prefers-reduced-motion:reduce){
  .poster-plastikzeit,.poster-plastikzeit .poster-copy,.poster-plastikzeit .poster-copy strong span,.signal-disc,.signal-scan{transition:none!important}
}

/* v1.135 — FHNW-style service controls, adapted for this portfolio. */
.site-header{grid-template-columns:1fr auto 1fr}
.site-utilities{justify-self:end;display:flex;align-items:center;gap:1.45rem}
.language-status{font-size:.9rem;line-height:1;letter-spacing:.01em}
.utility-block{display:grid;grid-template-columns:repeat(2,2.56rem);height:2.56rem;background:#ffe414}
.utility-button{position:relative;display:grid;place-items:center;margin:0;padding:0;border:0;background:transparent;color:#101010;cursor:pointer}
.utility-button:hover,.utility-button:focus-visible{background:rgba(0,0,0,.08)}
.utility-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.utility-button span{display:block;position:relative;width:1.05rem;height:1.05rem}
.theme-toggle span{width:auto;height:auto;font:1.55rem/1 Arial,sans-serif;background:none}
.theme-toggle span::before,.theme-toggle span::after{content:none}
.search-toggle{border-left:1px solid rgba(0,0,0,.08)}
.search-toggle span{width:.9rem;height:.9rem;border:3px solid #111;border-radius:50%}
.search-toggle span::after{content:"";position:absolute;width:.58rem;height:3px;right:-.48rem;bottom:-.26rem;background:#111;transform:rotate(45deg);transform-origin:left center}
:root[data-theme="dark"]{--ink:#f4f0e7;--paper:#131513;--line:rgba(255,255,255,.25)}
:root[data-theme="dark"] .theme-toggle span{background:none;border:0}
:root[data-theme="dark"] .intro{color:var(--ink)}
/* В тёмной теме приём «светлая бумага / тёмная стена» невоспроизводим:
   оба тона тёмные. Стену отделяет линия и лёгкий подъём плоскости. */
[data-theme="dark"] .poster-section{background:#1a1f1c;border-top:1px solid rgba(214,255,63,.3)}
[data-theme="dark"] .poster{border-color:rgba(255,255,255,.24)}
:root[data-theme="dark"] .scroll-hint:hover,:root[data-theme="dark"] .scroll-hint:focus-visible{color:#ffe414}

.portfolio-search{width:min(100%,100vw);height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#141414;color:#f6f3ec}
.portfolio-search::backdrop{background:rgba(0,0,0,.7)}
.search-shell{max-width:108rem;margin:0 auto;padding:clamp(2.25rem,6vw,5.2rem) clamp(1.25rem,5.5vw,7rem)}
.search-form-row{display:grid;grid-template-columns:1fr 3.8rem;gap:1.8rem;align-items:stretch}
.search-input-wrap{position:relative;min-width:0}
.search-form-row input{position:relative;z-index:2;width:100%;min-width:0;height:4rem;padding:0 1rem 0 calc(1rem + var(--search-prefix-width,0px));border:1px solid #c7bd18;background:transparent;color:#f6f3ec;font:400 clamp(1.45rem,3.4vw,2.35rem)/1 Inter,sans-serif;outline:0}
.js-ready .search-form-row input:not(:placeholder-shown){color:transparent;caret-color:#f6f3ec}
.search-ghost{position:absolute;z-index:3;inset:0;display:flex;align-items:center;padding:0 1rem;color:#f6f3ec;font:400 clamp(1.45rem,3.4vw,2.35rem)/1 Inter,sans-serif;pointer-events:none;white-space:pre;overflow:hidden}
.search-ghost i{color:rgba(246,243,236,.42);font-family:"Source Serif 4",Georgia,serif;font-style:italic;letter-spacing:.01em}
.search-ghost i:not(:empty){pointer-events:auto;cursor:pointer}
.search-form-row input::placeholder{color:rgba(246,243,236,.46)}
.search-form-row input:focus{border-color:#ffe414;box-shadow:0 0 0 1px #ffe414}
.search-suggestion{display:none!important}
.search-close{border:0;border-radius:50%;background:#ffe414;color:#111;font:300 3rem/1 Arial,sans-serif;cursor:pointer}
.search-close:hover,.search-close:focus-visible{transform:rotate(90deg);outline:2px solid #f6f3ec;outline-offset:3px}
.search-intro{margin:1.5rem 0 0;font-size:clamp(1rem,1.7vw,1.22rem);color:rgba(246,243,236,.82)}
.search-count{margin:4rem 0 1rem;color:rgba(246,243,236,.5);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.search-results{display:grid;border-top:1px solid rgba(255,255,255,.23)}
.search-results a{display:grid;grid-template-columns:4rem minmax(10rem,1fr) minmax(12rem,24rem);gap:1rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.23);color:rgba(246,243,236,.54);text-decoration:none;transition:color .2s ease,background .2s ease,padding .2s ease}
.search-results a[hidden]{display:none!important}
.search-results a:hover,.search-results a:focus-visible{padding-left:1rem;color:#fff;background:rgba(255,228,20,.11);outline:0}
.search-results a.is-primary{padding-left:1rem;color:#fff;background:rgba(255,228,20,.11)}
.search-results a span{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.8rem,3.3vw,3rem);line-height:.9;color:inherit}
.search-results a small{font-size:.72rem;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.search-results mark{padding:0;background:transparent;color:#ffe414;font:inherit}
.search-empty{margin:2rem 0;color:#ffe414;font-size:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.poster{will-change:transform}

/* ============================================================
   v1.133 — RE:PACKAGED / UNFOLDED CARTON
   The home card stays monochrome at rest and reveals the found
   packaging colour on hover or keyboard focus.
   ============================================================ */
.poster-repackaged{
  grid-column:span 6;
  min-height:38.125rem;
  color:#f7f4ed;
  background:#272824;
  cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.poster-repackaged:hover,.poster-repackaged:focus-visible{transform:translateY(-.35rem)}
.poster-repackaged:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-repackaged .poster-index{z-index:4}
.poster-repackaged .poster-copy{z-index:4;bottom:1.35rem;max-width:calc(100% - 2.8rem)}
.poster-repackaged .poster-type{position:absolute;right:0;bottom:calc(100% + 1.1rem);text-align:right;color:rgba(255,255,255,.78)}
.poster-repackaged .poster-copy strong{max-width:9ch;font-family:Inter,Arial,sans-serif;font-size:clamp(3rem,5.4vw,5.4rem);font-weight:700;line-height:.76;letter-spacing:-.09em;text-transform:uppercase}
.poster-repackaged .poster-copy strong span{display:block;color:transparent;-webkit-text-stroke:1.3px #f7f4ed}
.poster-repackaged .poster-artist{margin-top:.35rem;color:rgba(255,255,255,.76)}
.poster-repackaged .poster-action{color:#111;background:var(--acid)}
.repackaged-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
  #20211e;background-size:2.5rem 2.5rem}
.repackaged-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 28%,rgba(0,0,0,.77) 94%);pointer-events:none}
.pack-card-board{position:absolute;left:19%;top:5%;width:62%;height:72%;padding:.8rem;background:#d1cabd;clip-path:polygon(5% 0,100% 4%,95% 100%,0 94%);transform:rotate(2.4deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pack-card-board img{width:100%;height:100%;object-fit:cover;object-position:50% 47%;filter:grayscale(1) contrast(1.12) brightness(.78);clip-path:polygon(3% 0,100% 3%,96% 99%,0 95%);transition:filter .65s ease}
.pack-card-dieline{position:absolute;right:-3.5rem;top:8%;width:19rem;height:16rem;opacity:.34;transform:rotate(-9deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pack-card-dieline i{position:absolute;border:1px dashed rgba(255,255,255,.8)}
.pack-card-dieline i:nth-child(1){inset:25% 34% 25% 34%}
.pack-card-dieline i:nth-child(2){inset:25% 0 25% 66%}
.pack-card-dieline i:nth-child(3){inset:25% 66% 25% 0}
.pack-card-dieline i:nth-child(4){inset:0 34% 75% 34%}
.pack-card-cut{position:absolute;z-index:3;width:5.2rem;height:5.2rem;border-color:rgba(255,255,255,.72);opacity:.78;transition:border-color .45s ease}
.pack-card-cut-a{left:8%;top:16%;border-left:4px solid;border-top:4px solid}
.pack-card-cut-b{right:9%;top:57%;border-right:4px solid;border-bottom:4px solid}
.poster-repackaged:hover .pack-card-board,.poster-repackaged:focus-visible .pack-card-board{transform:rotate(-1.2deg) translateY(-.45rem)}
.poster-repackaged:hover .pack-card-board img,.poster-repackaged:focus-visible .pack-card-board img{filter:grayscale(0) contrast(1.02) brightness(.96) saturate(.95)}
.poster-repackaged:hover .pack-card-dieline,.poster-repackaged:focus-visible .pack-card-dieline{transform:rotate(3deg) translate(-1.5rem,1rem)}
.poster-repackaged:hover .pack-card-cut,.poster-repackaged:focus-visible .pack-card-cut{border-color:var(--acid)}
.poster-repackaged:hover .poster-copy,.poster-repackaged:focus-visible .poster-copy{transform:translateY(-.6rem)}
.poster-repackaged:hover .poster-action,.poster-repackaged:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(max-width:900px){
  .poster-repackaged{grid-column:span 12}
}

@media(max-width:620px){
  .poster-repackaged{min-height:72svh}
  .poster-repackaged .poster-copy{left:1rem;right:1rem;bottom:1.2rem;max-width:calc(100% - 2rem)}
  .poster-repackaged .poster-type{right:0;max-width:16rem;line-height:1.45}
  .poster-repackaged .poster-copy strong{font-size:clamp(3.2rem,15vw,5.2rem)}
  .pack-card-board{left:14%;top:7%;width:72%;height:70%}
  .pack-card-dieline{right:-8rem;top:4%}
  .poster-build:hover .poster-action,.poster-build:focus-visible .poster-action,
  .poster-plastikzeit:hover .poster-action,.poster-plastikzeit:focus-visible .poster-action,
  .poster-repackaged:hover .poster-action,.poster-repackaged:focus-visible .poster-action{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .poster-repackaged,.pack-card-board,.pack-card-board img,.pack-card-dieline{transition:none!important}
}

/* ============================================================
   v1.144 — CLEANERY / SERVICE BLUEPRINT
   A working interface becomes a calm field of decisions, rather
   than borrowing the material or performance languages above.
   ============================================================ */
.poster-cleanery{grid-column:span 6;min-height:38.125rem;color:#f3f5ee;background:#101312;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .65s ease}
.poster-cleanery:hover,.poster-cleanery:focus-visible{background:#17302a;transform:translateY(-.35rem)}
.poster-cleanery:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-cleanery .poster-index,.poster-cleanery .poster-copy{z-index:4}.poster-cleanery .poster-copy{bottom:1.35rem}.poster-cleanery .poster-type{max-width:18rem;color:rgba(243,245,238,.76)}.poster-cleanery .poster-copy strong{font-family:Inter,Arial,sans-serif;font-size:clamp(3rem,5.5vw,5.3rem);font-weight:700;line-height:.8;letter-spacing:-.09em}.poster-cleanery .poster-artist{color:rgba(243,245,238,.77)}.poster-cleanery .poster-action{color:#111;background:var(--acid)}
.cleanery-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-color:#101312;background-size:3rem 3rem;transition:background-color .65s ease}
.cleanery-card-art:after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,11,.08) 12%,rgba(10,12,11,.88) 91%);content:""}
.cleanery-card-screen{position:absolute;left:9%;right:9%;top:13%;height:50%;display:block;overflow:hidden;border:1px solid rgba(218,240,230,.68);box-shadow:0 1.2rem 2.6rem rgba(4,16,13,.42);transform:rotate(-2.6deg);transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.cleanery-card-screen picture{display:block;width:100%;height:100%}
.cleanery-card-screen img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 10%;filter:grayscale(1) contrast(1.1) brightness(.75);transition:filter .65s ease}
.cleanery-card-route{position:absolute;left:9%;right:9%;bottom:15%;height:2rem;display:flex;gap:.35rem;align-items:center;opacity:.62}.cleanery-card-route i{display:block;flex:1;height:1px;background:rgba(255,255,255,.52);transition:background-color .65s ease}.cleanery-card-route i:after{float:right;margin-top:-.23rem;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent;border-left:.42rem solid rgba(255,255,255,.62);content:"";transition:border-left-color .65s ease}
.poster-cleanery:hover .cleanery-card-art,.poster-cleanery:focus-visible .cleanery-card-art{background-color:#17302a}.poster-cleanery:hover .cleanery-card-route i,.poster-cleanery:focus-visible .cleanery-card-route i{background:#cceedd}.poster-cleanery:hover .cleanery-card-route i:after,.poster-cleanery:focus-visible .cleanery-card-route i:after{border-left-color:#cceedd}
.poster-cleanery:hover .cleanery-card-screen,.poster-cleanery:focus-visible .cleanery-card-screen{transform:rotate(.8deg) translateY(-.45rem)}.poster-cleanery:hover .cleanery-card-screen img,.poster-cleanery:focus-visible .cleanery-card-screen img{filter:grayscale(0) contrast(1.02) brightness(.98) saturate(.92)}.poster-cleanery:hover .poster-copy,.poster-cleanery:focus-visible .poster-copy{transform:translateY(-.6rem)}.poster-cleanery:hover .poster-action,.poster-cleanery:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:900px){.poster-cleanery{grid-column:span 12}}
@media(max-width:620px){.poster-cleanery{min-height:72svh}.poster-cleanery .poster-copy{left:1rem;right:1rem;bottom:1.2rem}.poster-cleanery .poster-copy strong{font-size:clamp(3.2rem,15vw,5.2rem)}.cleanery-card-screen{top:11%;left:8%;right:8%;height:48%}.poster-cleanery:hover .poster-action,.poster-cleanery:focus-visible .poster-action{transform:none}}
@media(prefers-reduced-motion:reduce){.poster-cleanery,.cleanery-card-screen,.cleanery-card-screen img{transition:none!important}}

/* ============================================================
   v1.145  WIDE CANVAS
   Wide screens receive a wider editorial field. Poster artwork
   keeps its authored internal proportions instead of scaling
   two cards into banners.
   ============================================================ */
.wall-note{
  grid-column:span 6;
  min-height:38.125rem;
  margin-top:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.wall-note p{
  max-width:14rem;
  margin:0 0 1rem;
}

@media(min-width:1200px){
  :root{--max:88rem}
  .intro{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(2rem,3vw,4rem);
    align-items:end;
  }
  .intro .kicker{grid-column:1/-1;grid-row:1}
  .intro h1{
    grid-column:1/8;
    grid-row:2;
    max-width:none;
  }
  .intro-text{
    grid-column:8/12;
    grid-row:2;
    max-width:38rem;
    margin:0 0 .8rem auto;
  }
  .scroll-hint{
    grid-column:1/4;
    grid-row:3;
    justify-self:start;
  }
}

@media(min-width:1600px){:root{--max:100rem}}

@media(min-width:2200px){
  :root{--max:clamp(120rem,84vw,168rem)}
  .intro-text{max-width:42rem}
  .poster-wall{gap:clamp(1.5rem,1.5vw,2.25rem)}
  .poster-featured,
  .poster-build,
  .poster-plastikzeit,
  .poster-repackaged,
  .poster-cleanery,
  .poster-freiheit,
  .poster-testimonien,
  .wall-note{
    grid-column:span 4;
  }
}

@media(max-width:900px){
  .wall-note{
    grid-column:span 12;
    min-height:16.25rem;
  }
}

@media(max-width:620px){
  .wall-note{min-height:220px}
}

@media(min-width:2200px){html{font-size:clamp(17px,.78vw,21px)}}

/* ─────────────────────────────────────────────────────────────
   Schrift auf der Signalfarbe bleibt in beiden Darstellungen dunkel.
   --ink ist im dunklen Thema hell; ohne diese Regel verschwindet
   jede Beschriftung auf dem Acid-Grund. Vollständig erzeugt aus
   allen Stellen, die diesen Grund setzen.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .skip-link { color: #101010; }
[data-theme="dark"] .poster-action { color: #101010; }
[data-theme="dark"] .poster-plastikzeit .poster-action { color: #101010; }
[data-theme="dark"] .utility-block { color: #101010; }
[data-theme="dark"] .search-close { color: #101010; }
[data-theme="dark"] .poster-repackaged .poster-action { color: #101010; }
[data-theme="dark"] .poster-cleanery .poster-action { color: #101010; }

/* Der Bedienblock sitzt auf allen Seiten an derselben Stelle. Hier steht
   die Regel in der Seitendatei selbst, damit sie nicht von den älteren
   .site-utilities-Regeln weiter oben überschrieben wird. */
body .site-utilities {
  position: fixed;
  top: 18px;
  right: 26px;
  margin: 0;
  gap: 13px;
}

@media (max-width: 620px) {
  body .site-utilities {
    top: 14px;
    right: 13px;
    gap: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────
   06 · Freiheit in Grenzen.

   Die Karte nimmt dieselbe Bewegung vorweg, die auf der Projektseite
   traegt: das Blatt steht zuerst fast einfarbig da, und beim Zeigen
   treten die Bedeutungen hervor, die ohnehin darin liegen. Rot fuer
   die Regel und die Kette, Blau fuer das Wasser und den Ausweis,
   Gruen fuer den Stift.
   ───────────────────────────────────────────────────────────── */
.poster-freiheit{grid-column:span 6;min-height:38.125rem;color:#f0ece2;background:#17140f;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .65s ease}
.poster-freiheit:hover,.poster-freiheit:focus-visible{background:#1f1a13;transform:translateY(-.35rem)}
.poster-freiheit:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-freiheit .poster-index,.poster-freiheit .poster-copy,.poster-freiheit .poster-action{z-index:4}
.poster-freiheit:hover .poster-action,.poster-freiheit:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
.freiheit-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#17140f}
.freiheit-card-art img{position:absolute;left:50%;top:44%;width:min(76%,24rem);height:auto;max-height:64%;object-fit:contain;transform:translate(-50%,-50%);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.freiheit-card-farbe{opacity:0}

/* Beim Zeigen tritt das Blatt einen Schritt vor, waehrend die Farben
   aufgehen: das Wasser wird blau, Kette und Schloss rot, der Stift
   gruen. Die Bewegung ist die der Karte selbst, nur eine Spur weiter. */
.poster-freiheit:hover .freiheit-card-art img,
.poster-freiheit:focus-visible .freiheit-card-art img{transform:translate(-50%,-52%) scale(1.045)}
.freiheit-card-art:after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,20,15,.12) 8%,rgba(23,20,15,.92) 88%);content:""}
.poster-freiheit:hover .freiheit-card-farbe,
.poster-freiheit:focus-visible .freiheit-card-farbe{opacity:1}

/* Diese Regeln stehen am Dateiende und wiegen deshalb schwerer als der
   Block fuer sehr breite Fenster weiter oben. Die Wand teilt dort in
   Drittel; die Karte muss das hier noch einmal sagen, sonst nimmt sie
   allein den ganzen Rest der Zeile ein. */
@media(min-width:2200px){.poster-freiheit{grid-column:span 4}}
@media(max-width:900px){.poster-freiheit{grid-column:span 12}}
@media(max-width:620px){.poster-freiheit{min-height:72svh}}


@media(prefers-reduced-motion:reduce){
  .poster-freiheit,.freiheit-card-art img{transition:none!important}
}

/* ─────────────────────────────────────────────────────────────
   v1.238 — Testimonien einer nahen Zukunft (07)

   Eigene, immer dunkle Karte: die Pixel-Illustration ist auf ein
   festes Ballbad-Purpur gezeichnet, unabhaengig vom Seitenthema,
   genau wie im Held der Projektseite selbst.
   ───────────────────────────────────────────────────────────── */
.poster-testimonien{grid-column:span 6;min-height:38.125rem;color:#f3efe6;background:#221a2b;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.poster-testimonien:hover,.poster-testimonien:focus-visible{transform:translateY(-.35rem)}
.poster-testimonien:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-testimonien .poster-index,.poster-testimonien .poster-copy,.poster-testimonien .poster-action{z-index:4}
.poster-testimonien:hover .poster-action,.poster-testimonien:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
.testimonien-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#221a2b}
.testimonien-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;filter:grayscale(1) contrast(1.08) brightness(.78);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.testimonien-card-original{filter:grayscale(1) contrast(1.08) brightness(.78)}
.testimonien-card-pixel{opacity:.35}
.poster-testimonien:hover .testimonien-card-art img,
.poster-testimonien:focus-visible .testimonien-card-art img{transform:scale(1.045)}
.poster-testimonien:hover .testimonien-card-original,
.poster-testimonien:focus-visible .testimonien-card-original{filter:grayscale(0) saturate(.9) contrast(1.04) brightness(.82)}
.poster-testimonien:hover .testimonien-card-pixel,
.poster-testimonien:focus-visible .testimonien-card-pixel{filter:grayscale(0)}
.testimonien-card-art:after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,26,.1) 8%,rgba(20,15,26,.9) 88%);content:""}

@media(min-width:2200px){.poster-testimonien{grid-column:span 4}}
@media(max-width:900px){.poster-testimonien{grid-column:span 12}}
@media(max-width:620px){.poster-testimonien{min-height:72svh}}
@media(max-width:620px){
  .poster-freiheit:hover .poster-action,.poster-freiheit:focus-visible .poster-action,
  .poster-testimonien:hover .poster-action,.poster-testimonien:focus-visible .poster-action{transform:none}
}


@media(prefers-reduced-motion:reduce){
.poster-testimonien,.testimonien-card-art img{transition:none!important}
}

/* Project 08 is a purpose-built poster, not a cropped browser capture.
   Its title follows the card width, including the three-column wall. */
.poster-raum {
  grid-column:span 6; min-height:38.125rem; container-type:inline-size;
  color:#222824; background:#e8e8e2; cursor:pointer;
}
.poster-raum:focus-visible { outline:4px solid var(--acid); outline-offset:5px; }
.poster-raum .poster-index,
.raum-coordinates { z-index:4; color:#47504a; }
.raum-coordinates {
  position:absolute; top:1.2rem; right:1.4rem;
  font-size:.7rem; letter-spacing:.045em; white-space:nowrap;
}
.raum-card-art {
  position:absolute; inset:3.4rem 1.25rem 25%; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.45rem; transition:transform .35s ease, opacity .35s ease;
}
.raum-card-mark-svg{ display:block; width:min(76%,19rem); height:auto; overflow:visible; }
.raum-card-mark-svg .raum-mark-top{ fill:#252729; transition:fill .35s ease; }
.raum-card-mark-svg .raum-mark-left{ fill:#c7c8c5; transition:fill .35s ease; }
.raum-card-mark-svg .raum-mark-right{ fill:#aeb3ae; transition:fill .35s ease; }
.poster-raum:hover .raum-card-mark-svg .raum-mark-top,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-top{ fill:#2F5D7C; }
.poster-raum:hover .raum-card-mark-svg .raum-mark-left,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-left{ fill:#D07A5F; }
.poster-raum:hover .raum-card-mark-svg .raum-mark-right,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-right{ fill:#8DA896; }
.raum-card-wordmark{ display:flex; flex-direction:column; align-items:center; gap:.05rem; text-align:center; color:#f4f2eb; }
.raum-card-wordmark-main{ font-family:Inter,Arial,sans-serif; font-size:clamp(1.9rem,5vw,3.7rem); font-weight:700; letter-spacing:.02em; line-height:.92; }
.raum-card-wordmark-sub{ font-family:Inter,Arial,sans-serif; font-size:clamp(1rem,2.7vw,1.8rem); font-weight:400; letter-spacing:.01em; line-height:1; }
.encounter-poster-grid { fill:none; stroke:#183c35; opacity:.12; }
.encounter-poster-circle { mix-blend-mode:normal; }
.encounter-poster-a { fill:#f59b79; }
.encounter-poster-b { fill:#c4b8e4; }
.encounter-poster-orbit { fill:none; stroke:#183c35; stroke-dasharray:3 9; opacity:.5; }
.encounter-poster-line { fill:none; stroke:#183c35; opacity:.65; }
.encounter-poster-node { fill:#183c35; stroke:#e8e8e2; stroke-width:4; }
.encounter-poster-center { fill:#e8e8e2; stroke:#183c35; }
.poster-raum:is(:hover,:focus-visible) .raum-card-art { transform:translateY(-3px); }
.poster-raum .poster-copy {
  z-index:4; left:1.4rem; right:1.4rem; bottom:1.35rem;
  gap:.42rem; transform:none; transition:none;
}
.poster-raum .poster-type { max-width:32ch; line-height:1.25; margin-bottom:0; font-weight:500; letter-spacing:.12em; }
.poster-raum .poster-copy strong { display:block; max-width:28ch; font-family:Inter,Arial,sans-serif; font-size:clamp(1rem,2.0vw,1.45rem); font-weight:700; line-height:1.15; letter-spacing:.01em; text-transform:none; }
.poster-raum:is(:hover,:focus-visible) .poster-action {
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
@media(min-width:2200px) { .poster-raum { grid-column:span 4; } }
@media(max-width:900px) { .poster-raum { grid-column:span 12; } }
@media(max-width:620px) {
  .poster-raum { min-height:max(32rem,72svh); }
  .poster-raum .poster-copy { left:1rem; right:1rem; bottom:1.2rem; }
  .raum-coordinates { top:4.7rem; right:1rem; }
  .raum-card-art { top:5rem; bottom:27%; left:1rem; right:1rem; }
  .raum-card-mark-svg{ width:min(68%,16rem); }
  .poster-raum:is(:hover,:focus-visible) .poster-action { transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .raum-card-art { transition:none; }
  .poster-raum .poster-action { top:1rem; left:auto; right:1rem; }
  .raum-coordinates { top:4.7rem; }
  .raum-card-art { top:6.5rem; }
}

/* The wall is a dark ensemble. The RAUM poster should feel integrated with
   the other covers, while keeping the new logo readable and generous. */
.poster-raum {
  color:#f4f2eb;
  background:linear-gradient(180deg,#4b504b 0%, #4f544f 100%);
  border-color:rgba(244,242,235,.24);
}
.poster-raum .poster-index,
.poster-raum .raum-coordinates { color:#d7dbd3; }
.poster-raum .raum-card-art { filter:none; inset:3rem 1.35rem 24%; gap:.7rem; }
.poster-raum .raum-card-mark-svg{ width:min(82%,22rem); }
.poster-raum .raum-card-wordmark{ gap:.16rem; }
.poster-raum .raum-card-wordmark-main{ font-size:clamp(2.9rem,6vw,5.3rem); line-height:.9; letter-spacing:-.02em; }
.poster-raum .raum-card-wordmark-sub{ font-size:clamp(1.55rem,2.7vw,2.35rem); letter-spacing:-.01em; }
.poster-raum .encounter-poster-grid { stroke:#f4f2eb; opacity:.1; }
.poster-raum .encounter-poster-orbit,
.poster-raum .encounter-poster-line { stroke:#f4f2eb; opacity:.35; }
.poster-raum .encounter-poster-node { fill:#202522; stroke:#bfc3bb; }
.poster-raum .encounter-poster-center { fill:#d9dbd4; stroke:#202522; }
.poster-raum .poster-copy{ left:1.45rem; right:1.45rem; bottom:1.45rem; gap:.46rem; }
.poster-raum .poster-type{ max-width:28ch; color:rgba(244,242,235,.82); }
.poster-raum .poster-copy strong{ max-width:20ch; font-size:clamp(1.18rem,2vw,1.7rem); line-height:1.1; letter-spacing:-.01em; color:#f4f2eb; }
.poster-raum:is(:hover,:focus-visible) .raum-card-art { opacity:1; transform:translateY(-4px); }
@media(max-width:620px) {
  .poster-raum { min-height:max(35rem,78svh); }
  .poster-raum .poster-copy { left:1rem; right:1rem; bottom:1.1rem; gap:.38rem; }
  .poster-raum .poster-copy strong{ max-width:15ch; font-size:clamp(1.5rem,6.2vw,2rem); }
  .poster-raum .poster-type{ max-width:24ch; font-size:.76rem; line-height:1.22; }
  .raum-coordinates { top:4.65rem; right:1rem; }
  .raum-card-art { top:4.2rem; bottom:23%; left:1rem; right:1rem; gap:.5rem; }
  .raum-card-mark-svg{ width:min(84%,18.5rem); }
  .raum-card-wordmark-main{ font-size:clamp(3.2rem,12.8vw,4.6rem); }
  .raum-card-wordmark-sub{ font-size:clamp(1.85rem,6.4vw,2.4rem); }
}
.poster-raum:is(:hover,:focus-visible) .raum-card-art { opacity:1; }

/* ─────────────────────────────────────────────────────────────
   v2.15 — ADMISSION READING LAYER

   The wall remains the visual entry point. This small editorial layer makes
   the range of the selection legible before a reviewer opens a project:
   foundations, investigations, experiments and applications are all present.
   It is information architecture, not a second visual identity.
   ───────────────────────────────────────────────────────────── */
.portfolio-position{
  max-width:42rem;
  margin-top:2.15rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.portfolio-position__label{
  margin:0 0 .55rem;
  color:#52635b;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.35;
  text-transform:uppercase;
}
.portfolio-position__text{
  max-width:35rem;
  margin:0;
  color:#31433b;
  font-size:.92rem;
  line-height:1.5;
}
.portfolio-position__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.9rem 0 0;
  padding:0;
  list-style:none;
}
.portfolio-position__tags li{
  padding:.35rem .62rem;
  border:1px solid rgba(23,27,25,.22);
  border-radius:999px;
  color:#52635b;
  font-size:.66rem;
  letter-spacing:.06em;
  line-height:1;
}
.portfolio-map{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:1.8rem 0 1.1rem;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.portfolio-map__item{
  display:grid;
  grid-template-columns:2.1rem 1fr;
  gap:.55rem;
  min-height:5.1rem;
  padding:.78rem .75rem .7rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.portfolio-map__item>span:first-child{
  color:#a94b36;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
}
.portfolio-map__item strong,
.portfolio-map__item small{display:block}
.portfolio-map__item strong{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.02rem;
  font-weight:400;
  line-height:1.05;
}
.portfolio-map__item small{
  margin-top:.35rem;
  color:#66746d;
  font-size:.62rem;
  line-height:1.3;
}
.portfolio-map__item:hover,
.portfolio-map__item:focus-visible{
  background:#e4e0d5;
  color:#1d3028;
}
.portfolio-map__item:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:-3px;
}
@media(min-width:1200px){
  .intro .portfolio-position{
    grid-column:1/8;
    grid-row:3;
  }
  .intro .scroll-hint{grid-row:4}
  .intro .portfolio-download{grid-row:4;grid-column:3/6;align-self:start}
}
@media(max-width:900px){
  .portfolio-map{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .portfolio-position{margin-top:1.7rem}
  .portfolio-position__label{font-size:.61rem}
  .portfolio-position__text{font-size:.86rem}
  .portfolio-map{grid-template-columns:1fr 1fr;margin-top:1.35rem}
  .portfolio-map__item{grid-template-columns:1.6rem 1fr;min-height:5.65rem;padding:.65rem .55rem}
  .portfolio-map__item strong{font-size:.92rem}
  .portfolio-map__item small{font-size:.57rem}
}
@media(max-width:340px){
  .portfolio-position__label{font-size:.66rem}
  .portfolio-map{grid-template-columns:1fr}
  .portfolio-map__item{grid-template-columns:1.8rem 1fr;min-height:4.8rem}
  .portfolio-map__item strong{font-size:1rem}
  .portfolio-map__item small{font-size:.68rem}
}
/* 09 · Illustration — full-bleed evidence instead of a tiny floating sheet.
   The photograph contains exactly the five studies and four pastels named by
   the card. At rest it is monochrome; colour appears only on real hover/focus. */
.poster-illustration{
  grid-column:span 6;
  min-height:38.125rem;
  color:#f3efe5;
  background:#171917;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.poster-illustration:hover,.poster-illustration:focus-visible{transform:translateY(-.35rem)}
.poster-illustration:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-illustration .poster-index,.poster-illustration .poster-copy,.poster-illustration .poster-action{z-index:4}
.illustration-card-art{position:absolute;inset:0;z-index:0;overflow:hidden;background:#171917}
.illustration-card-art picture{display:block;width:100%;height:100%}
.illustration-card-art img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 48%;
  transform:scale(1.02);
  filter:grayscale(1) contrast(1.08) brightness(.66);
  transition:transform .62s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.illustration-card-art:after{
  position:absolute;
  inset:0;
  content:"";
  background:linear-gradient(180deg,rgba(0,0,0,.06) 15%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.9) 100%);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .poster-illustration:hover .illustration-card-art img{
    transform:scale(1.055);
    filter:grayscale(0) contrast(1.03) brightness(.82) saturate(.9);
  }
}
.poster-illustration:focus-visible .illustration-card-art img{
  transform:scale(1.055);
  filter:grayscale(0) contrast(1.03) brightness(.82) saturate(.9);
}
.poster-illustration .poster-copy{
  position:absolute;
  left:1.4rem;
  right:1.4rem;
  bottom:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  max-width:34rem;
}
.poster-illustration .poster-type{color:rgba(255,255,255,.8);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.poster-illustration .poster-copy strong{font:400 clamp(2.8rem,4.35vw,4.9rem)/.86 Georgia,serif;letter-spacing:-.065em}
.poster-illustration .poster-artist{color:rgba(255,255,255,.8)}
.poster-illustration .poster-action{color:#101010;background:var(--acid)}
.poster-illustration:hover .poster-copy,.poster-illustration:focus-visible .poster-copy{transform:translateY(-.45rem)}
.poster-illustration:hover .poster-action,.poster-illustration:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(min-width:2200px){.poster-illustration{grid-column:span 4}}
@media(max-width:900px){.poster-illustration{grid-column:span 12}}
@media(max-width:620px){
  .poster-illustration{min-height:72svh}
  .poster-illustration .poster-copy{left:1rem;right:1rem;bottom:1.2rem;max-width:calc(100% - 2rem)}
  .poster-illustration .poster-copy strong{font-size:clamp(2.7rem,12vw,4rem)}
  .illustration-card-art img{object-position:50% 45%}
}
@media(prefers-reduced-motion:reduce){.poster-illustration,.illustration-card-art img{transition:none!important}}

/* 10 · Mapping Swiss Creative Technology — one stable card system.
   Same grid/height policy as card 09. The supplied 3:2 map is shown complete,
   never cover-cropped or scaled on hover, so all seven city labels stay visible. */
.poster-mapping{
  grid-column:span 6;
  min-height:38.125rem;
  color:#fff;
  background:#080b0a;
  border-color:rgba(255,255,255,.18);
  cursor:pointer;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.poster-mapping:focus-visible{outline:4px solid var(--acid);outline-offset:5px}
.poster-mapping .poster-index,
.poster-mapping .poster-copy,
.poster-mapping .poster-action,
.mapping-card-signal{z-index:4}
.mapping-card-art{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#080b0a;
}
.mapping-card-art img{
  position:absolute;
  top:3.2rem;
  left:50%;
  display:block;
  width:94%;
  height:auto;
  max-width:none;
  transform:translateX(-50%);
  image-rendering:auto;
  filter:none;
}
.mapping-card-art::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 28%,transparent 48%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.34) 100%);
}
.mapping-card-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 48%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.98) 100%);
}
.mapping-card-signal{
  position:absolute;
  top:1.15rem;
  right:1.15rem;
  color:rgba(255,255,255,.78);
  font-size:.62rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.poster-mapping .poster-copy{
  left:1.45rem;
  right:1.45rem;
  bottom:1.35rem;
  gap:.38rem;
}
.poster-mapping .poster-copy strong{max-width:11ch;font-size:clamp(2.15rem,2.7vw,3.2rem);line-height:.94}
.poster-mapping .poster-type{font-size:.68rem}
.poster-mapping .poster-artist{max-width:27ch;color:rgba(255,255,255,.82);font-size:.74rem;line-height:1.22}
.poster-mapping:hover .poster-copy,.poster-mapping:focus-visible .poster-copy{transform:translateY(-.45rem)}
.poster-mapping:hover .poster-action,.poster-mapping:focus-visible .poster-action{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(min-width:2200px){
  .poster-mapping{grid-column:span 4;min-height:38.125rem}
  .mapping-card-art img{top:3rem;width:94%}
}
@media(max-width:900px){
  .poster-mapping{grid-column:span 12;min-height:38.125rem}
  .mapping-card-art img{top:3.1rem;width:94%}
}
@media(max-width:620px){
  .poster-mapping{min-height:72svh}
  .mapping-card-signal{display:none}
  /* move the map down toward the visual centre */
  .mapping-card-art img{top:8.4rem;width:94%}
  .mapping-card-art::after{
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 34%,rgba(0,0,0,.11) 46%,rgba(0,0,0,.80) 66%,rgba(0,0,0,.99) 100%);
  }
  /* lift the text block and open the internal spacing */
  .poster-mapping .poster-copy{left:1.45rem;right:1.45rem;bottom:10.4rem;gap:.62rem}
  .poster-mapping .poster-type{font-size:.72rem;line-height:1.25}
  .poster-mapping .poster-copy strong{font-size:clamp(2.4rem,10.8vw,3.5rem);line-height:.92}
  .poster-mapping .mapping-stats{
    margin-top:.85rem;
    display:grid;
    gap:.22rem;
    max-width:18rem;
    font:500 .76rem/1.18 Inter,Arial,sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .poster-mapping .mapping-stats>span{
    display:grid;
    grid-template-columns:2.4ch auto;
    column-gap:.72rem;
    align-items:baseline;
  }
  .poster-mapping .mapping-stats b{
    font:600 .82rem/1 Inter,Arial,sans-serif;
    letter-spacing:.04em;
    color:#fff;
  }
  .poster-mapping .mapping-stats span span{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.poster-mapping{transition:none!important}}


/* v4.8.50 · RAUM Basel card uses the selected Community Circle mark.
   The media remains in R2; the deploy package stays lightweight. */



/* v4.8.73 · RAUM poster composition refinement */
.poster-raum{
  background:linear-gradient(180deg,#343a36 0%,#303632 100%);
  border-color:rgba(244,242,235,.22);
}
.poster-raum .raum-card-art{
  inset:3rem 1.35rem 29%;
  gap:.65rem;
  justify-content:flex-start;
}
.poster-raum .raum-card-mark-svg{width:min(86%,23rem)}
.poster-raum .raum-card-wordmark-main{
  font-size:clamp(3.1rem,6.1vw,5.5rem);
  letter-spacing:-.025em;
}
.poster-raum .raum-card-wordmark-sub{
  font-size:clamp(1.5rem,2.55vw,2.3rem);
  opacity:.94;
}
.poster-raum .poster-copy{
  left:1.5rem;right:1.5rem;bottom:1.5rem;
  gap:.32rem;
  padding-top:.9rem;
  border-top:1px solid rgba(244,242,235,.18);
}
.poster-raum .poster-type{
  max-width:none;
  color:rgba(244,242,235,.72);
  font-size:.68rem;
  line-height:1.2;
  letter-spacing:.14em;
}
.poster-raum .poster-copy strong{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:none;
  line-height:.92;
  color:#f4f2eb;
}
.poster-raum .poster-copy strong>span{
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(1.45rem,2.2vw,2rem);
  font-weight:700;
  letter-spacing:-.035em;
}
.poster-raum .poster-copy strong>em{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,2.85vw,2.65rem);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.045em;
}
.poster-raum .poster-artist{
  color:rgba(244,242,235,.62);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
@media(max-width:620px){
  .poster-raum{min-height:max(34rem,72svh)}
  .poster-raum .raum-card-art{
    top:4.25rem;
    bottom:auto;
    left:1rem;right:1rem;
    height:auto;
    gap:.42rem;
  }
  .poster-raum .raum-card-mark-svg{width:min(88%,19rem)}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.05rem,13vw,4.35rem)}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.55rem,6.3vw,2.15rem)}
  .poster-raum .poster-copy{
    top:56%;
    bottom:auto;
    left:1.15rem;right:1.15rem;
    padding-top:.85rem;
    gap:.3rem;
    text-align:left;
  }
  .poster-raum .poster-type{font-size:.66rem;max-width:none}
  .poster-raum .poster-copy strong>span{font-size:clamp(1.45rem,7vw,1.95rem)}
  .poster-raum .poster-copy strong>em{font-size:clamp(2rem,9.5vw,2.75rem)}
  .poster-raum .poster-artist{font-size:.64rem}
}


/* v4.8.79 · RAUM Basel poster: one continuous visual stack.
   The project descriptor belongs to the logo block instead of forming a
   separate text island at the bottom of the card. */
.poster-raum{
  background:linear-gradient(180deg,#323733 0%,#2b302d 100%);
  border-color:rgba(244,242,235,.20);
  color:#f4f2eb;
}
.poster-raum .raum-card-art{
  inset:4.35rem 1.3rem 3.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.58rem;
  transform:none;
}
.poster-raum .raum-card-mark-svg{
  width:min(78%,21rem);
  flex:0 0 auto;
}
.poster-raum .raum-card-mark-svg .raum-mark-top{fill:#e2e2dc;}
.poster-raum .raum-card-mark-svg .raum-mark-left{fill:#b8bcb7;}
.poster-raum .raum-card-mark-svg .raum-mark-right{fill:#b8bcb7;}
.poster-raum:hover .raum-card-mark-svg .raum-mark-top,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-top{fill:#2F5D7C;}
.poster-raum:hover .raum-card-mark-svg .raum-mark-left,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-left{fill:#D07A5F;}
.poster-raum:hover .raum-card-mark-svg .raum-mark-right,
.poster-raum:focus-visible .raum-card-mark-svg .raum-mark-right{fill:#8DA896;}
.poster-raum .raum-card-wordmark{
  gap:.08rem;
  margin-top:.05rem;
}
.poster-raum .raum-card-wordmark-main{
  font:700 clamp(3rem,5.6vw,5rem)/.88 Inter,Arial,sans-serif;
  letter-spacing:-.045em;
}
.poster-raum .raum-card-wordmark-sub{
  font:400 clamp(1.4rem,2.4vw,2.1rem)/1 Inter,Arial,sans-serif;
  letter-spacing:-.02em;
}
.poster-raum .raum-card-meta{
  width:min(88%,28rem);
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(244,242,235,.20);
  text-align:center;
  display:grid;
  gap:.34rem;
}
.poster-raum .raum-card-meta .poster-type{
  color:rgba(244,242,235,.66);
  font:500 .68rem/1.25 Inter,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.poster-raum .raum-card-meta strong{
  color:#f4f2eb;
  font:600 clamp(1.08rem,1.7vw,1.42rem)/1.15 Inter,Arial,sans-serif;
  letter-spacing:-.018em;
}
.poster-raum:is(:hover,:focus-visible) .raum-card-art{transform:translateY(-2px);}

@media(max-width:620px){
  .poster-raum{min-height:max(34rem,74svh);}
  .poster-raum .raum-card-art{
    inset:6.6rem 1rem 3rem;
    justify-content:flex-start;
    gap:.5rem;
  }
  .poster-raum .raum-card-mark-svg{width:min(82%,18.2rem);}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.35rem,16vw,4.7rem);}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.65rem,7vw,2.15rem);}
  .poster-raum .raum-card-meta{
    width:min(92%,20rem);
    margin-top:1.05rem;
    padding-top:.9rem;
    gap:.32rem;
  }
  .poster-raum .raum-card-meta .poster-type{font-size:.66rem;}
  .poster-raum .raum-card-meta strong{
    max-width:16ch;
    margin-inline:auto;
    font-size:clamp(1.22rem,5.9vw,1.65rem);
    line-height:1.12;
  }
  .poster-raum .raum-coordinates{top:4.75rem;right:1rem;}
}


/* v4.8.79 — RAUM card rebalanced for mobile and desktop */
.poster-raum .raum-coordinates{
  top:4.65rem;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  color:rgba(244,242,235,.68);
  font:500 .72rem/1.2 Inter,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.poster-raum .raum-card-art{
  inset:5.55rem 1.3rem 3.8rem;
  justify-content:flex-start;
  gap:.78rem;
}
.poster-raum .raum-card-mark-svg{width:min(74%,19.5rem);}
.poster-raum .raum-card-wordmark{margin-top:0;gap:.18rem;}
.poster-raum .raum-card-wordmark-main{font-size:clamp(3.15rem,5.15vw,4.75rem);line-height:.9;}
.poster-raum .raum-card-wordmark-sub{font-size:clamp(1.52rem,2.3vw,2rem);}
.poster-raum .raum-card-meta{
  width:min(78%,22rem);
  margin-top:1.7rem;
  padding-top:1.05rem;
  gap:.44rem;
}
.poster-raum .raum-card-meta .poster-type{
  font-size:.7rem;
  line-height:1.25;
  color:rgba(244,242,235,.72);
}
.poster-raum .raum-card-meta strong{
  max-width:13ch;
  margin-inline:auto;
  font-size:clamp(1.18rem,1.8vw,1.48rem);
  line-height:1.12;
}
@media(max-width:620px){
  .poster-raum{min-height:max(35rem,76svh);}
  .poster-raum .raum-coordinates{
    top:5.15rem;
    font-size:.7rem;
    letter-spacing:.13em;
  }
  .poster-raum .raum-card-art{
    inset:6.9rem 1rem 3.75rem;
    gap:.88rem;
  }
  .poster-raum .raum-card-mark-svg{width:min(79%,16.9rem);}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.15rem,14.4vw,4.35rem);}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.55rem,6.8vw,2rem);}
  .poster-raum .raum-card-meta{
    width:min(86%,16.7rem);
    margin-top:1.45rem;
    padding-top:.95rem;
    gap:.42rem;
  }
  .poster-raum .raum-card-meta .poster-type{font-size:.68rem;}
  .poster-raum .raum-card-meta strong{
    max-width:13ch;
    font-size:clamp(1.34rem,5.8vw,1.72rem);
    line-height:1.1;
  }
}


/* v4.8.79 — RAUM card: desktop restored, mobile distributed vertically */
.poster-raum .raum-coordinates{
  top:1.2rem;
  right:1.4rem;
  left:auto;
  transform:none;
  color:#d7dbd3;
  font:.7rem/1.2 Inter,Arial,sans-serif;
  letter-spacing:.045em;
  text-transform:none;
}
.poster-raum .raum-card-art{
  inset:4.35rem 1.3rem 3.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}
.poster-raum .raum-card-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.58rem;
  flex:0 0 auto;
}
.poster-raum .raum-card-mark-svg{width:min(78%,21rem);}
.poster-raum .raum-card-wordmark{gap:.08rem;margin-top:.05rem;}
.poster-raum .raum-card-wordmark-main{font-size:clamp(3rem,5.6vw,5rem);line-height:.88;}
.poster-raum .raum-card-wordmark-sub{font-size:clamp(1.4rem,2.4vw,2.1rem);}
.poster-raum .raum-card-meta{
  width:min(88%,28rem);
  margin-top:1.25rem;
  padding-top:1rem;
  gap:.34rem;
}
.poster-raum .raum-card-meta .poster-type{font-size:.68rem;line-height:1.25;}
.poster-raum .raum-card-meta strong{
  max-width:16ch;
  margin-inline:auto;
  font-size:clamp(1.08rem,1.7vw,1.42rem);
  line-height:1.15;
}

@media(max-width:620px){
  .poster-raum{min-height:max(36rem,78svh);}
  .poster-raum .raum-coordinates{
    top:5.1rem;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    color:rgba(244,242,235,.70);
    font:500 .72rem/1.2 Inter,Arial,sans-serif;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .poster-raum .raum-card-art{
    inset:7.15rem 1rem 2.8rem;
    justify-content:space-between;
    gap:0;
    padding-top:1rem;
    padding-bottom:3.1rem;
  }
  .poster-raum .raum-card-brand{
    gap:.48rem;
    width:100%;
  }
  .poster-raum .raum-card-mark-svg{width:min(80%,17.2rem);}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.2rem,14.8vw,4.45rem);}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.55rem,6.8vw,2.05rem);}
  .poster-raum .raum-card-meta{
    width:min(88%,17.2rem);
    margin-top:0;
    padding-top:1rem;
    gap:.42rem;
  }
  .poster-raum .raum-card-meta .poster-type{
    font-size:.68rem;
    line-height:1.25;
    letter-spacing:.13em;
  }
  .poster-raum .raum-card-meta strong{
    max-width:13ch;
    font-size:clamp(1.34rem,5.8vw,1.72rem);
    line-height:1.1;
  }
}


/* v4.8.79 — mobile-only RAUM spacing refinement; desktop remains v4.8.79 */
.poster-raum .raum-card-meta-extra{display:none;}
@media(max-width:620px){
  .poster-raum .raum-coordinates{
    top:5.05rem;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    font:500 .84rem/1.2 Inter,Arial,sans-serif;
    letter-spacing:.12em;
    color:rgba(244,242,235,.78);
  }
  .poster-raum .raum-card-art{
    inset:7.65rem 1rem 2.4rem;
    justify-content:space-between;
    padding-top:1.75rem;
    padding-bottom:1.8rem;
  }
  .poster-raum .raum-card-brand{
    gap:.55rem;
    margin-top:.55rem;
  }
  .poster-raum .raum-card-mark-svg{width:min(80%,17.2rem);}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.25rem,15vw,4.5rem);}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.65rem,7vw,2.15rem);}
  .poster-raum .raum-card-meta{
    width:min(92%,18.4rem);
    margin:0 0 .25rem;
    padding-top:1.25rem;
    gap:.56rem;
  }
  .poster-raum .raum-card-meta .poster-type{
    font-size:.76rem;
    line-height:1.3;
    letter-spacing:.125em;
  }
  .poster-raum .raum-card-meta strong{
    max-width:15ch;
    margin-inline:auto;
    font-size:clamp(1.55rem,6.7vw,1.95rem);
    line-height:1.08;
    letter-spacing:-.02em;
  }
  .poster-raum .raum-card-meta-extra{
    display:block;
    margin-top:.12rem;
    color:rgba(244,242,235,.64);
    font:500 .74rem/1.3 Inter,Arial,sans-serif;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
}

/* v4.8.79 — mobile visual balance for cards 01 and 10 only */
@media(max-width:620px){
  /* 01 · RAUM: keep coordinates at the top, move the logo/wordmark down into
     the visual centre, and bring the project description up from the footer. */
  .poster-raum .raum-coordinates{
    top:5.05rem;
    font-size:.84rem;
    letter-spacing:.12em;
  }
  .poster-raum .raum-card-art{
    position:absolute;
    inset:0;
    display:block;
    padding:0;
  }
  .poster-raum .raum-card-brand{
    position:absolute;
    top:42%;
    left:1rem;
    right:1rem;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.58rem;
    margin:0;
  }
  .poster-raum .raum-card-mark-svg{width:min(82%,17.8rem);}
  .poster-raum .raum-card-wordmark-main{font-size:clamp(3.3rem,15.2vw,4.55rem);}
  .poster-raum .raum-card-wordmark-sub{font-size:clamp(1.7rem,7.1vw,2.2rem);}
  .poster-raum .raum-card-meta{
    position:absolute;
    left:50%;
    bottom:9.5%;
    transform:translateX(-50%);
    width:min(88%,18.2rem);
    margin:0;
    padding-top:1.15rem;
    gap:.5rem;
  }
  .poster-raum .raum-card-meta .poster-type{
    font-size:.74rem;
    line-height:1.3;
    letter-spacing:.12em;
  }
  .poster-raum .raum-card-meta strong{
    max-width:14ch;
    font-size:clamp(1.48rem,6.4vw,1.88rem);
    line-height:1.08;
  }
  .poster-raum .raum-card-meta-extra{font-size:.71rem;}
}








/* v4.8.84 – semantic mapping statistics; desktop composition unchanged. */
@media(min-width:621px){
  .poster-mapping .mapping-stats{display:grid;gap:.08rem}
  .poster-mapping .mapping-stats>span{display:block}
  .poster-mapping .mapping-stats b{font:inherit}
  .poster-mapping .mapping-stats b::after{content:" ";}
}


/* v4.8.85 — subtle natural-relief hover for card 10.
   Geometry, labels and city positions are identical in both local assets; only color changes. */
.mapping-card-art .mapping-card-map{
  transition:opacity .46s ease, filter .46s ease;
}
.mapping-card-art .mapping-card-map--mono{
  opacity:1;
}
.mapping-card-art .mapping-card-map--color{
  opacity:0;
}
@media(hover:hover) and (pointer:fine){
  .poster-mapping:hover .mapping-card-map--color{
    opacity:.82;
    filter:saturate(.82) contrast(1.01) brightness(.99);
  }
  .poster-mapping:hover .mapping-card-map--mono{
    opacity:.38;
  }
}
.poster-mapping:focus-visible .mapping-card-map--color{
  opacity:.82;
  filter:saturate(.82) contrast(1.01) brightness(.99);
}
.poster-mapping:focus-visible .mapping-card-map--mono{
  opacity:.38;
}
@media(prefers-reduced-motion:reduce){
  .mapping-card-art .mapping-card-map{transition:none!important;}
}