/* rolandwolf.at – Designsystem
   Schrift: Jost (SIL OFL, lokal eingebunden, keine Verbindung zu Google)
   Farben: Weiß, Tusche, Lehm als Markenakzent, je Projekt eine eigene Akzentfarbe */

@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#ffffff;
  --paper-2:#f5f5f5;
  --ink:#151515;
  --ink-2:#454545;
  --muted:#6b6b6b;
  --line:#e2e2e2;
  --lehm:#a2552f;          /* Markenakzent: Lehm */
  --lehm-soft:#ead8cb;
  --accent:var(--lehm);    /* je Projekt überschrieben */
  --sketch-filter:none;
  --max:1240px;
  --gutter:clamp(16px,4vw,48px);
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.3rem,1.2rem + .5vw,1.6rem);
  --step-3:clamp(1.55rem,1.35rem + 1vw,2.15rem);
  --step-4:clamp(1.9rem,1.55rem + 1.7vw,2.9rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;font-size:var(--step-0);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:500}
p{margin:0 0 1em;max-width:68ch}
strong{font-weight:500}
.sketch{filter:var(--sketch-filter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5em 1em;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,10vw,144px) 0}
.section--tight{padding:clamp(32px,5vw,64px) 0}
.section--alt{background:var(--paper-2)}

/* Kopfzeile */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{text-decoration:none;font-size:var(--step--1);letter-spacing:.06em;text-transform:lowercase;padding:6px 0;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.lang{display:flex;gap:2px;font-size:var(--step--1);letter-spacing:.06em;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.lang a,.lang span{padding:3px 9px;text-decoration:none}
.lang span{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;background:none;border:1px solid var(--ink);color:var(--ink);font:inherit;font-size:var(--step--1);letter-spacing:.06em;padding:6px 12px;border-radius:2px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;transform:translateY(-120%);transition:transform .25s ease;visibility:hidden}
  .nav a{font-size:var(--step-1);padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav .lang{margin-top:16px}
  .nav .lang a,.nav .lang span{font-size:var(--step--1);padding:6px 14px;border:0;width:auto}
  body.menu-open .nav{transform:none;visibility:visible}
}

/* Start */
.hero{padding:clamp(40px,8vw,110px) 0 clamp(48px,8vw,96px)}
.hero__sig{width:min(760px,100%);margin:0 0 clamp(20px,3vw,36px)}
.hero__name{font-size:var(--step--1);letter-spacing:.08em;color:var(--muted);margin:0 0 clamp(28px,5vw,56px)}
.hero h1{max-width:16ch}
.hero__lead{font-size:var(--step-1);color:var(--ink-2);max-width:46ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:12px 22px;border:1px solid var(--ink);text-decoration:none;font-weight:400;letter-spacing:.03em;border-radius:2px;transition:background .15s,color .15s}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--lehm);border-color:var(--lehm);color:#fff}
.btn:not(.btn--solid):hover{background:var(--ink);color:var(--paper)}

.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)}
.entry{display:flex;flex-direction:column;text-decoration:none;padding-top:22px}
.entry img{height:120px;width:auto;object-fit:contain;object-position:left bottom;margin-bottom:22px}
.entry h3{margin-bottom:.35em}
.entry p{color:var(--ink-2);font-size:var(--step--1)}
.entry__more{margin-top:auto;font-size:var(--step--1);letter-spacing:.06em}
@media (max-width:800px){.entries{grid-template-columns:1fr}.entry img{height:90px}}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,4vw,44px)}
.section-head h2{margin:0}
.eyebrow{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6em}

/* Projektkarten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;text-decoration:none;--accent:var(--c,var(--lehm))}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);position:relative;display:grid;place-items:center}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card__img img.sketch{width:62%;height:62%;object-fit:contain}
.card:hover .card__img img{transform:scale(1.03)}
.card__body{padding-top:4px;margin-top:14px}
.card__title{font-size:var(--step-1);font-weight:400;margin:0 0 .15em}
.card__meta{font-size:var(--step--1);color:var(--muted);margin:0}
.badge{position:absolute;left:12px;top:12px;background:var(--paper);color:var(--ink);font-size:.78rem;letter-spacing:.05em;padding:4px 10px;border:1px solid var(--ink)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards,.cards--2{grid-template-columns:1fr}}

.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter button{font:inherit;font-size:var(--step--1);letter-spacing:.05em;background:none;color:var(--ink);border:1px solid var(--line);padding:6px 14px;border-radius:999px;cursor:pointer}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Zweispaltig */
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:start}
.split--rev{grid-template-columns:7fr 5fr}
@media (max-width:860px){.split,.split--rev{grid-template-columns:1fr}}

.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{padding:10px 0;display:flex;gap:16px;align-items:baseline}

.list-clean .k{min-width:7.5em;color:var(--muted);font-size:var(--step--1)}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,32px);list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding-top:4px}
.steps li::before{content:"0" counter(s);display:block;font-size:var(--step-2);color:var(--lehm);margin-bottom:6px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

.note{border:1px dashed var(--ink);padding:18px 22px;font-size:var(--step--1);color:var(--ink-2);max-width:70ch}
.hatch{border:6px solid transparent;border-image:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px) 6;padding:22px 24px}

/* Projektseite */
.p-head{padding:clamp(36px,6vw,72px) 0 clamp(24px,4vw,40px);--accent:var(--c,var(--lehm))}
.p-head__top{display:flex;gap:clamp(20px,4vw,48px);align-items:flex-end;margin-bottom:24px}
.p-head__top img{height:clamp(80px,12vw,140px);width:auto}
.p-head h1{margin:0}
.p-head .sub{font-size:var(--step-1);color:var(--ink-2);max-width:52ch;margin-top:.6em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:clamp(24px,3.5vw,40px)}
.facts div{padding:8px 20px 8px 0}
.facts dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0}
.hero-img{margin:0 0 clamp(36px,6vw,72px)}
.hero-img img{width:100%;max-height:82vh;object-fit:contain;background:var(--paper-2)}
.figure{margin:0}
.hero-img.figure{margin-bottom:clamp(36px,6vw,72px)}
.figure figcaption{font-size:var(--step--1);color:var(--muted);margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px)}
.gallery--3{grid-template-columns:repeat(3,1fr)}
.gallery .wide{grid-column:1/-1}
.gallery img{width:100%;background:var(--paper-2)}
@media (max-width:700px){.gallery,.gallery--3{grid-template-columns:1fr}}
.block{margin-bottom:clamp(56px,8vw,112px)}
.block h2{font-size:var(--step-2)}
.placeholder{aspect-ratio:3/2;border:1px dashed var(--muted);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:var(--step--1);padding:20px}
.p-nav{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:var(--step--1);letter-spacing:.04em}
.p-nav a{text-decoration:none}

/* Lebenslauf */
.cv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
@media (max-width:800px){.cv{grid-template-columns:1fr}}
.cv h3{margin-top:2em}
.cv dl{margin:0}
.cv dl div{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:7px 0}
.cv dt{color:var(--muted);font-size:var(--step--1)}
.cv dd{margin:0}
.cv dd small{display:block;color:var(--ink-2);font-size:var(--step--1)}
@media (max-width:480px){.cv dl div{grid-template-columns:1fr;gap:2px}}
.portrait{background:#fff;max-width:420px}

/* Fußzeile */
.site-footer{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,88px) 0 32px;margin-top:0}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:var(--lehm-soft)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.footer-sig{width:min(360px,80%);filter:invert(1);margin-bottom:12px}
.site-footer p{max-width:none}
.footer-small{border-top:1px solid #3a3732;margin-top:40px;padding-top:18px;font-size:var(--step--1);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;color:#bdb6a8}
.social{display:flex;gap:16px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

.legal h2{font-size:var(--step-1);margin-top:1.8em}
.legal .draft{background:var(--lehm-soft);padding:12px 16px;font-size:var(--step--1);margin-bottom:28px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Mobile-Fixes: Grid-Kinder dürfen schrumpfen, lange Wörter umbrechen */
.split>*,.cv>*,.cards>*,.gallery>*{min-width:0}
.portrait{width:100%;height:auto}
h1,h2{overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){
  .p-head__top{flex-direction:column;align-items:flex-start;gap:12px}
  .p-head__top img{height:72px}
  .p-head h1{font-size:clamp(2rem,10vw,2.6rem)}
}
.card__img>img:not(.sketch){position:absolute;inset:0}
.portrait{aspect-ratio:3/4;object-fit:cover;object-position:50% 6%}
[hidden]{display:none!important}


/* ======================================================= v3: Web-Portfolio */
.arrow{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-size:var(--step--1);letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:2px}
.arrow::after{content:"→";transition:transform .2s ease}
.arrow:hover::after{transform:translateX(4px)}
.page-icon{height:clamp(70px,9vw,120px);width:auto;margin-top:18px}
h1{font-weight:300;letter-spacing:-.02em}

/* Bühne: vom strich zum raum */
.stage{padding:clamp(24px,4.5vw,56px) 0 clamp(28px,4vw,48px)}
.stage__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:end}
.stage__h{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.7rem);font-weight:300;line-height:.96;letter-spacing:-.03em;margin:0 0 .5em}
.stage__intro{color:var(--ink-2);max-width:34ch}
.stage__cap{--c:var(--lehm);display:block;text-decoration:none;margin-top:clamp(20px,4vw,48px)}
.stage__cap:hover{color:inherit}
.stage__num{font-size:var(--step--1);letter-spacing:.12em;color:var(--muted)}
.stage__num b{color:var(--ink);font-weight:500}
.stage__title{display:block;font-size:var(--step-2);line-height:1.12;margin:.2em 0 .15em}
.stage__cap:hover .stage__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.stage__meta{font-size:var(--step--1);color:var(--muted)}
.stage__hint{font-size:.8rem;color:var(--muted);margin:16px 0 0}
.stage__frame{--c:var(--lehm);position:relative;aspect-ratio:3/2;background:#fff;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.scene.is-active{opacity:1;visibility:visible;transition:opacity .8s ease}
.scene img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none}
.scene__draw{object-fit:cover;background:#fff}
.scene--contain .scene__draw{object-fit:contain;padding:4%}
.scene--exact img{object-position:center top}
.scene__img{object-fit:cover;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.stage__handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--c);pointer-events:none;transition:background .5s}
.stage__handle::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.85)}
.stage__lbl{position:absolute;bottom:12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;opacity:0;transition:opacity .4s;pointer-events:none}
.stage__lbl--l{left:12px;background:rgba(21,21,21,.75);color:#fff}
.stage__lbl--r{right:12px;background:#fff;color:#151515;border:1px solid #151515}
.stage__frame.show-l .stage__lbl--l,.stage__frame.show-r .stage__lbl--r{opacity:1}
.strip{list-style:none;margin:clamp(18px,2.5vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.strip__btn{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:10px;width:100%;opacity:.4;transition:opacity .3s}
.strip__btn img{height:clamp(30px,4vw,50px);width:100%;object-fit:contain;object-position:left bottom}
.strip__btn[aria-current="true"],.strip__btn:hover,.strip__btn:focus-visible{opacity:1}
.strip__bar{display:block;height:2px;background:var(--line);position:relative;overflow:hidden}
.strip__bar i{position:absolute;inset:0;background:var(--c);transform-origin:left;transform:scaleX(0)}
.strip__btn[aria-current="true"] .strip__bar i{transform:scaleX(var(--p,1))}
@media (max-width:860px){
  .stage__grid{grid-template-columns:1fr;gap:20px}
  .stage__cap{margin-top:8px}
  .stage__hint{display:none}
  .strip{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .strip::-webkit-scrollbar{display:none}
  .strip li{flex:0 0 76px}
}

/* Hallo */
.hello__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:center}
.hello__portrait{margin:0;justify-self:center;max-width:280px;width:100%}
.hello__portrait img{width:100%;height:auto}
@media (max-width:860px){
  .hello__grid{grid-template-columns:1fr}
  .hello__portrait{max-width:200px;justify-self:start}
}

/* Werkverzeichnis */
.work__thumb{position:fixed;left:0;top:0;width:min(340px,26vw);pointer-events:none;opacity:0;z-index:30;transition:opacity .2s;will-change:transform}
.work__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.18)}
@media (hover:hover) and (pointer:fine){.idx__item:hover .work__thumb{opacity:1}}
@media (hover:none),(max-width:700px){.work__thumb{display:none}}

/* Masterarbeit */
.thesis{background:var(--paper-2)}
.thesis__q{font-size:var(--step-2);font-weight:300;line-height:1.3;margin:.6em 0 1.1em;max-width:36ch;border-left:2px solid var(--c);padding-left:clamp(16px,3vw,36px)}
.thesis__links{display:flex;gap:28px;flex-wrap:wrap;max-width:none}

/* Skizzenbuch */
.sb__row{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;padding:16px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) 34px;scroll-snap-type:x proximity;scrollbar-width:thin}
.sb__item{flex:0 0 auto;scroll-snap-align:center;display:block;background:#fff;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 26px rgba(0,0,0,.09);transform:rotate(var(--r,-1.4deg));transition:transform .35s ease}
.sb__item:nth-child(2n){--r:1.1deg}
.sb__item:nth-child(3n){--r:-.5deg}
.sb__item:hover{transform:rotate(0) translateY(-6px)}
.sb__item img{height:clamp(220px,28vw,360px);width:auto;max-width:none}

.office-line{padding:clamp(28px,4vw,44px) 0 clamp(48px,6vw,80px)}
.office-line p{margin:0;max-width:none;color:var(--ink-2)}
.office-line .arrow{margin-left:8px}

/* Projektseite */
.p-head .eyebrow a{text-decoration:none}
.p-head .eyebrow a:hover{color:var(--c)}
.p-head__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:0}
.p-head__top h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.4rem);line-height:1.05;margin:0}
.p-head__top img{height:clamp(56px,8vw,110px);width:auto;flex-shrink:0;max-width:40%}
.p-head .lead{font-size:var(--step-1);color:var(--ink-2);max-width:50ch;margin-top:.9em}
.p-hero{margin:0 0 clamp(44px,7vw,100px)}
.p-hero img{width:100%;max-height:84vh;object-fit:contain}
.p-hero.is-tall img{width:auto;margin:0 auto}
.prose p{font-size:clamp(1.02rem,1rem + .2vw,1.18rem);color:var(--ink-2);max-width:62ch}
.prose h2{max-width:none}
.prose h2+p{font-size:var(--step-0)}
.hello h2{hyphens:manual}
.ch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.ch--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ch--flip .ch__text{order:2}
.ch__text{position:sticky;top:96px}

.ch__text p{color:var(--ink-2)}
.ch__text ul,.ch__text ol,.prose ul{padding-left:1.1em;color:var(--ink-2);margin:0 0 1em}
.ch__text li{margin-bottom:.45em}
.ch__media{display:grid;gap:clamp(18px,2.5vw,32px)}
.figure .zoom{display:block;cursor:zoom-in}
.figure img{width:100%}
.figure.is-tall img{width:auto;max-width:100%;max-height:74vh;margin:0 auto}
.gallery{align-items:start}
.gallery--4{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){
  .ch,.ch--flip{grid-template-columns:1fr}
  .ch--flip .ch__text{order:0}
  .ch__text{position:static}
}
.icons{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(16px,2.5vw,32px)}
.icons li{text-align:center;font-size:var(--step--1);line-height:1.4;color:var(--ink-2)}
.icons img{width:100%;max-width:190px;margin:0 auto 12px;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#fff}
.psteps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,24px);counter-reset:s}
.psteps li{counter-increment:s;font-size:var(--step--1);line-height:1.4}
.psteps li::before{content:"0" counter(s);display:block;color:var(--c);font-size:var(--step-1);margin-bottom:6px}
.psteps img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;margin-bottom:10px}
@media (max-width:860px){.psteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.personas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.personas img{border-radius:50%;width:72%;margin:0 auto 12px;aspect-ratio:1;object-fit:cover;background:#fff}
.persona__name{font-weight:500;text-align:center;margin:0 0 .4em}
.personas p{font-size:var(--step--1);color:var(--ink-2)}
@media (max-width:960px){.personas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.personas{grid-template-columns:1fr}.personas img{width:44%}}
.pquote{margin-left:0;margin-right:0}
.pquote blockquote{font-size:var(--step-2);font-weight:300;line-height:1.3;margin:0;max-width:36ch;border-left:2px solid var(--c);padding-left:clamp(16px,3vw,36px)}
.pquote figcaption{margin:14px 0 0 clamp(19px,3vw,39px);color:var(--muted);font-size:var(--step--1)}
.todo{border:1px dashed var(--muted);padding:16px 20px;color:var(--muted);font-size:var(--step--1)}
.mark{background:var(--lehm-soft);padding:0 6px}
.p-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:26px 0 clamp(48px,7vw,96px);margin-top:clamp(32px,5vw,72px)}
.p-nav a{text-decoration:none;display:flex;align-items:center;gap:16px}
.p-nav img{height:46px;width:80px;object-fit:contain;flex-shrink:0}
.p-nav small{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.p-nav__prev span,.p-nav__next span{font-size:var(--step-1);line-height:1.2}
.p-nav__prev:hover,.p-nav__next:hover{color:var(--c)}
.p-nav__next{justify-content:flex-end;text-align:right}
.p-nav__all{font-size:var(--step--1);letter-spacing:.06em}
@media (max-width:700px){.p-nav{grid-template-columns:1fr 1fr}.p-nav__all{display:none}.p-nav img{display:none}}

/* Kunst */
.ku{columns:3 260px;column-gap:clamp(16px,2.5vw,32px)}
.ku .figure{break-inside:avoid;margin-bottom:clamp(18px,2.5vw,32px)}
.ku img{background:#fff}
.ku-s{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.ku-s h3{font-size:var(--step-1);font-weight:400}
.ku-s h3 span{color:var(--muted);font-size:var(--step-0)}
.ku-s p{color:var(--ink-2)}
@media (max-width:860px){.ku-s{grid-template-columns:1fr}}

/* Über mich */
.portrait--full{aspect-ratio:auto;object-fit:contain;max-width:300px;margin:0 auto}
@media (max-width:860px){.about .portrait--full{max-width:200px;margin:0}}

/* Lightbox */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(14,14,14,.96);color:#fff;overflow:hidden}
.lb::backdrop{background:rgba(0,0,0,.6)}
.lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px clamp(12px,6vw,80px) 24px}
.lb img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;background:#fff}
.lb figcaption{margin-top:14px;font-size:var(--step--1);color:#cfcfcf;text-align:center}
.lb button{position:absolute;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:inherit;font-size:1.2rem;width:46px;height:46px;cursor:pointer}
.lb button:hover{background:#fff;color:#151515}
.lb__close{top:12px;right:12px}
.lb__prev{left:12px;top:50%;margin-top:-23px}
.lb__next{right:12px;top:50%;margin-top:-23px}
@media (max-width:600px){.lb__prev,.lb__next{top:auto;bottom:14px;margin:0}}
@media (prefers-reduced-motion:reduce){.scene,.scene.is-active{transition:none}}
.nav .lang a,.nav .lang span{text-transform:none}
@media (max-width:600px){.p-head__top{flex-direction:column-reverse;align-items:flex-start;gap:10px}.p-head__top img{height:56px;max-width:60%}}

/* ======================================================= v4: Feintuning */
/* Überschriften als Farbfeld: Projektfarbe, weiße Schrift */
.tag,.ch__text h2,.block__h,.block .block__h,.prose h2,.legal h2{display:inline-block;background:var(--c,var(--lehm));color:#fff;font-size:var(--step-0);font-weight:400;letter-spacing:.02em;line-height:1.3;padding:.3em .7em .35em;margin:0 0 1.1em;max-width:100%}
.section-head{align-items:center}
.section-head .tag{margin:0}
.legal h2{--c:var(--ink);color:var(--paper);margin-top:1.6em}
.cv h3{display:inline-block;background:var(--ink);color:var(--paper);font-size:var(--step--1);font-weight:400;letter-spacing:.06em;padding:.25em .65em;margin-bottom:.8em}
.cv > div > h3:first-child{margin-top:0}
.split h2.tag{margin-bottom:.8em}
h1{margin-bottom:.4em}
.hero__lead,.p-head .lead{font-size:clamp(1.08rem,1rem + .35vw,1.3rem)}
.p-head{padding-bottom:clamp(32px,5vw,56px)}
.facts dt{font-size:.72rem}
.facts dd{margin:2px 0 0;font-size:var(--step--1)}
.card__title{font-size:var(--step-1);font-weight:400}
.card__name{display:block;font-size:var(--step--1);color:var(--ink);margin-bottom:2px}
.card__img{background:#f7f7f7}

/* Startseite: über mich als Zeitstrahl */
.hello__grid{align-items:start}
.hello__portrait{max-width:240px}
.hello__lead{font-size:clamp(1.08rem,1rem + .35vw,1.3rem);color:var(--ink-2);max-width:46ch;margin-bottom:clamp(28px,4vw,44px)}
.tl{list-style:none;margin:0 0 clamp(28px,4vw,40px);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(10px,1.5vw,20px);position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:calc(1.6em + 5px);height:1px;background:var(--line)}
.tl li{position:relative;font-size:var(--step--1);line-height:1.35;padding-top:0}
.tl time{display:block;color:var(--lehm);font-size:var(--step-0);font-weight:400;margin-bottom:22px}
.tl li::before{content:"";position:absolute;left:0;top:calc(1.6em + 1px);width:9px;height:9px;border-radius:50%;background:var(--lehm)}
.tl strong{display:block;font-weight:400;color:var(--ink)}
.tl span{display:block;color:var(--muted)}
@media (max-width:860px){
  .tl{grid-template-columns:1fr;gap:18px;padding-left:24px}
  .tl::before{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .tl li::before{left:-24px;top:6px}
  .tl time{margin-bottom:2px}
}

/* Startseite: Werkverzeichnis kompakt mit Kodewörtern */
.idx__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.idx__cat{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 14px}
.idx__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.idx__item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;text-decoration:none}
.idx__item > img{grid-row:span 2;width:44px;height:30px;object-fit:contain;object-position:left center}
.idx__code{font-size:var(--step-1);line-height:1.15;transition:color .25s}
.idx__name{font-size:.78rem;color:var(--muted);line-height:1.3}
.idx__item:hover{color:inherit}
.idx__item:hover .idx__code{color:var(--c)}
@media (max-width:960px){.idx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.idx__grid{grid-template-columns:1fr}}
.thesis .tag{margin-bottom:0}
.ku-p__img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .3s}
.ku-p__img:hover img{opacity:.85}
@media (max-width:860px){.hello__portrait{max-width:150px}}

/* ======================================================= v5: Startseite Skizze + Unterschrift */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:clamp(24px,4vw,56px) 0 88px}
.intro__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,7vw,120px);align-items:center;width:100%}
.intro__sketch{display:block;justify-self:end}
.intro__sketch:hover{color:inherit}
.draw{display:block;filter:var(--sketch-filter);overflow:visible}
.draw--sketch{height:min(60svh,560px);width:auto;max-width:100%}
.draw--sig{width:min(100%,540px);height:auto}
.intro__h{margin:0 0 clamp(18px,2.4vw,30px)}
.intro__line{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.intro__sub{color:var(--ink-2);margin:.5em 0 0;opacity:0;animation:inkin .8s ease 3.6s forwards}
.draw__pen path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation-name:pen;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes pen{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
.draw__full{opacity:0;animation:inkin .7s ease forwards;animation-delay:var(--end)}
@keyframes inkin{to{opacity:1}}
.intro__line{opacity:0;animation:inkin .8s ease 3.3s forwards}
.intro__down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;font-size:.78rem;letter-spacing:.14em;color:var(--muted);opacity:0;animation:inkin .8s ease 4s forwards}
.intro__down::after{content:"";width:1px;height:34px;background:currentColor;transform-origin:top;animation:cue 2.4s ease-in-out 4.4s infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
body.home .site-header .brand{opacity:0;pointer-events:none;transition:opacity .4s}
body.home.past-intro .site-header .brand{opacity:1;pointer-events:auto}
@media (max-width:860px){
  .intro{min-height:calc(100svh - 64px);padding-top:16px}
  .intro__grid{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
  .intro__sketch{justify-self:center}
  .draw--sketch{height:min(44svh,380px)}
  .draw--sig{width:min(86vw,420px);margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .draw__pen path{animation:none;opacity:1;stroke-dashoffset:0}
  .draw__full,.intro__line,.intro__sub,.intro__down{animation:none;opacity:1}
  .intro__down::after{animation:none}
}
/* Register ohne Piktogramme, Skizze erscheint beim Darüberfahren */
.idx__item{display:block}
.idx__code{display:block}
.idx__name{display:block}
.idx__list{gap:14px}
.idx__sketch{width:200px}
.idx__sketch img{aspect-ratio:1;object-fit:contain;padding:14%;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);filter:none}

/* v6: Startseite schwarz/weiß/grau, Register als Zeilen je Kategorie */
.home .tag{background:var(--ink)!important;color:#fff}
.idx__rows{display:grid;gap:clamp(28px,4vw,48px)}
.idx__row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.idx__row .idx__cat{margin:34px 0 0}
.idx .idx__list{display:flex;flex-wrap:wrap;gap:8px 4px;list-style:none;margin:0;padding:0}
.idx .idx__item{display:flex;flex-direction:column;align-items:flex-start;width:148px;padding:10px 10px 12px;text-decoration:none;color:var(--ink);border-radius:2px;transition:background .25s}
.idx__icon{display:block;width:100%;height:86px;margin-bottom:10px}
.idx__icon img{width:100%;height:100%;object-fit:contain;object-position:left bottom;filter:grayscale(1);opacity:.78;transition:opacity .25s,transform .35s}
.idx .idx__code{font-size:var(--step-0);line-height:1.2;color:var(--ink)}
.idx .idx__name{font-size:.76rem;color:var(--muted);line-height:1.3;margin-top:2px}
.idx .idx__item:hover,.idx .idx__item:focus-visible{background:var(--paper-2)}
.idx .idx__item:hover .idx__code,.idx .idx__item:focus-visible .idx__code{color:var(--c)}
.idx .idx__item:hover .idx__icon img{opacity:1;transform:translateY(-3px)}
.idx .idx__item:hover .idx__name{color:var(--c)}
@media (max-width:760px){
  .idx__row{grid-template-columns:1fr;gap:6px}
  .idx__row .idx__cat{margin:0}
  .idx .idx__list{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .idx .idx__list::-webkit-scrollbar{display:none}
  .idx .idx__list li{scroll-snap-align:start;flex:0 0 auto}
  .idx .idx__item{width:128px;padding:8px 8px 10px 0}
  .idx__icon{height:72px}
}

/* v7: kleinere Seitentitel, Icon auf Höhe des Titels, Vergleichsregler */
:root{--step-4:clamp(1.6rem,1.32rem + 1.1vw,2.2rem)}
.p-head__top{align-items:center;gap:20px}
.p-head__top h1{font-size:var(--step-4);line-height:1.12}
.p-head__top img{height:clamp(54px,4.6vw,76px);max-width:34%}
@media (max-width:600px){.p-head__top{flex-direction:row;align-items:center;justify-content:space-between}.p-head__top h1{font-size:1.55rem}.p-head__top img{height:46px;max-width:34%}}
.page-icon{height:clamp(54px,4.6vw,76px)!important;width:auto}
.ch--solo{max-width:62ch}
.cmp-fig{margin:0}
.cmp{position:relative;width:min(100%,calc(78vh * var(--r)));margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp img{display:block;width:100%;height:auto;pointer-events:none}
.cmp__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.cmp__after img{height:100%;object-fit:fill}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.cmp__line::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);transform:translate(-50%,-50%);display:grid;place-items:center;font-size:15px;letter-spacing:2px;line-height:1;color:var(--ink)}
.cmp__lbl{position:absolute;top:10px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:3px 8px;pointer-events:none}
.cmp__lbl--a{left:10px}.cmp__lbl--b{right:10px}
.cmp__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.cmp__range:focus-visible + *{outline:2px solid var(--ink)}
.cmp:has(.cmp__range:focus-visible){outline:2px solid var(--ink);outline-offset:4px}

/* v8: Kopf mit großer Skizze über Titel + Untertitel, Blocksatz, gemeinsamer Rand */
.p-head__top{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,20vw,280px);gap:clamp(20px,4vw,56px);align-items:stretch;margin-bottom:0}
.p-head__txt h1{margin:0}
.p-head .lead{font-size:clamp(.98rem,.94rem + .2vw,1.1rem);margin-top:.7em;max-width:56ch}
.p-head__icon{position:relative;min-height:110px}
.p-head__icon img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:right center}
@media (max-width:600px){.p-head__top{grid-template-columns:minmax(0,1fr) 92px;gap:16px}.p-head__icon{min-height:80px}}
.prose p,.ch__text p,.ku-s__text p,.p-head .lead,.hero__lead,.ch--solo p,.cards__text{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Bilder schließen links und rechts bündig ab */
.p-hero img{max-height:none;object-fit:fill}
.p-hero.is-tall img{max-height:84vh;width:auto;margin:0}
.figure.is-tall img{margin:0}
.ch__media .figure.is-tall img{margin-left:auto}
.ch__media .figure.is-tall figcaption{text-align:right}
.ch--flip .ch__media .figure.is-tall img{margin-left:0;margin-right:auto}
.ch--flip .ch__media .figure.is-tall figcaption{text-align:left}
.cmp{margin-right:0}
.ch--flip .cmp{margin-left:0;margin-right:auto}

/* v8: Bilder unter Kapiteltext, Video, Slideshow, Gedanken-Karten */
.ch__under{margin-top:1.4em}
.video__box{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.video__box img,.video__box iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;max-width:none}
.video__box img{filter:grayscale(.3) brightness(.72)}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;font-size:1.9rem;cursor:pointer;padding-left:6px;transition:background .2s}
.video__play:hover,.video__play:focus-visible{background:var(--c,#000)}
.video__note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));text-align:left!important}
.video__note a{color:#fff}
.video__box.is-on .video__note{display:none}
.slides{position:relative}
.slides__list{list-style:none;margin:0;padding:0;display:grid}
.slides__item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.slides__item.is-on{opacity:1;visibility:visible;transition:opacity .9s ease}
.slides__item .figure{margin:0}
.slides__nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.slides__nav button{background:none;border:0;cursor:pointer;color:var(--ink);font:inherit}
.slides__prev,.slides__next{font-size:1.6rem;line-height:1;padding:4px 10px}
.slides__dot{width:10px;height:10px;border-radius:50%;padding:0!important;border:1px solid var(--ink)!important;background:transparent!important}
.slides__dot.is-on{background:var(--c,var(--ink))!important;border-color:var(--c,var(--ink))!important}
@media (prefers-reduced-motion:reduce){.slides__item{transition:none}}
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(18px,2.5vw,32px)}
.gcard{display:flex;flex-direction:column;gap:12px}
.gcard img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#f4f4f2}
.gcard h3{font-size:1.02rem;font-weight:500;margin:0 0 .35em}
.gcard p{margin:0;font-size:.92rem}
.gcards{counter-reset:g}
.gcard h3::before{counter-increment:g;content:counter(g) ". ";color:var(--c,var(--ink))}
.video__title{position:absolute;left:0;right:0;top:22%;text-align:center;color:#fff;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.02em;padding:0 16px}
.video__box:not(:has(img)){background:var(--c,#222)}
figure.video,.slides .figure{margin-left:0;margin-right:0}
@media (min-width:701px){.gallery:not(.gallery--3)>.figure:nth-child(2n) img{object-position:right center;margin-left:auto}}
.video__note{max-width:none!important;width:auto}
.figure--force img{width:100%!important;max-width:100%!important;max-height:none!important}
@media (max-width:600px){.gcards{grid-template-columns:1fr;gap:20px}.gcard{flex-direction:row;align-items:flex-start;gap:14px}.gcard img{width:104px;flex:0 0 104px}.gcard p{text-align:left;hyphens:auto}}
/* über mich: Foto genau so hoch wie der Textblock */
.about{align-items:stretch}
.about>div:first-child{position:relative;min-height:340px}
.about>div:first-child .portrait--full{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;object-position:right center}
@media (max-width:860px){.about>div:first-child{min-height:0}.about>div:first-child .portrait--full{position:static;height:auto;max-width:200px;object-position:left top}}
.about p:not(.hero__lead){text-align:justify;hyphens:auto}
.about h1{font-size:calc(var(--step-4) - 3px)}
.about .hero__lead{font-size:calc(var(--step-1) - 2px)}
.about p:not(.hero__lead){font-size:calc(1em - 2px)}
.about .btn{font-size:calc(1em - 1px)}
.brand img{height:54px;transform:translateY(9px)}
@media (max-width:600px){.brand img{height:46px;transform:translateY(7px)}}
/* Kunst/Forschung/Kontakt: Kopf wie Projektseiten, Schriftgrößen wie über mich */
.pg-head h1,.contact h1{font-size:calc(var(--step-4) - 3px);margin:0}
.pg-head .hero__lead,.contact .hero__lead{font-size:calc(var(--step-1) - 2px);margin-top:.7em}
.pg-head p:not(.hero__lead){font-size:calc(1em - 2px);text-align:justify;hyphens:auto}
.pg-head .hero__lead{max-width:none}
.pg-head .p-head__txt{max-width:760px}
.ctiles{list-style:none;margin:1.6em 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ctile{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;background:var(--paper-2);text-decoration:none;color:inherit;transition:background .2s,color .2s}
a.ctile:hover,a.ctile:focus-visible{background:var(--ink);color:var(--paper)}
.ctile__k{font-size:var(--step--1);color:var(--muted);letter-spacing:.03em}
a.ctile:hover .ctile__k{color:inherit;opacity:.75}
.ctile__v{font-size:1.02rem}
.ctile__v a{color:inherit}
@media (max-width:600px){.ctiles{grid-template-columns:1fr}}
.pg-head .p-head__txt p{max-width:none}
.contact__cv{margin-top:1.4em;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:calc(1em - 2px)}
@media (max-width:600px){
  .pg-head{display:block;position:relative}
  .pg-head h1{padding-right:110px}
  .pg-head .p-head__icon{position:absolute;top:-6px;right:0;width:100px;height:60px;min-height:0}
  .pg-head p{text-align:left!important}
}
@media (max-width:600px){.pg-head .p-head__icon{height:46px;top:-8px}}
/* Porträt auf über mich und kontakt: feste Größe, gleiche Position */
.about{align-items:start}
.about>div:first-child{min-height:0;display:flex;justify-content:flex-end}
.about>div:first-child .portrait--full{position:static;inset:auto;width:auto;height:clamp(300px,30vw,430px);max-width:100%;object-fit:contain;margin:0}
@media (max-width:860px){.about>div:first-child{justify-content:flex-start}.about>div:first-child .portrait--full{height:auto;width:200px}}
/* handgezeichnete Social-Icons */
.soc{display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-right:18px}
.soc img{width:34px;height:34px}
.soc span{text-decoration:underline;text-underline-offset:3px}
.soc:hover img{transform:rotate(-6deg)}
.soc img{transition:transform .2s}
.site-footer .soc img,footer .soc img{filter:invert(1)}
.ctile__soc{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:2px}
.ctile__soc .soc img{width:30px;height:30px}
.soc img{width:40px;height:40px}.ctile__soc .soc img{width:36px;height:36px}
/* einheitliche Titelposition und -größe */
.pg-top{padding-top:0!important}
.pg-top>.wrap{padding-top:clamp(40px,8vw,110px)}
h1.pg-title{font-size:calc(var(--step-4) - 3px)}
/* Zeichenbüro */
.zb-note{border:1px solid var(--ink);max-width:none;margin-top:1.4em;text-align:left!important}
.zb-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.4em}
.zb-btns .btn{justify-content:center;text-align:center;width:100%}
@media (max-width:600px){.zb-btns{grid-template-columns:1fr}.zb-note{margin-right:0}}
.pg-head h1,h1.pg-title{hyphens:manual}
/* Seitenkopf Kunst/Forschung/Zeichenbüro: Textspalte bis zum Beginn der Inhaltsspalte darunter, Skizze rechts über Titel + Einleitung */
.pg-head{grid-template-columns:minmax(0,1fr) clamp(130px,16vw,220px);gap:clamp(20px,4vw,56px)}
.pg-head .p-head__txt,.pg-more{max-width:calc((100% - clamp(28px,5vw,80px)) * 5 / 12 + clamp(28px,5vw,80px) + 7.5em + 16px)}
.pg-head .hero__lead{font-size:clamp(.98rem,.94rem + .2vw,1.1rem);line-height:1.6}
.pg-more{margin-top:1.2em}
.pg-more>p:not(.note){font-size:calc(1em - 2px);text-align:justify;hyphens:auto}
.pg-more .zb-note{margin-top:0}
.pg-head,.pg-more{--pgw:calc((100% - clamp(28px,5vw,80px)) * 5 / 12 + clamp(28px,5vw,80px) + 7.5rem + 4px)}
.pg-head{grid-template-columns:var(--pgw) 1fr clamp(130px,16vw,220px);column-gap:0}
.pg-head .p-head__txt{max-width:none;grid-column:1}
.pg-head .p-head__icon{grid-column:3}
.pg-more{max-width:var(--pgw)}
@media (max-width:860px){.pg-head{grid-template-columns:minmax(0,1fr) clamp(110px,22vw,180px);column-gap:20px}.pg-head .p-head__icon{grid-column:2}.pg-more{max-width:none}}
.zb-btns .btn{font-size:calc(1em - 1px)}
@media (max-width:600px){.pg-head h1{padding-right:96px;overflow-wrap:normal;white-space:nowrap}}
.btn--solid:hover{background:var(--c,var(--lehm));border-color:var(--c,var(--lehm))}
.zb-btns .btn:not(.btn--solid):hover{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}
.zb-note{line-height:1.5}
.pg-top .hero__lead{margin-bottom:clamp(28px,3.5vw,48px)}
.pg-top .filter{margin-bottom:clamp(28px,3vw,40px)}
.ku-sec>.wrap>.block__h{margin-bottom:clamp(28px,3.5vw,48px)}
.zb-note{border-color:#c4c4c4}

/* möglichkeitsraum: Einleitung neben Axonometrie */
.p-intro{margin-bottom:clamp(56px,8vw,112px);align-items:center}