/* v4.8.4 lokal ausgelieferte Schriften (statt Google Fonts) */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400.woff2') format('woff2')}
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:100 1000;font-display:swap;src:url('../fonts/roboto-flex-latin-wght.woff2') format('woff2')}
:root{--font-hand:"e-trace","Roboto Flex",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--font-body:"Roboto Flex",system-ui,sans-serif;--bg:#f6f6f3;--ink:#16181d;--mute:#666b75;--line:#d9dad5;--accent:#2f5bff;
 --c1:#e9b44c;--c2:#2f5bff;--c3:#d9573b;--c4:#1f8a70;--c5:#8d6bd1;--c6:#2a2f3a}
@media (prefers-color-scheme:dark){:root{--bg:#121317;--ink:#f1f1ed;--mute:#9a9fa9;--line:#2b2d34}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Roboto Flex",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
main{flex:1}
header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0}
.logo{font-weight:500;text-decoration:none;letter-spacing:.01em}
.menu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.menu a{font-weight:400;font-size:15px;text-decoration:none;color:var(--mute);padding:6px 12px;border-radius:999px}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.hero{padding:clamp(36px,8vw,100px) 0 clamp(24px,4vw,48px)}
h1.page-title{font-family:var(--font-hand);font-weight:400;font-synthesis:none;font-size:clamp(33px,8.2vw,110px);line-height:1;margin:0;letter-spacing:0;text-transform:uppercase;overflow-wrap:break-word}
@media (max-width:760px){h1.page-title{font-size:clamp(30px,8.6vw,70px)}}
@media (min-width:380px) and (max-width:760px){h1.page-title{font-size:clamp(34px,9.4vw,70px)}}
.lead{max-width:46ch;color:var(--mute);font-size:clamp(17px,2vw,20px);margin:28px 0 0}
/* Projekte */
.tools{border-top:1px solid var(--line);padding:18px 0;display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:14px;font-weight:400;border:1px solid var(--line);background:none;color:var(--ink);padding:6px 14px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:14px 0 90px;grid-auto-flow:dense}
.tile{position:relative;border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;padding:18px;color:#fff;background:var(--c);grid-column:span 2;aspect-ratio:1/1}
.tile.wide{grid-column:span 4;aspect-ratio:2/1}
.tile.tall{grid-row:span 2;aspect-ratio:auto}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(0,0,0,.28))}
.tile div{position:relative}
.tile b{display:block;font-weight:500;font-size:17px;line-height:1.25}
.tile small{font-size:13px;opacity:.85}
.tile[hidden]{display:none}
/* Leistungen */
.rows{border-top:1px solid var(--line);margin-bottom:90px}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 48px;padding:30px 0;border-bottom:1px solid var(--line)}
.row h2{margin:0;font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.25}
.row p{margin:0;color:var(--mute);max-width:56ch}
/* Text pages */
.prose{max-width:62ch;font-size:clamp(17px,1.9vw,19px);padding-bottom:90px}
.prose p{margin:0 0 1.2em}
.contact-list{list-style:none;padding:0;margin:0 0 90px;border-top:1px solid var(--line)}
.contact-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 48px;padding:24px 0;border-bottom:1px solid var(--line)}
.contact-list span{color:var(--mute)}
.contact-list a{font-size:clamp(18px,2.4vw,24px);font-weight:400}
footer.foot{border-top:1px solid var(--line);padding:22px 0 calc(28px + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
 .grid{grid-template-columns:repeat(2,1fr)}
 .tile,.tile.wide{grid-column:span 1;aspect-ratio:1/1}
 .tile.wide{grid-column:span 2;aspect-ratio:2/1}
 .tile.tall{grid-row:auto}
 .row,.contact-list li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){h1.page-title{animation:fade .5s ease-out}@keyframes fade{from{opacity:0}to{opacity:1}}}
/* Terminal-Startseite */
body.term{--tg:#7cc47c;background:#000;color:#d6ffd6;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:400;font-size:clamp(14px,1.9vw,18px);line-height:1.7;cursor:text}
.term .screen{max-width:860px;margin:0 auto;padding:clamp(28px,6vw,72px) clamp(20px,5vw,40px) calc(40px + env(safe-area-inset-bottom,0px))}
.term p{margin:0}
.term .dim{color:var(--tg)}
.term .gap{height:1.2em}
.term ul{list-style:none;margin:0;padding:0}
.term li{display:grid;grid-template-columns:minmax(9ch,14ch) 1fr;gap:0 16px}
.term li a{color:#fff;text-decoration:none;border-bottom:1px dotted var(--tg)}
.term li a:hover,.term li a:focus-visible,.term li a[aria-current="true"]{background:var(--tg);color:#000;outline:none;text-shadow:none}
.term .lang-line a{color:#fff}
.prompt{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:1.4em}
.prompt .sign{color:var(--tg);margin-right:1ch}
.cursor{display:inline-block;width:.6em;height:1.1em;background:#d6ffd6;vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.sr-input{position:absolute;opacity:0;width:1px;height:1px;left:-9999px}
.msg{color:#ffb86b;min-height:1.7em}
@media (max-width:560px){.term li{grid-template-columns:1fr;margin-bottom:.6em}}

/* v2: Sprachwahl, Über-mich-Porträt, Startseiten-Hintergrund, Suche */
.langsw{display:inline-flex;gap:2px;margin-left:10px;border:1px solid var(--line);border-radius:999px;padding:2px}
.menu .langsw a{font-size:12px;letter-spacing:.04em;padding:4px 9px}
.menu .langsw a[aria-current="true"]{color:var(--bg);background:var(--ink)}
footer.foot .fl{display:flex;gap:18px}
footer.foot a{text-decoration:none}footer.foot a:hover{text-decoration:underline}
.about{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px,6vw,80px);align-items:start;padding-bottom:90px}
.about .prose{padding-bottom:0}
.portrait{margin:0;width:clamp(220px,28vw,340px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--line)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.about{grid-template-columns:1fr}.portrait{order:-1;width:170px}}
body.term.home{background:#000}
body.term.home::before{content:"";position:fixed;inset:0;z-index:0;background:url("../img/stefan-bg.jpg") center 30%/cover no-repeat;filter:grayscale(1) brightness(.4) contrast(1.05)}
@media (min-aspect-ratio:1/1){body.term.home::before{background-size:auto 125%;background-position:right top 20%;-webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 62%);mask-image:linear-gradient(90deg,transparent 28%,#000 62%)}body.term.home .screen{margin-left:clamp(20px,6vw,110px);margin-right:auto;max-width:780px}}
body.term.home::after{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 60%)}
.term .screen{position:relative;z-index:1}
body.term.home .screen{text-shadow:0 0 8px #000,0 0 3px #000}
.term ul.langs li{grid-template-columns:minmax(9ch,14ch) 1fr}
.term mark{background:#d6ffd6;color:#000;padding:0 .15em}
.term ol.res{list-style:none;margin:0;padding:0}
.term ol.res li{display:block;margin:0 0 1.1em}
.term ol.res li a{display:inline-block}
.term .snip{display:block;color:#9bd09b;padding-left:4ch;max-width:72ch}
.term a.back{color:#fff;text-decoration:none;border-bottom:1px dotted var(--tg)}
.term .sign{color:var(--tg)}
@media (max-aspect-ratio:1/1){body.term.home::after{background:rgba(0,0,0,.5)}}
/* v3: Projekt-Kacheln (Flip), Projektseite */
h1.page-title.small{font-size:clamp(30px,6.2vw,84px)}
.ptile{position:relative;grid-column:span 2;aspect-ratio:1/1;perspective:1400px;cursor:pointer;border-radius:4px;outline-offset:3px}
.ptile.wide{grid-column:span 4;aspect-ratio:2/1}
.ptile.tall{grid-row:span 2;aspect-ratio:auto}
.ptile[hidden]{display:none}
.flip{position:absolute;inset:0;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.ptile.is-flipped .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:4px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:20px;display:flex;flex-direction:column}
.face.front{justify-content:flex-end;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(0,0,0,.28)),var(--c)}
.face.front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.face.front::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);z-index:1}
.face.front .cap{position:relative;z-index:2}
.face.front b{display:block;font-weight:500;font-size:clamp(17px,1.6vw,22px);line-height:1.25}
.face.front small,.face.back small{font-size:13px;opacity:.85}
.face.back{transform:rotateY(180deg);background:var(--c6);color:#f1f1ed;gap:10px;overflow:auto;justify-content:center}
.face.back b{font-weight:500;font-size:clamp(17px,1.6vw,22px);line-height:1.25}
.face.back p{margin:0;font-size:clamp(14px,1.25vw,16px);line-height:1.55;color:#d9dad5;max-width:60ch}
.face.back .more{align-self:flex-start;color:#fff;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.face.back .more:hover{opacity:.8}
@media (prefers-reduced-motion:reduce){.flip{transition:none}}
@media (max-width:760px){.ptile,.ptile.wide{grid-column:span 2;aspect-ratio:4/3}.ptile{grid-column:span 1;aspect-ratio:1/1}.ptile.tall{grid-row:auto}}
.crumbs{margin:0 0 18px;font-size:15px;color:var(--mute)}
.crumbs a{text-decoration:none;color:var(--mute)}.crumbs a:hover{color:var(--ink)}
.tagrow{list-style:none;margin:0;padding:18px 0;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line)}
.tagrow li{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:5px 13px}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:6px 0 48px}
.gallery .shot{margin:0;grid-column:span 2;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--line)}
.gallery .shot:first-child{grid-column:span 6;aspect-ratio:16/9}
.gallery .shot button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gallery .shot img{display:block;width:100%;height:100%;object-fit:cover}
.gallery .shot.ph{display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:14px;border:1px dashed var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery .shot{grid-column:span 1}.gallery .shot:first-child{grid-column:span 2}}
.detail{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px clamp(32px,6vw,80px);align-items:start;padding-bottom:48px}
.detail .prose{padding-bottom:0}
dl.facts{margin:0;border-top:1px solid var(--line)}
dl.facts dt{font-size:13px;color:var(--mute);padding-top:14px}
dl.facts dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.detail{grid-template-columns:1fr}}
.pnav{display:flex;gap:28px;flex-wrap:wrap;padding:18px 0 90px;margin:0;border-top:1px solid var(--line)}
.pnav a{text-decoration:none}.pnav a:hover{text-decoration:underline}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(0,0,0,.82)}
dialog.lightbox img{display:block;max-width:94vw;max-height:90vh;border-radius:4px}
.lb-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#000;font-size:22px;line-height:1;cursor:pointer}
.ptile .face.back{pointer-events:none}
.ptile.is-flipped .face.back{pointer-events:auto}
.ptile.is-flipped .face.front{pointer-events:none}
.gallery .shot.contain{background:#fff}.gallery .shot.contain img{object-fit:contain}
.ptile.txt-black .face.front{color:#111}
.ptile.txt-black .face.front::after{background:linear-gradient(0deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%)}
.term ul.langs li.langrow{display:block}
.term ul.langs li.langrow a{padding:0 .35em}
.about .prose .quote{font-size:clamp(22px,2.4vw,30px);line-height:1.4;margin:0 0 1.2em;font-weight:300}
.about .prose .quote strong{font-weight:700}
body.term.home .gap{height:2.8em}
/* v4.8.4 Handy: mehr Luft zwischen Kopfzeilen und Navigation */
@media (max-width:560px){body.term.home p.dim+.gap{height:4.8em}}

.e-trace,.hand{font-family:var(--font-hand);font-weight:400;font-synthesis:none}
/* Handy: Kachel ohne 3D-Drehung, Ueberblendung; Rueckseite nur Titel + weiter */
@media (max-width:760px){
 .ptile{perspective:none}
 .flip,.ptile.is-flipped .flip{transform:none;transform-style:flat;transition:none}
 .face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .35s}
 .face.back{transform:none;opacity:0;visibility:hidden;align-items:flex-start;justify-content:flex-end;gap:12px}
 .ptile.is-flipped .face.back{opacity:1;visibility:visible}
 .ptile.is-flipped .face.front{opacity:0}
 .face.back p,.face.back small{display:none}
 .face.back .more{padding:8px 0;font-size:16px}
}

.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#000;font-size:30px;line-height:1;cursor:pointer;z-index:2;padding:0 0 4px}
.lb-nav{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.4)}.lb-nav:hover{background:#fff}
.lb-nav[hidden],.lb-count[hidden]{display:none}
.lb-prev{left:max(10px,2vw)}.lb-next{right:max(10px,2vw)}
.lb-count{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);color:#fff;font:14px/1 system-ui,sans-serif;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:999px}
@media (max-width:760px){.lb-nav{width:40px;height:40px;font-size:26px}}

/* v4.8.4 Handy: Kontaktliste kompakt (Titel/Kopf unveraendert wie auf allen Seiten) */
@media (max-width:560px){
 .contact-list{margin-bottom:24px}
 .contact-list li{gap:2px;padding:12px 0}
}

/* v4.8.4 Rechtstexte + Terminal-Fusszeile */
.legal-text{max-width:68ch;padding:6px 0 70px}
.legal-text h2{font-size:clamp(18px,2vw,21px);font-weight:500;margin:1.9em 0 .4em;line-height:1.3}
.legal-text p{margin:0 0 .8em;color:var(--ink);line-height:1.6}
.legal-text a{color:inherit;text-underline-offset:3px}
.term .legal{margin-top:2.6em;font-size:.82em;color:var(--tg)}
.term .legal a{color:var(--tg);text-decoration:none;border-bottom:1px dotted var(--tg)}
.term .legal a:hover,.term .legal a:focus-visible{background:var(--tg);color:#000;outline:none}

/* v5.0 Projektseite: Videos, Musik, Links */
.sec-h{font-size:clamp(18px,2vw,21px);font-weight:500;margin:0 0 14px}
.media-sec{padding:6px 0 48px}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;align-items:start}
.media{margin:0;min-width:0}
.media.portrait-true{max-width:340px}
.media video{display:block;width:100%;max-height:80vh;background:#000;border-radius:4px}
.mframe{position:relative;aspect-ratio:16/9;background:#14161b;border-radius:4px;overflow:hidden}
.mframe.suno{aspect-ratio:auto;min-height:150px}
.mframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mframe.suno.on{min-height:240px}
.mplay{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;text-align:center}
.mplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.mplay>span{position:relative}
.mplay-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#fff;color:#000;font-size:20px;padding-left:4px}
.mplay-lbl{font-size:15px;line-height:1.3}
.mplay-note{font-size:12px;opacity:.75;max-width:34ch;line-height:1.35}
.mplay:hover .mplay-ico,.mplay:focus-visible .mplay-ico{background:#d6ffd6}
.mplay:disabled{cursor:default}
.media figcaption{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding-top:8px;font-size:15px}
.media .mt{font-weight:500}
.media .mo{color:var(--mute);font-size:14px;text-underline-offset:3px}
@media (max-width:760px){.media-grid{grid-template-columns:1fr}.media.portrait-true{max-width:100%}}
.links-sec{padding:0 0 48px}
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.linklist li{padding:14px 0;border-bottom:1px solid var(--line)}
.linklist .lt{font-size:clamp(17px,1.9vw,19px);text-underline-offset:3px;color:var(--ink)}
.linklist .lh{margin-left:10px;font-size:13px;color:var(--mute)}
.linklist .ln{margin:4px 0 0;color:var(--mute);font-size:15px;max-width:62ch}