@font-face{font-family:"Raleway";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/raleway-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/raleway-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/raleway-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}
/* Layout: klare, großzügige Bühne – fette Grotesk-Headlines, Bilder in runden Kacheln, ein dunkles Judas-Band */
:root{
  --bg:#F6F6F4; --surface:#FFFFFF; --ink:#101217; --muted:#5A5F6B; --line:#E2E3E0;
  --accent:#063BDA; --accent-ink:#FFFFFF; --logo:#063BDA; --logo-ink:#FFFFFF;
  --band:#0F1117; --band-2:#1B1E28; --band-line:#2A2E3A; --band-fg:#F1F2F5; --band-muted:#9EA3B0; --band-accent:#7C93FF;
  --brandfont:"Raleway","Hanken Grotesk",system-ui,sans-serif;
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:20px; --wrap:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D0F13; --surface:#161920; --ink:#EEF0F3; --muted:#A0A6B2; --line:#262A33; --accent:#7C93FF; --accent-ink:#0D0F13;
  --band:#07080B; --band-2:#15171F; --band-line:#242733; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D0F13; --surface:#161920; --ink:#EEF0F3; --muted:#A0A6B2; --line:#262A33; --accent:#7C93FF; --accent-ink:#0D0F13;
  --band:#07080B; --band-2:#15171F; --band-line:#242733; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.025em; text-wrap:balance; margin:0}
p{margin:0}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.ph{display:block; width:100%; height:100%; object-fit:cover; color:transparent; background:var(--line)}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(14px)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap; color:var(--ink)}
.brand .tile{width:42px; height:42px; border-radius:11px; background:var(--logo); display:grid; place-items:center; flex:none}
.brand .tile img{width:30px; height:auto; display:block}
.brand .word{font-family:var(--brandfont); font-weight:500; font-size:1.45rem; letter-spacing:-.01em; line-height:1}
.brand .word small{font-weight:300; font-size:.95rem; letter-spacing:.22em; margin-left:6px; color:var(--muted)}
.nav{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; font-size:.95rem; font-weight:500}
.nav a{display:block; text-decoration:none; color:var(--muted); padding:8px 14px; border-radius:999px; transition:background .2s,color .2s}
.nav a:hover{color:var(--ink); background:var(--surface)}
.nav a.cta{background:var(--ink); color:var(--bg)}
.nav a.cta:hover{background:var(--accent); color:var(--accent-ink)}
.menu-btn{display:none; background:var(--surface); border:1px solid var(--line); color:var(--ink); font:inherit; font-weight:600; font-size:.9rem; padding:8px 16px; border-radius:999px; cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{position:absolute; left:12px; right:12px; top:calc(100% + 4px); flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
  .nav a{padding:12px 16px}
  .nav:not(.open){display:none}
}

/* Hero */
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px; align-items:center; padding-block:56px 88px}
.hero h1{font-size:clamp(3rem, 7.6vw, 6.6rem); font-weight:800; letter-spacing:-.045em; line-height:.95; margin-top:22px}
.hero h1 em{font-style:normal; color:var(--accent)}
.cite{margin-top:18px; font-size:.95rem; color:var(--muted)}
.intro{margin-top:28px; max-width:56ch; color:var(--muted); font-size:1.1rem}
.pills{margin-top:30px; display:flex; flex-wrap:wrap; gap:8px}
.pills span{padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.9rem; font-weight:500}
.feature{position:relative; display:block; border-radius:28px; overflow:hidden; aspect-ratio:4/5; text-decoration:none; color:#fff; background:var(--band)}
.feature img{position:absolute; inset:0; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feature:hover img{transform:scale(1.04)}
.feature::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,9,13,.05) 30%, rgba(8,9,13,.88) 100%)}
.feature .chip{position:absolute; z-index:1; top:18px; left:18px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.92); color:#101217; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.feature .body{position:absolute; z-index:1; left:24px; right:24px; bottom:24px}
.feature h2{font-size:2.3rem; letter-spacing:-.035em}
.feature .sub{color:rgba(255,255,255,.75); margin-top:4px}
.feature .when{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:.95rem; font-variant-numeric:tabular-nums}
.feature .when b{font-weight:600}
.feature .arrow{margin-left:auto; width:46px; height:46px; border-radius:50%; background:#fff; color:#101217; display:grid; place-items:center; font-size:1.2rem; transition:transform .3s}
.feature:hover .arrow{transform:rotate(-45deg)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr; gap:36px; padding-block:32px 64px} .feature{aspect-ratio:4/3}}
@media (max-width:520px){.feature{aspect-ratio:4/5}}

/* Sektionen */
section{padding-block:104px}
.head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:56px}
.head h2{font-size:clamp(2.4rem,5.4vw,4.4rem); margin-top:16px}
.head p{color:var(--muted); max-width:56ch; font-size:1.05rem}
@media (max-width:860px){section{padding-block:72px} .head{grid-template-columns:1fr; gap:16px; margin-bottom:36px}}

/* Judas */
.judas{background:var(--band); color:var(--band-fg); border-radius:36px 36px 0 0}
.judas + section{padding-top:104px}
.judas .kicker{color:var(--band-muted)}
.judas .kicker::before{background:var(--band-accent)}
.judas .head p{color:var(--band-muted)}
.judas h2 .soft{color:var(--band-muted); font-weight:500}
.j-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:56px}
.j-text p{color:var(--band-fg); opacity:.9; max-width:60ch}
.j-text p+p{margin-top:16px}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:36px}
.facts div{background:var(--band-2); border-radius:16px; padding:18px 18px 16px}
.facts strong{display:block; font-family:var(--display); font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1}
.facts span{display:block; margin-top:6px; font-size:.85rem; color:var(--band-muted); line-height:1.35}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--band-fg); color:var(--band)}
.btn.solid:hover{background:var(--band-accent)}
.btn.ghost{border:1px solid var(--band-line); color:var(--band-fg)}
.btn.ghost:hover{border-color:var(--band-fg)}
.dates h3{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:14px}
.date{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--band-2); border-radius:18px; padding:16px 18px}
.date+.date{margin-top:10px}
.date .d{font-family:var(--display); font-weight:800; font-size:2.2rem; letter-spacing:-.04em; line-height:1; text-align:center}
.date .d small{display:block; font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted); margin-top:4px}
.date .w{font-weight:600}
.date .m{font-size:.9rem; color:var(--band-muted)}
.date .tag{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--band-accent); color:var(--band); white-space:nowrap}
.date.past{opacity:.5}
.date.past .tag{background:transparent; border:1px solid var(--band-line); color:var(--band-muted)}
.tickets{margin-top:18px; font-size:.9rem; color:var(--band-muted)}
.tickets a{color:var(--band-fg)}
@media (max-width:900px){.j-grid{grid-template-columns:1fr; gap:44px}}
@media (max-width:480px){.facts strong{font-size:1.8rem} .date{grid-template-columns:60px minmax(0,1fr)} .date .tag{grid-column:2; justify-self:start}}
.strip{display:grid; grid-template-columns:1fr 1.5fr 1.5fr; gap:12px; margin-top:72px}
.strip figure{margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; position:relative; background:var(--band-2)}
.strip figure:first-child{aspect-ratio:auto}
.strip img{width:100%; height:100%; object-fit:cover; display:block; color:transparent}
.strip figcaption{position:absolute; left:12px; bottom:12px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600; background:rgba(8,9,13,.6); backdrop-filter:blur(6px); color:#fff}
@media (max-width:700px){.strip{grid-template-columns:1fr 1fr} .strip figure:first-child{grid-column:1/-1; aspect-ratio:1}}
.werk{margin-top:80px}
.werk h3{font-size:1.3rem; letter-spacing:-.02em}
.werk ol{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px}
.werk li{padding:16px 18px; border-radius:16px; border:1px solid var(--band-line)}
.werk time{display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--band-accent); margin-bottom:6px}
.werk li p{font-size:.92rem; color:var(--band-muted); line-height:1.45}
.werk li b{display:block; color:var(--band-fg); font-weight:600; margin-bottom:2px}
.press{margin-top:56px; padding-top:28px; border-top:1px solid var(--band-line); display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.9rem; color:var(--band-muted)}
.press strong{font-weight:600; color:var(--band-fg); padding:6px 14px; border-radius:999px; background:var(--band-2)}

/* Projekte */
.proj{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px}
.proj .pic{aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; margin-bottom:18px; background:var(--line)}
.proj .pic img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.proj article:hover .pic img{transform:scale(1.05)}
.proj .yr{display:inline-block; font-size:.8rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.proj h3{font-size:1.5rem; letter-spacing:-.03em; margin:6px 0 8px}
.proj p{color:var(--muted); font-size:.97rem}
.proj .role{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.proj .role span{font-size:.78rem; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink)}
@media (max-width:900px){.proj{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.proj{grid-template-columns:1fr}}
.partners{margin-top:64px; padding:28px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:20px; font-size:.95rem}
.partners p:last-child{color:var(--muted)}
@media (max-width:700px){.partners{grid-template-columns:1fr; gap:8px}}

/* Vita */
.v-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:64px; align-items:start}
.v-side{position:sticky; top:100px}
.quote{font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.08; letter-spacing:-.035em; margin-top:18px}
.quote small{display:block; font-family:var(--body); font-weight:500; letter-spacing:0; font-size:.95rem; color:var(--muted); margin-top:14px}
.v-pic{margin:32px 0 0; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden}
.v-block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px 14px}
.v-block+.v-block{margin-top:16px}
.v-block h3{font-size:1.25rem; letter-spacing:-.02em; margin-bottom:8px}
.v-list{list-style:none; margin:0; padding:0}
.v-list li{display:grid; grid-template-columns:116px minmax(0,1fr); gap:18px; padding-block:12px; border-top:1px solid var(--line)}
.v-list li:first-child{border-top:0}
.v-list .when{font-size:.86rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
@media (max-width:860px){.v-grid{grid-template-columns:1fr; gap:32px} .v-side{position:static} .v-list li{grid-template-columns:88px minmax(0,1fr); gap:12px} .v-block{padding:22px 20px 10px}}

/* Lehre */
.wide{aspect-ratio:21/8; border-radius:28px; overflow:hidden; margin-bottom:24px}
@media (max-width:700px){.wide{aspect-ratio:3/2}}
.teach{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.teach div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.teach h3{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:8px}
.teach p{color:var(--muted); font-size:.97rem}
@media (max-width:820px){.teach{grid-template-columns:1fr}}

/* Kontakt */
.contact .box{position:relative; overflow:hidden; background:var(--logo); color:var(--logo-ink); border-radius:36px; padding:clamp(28px,6vw,72px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:end}
.contact .kicker{color:inherit; opacity:.8}
.contact .kicker::before{background:currentColor}
.contact h2{font-size:clamp(2.4rem,5.6vw,4.6rem); margin-top:14px}
.mail{display:inline-block; margin-top:24px; padding:14px 26px; border-radius:999px; background:#FFFFFF; color:#063BDA; font-weight:700; font-size:clamp(1rem,2.4vw,1.2rem); text-decoration:none; word-break:break-all}
.social{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.social a{display:flex; justify-content:space-between; padding:14px 18px; border-radius:16px; border:1px solid color-mix(in srgb, currentColor 30%, transparent); text-decoration:none; font-weight:600; transition:background .2s}
.social a:hover{background:color-mix(in srgb, currentColor 12%, transparent)}
@media (max-width:820px){.contact .box{grid-template-columns:1fr}}
.contact{padding-top:40px}

/* Footer */
footer{font-size:.9rem; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-block:28px 36px}
footer nav{display:flex; gap:20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink); text-decoration:underline}

/* Rechtstexte */
.legal{padding-block:48px 96px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.4rem,6vw,4rem); letter-spacing:-.04em; margin:16px 0 40px}
.legal h2{font-size:1.35rem; letter-spacing:-.02em; margin:36px 0 10px}
.legal p,.legal li{color:var(--muted)}
.legal p+p{margin-top:12px}
.legal .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 28px; color:var(--ink)}
.legal .card p{color:var(--ink)}
.back{display:inline-flex; gap:8px; text-decoration:none; font-weight:600; color:var(--accent)}

@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
.hero h1,.hero .intro,.hero .feature{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .intro{animation-delay:.08s} .hero .feature{animation-delay:.14s}

/* Logo-Stil: Streifen wie im sTeTo-Logo */
.contact .box::before{content:""; position:absolute; right:-40px; top:-30px; width:min(520px,70%); height:260px; pointer-events:none; opacity:.14;
  background:repeating-linear-gradient(180deg,#fff 0 9px,transparent 9px 26px);
  -webkit-mask:radial-gradient(closest-side at 50% 100%,#000 60%,transparent 100%); mask:radial-gradient(closest-side at 50% 100%,#000 60%,transparent 100%)}
.contact .box > *{position:relative}
.c-logo{display:flex; flex-direction:column; gap:28px}
.c-logo img{width:170px; height:auto}
.wordmark{font-family:var(--brandfont); line-height:1}
.hero .stripes{display:block; width:120px; height:56px; margin-bottom:6px; color:var(--accent);
  background:repeating-linear-gradient(180deg,currentColor 0 5px,transparent 5px 12px);
  -webkit-mask:linear-gradient(90deg,#000,transparent); mask:linear-gradient(90deg,#000,transparent); opacity:.85}
footer .fmark{display:inline-flex; align-items:center; gap:10px}
footer .fmark i{width:26px; height:26px; border-radius:7px; background:var(--logo); display:grid; place-items:center}
footer .fmark i img{width:18px}