:root{
  --paper:#fbfbfa; --ink:#141414; --ink-2:#585858; --line:#dcdcd8;
  --red:#c0161d; --red-lite:#ff8080; --tint:#f8e7e8; --card:#eeeeeb;
  --black:#111; --on-dark:#f2f2f0; --on-dark-2:#b4b4b0;
  --sans:'Archivo', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, Menlo, monospace;
  --pad:clamp(16px, 4vw, 56px); --gap:clamp(16px, 2.2vw, 32px);
  --section:clamp(80px, 10vw, 144px);
  color-scheme:light; interpolate-size:allow-keywords;
}
*,*::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:400 18px/1.6 var(--sans); text-rendering:optimizeLegibility}
[hidden]{display:none !important}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{margin:0; font-family:var(--sans)}

html[data-ui="de"] body [lang="en"], html[data-ui="en"] body [lang="de"]{display:none !important}

.wrap{max-width:1400px; margin:0 auto; padding-inline:var(--pad)}
.grid{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--gap)}
section{scroll-margin-top:16px}

/* Schwarzer Rahmen oben und unten, Schrift aus der Schreibmaschine */
.top{background:var(--black); color:var(--on-dark)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:0 clamp(16px, 3vw, 40px); min-height:64px}
.home{margin-right:auto; padding:12px 0; font:700 16px/1 var(--mono); text-decoration:none}
.nav{display:flex; gap:4px clamp(14px, 2.2vw, 28px); margin:0; padding:0; list-style:none}
.nav a{display:inline-block; padding:12px 0; font:400 15px/1 var(--mono); text-decoration:none}
.top a:hover{color:var(--red-lite)}
.lang{display:flex; gap:2px}
.lang button{font:400 15px/1 var(--mono); color:var(--on-dark-2); background:none; border:0; padding:12px 6px; cursor:pointer}
.lang button[aria-pressed="true"]{color:#fff; text-decoration:underline 2px var(--red-lite); text-underline-offset:.35em}
.top :focus-visible, .contact :focus-visible, footer :focus-visible{outline-color:var(--red-lite)}

/* Held: der Name als Kontur über dem Bühnenfoto */
.hero{position:relative; height:clamp(440px, 78vh, 720px); background:#000; color:#fff; overflow:hidden}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 4%}
.hero .wrap{position:relative; padding-top:clamp(28px, 4vw, 56px)}
.name{font:400 clamp(38px, 10vw, 150px)/.98 var(--mono); letter-spacing:-.01em; color:#fff}
.name span{display:block; white-space:nowrap}
@supports (-webkit-text-stroke:1px #fff){
  .name{-webkit-text-fill-color:transparent; -webkit-text-stroke:2px #fff}
}

.lede-row{align-items:start}
.tagbox{grid-column:1/8; position:relative; margin-top:clamp(-120px, -8vw, -56px); background:var(--red); color:#fff; padding:clamp(22px, 3vw, 44px)}
.role{font-weight:700; font-stretch:125%; font-size:clamp(22px, 2.4vw, 34px); line-height:1.12; margin:0 0 .7em}
.lede{font-size:clamp(18px, 1.4vw, 20px); line-height:1.55; max-width:52ch; margin:0}
.credit{grid-column:9/-1; margin:18px 0 0; font:400 14px/1.5 var(--mono); color:var(--ink-2)}

.h2{font:400 clamp(36px, 4.4vw, 64px)/1 var(--mono); letter-spacing:-.02em; margin-bottom:clamp(28px, 3.5vw, 52px)}

.btn{display:inline-block; background:var(--red); color:#fff; border:0; padding:14px 18px; font:700 15px/1 var(--mono); text-transform:uppercase; text-decoration:none; cursor:pointer}
.btn:hover{background:var(--ink); color:#fff}

/* Aktuell: eigene Fläche im Rosa der Figuren vom Platz */
.now{margin-top:var(--section); padding-block:clamp(48px, 6vw, 96px); background:var(--tint)}
.now .body{grid-column:1/7}
.now .poster{grid-column:8/-1; margin:0}
.now h3{font-weight:800; font-stretch:125%; font-size:clamp(34px, 4.6vw, 68px); line-height:.95; letter-spacing:-.01em; color:var(--red); margin-bottom:24px}
.facts{font:400 15px/1.6 var(--mono); margin:0 0 28px; padding:0; list-style:none}
.now .text{max-width:60ch}
.now .wide{margin:40px 0 0}
figcaption{font:400 14px/1.45 var(--sans); color:var(--ink-2); margin-top:10px}

/* Arbeiten: Karten, versetzt */
.works{padding-top:var(--section)}
.works > .h2{text-align:center}
.cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(48px, 6vw, 88px) var(--gap); margin:0; padding:0; list-style:none; align-items:start}
.cards > li:nth-child(even){margin-top:clamp(0px, 9vw, 140px)}
.pic{position:relative; margin:0 0 22px}
.pic img{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--card)}
.yr{position:absolute; left:0; top:0; background:var(--red); color:#fff; padding:10px 12px; font:700 15px/1 var(--mono)}
.card h3{font-weight:700; font-stretch:125%; font-size:clamp(24px, 2.3vw, 34px); line-height:1.08; margin-bottom:10px}
.card h3 .alt{display:block; margin-top:8px; font-weight:400; font-stretch:100%; font-size:17px; line-height:1.35; color:var(--ink-2)}
.fmt{font:400 15px/1.5 var(--mono); color:var(--ink-2); margin-bottom:16px}
.teaser p{max-width:60ch}
.card summary{display:inline-block; list-style:none}
.card summary::-webkit-details-marker{display:none}
details[open] > summary .a, details:not([open]) > summary .b{display:none}
details::details-content{block-size:0; overflow:hidden; transition:block-size .45s cubic-bezier(.2,.7,.2,1), content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
.more{padding-top:32px}
.more p{max-width:60ch}
.gal{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 28px}
.gal figure{margin:0}
.gal .w{grid-column:1/-1}
.credits{margin:24px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2)}
.credits div{margin-bottom:6px}
.credits dt{display:inline; color:var(--ink); font-weight:600}
.credits dd{display:inline; margin:0}
.watch{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:24px; font-weight:600}
.watch a{text-decoration:underline 2px var(--red); text-underline-offset:.3em}

/* Einträge aus Gani Bilirs Heft, unterstrichen wie dort mit Rot */
.tape{margin:28px 0; padding:0; list-style:none}
.tape li{margin-bottom:20px}
.tape .lbl{display:inline; font:400 15px/1.7 var(--mono); border-bottom:2px solid var(--red)}
.tape q{display:block; margin-top:6px; font-style:italic; quotes:none}
.tape .tr-en{display:block; font-size:16px; color:var(--ink-2)}

.also-h{font-weight:700; font-stretch:125%; font-size:20px; margin:clamp(72px, 9vw, 128px) 0 16px}
.also{margin:0; padding:0; list-style:none; border-top:2px solid var(--ink)}
.also li{display:grid; grid-template-columns:5rem minmax(0, 1fr) minmax(0, 22rem); gap:6px var(--gap); align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line)}
.also .y{font:400 15px/1 var(--mono); color:var(--ink-2)}
.also .t{font-weight:600; font-stretch:112%; font-size:19px; line-height:1.3}
.also .t .alt{display:block; font-weight:400; font-stretch:100%; font-size:16px; color:var(--ink-2)}
.also .f{font-size:16px; line-height:1.45; color:var(--ink-2)}

/* Über */
.about{padding-top:var(--section)}
.about .portrait{grid-column:1/6; margin:0}
.about .bio{grid-column:7/-1; font-size:clamp(19px, 1.5vw, 21px); line-height:1.55}
.about .bio p{max-width:46ch}
.cv{margin-top:clamp(48px, 6vw, 88px)}
.cv .l{grid-column:1/6}
.cv .r{grid-column:7/-1}
.cv h3{font-weight:700; font-stretch:125%; font-size:17px; line-height:1.3; margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--ink)}
.cv .block + .block{margin-top:40px}
.cv ul{margin:0; padding:0; list-style:none; font-size:16px; line-height:1.45}
.cv li{padding:6px 0; border-bottom:1px solid var(--line)}
.toggle{margin-top:20px}
.toggle[aria-expanded="true"] .a, .toggle[aria-expanded="false"] .b{display:none}

/* Texte: Hefte auf grauem Grund */
.texts{padding-top:var(--section)}
.shelf{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--gap); margin:0 0 clamp(40px, 5vw, 72px); padding:0; list-style:none}
.shelf > li{background:var(--card)}
.shelf > li > *{display:block; height:100%; padding:clamp(14px, 1.4vw, 20px); text-decoration:none}
.shelf img{width:100%; aspect-ratio:3/4; object-fit:cover}
.shelf .tt{display:block; margin-top:16px; font-weight:600; font-size:17px; line-height:1.3}
.shelf .src{display:block; margin-top:6px; font-size:15px; line-height:1.4; color:var(--ink-2)}
.shelf a:hover .tt{color:var(--red)}
.list{margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); max-width:720px}
.list li{padding:16px 0; border-bottom:1px solid var(--line)}
.list .tt{font-weight:600; font-size:18px; line-height:1.35}
.list .src{display:block; margin-top:4px; font-size:15px; line-height:1.45; color:var(--ink-2)}

/* Kontakt und Fuß im schwarzen Rahmen */
.contact{margin-top:var(--section); padding-block:clamp(64px, 8vw, 120px); background:var(--black); color:var(--on-dark)}
.mail{display:inline-block; font:400 clamp(18px, 4.4vw, 64px)/1.15 var(--mono); letter-spacing:-.02em; color:#fff; text-decoration:underline 2px var(--red-lite); text-underline-offset:.2em; overflow-wrap:anywhere}
.links{display:flex; flex-wrap:wrap; gap:8px 32px; margin:40px 0 0; padding:0; list-style:none}
.links a{display:inline-block; padding:8px 0; font:400 15px/1.4 var(--mono); color:var(--on-dark)}
.contact a:hover, footer a:hover{color:var(--red-lite)}
footer{background:var(--black); color:var(--on-dark-2); border-top:1px solid #2e2e2e; padding-block:24px 40px; font:400 14px/1.5 var(--mono)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px}

@media (max-width: 900px){
  .tagbox, .credit, .now .body, .now .poster, .about .portrait, .about .bio, .cv .l, .cv .r{grid-column:1/-1}
  .now .poster{max-width:420px}
  .shelf{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cv .r{margin-top:40px}
  .also li{grid-template-columns:3.5rem minmax(0, 1fr)}
  .also .f{grid-column:2}
}
@media (max-width: 760px){
  .cards{grid-template-columns:minmax(0, 1fr)}
  .cards > li:nth-child(even){margin-top:0}
}
@media (max-width: 640px){
  .top .wrap{padding-top:4px}
  .top nav{order:3; flex-basis:100%}
  .nav{justify-content:space-between; gap:0 8px}
  .name{font-size:13vw}
  .hero{height:clamp(400px, 64vh, 520px)}
  .hero > img{object-position:38% 30%}
  .tagbox{margin-top:-48px}
}
@media (max-width: 400px){
  .nav a{font-size:14px}
  .gal{grid-template-columns:1fr}
  @supports (-webkit-text-stroke:1px #fff){ .name{-webkit-text-stroke-width:1.5px} }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  details::details-content{transition:none}
}

/* Unterseiten (alte WordPress-Seiten im neuen Rahmen) */
.single-page{padding:clamp(48px,8vw,120px) 0}
.single-page .entry{max-width:720px}
.single-page .entry img{max-width:100%; height:auto}
.single-page .entry a{color:var(--red)}