/* Lokale Schriften (DSGVO): Dateien in assets/fonts/ ablegen, siehe assets/fonts/LIESMICH.txt */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/inter-tight-200.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/inter-tight-300.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-tight-400.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-tight-500.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic.woff2) format("woff2")}

:root{--w:#ffffff;--b:#0a0a0a;--g:#8a8a8a;--l:rgba(10,10,10,.12);--ease:cubic-bezier(.16,1,.3,1);
  --sans:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Instrument Serif","Times New Roman",serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--w);color:var(--b);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--b);color:var(--w)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--g);font-weight:400}

/* Nav – invertiert sich automatisch über hellen und dunklen Flächen */
nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,56px);mix-blend-mode:difference;color:#fff;pointer-events:none}
nav *{pointer-events:auto}
.logo img{display:block;height:34px;width:auto}
.menu{display:flex;gap:clamp(16px,3vw,40px);align-items:center;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.lang{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;opacity:.7}
.lang:hover{opacity:1}
@media(max-width:700px){.menu a{display:none}}

/* Cursor */
#cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:60;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease)}
#cur.big{width:64px;height:64px}
@media(hover:none){#cur{display:none}}

/* Hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--w)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,96px)}
.hero h1{font-weight:200;font-size:clamp(3.2rem,9vw,8.6rem);line-height:.92;letter-spacing:-.055em}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .serif{letter-spacing:-.03em;font-size:1.08em}
.hero.gl-on h1{color:transparent}
.hero .meta{position:absolute;left:clamp(20px,6vw,96px);right:clamp(20px,6vw,96px);bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero .meta p{max-width:30ch;font-size:.95rem;color:var(--g)}
.hint{display:flex;align-items:center;gap:14px}
.hint i{display:block;width:60px;height:1px;background:var(--b);transform-origin:left;animation:hint 2.4s var(--ease) infinite}
.h-touch{display:none}@media(hover:none){.h-touch{display:inline}.h-mouse{display:none}}
@media(max-width:700px){.hero h1{font-size:15vw}.hero .meta p{display:none}}
@keyframes hint{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Sections */
section{position:relative;padding:clamp(110px,18vh,200px) clamp(20px,6vw,96px)}
.wrap{max-width:1240px;margin:0 auto}
.head{display:grid;grid-template-columns:120px 1fr;gap:20px;border-top:1px solid var(--l);padding-top:22px}
.num{font-size:.72rem;letter-spacing:.2em;color:var(--g)}
h2{font-weight:200;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1;letter-spacing:-.045em}

.about-grid{display:grid;grid-template-columns:120px 1fr 1fr;gap:20px clamp(30px,5vw,80px);margin-top:clamp(50px,8vh,90px)}
.about-grid p{font-size:1.06rem;color:#3a3a3a;max-width:48ch}
.about-grid p+p{margin-top:1.2rem}
.about-grid strong{font-weight:500;color:var(--b)}
.facts{border-top:1px solid var(--b)}
.fact{display:grid;grid-template-columns:1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--l);font-size:.98rem}
.fact span:first-child{color:var(--g);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding-top:4px}
@media(max-width:900px){.about-grid,.head{grid-template-columns:1fr}.about-grid>.sp{display:none}}

/* Statement – Wörter leuchten beim Scrollen auf */
.statement{background:var(--b);color:var(--w);min-height:180vh;padding-top:0;padding-bottom:0}
.statement .sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.statement p{font-weight:200;font-size:clamp(2rem,5.6vw,5.2rem);line-height:1.08;letter-spacing:-.04em;max-width:16ch}
.statement .w{opacity:.14;transition:opacity .2s linear}
.statement .serif{font-size:1.05em}

/* Musik – Liste */
.rows{margin-top:clamp(50px,8vh,90px);border-top:1px solid var(--b)}
.row{position:relative;display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:20px;padding:clamp(22px,3.4vw,40px) 0;border-bottom:1px solid var(--l);overflow:hidden;isolation:isolate}
.row::before{content:"";position:absolute;inset:0;background:var(--b);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);z-index:-1}
.row:hover::before{transform:scaleY(1)}
.row:hover{color:var(--w)}
.row .t{font-size:clamp(2rem,5.4vw,4.8rem);font-weight:200;letter-spacing:-.045em;line-height:1;transition:transform .7s var(--ease)}
.row:hover .t{transform:translateX(18px)}
.row .d{font-size:.9rem;color:var(--g);text-align:right;transition:color .4s}
.row:hover .d{color:#bdbdbd}
.row .n{font-size:.72rem;letter-spacing:.2em;color:var(--g);padding-left:4px}
@media(max-width:700px){.row{grid-template-columns:1fr}.row .d{text-align:left}.row .n{display:none}}

/* Projekte */
.proj{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-top:clamp(40px,6vh,70px)}
.proj p{color:#3a3a3a;font-size:1.06rem;max-width:40ch}
.wip{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.wip i{width:8px;height:8px;border-radius:50%;background:var(--b);animation:wip 1.6s ease-in-out infinite}
@keyframes wip{50%{opacity:.15;transform:scale(.6)}}
@media(max-width:900px){.proj{grid-template-columns:1fr}}
#instagram{padding-top:clamp(110px,18vh,200px)!important}

/* Instagram */
.feed-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--b);border-radius:99px;padding:14px 26px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--b);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.btn:hover{color:var(--w)}.btn:hover::before{transform:none}
#insta-feed{margin-top:clamp(50px,8vh,90px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.col{display:flex;flex-direction:column;gap:12px}
.col:nth-child(even){margin-top:90px}
.tile{aspect-ratio:4/5;overflow:hidden;position:relative;background:#eee}
.tile svg{width:100%;height:100%;display:block;transform:scale(1.15);transition:transform 1.2s var(--ease)}
.tile:hover svg{transform:scale(1.02)}
/* Für den echten Feed in WordPress: Bilder schwarz-weiß, Farbe beim Hover */
#insta-feed img{filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease)}
#insta-feed a:hover img{filter:none}
.note{margin-top:18px;font-size:.78rem;color:var(--g)}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}.col:nth-child(n+3){display:none}}

/* Footer */
footer{background:var(--b);color:var(--w);padding:clamp(100px,16vh,180px) clamp(20px,6vw,96px) 34px}
footer .label{color:#777}
.mail{display:inline-block;margin-top:24px;font-size:clamp(2.4rem,8vw,8rem);font-weight:200;letter-spacing:-.05em;line-height:1;position:relative}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:currentColor;transform:scaleX(.0);transform-origin:left;transition:transform .9s var(--ease)}
.mail:hover::after{transform:scaleX(1)}
.foot-b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:clamp(80px,14vh,160px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#888}
.foot-b a:hover{color:#fff}
.foot-b div{display:flex;gap:28px;flex-wrap:wrap}

/* Reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
.in .mask>span,.mask.in>span{transform:none}
@media(prefers-reduced-motion:reduce){.rv,.mask>span{opacity:1;transform:none;transition:none}.statement .w{opacity:1}#cur{display:none}html{scroll-behavior:auto}}

/* WordPress-Ergänzungen */
.admin-bar nav{top:32px}
@media(max-width:782px){.admin-bar nav{top:46px}}
.tile{display:block}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.tile:hover img{transform:scale(1.01)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* Unterseiten (Impressum, Datenschutz, später Projekte) */
.page-main{padding:clamp(140px,22vh,220px) clamp(20px,6vw,96px) clamp(90px,14vh,160px)}
.page-main .wrap{max-width:900px}
.page-title{font-weight:200;font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-.05em;margin-bottom:clamp(40px,7vh,80px)}
.prose{font-size:1.04rem;color:#2a2a2a}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3{font-weight:300;letter-spacing:-.02em;color:var(--b);margin-top:2em;line-height:1.2}
.prose h2{font-size:1.8rem}.prose h3{font-size:1.3rem}
.prose a{border-bottom:1px solid currentColor}
.prose ul,.prose ol{padding-left:1.2em}
.prose img{max-width:100%;height:auto}

/* YouTube-Galerie */
.vids{margin-top:clamp(50px,8vh,90px)}
.vid{display:block;position:relative;color:inherit}
.vid .thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.vid img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);transform:scale(1.05);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.vid:hover img,.vid:focus-visible img{filter:none;transform:scale(1)}
.vid .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .7s var(--ease),background .5s var(--ease)}
.vid .play::after{content:"";position:absolute;left:52%;top:50%;width:0;height:0;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.vid:hover .play{transform:scale(1.12);background:rgba(255,255,255,.18)}
.vid-main .play{width:112px;height:112px;margin:-56px 0 0 -56px}
.vid-main .play::after{border-width:12px 0 12px 20px}
.vmeta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px}
.vt{font-size:1rem;font-weight:300;line-height:1.35;letter-spacing:-.01em}
.vd{flex:none;font-size:.7rem;letter-spacing:.2em;color:var(--g);font-weight:400}
.vid-main .vmeta{padding-top:22px}
.vid-main .vt{font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:200;letter-spacing:-.035em;line-height:1.1}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px);margin-top:clamp(50px,8vh,90px)}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}.vid-main .play{width:76px;height:76px;margin:-38px 0 0 -38px}}

/* Video-Player (Lightbox) */
.lb{position:fixed;inset:0;z-index:58;background:rgba(6,6,6,.97);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-in{width:min(92vw,calc(84vh * 16 / 9));aspect-ratio:16/9;transform:scale(.96);transition:transform .7s var(--ease)}
.lb.open .lb-in{transform:none}
.lb iframe{width:100%;height:100%;border:0;display:block;background:#000}
.lb-x{position:absolute;top:24px;right:clamp(20px,4vw,56px);background:none;border:0;color:#fff;font:inherit;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:10px 0}
.lb-x::after{content:"";display:block;height:1px;background:currentColor;margin-top:6px;transform:scaleX(.4);transform-origin:right;transition:transform .5s var(--ease)}
.lb-x:hover::after{transform:scaleX(1)}

/* Galerie-Layout je nach Anzahl */
.vgrid.cols-2{grid-template-columns:repeat(2,1fr)}
.vgrid.cols-1{grid-template-columns:1fr}
.vgrid.duo{margin-top:0}
.vgrid.duo .vt{font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:200;letter-spacing:-.025em;line-height:1.15}
.vgrid.duo .play{width:96px;height:96px;margin:-48px 0 0 -48px}
@media(max-width:560px){.vgrid.cols-2{grid-template-columns:1fr}}

/* Instagram-Videos */
.tile{position:relative}
.tile .tplay{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2;transition:opacity .4s}
.tile .tplay::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.tile .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);z-index:1;pointer-events:none}
.tile .pv.on{opacity:1}
.tile:hover .tplay{opacity:0}

/* Player: Video-Modus (beliebiges Seitenverhältnis, z. B. Reels hochkant) */
.lb video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.lb iframe[hidden],.lb video[hidden]{display:none}

/* Player: Instagram-Modus (offizieller Instagram-Player, Hochformat) */
.lb-in.igmode{aspect-ratio:auto;max-height:calc(100svh - 120px);overflow-y:auto;background:#fff;border-radius:6px;-webkit-overflow-scrolling:touch}
.lb-in.igmode #lb-ig{display:block;width:100%;border:0;background:#fff}
.lb-in [hidden]{display:none!important}
.lb iframe#lb-ig[hidden]{display:none}

/* Player: „Schließen" immer sichtbar, Inhalt darunter */
.lb{padding:72px 0 32px}
.lb-x{z-index:3;background:rgba(0,0,0,.55);padding:10px 16px;border-radius:99px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb-x::after{display:none}
@media(max-width:700px){.lb{padding:60px 0 24px}.lb-x{top:12px;right:12px}.lb-in.igmode{max-height:calc(100svh - 84px)}}