/* ═══════════════════════════════════════════════════════════
   KreativitätsSchulzentrum Berlin — Drei Schulen
   Design system + page styles
   ═══════════════════════════════════════════════════════════ */

:root{
  /* base */
  --ink:#14120F;
  --ink-2:#3A352E;
  --ink-3:#6E675D;
  --paper:#FBFAF7;
  --paper-2:#F3F0E9;
  --line:#E4DFD4;
  --white:#fff;

  /* brand */
  --krea:#FFC400;
  --krea-d:#E8AF00;

  /* schools */
  --fh:#E0552B;   --fh-soft:#FDEFE9;
  --kh:#4E8B2E;   --kh-soft:#EDF4E8;
  --tr:#D31A7C;   --tr-soft:#FCE9F3;

  /* active school (swapped by JS) */
  --acc:var(--fh);
  --acc-soft:var(--fh-soft);

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --sh-1:0 1px 2px rgba(20,18,15,.05), 0 4px 14px rgba(20,18,15,.05);
  --sh-2:0 2px 6px rgba(20,18,15,.06), 0 18px 44px rgba(20,18,15,.09);
  --sh-3:0 30px 80px rgba(20,18,15,.16);

  --wrap:1220px;
  --ease:cubic-bezier(.22,1,.36,1);

  --f-d:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-b:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-b); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"kern","liga","cv11";
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-d); font-weight:700; letter-spacing:-.028em; line-height:1.03; margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
@media(max-width:640px){ .wrap{width:min(100% - 1.75rem, var(--wrap))} }

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.9rem 1.4rem; border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ── scroll progress ─────────────────────────────────── */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none}
.progress i{display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--fh),var(--krea),var(--kh),var(--tr));
  transition:width .1s linear}

/* ═══════════════ HEADER ═══════════════ */
.hdr{position:fixed; inset:0 0 auto 0; z-index:100; padding:1.05rem 0;
  transition:padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);}
.hdr::before{content:''; position:absolute; inset:0; opacity:0;
  background:rgba(251,250,247,.82); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line); transition:opacity .45s var(--ease)}
.hdr.is-stuck{padding:.6rem 0}
.hdr.is-stuck::before{opacity:1}
.hdr__in{position:relative; width:min(100% - 2.5rem, 1360px); margin-inline:auto;
  display:flex; align-items:center; gap:2rem; justify-content:space-between}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto}
.brand img{width:auto; height:34px; transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-7deg) scale(1.06)}
.brand__t{display:flex; flex-direction:column; line-height:1.1}
.brand__t b{font-family:var(--f-d); font-size:.94rem; font-weight:700; letter-spacing:-.02em}
.brand__t i{font-style:normal; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}

.nav{display:flex; align-items:center; gap:.35rem}
.nav a{position:relative; text-decoration:none; font-size:.9rem; font-weight:500;
  padding:.55rem .72rem; border-radius:99px; color:var(--ink-2); transition:color .3s, background .3s}
.nav a::after{content:''; position:absolute; left:.72rem; right:.72rem; bottom:.34rem; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.is-cur{color:var(--ink); font-weight:600}
.nav a.is-cur::after{transform:scaleX(1); background:var(--krea); height:3px}
.nav__cta{background:var(--ink); color:#fff !important; padding:.62rem 1.15rem !important; margin-left:.5rem;
  font-weight:600 !important; box-shadow:var(--sh-1)}
.nav__cta::after{display:none !important}
.nav__cta:hover{background:var(--krea); color:var(--ink) !important; transform:translateY(-1px)}

.burger{display:none; width:44px; height:44px; border-radius:12px; position:relative}
.burger span{position:absolute; left:11px; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:1080px){
  .burger{display:block}
  .nav{position:fixed; inset:0 0 0 auto; width:min(88vw,380px); background:var(--paper);
    flex-direction:column; align-items:stretch; justify-content:center; gap:.2rem; padding:2rem 1.75rem;
    transform:translateX(101%); transition:transform .55s var(--ease); box-shadow:var(--sh-3); overflow-y:auto}
  .nav.is-open{transform:none}
  .nav a{font-size:1.45rem; font-family:var(--f-d); font-weight:600; padding:.7rem .3rem; border-radius:var(--r-s)}
  .nav a::after{display:none}
  .nav__cta{text-align:center; margin:1rem 0 0; padding:1rem !important; border-radius:99px}
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--f-d); font-weight:600; font-size:1rem; padding:.95rem 1.6rem; border-radius:99px;
  transition:transform .35s var(--ease), background .35s, color .35s, box-shadow .35s; white-space:nowrap}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--ink); color:#fff; box-shadow:var(--sh-2)}
.btn--solid:hover{background:var(--acc); transform:translateY(-2px)}
.btn--ghost{border:1.5px solid var(--line); color:var(--ink); background:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:var(--ink); background:#fff; transform:translateY(-2px)}
.btn--yellow{background:var(--krea); color:var(--ink); box-shadow:0 10px 30px rgba(255,196,0,.35)}
.btn--yellow:hover{background:#fff; transform:translateY(-2px)}

/* ═══════════════ SHARED BITS ═══════════════ */
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1.4rem}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); transition:background .5s}
.sechd{max-width:760px; margin:0 0 3.4rem}
.sechd h2{font-size:clamp(2.1rem,5.2vw,4rem)}
.sechd__lead{margin-top:1.4rem; font-size:1.1rem; color:var(--ink-2); max-width:56ch}
.sechd--c{margin-inline:auto; text-align:center}
.sechd--c .eyebrow{justify-content:center}
.sechd--inv h2{color:#fff}
.sechd--inv .eyebrow{color:rgba(255,255,255,.6)}

.sec{padding:clamp(5rem,10vw,8.5rem) 0}
.sec--tight{padding-block:clamp(4rem,7vw,6rem)}
.sec--soft{background:var(--paper-2)}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative; padding:clamp(8rem,15vw,11rem) 0 clamp(4rem,8vw,6rem); overflow:hidden}
.hero__bg{position:absolute; inset:-10% -5%; z-index:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; will-change:transform}
.blob--fh{width:46vw; height:46vw; background:var(--fh); top:-8%; left:-10%; animation:float1 22s ease-in-out infinite}
.blob--kh{width:40vw; height:40vw; background:var(--kh); top:22%; right:-8%; opacity:.38; animation:float2 27s ease-in-out infinite}
.blob--tr{width:34vw; height:34vw; background:var(--tr); bottom:-14%; left:26%; opacity:.32; animation:float3 24s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.13)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-6%) scale(1.18)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-9%) scale(.88)}}
.grain{position:absolute; inset:0; opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.hero::after{content:''; position:absolute; inset:auto 0 0 0; height:34%; z-index:1;
  background:linear-gradient(to bottom, transparent, var(--paper)); pointer-events:none}

.hero__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{font-size:clamp(3.3rem,10.5vw,8.2rem); font-weight:800; letter-spacing:-.045em; line-height:.88; margin:0 0 1.6rem}
.ink-sweep{position:relative; display:inline-block; color:var(--fh)}
.ink-sweep::after{content:''; position:absolute; left:-.04em; right:-.04em; bottom:.1em; height:.14em; z-index:-1;
  background:var(--krea); border-radius:99px; transform:scaleX(0); transform-origin:left;
  animation:sweep 1.1s .55s var(--ease) forwards}
@keyframes sweep{to{transform:scaleX(1)}}
.lead{font-size:clamp(1.05rem,1.9vw,1.3rem); color:var(--ink-2); max-width:50ch; margin-bottom:2.2rem}
.lead b{color:var(--ink); font-weight:600}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.2rem}
.hero__note{display:inline-flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px solid var(--line); padding:.65rem 1.1rem; border-radius:99px;
  backdrop-filter:blur(6px); text-wrap:balance}
.hero__note::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--kh); flex:0 0 auto;
  margin-top:.5em; box-shadow:0 0 0 0 color-mix(in srgb,var(--kh) 60%, transparent); animation:pulse 2.2s infinite}
@media(max-width:640px){ .hero__note{border-radius:var(--r-m); padding:.8rem 1.05rem} }
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero__stack{position:relative; height:clamp(340px,42vw,520px)}
.hcard{position:absolute; margin:0; width:78%; border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--sh-3); border:5px solid #fff; will-change:transform;
  transition:transform .9s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease), z-index 0s .45s}
.hcard img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9}
.hcard figcaption{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:.5rem;
  padding:2.6rem 1.1rem .85rem; font-family:var(--f-d); font-weight:600; font-size:.92rem; color:#fff;
  background:linear-gradient(to top, rgba(10,9,7,.82), transparent)}
.hcard figcaption i{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.hcard--tr{top:0; right:0; z-index:1; transform:rotate(4deg)}
.hcard--tr figcaption i{background:var(--tr)}
.hcard--kh{top:24%; right:11%; z-index:2; transform:rotate(-2.5deg)}
.hcard--kh figcaption i{background:var(--kh)}
.hcard--fh{top:48%; right:20%; z-index:3; transform:rotate(3deg)}
.hcard--fh figcaption i{background:var(--fh)}
.hero__stack:hover .hcard--tr{transform:rotate(6deg) translate(3%,-4%)}
.hero__stack:hover .hcard--kh{transform:rotate(-4deg) translate(-2%,0)}
.hero__stack:hover .hcard--fh{transform:rotate(5deg) translate(-4%,4%)}

/* Auto-cycling "flip through the stack" state */
.hcard.is-back{filter:brightness(.9) saturate(.92)}
.hcard--tr.is-front{z-index:5; transition:transform .9s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease), z-index 0s; transform:rotate(1.5deg) scale(1.045) translateY(-2%); box-shadow:0 40px 90px rgba(20,18,15,.22)}
.hcard--kh.is-front{z-index:5; transition:transform .9s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease), z-index 0s; transform:rotate(-1.5deg) scale(1.05) translateY(-2%); box-shadow:0 40px 90px rgba(20,18,15,.22)}
.hcard--fh.is-front{z-index:5; transition:transform .9s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease), z-index 0s; transform:rotate(1.5deg) scale(1.045) translateY(-2%); box-shadow:0 40px 90px rgba(20,18,15,.22)}

.scrollhint{position:absolute; left:50%; bottom:1.6rem; z-index:3; transform:translateX(-50%);
  width:24px; height:38px; border:2px solid var(--line); border-radius:99px}
.scrollhint span{position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--ink-3); transform:translateX(-50%); animation:wheel 1.9s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}

@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__stack{height:min(76vw,400px); margin-top:1rem}
  .hcard{width:66%}
  .hcard--tr{right:0; top:0} .hcard--kh{right:16%; top:22%} .hcard--fh{right:32%; top:44%}
  .scrollhint{display:none}
}
@media(max-width:520px){ .hcard{width:76%} .hcard--fh{right:24%} }

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{background:var(--krea); color:var(--ink); padding:.95rem 0; overflow:hidden;
  border-block:1px solid rgba(20,18,15,.09); position:relative; z-index:3}
.marquee__track{display:flex; align-items:center; gap:1.5rem; width:max-content;
  animation:slide 44s linear infinite; font-family:var(--f-d); font-weight:600; font-size:1.02rem}
.marquee span{white-space:nowrap}
.marquee em{font-style:normal; opacity:.4; font-size:.75rem}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ═══════════════ STATS ═══════════════ */
.stats{padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(1rem,2vw,2rem)}
.stats__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.stat{padding:1.4rem 1.2rem; border-left:2px solid var(--line)}
.stat b{display:block; font-family:var(--f-d); font-weight:700; font-size:clamp(2rem,3.6vw,3.05rem);
  letter-spacing:-.04em; line-height:1; margin-bottom:.5rem; font-variant-numeric:tabular-nums}
.stat span{font-size:.87rem; color:var(--ink-3); line-height:1.4; display:block}
.stat:nth-child(1) b{color:var(--fh)} .stat:nth-child(2) b{color:var(--ink)}
.stat:nth-child(3) b{color:var(--kh)} .stat:nth-child(4) b{color:var(--ink)}
.stat:nth-child(5) b{color:var(--tr)}
@media(max-width:900px){ .stats__grid{grid-template-columns:repeat(2,1fr)} .stat:last-child{grid-column:span 2} }

/* ═══════════════ TRI CARDS ═══════════════ */
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.tri__c{position:relative; background:#fff; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s}
.tri__c::before{content:''; position:absolute; inset:0 0 auto 0; height:5px; z-index:3; background:var(--c);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.tri__c[data-school="fh"]{--c:var(--fh); --cs:var(--fh-soft)}
.tri__c[data-school="kh"]{--c:var(--kh); --cs:var(--kh-soft)}
.tri__c[data-school="tr"]{--c:var(--tr); --cs:var(--tr-soft)}
.tri__c:hover{transform:translateY(-8px); box-shadow:var(--sh-2); border-color:transparent}
.tri__c:hover::before{transform:scaleX(1)}
.tri__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.tri__img>img:first-child{width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s}
.tri__c:hover .tri__img>img:first-child{transform:scale(1.06)}
.tri__logo{position:absolute; left:1.1rem; bottom:1.1rem; width:auto; height:46px; z-index:2;
  background:#fff; padding:.4rem .55rem; border-radius:12px; box-shadow:var(--sh-1);
  transition:transform .6s var(--ease)}
.tri__c:hover .tri__logo{transform:translateY(-3px) rotate(-4deg)}
.tri__body{padding:1.7rem 1.6rem 1.6rem; display:flex; flex-direction:column; flex:1}
.tri__kicker{font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--c); margin:0 0 .7rem}
.tri__body h3{font-size:1.55rem; margin-bottom:.85rem}
.tri__body>p{font-size:.95rem; color:var(--ink-2); margin-bottom:1.3rem}
.tri__facts{list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.5rem;
  border-top:1px solid var(--line); padding-top:1.2rem}
.tri__facts li{display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--ink-2)}
.tri__facts i{width:6px; height:6px; border-radius:50%; background:var(--c); flex:0 0 auto}
.tri__go{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-d); font-weight:600; font-size:.95rem; color:var(--c);
  padding:.6rem 1.1rem; border-radius:99px; background:var(--cs); transition:gap .35s var(--ease), background .35s}
.tri__go svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.tri__go:hover{gap:.85rem; background:var(--c); color:#fff}
@media(max-width:980px){ .tri{grid-template-columns:1fr; gap:1.25rem} .tri__img{aspect-ratio:2/1} }

/* ═══════════════ EXPLORER ═══════════════ */
.explorer{padding:clamp(4rem,8vw,7rem) 0 clamp(5rem,10vw,8rem); background:var(--paper-2);
  --acc:var(--fh); --acc-soft:var(--fh-soft)}
.explorer[data-active="kh"]{--acc:var(--kh); --acc-soft:var(--kh-soft)}
.explorer[data-active="tr"]{--acc:var(--tr); --acc-soft:var(--tr-soft)}

.tabs{position:relative; display:flex; gap:.3rem; padding:.4rem; margin:0 auto 2.8rem; width:fit-content; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:99px; box-shadow:var(--sh-1)}
.tabs button{position:relative; z-index:2; display:flex; align-items:center; gap:.55rem;
  padding:.8rem 1.5rem; border-radius:99px; font-family:var(--f-d); font-weight:600; font-size:1rem;
  color:var(--ink-3); transition:color .4s; white-space:nowrap}
.tabs button i{width:9px; height:9px; border-radius:50%; transition:transform .4s var(--ease), box-shadow .4s}
.tabs button[data-tab="fh"] i{background:var(--fh)}
.tabs button[data-tab="kh"] i{background:var(--kh)}
.tabs button[data-tab="tr"] i{background:var(--tr)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"] i{transform:scale(1.25); box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%, transparent)}
.tabs__pill{position:absolute; z-index:1; top:.4rem; bottom:.4rem; left:0; width:0;
  background:var(--acc-soft); border-radius:99px; transition:transform .55s var(--ease), width .55s var(--ease), background .5s}
@media(max-width:640px){
  .tabs{width:100%; justify-content:space-between; border-radius:99px; padding:.3rem}
  .tabs button{flex:1 1 auto; justify-content:center; padding:.65rem .5rem; font-size:.84rem; gap:.4rem}
  .tabs button i{width:7px; height:7px}
}
@media(max-width:380px){
  .tabs button{font-size:.78rem; padding:.6rem .35rem; gap:.3rem}
}

.panel{animation:fadeUp .65s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.panel__grid{display:grid; grid-template-columns:1.55fr 1fr; gap:2.2rem; align-items:start}
.panel__main{min-width:0}
.panel__h{font-size:clamp(1.8rem,3.6vw,2.7rem); margin:2rem 0 1.1rem}
.panel__lead{font-size:1.06rem; color:var(--ink-2); max-width:60ch}
.panel__lead b{color:var(--ink)}
.panel__q{position:relative; margin:1.8rem 0 1.6rem; padding:1.1rem 0 1.1rem 1.6rem;
  border-left:3px solid var(--acc); font-family:var(--f-d); font-size:1.12rem; font-weight:500;
  line-height:1.5; color:var(--ink); transition:border-color .5s}
.panel__q b{font-weight:700}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chips span{font-size:.83rem; font-weight:500; padding:.42rem .9rem; border-radius:99px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); transition:.35s}
.chips span:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-2px)}

/* video facade — cinematic poster that opens to 16:9 when the film starts */
.vfacade{position:relative; aspect-ratio:2.4/1; border-radius:var(--r-l); overflow:hidden;
  background:#0d0c0a; box-shadow:var(--sh-2); cursor:pointer; isolation:isolate;
  transition:aspect-ratio .55s var(--ease)}
.vfacade--wide{aspect-ratio:16/9}
.vfacade.is-live{aspect-ratio:16/9}
.vfacade>img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s;
  filter:saturate(1.03) contrast(1.03)}
.vfacade::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,7,6,.72) 0%, rgba(8,7,6,.16) 42%, rgba(8,7,6,.28) 100%);
  transition:opacity .5s}
.vfacade:hover>img{transform:scale(1.045)}
.vfacade:hover::after{opacity:.82}
.vplay{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:rgba(16,14,12,.42); backdrop-filter:blur(6px) saturate(.9); -webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.9); box-shadow:0 8px 34px rgba(0,0,0,.35);
  transition:transform .45s var(--ease), background .45s, border-color .45s}
.vplay svg{width:32px; height:32px; fill:#fff; margin-left:4px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
.vplay__ring{position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
  animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1); opacity:.8}70%{transform:scale(1.45); opacity:0}100%{opacity:0}}
.vfacade:hover .vplay{transform:translate(-50%,-50%) scale(1.09); background:var(--acc); border-color:transparent}
.vfacade:hover .vplay__ring{animation:none; opacity:0}
.vlabel{position:absolute; z-index:3; left:1.4rem; bottom:1.25rem; color:#fff;
  font-family:var(--f-d); font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.7rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.vlabel b{font-weight:500; font-size:.78rem; opacity:.75; padding:.16rem .5rem; border-radius:99px;
  border:1px solid rgba(255,255,255,.35)}
@media(max-width:700px){
  .vfacade{aspect-ratio:16/9}
  .vplay{width:62px; height:62px}
  .vplay svg{width:23px; height:23px}
  .vlabel{left:1rem; bottom:.9rem; font-size:.85rem}
}
.vfacade.is-live{cursor:default}
.vfacade.is-live>img,.vfacade.is-live::after,.vfacade.is-live .vplay,.vfacade.is-live .vlabel{opacity:0; pointer-events:none}
.vfacade iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4;
  animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* custom play/pause + mute controls — replace YouTube's own control bar */
.vctrls{position:absolute; z-index:6; right:1.1rem; bottom:1.1rem; display:none; gap:.55rem;
  opacity:0; transition:opacity .3s}
.vfacade.is-live .vctrls{display:flex; opacity:1}
.vctrl{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(12,11,9,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.3); color:#fff; transition:background .3s, transform .3s, border-color .3s}
.vctrl:hover{background:rgba(12,11,9,.75); border-color:rgba(255,255,255,.55); transform:scale(1.07)}
.vctrl svg{width:18px; height:18px; fill:currentColor}
.vctrl .i-play, .vctrl-mute .i-mute{display:none}
.vctrl-playpause:not(.is-playing) .i-pause{display:none}
.vctrl-playpause:not(.is-playing) .i-play{display:block}
.vctrl-mute.is-muted .i-vol{display:none}
.vctrl-mute.is-muted .i-mute{display:block}
@media(max-width:700px){ .vctrl{width:36px; height:36px} .vctrl svg{width:16px; height:16px} }

/* pause cover — YouTube shows its own branded overlay (channel card, suggested
   videos, share icon) whenever an embed is paused, regardless of the controls=0
   param. This covers it so a paused video stays just as unbranded as a playing one. */
.vcover{position:absolute; inset:0; z-index:7; display:none; align-items:center; justify-content:center;
  background:#161310; cursor:pointer}
.vfacade.is-paused .vcover{display:flex}
.vcover__btn{width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.9); box-shadow:0 8px 34px rgba(0,0,0,.35); transition:transform .35s var(--ease)}
.vcover:hover .vcover__btn{transform:scale(1.08)}
.vcover__btn svg{width:30px; height:30px; fill:#fff; margin-left:4px}
@media(max-width:700px){ .vcover__btn{width:60px; height:60px} .vcover__btn svg{width:22px; height:22px} }

/* side info cards */
.panel__side{display:flex; flex-direction:column; gap:1rem; position:sticky; top:100px}
.infocard{background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:1.5rem 1.5rem 1.4rem;
  box-shadow:var(--sh-1)}
.infocard h4{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--acc);
  margin-bottom:1rem; font-weight:700; transition:color .5s}
.infocard__adr{font-family:var(--f-d); font-size:1.22rem; font-weight:600; line-height:1.35;
  margin:0 0 1.1rem; letter-spacing:-.02em}
.infocard dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem .9rem; font-size:.9rem}
.infocard dt{color:var(--ink-3); font-size:.82rem; padding-top:.06rem}
.infocard dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.infocard a{color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--acc) 45%, transparent);
  transition:color .3s, border-color .3s}
.infocard a:hover{color:var(--acc); border-color:var(--acc)}
.infocard--alt{background:var(--acc-soft); border-color:transparent; transition:background .5s}
.infocard--alt a{border-bottom-color:color-mix(in srgb,var(--ink) 25%, transparent)}
.ways{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; font-size:.9rem}
.ways li{display:flex; align-items:center; gap:.7rem}
.w{flex:0 0 auto; font-family:var(--f-d); font-weight:700; font-size:.78rem; letter-spacing:.02em;
  color:#fff; padding:.22rem .5rem; border-radius:5px; min-width:32px; text-align:center}
.w--u{background:#0057A8} .w--s{background:#008A4B} .w--t{background:#BE1414} .w--b{background:#7B247C}

@media(max-width:1000px){
  .panel__grid{grid-template-columns:1fr}
  .panel__side{position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
}

/* filmstrip */
.filmstrip{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; padding:2.6rem .25rem 1.4rem;
  margin-inline:calc(50% - 50vw); padding-inline:max(1.25rem, calc(50vw - var(--wrap)/2));
  scroll-padding-inline:max(1.25rem, calc(50vw - var(--wrap)/2)); scrollbar-width:thin}
.filmstrip::-webkit-scrollbar{height:6px}
.filmstrip::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.filmstrip::-webkit-scrollbar-thumb:hover{background:var(--acc)}
.filmstrip figure{flex:0 0 clamp(280px,38vw,440px); margin:0; scroll-snap-align:start; cursor:zoom-in}
.filmstrip img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-m);
  box-shadow:var(--sh-1); transition:transform .6s var(--ease), box-shadow .5s}
.filmstrip figure:hover img{transform:translateY(-5px) scale(1.012); box-shadow:var(--sh-2)}
.filmstrip figcaption{margin-top:.7rem; font-size:.85rem; color:var(--ink-3); font-weight:500}

.privacy-note{text-align:center; font-size:.8rem; color:var(--ink-3); margin:2rem 0 0}

/* ═══════════════ DARK / PÄDAGOGIK ═══════════════ */
.dark{position:relative; background:#100E0C; color:#fff; padding:clamp(5rem,10vw,8.5rem) 0; overflow:hidden}
.dark__bg{position:absolute; inset:0; pointer-events:none}
.dark__bg span{position:absolute; border-radius:50%; filter:blur(110px); opacity:.24}
.dark__bg span:first-child{width:44vw; height:44vw; background:var(--fh); top:-14%; right:-10%}
.dark__bg span:last-child{width:38vw; height:38vw; background:var(--tr); bottom:-18%; left:-8%; opacity:.18}
.dark .wrap{position:relative; z-index:2}
.dark h2{font-size:clamp(2.2rem,5.6vw,4.3rem)}

.year{display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding:clamp(2rem,4vw,3.2rem) 0; border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:clamp(3rem,6vw,4.5rem)}
.year__big{margin:0; font-family:var(--f-d); font-weight:800; font-size:clamp(4rem,12vw,9.5rem);
  line-height:.85; letter-spacing:-.05em; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#fff 20%,var(--krea) 55%,var(--fh) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.year__cap{margin:.9rem 0 0; font-size:.9rem; color:rgba(255,255,255,.55); max-width:22ch}
.year__r p{color:rgba(255,255,255,.72); font-size:1.06rem}
.year__r p b{color:#fff; font-weight:600}
.year__r p:last-child{margin-bottom:0}
@media(max-width:820px){ .year{grid-template-columns:1fr; gap:1.5rem} }

.lernwolke{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.lernwolke h3{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1rem}
.lernwolke p{color:rgba(255,255,255,.66); margin:0}
.lernwolke .vfacade{box-shadow:0 40px 90px rgba(0,0,0,.5)}
@media(max-width:820px){ .lernwolke{grid-template-columns:1fr} }

/* ═══════════════ VORTEILE ═══════════════ */
.feat{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.feat li{background:var(--paper); padding:1.9rem 1.5rem 1.7rem; position:relative;
  transition:background .45s var(--ease)}
.feat li::before{content:''; position:absolute; inset:auto 0 0 0; height:3px; transform:scaleX(0);
  transform-origin:left; transition:transform .5s var(--ease);
  background:linear-gradient(90deg,var(--fh),var(--krea),var(--kh))}
.feat li:hover{background:#fff}
.feat li:hover::before{transform:scaleX(1)}
.feat b{display:block; font-family:var(--f-d); font-size:.8rem; font-weight:700; letter-spacing:.05em;
  color:var(--ink-3); margin-bottom:1.7rem; opacity:.5}
.feat h3{font-size:1.12rem; margin-bottom:.5rem; letter-spacing:-.02em}
.feat p{margin:0; font-size:.89rem; color:var(--ink-3); line-height:1.55}
@media(max-width:1050px){ .feat{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .feat{grid-template-columns:1fr} }

/* ═══════════════ TIMELINE ═══════════════ */
.tl{list-style:none; margin:0; padding:0; position:relative; max-width:860px}
.tl::before{content:''; position:absolute; left:calc(clamp(58px,7vw,86px) + 13px); top:14px; bottom:14px; width:2px;
  background:linear-gradient(to bottom,var(--fh),var(--krea),var(--kh),var(--tr))}
.tl li{position:relative; display:grid; grid-template-columns:clamp(58px,7vw,86px) 1fr; gap:clamp(1.6rem,4vw,3rem);
  padding-bottom:2.3rem}
.tl li::before{content:''; position:absolute; left:calc(clamp(58px,7vw,86px) + 7px); top:9px; width:14px; height:14px;
  border-radius:50%; background:var(--paper-2); border:3px solid var(--ink); z-index:2;
  transition:border-color .5s, transform .5s var(--ease)}
.tl li:hover::before{transform:scale(1.35); border-color:var(--fh)}
.tl__t{font-family:var(--f-d); font-weight:700; font-size:1.05rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; padding-top:.1rem}
.tl h3{font-size:1.22rem; margin-bottom:.35rem}
.tl p{margin:0; font-size:.94rem; color:var(--ink-3)}

/* ═══════════════ KOSTEN ═══════════════ */
.kosten__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.kosten__l .sechd{margin-bottom:2rem}
.kosten__l p{color:var(--ink-2)}
.kosten__r{display:flex; flex-direction:column; gap:.7rem}
.krow{display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:1.15rem 1.4rem;
  transition:transform .45s var(--ease), box-shadow .45s, border-color .4s}
.krow:hover{transform:translateX(5px); box-shadow:var(--sh-1); border-color:var(--kh)}
.krow b{font-family:var(--f-d); font-weight:700; font-size:1.18rem; letter-spacing:-.025em;
  color:var(--kh); white-space:nowrap}
.krow span{font-size:.9rem; color:var(--ink-2); line-height:1.5}
.krow--soft{background:var(--paper-2); border-style:dashed}
.krow--soft b{color:var(--fh)}
@media(max-width:900px){
  .kosten__grid{grid-template-columns:1fr}
  .krow{grid-template-columns:1fr; gap:.35rem}
}

/* ═══════════════ CTA / ANMELDUNG ═══════════════ */
.cta{padding:0 0 clamp(4rem,8vw,7rem)}
.cta__box{position:relative; background:var(--ink); color:#fff; border-radius:var(--r-xl);
  padding:clamp(2.4rem,5vw,4.5rem); overflow:hidden}
.cta__box::before{content:''; position:absolute; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--krea) 0%, transparent 68%); opacity:.2; top:-30%; right:-12%}
.cta__box::after{content:''; position:absolute; width:45%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--tr) 0%, transparent 68%); opacity:.22; bottom:-28%; left:-8%}
.cta__box>*{position:relative; z-index:2}
.cta__head{max-width:620px; margin-bottom:3rem}
.cta__head .eyebrow{color:rgba(255,255,255,.6)}
.cta__head .dot{background:var(--krea); box-shadow:0 0 0 4px rgba(255,196,0,.2)}
.cta__head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.cta__lead{margin-top:1.2rem; color:rgba(255,255,255,.7)}

.steps{list-style:none; margin:0 0 3rem; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.steps li{position:relative; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16)}
.steps b{position:absolute; top:-.9rem; left:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--krea); color:var(--ink);
  font-family:var(--f-d); font-weight:700; font-size:.95rem}
.steps li:nth-child(1) b{background:var(--krea)}
.steps li:nth-child(2) b{background:var(--fh); color:#fff}
.steps li:nth-child(3) b{background:var(--kh); color:#fff}
.steps li:nth-child(4) b{background:var(--tr); color:#fff}
.steps h3{margin:1.5rem 0 .45rem; font-size:1.12rem}
.steps p{margin:0; font-size:.89rem; color:rgba(255,255,255,.6); line-height:1.55}

.cta__row{display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem;
  padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.16)}
.cta__phones{display:flex; flex-wrap:wrap; gap:.4rem 1.7rem}
.cta__phones a{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-size:.88rem; color:rgba(255,255,255,.6); transition:color .3s}
.cta__phones a:hover{color:#fff}
.cta__phones b{font-family:var(--f-d); font-weight:600; color:#fff}
.d{width:8px; height:8px; border-radius:50%}
.d--fh{background:var(--fh)} .d--kh{background:var(--kh)} .d--tr{background:var(--tr)}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem} }
@media(max-width:520px){ .steps{grid-template-columns:1fr} }

/* ═══════════════ KARRIERE ═══════════════ */
.career{padding:clamp(4rem,8vw,7rem) 0; background:var(--paper-2)}
.career__intro{max-width:62ch}
.career h2{font-size:clamp(2rem,4.4vw,3.3rem)}
.career__lead{color:var(--ink-2); margin-top:1.4rem; max-width:52ch}
.perks{list-style:none; margin:1.8rem 0 2.2rem; padding:0; display:flex; flex-direction:column; gap:.65rem}
.perks li{position:relative; padding-left:1.9rem; font-size:.95rem; color:var(--ink-2)}
.perks li::before{content:''; position:absolute; left:0; top:.52em; width:11px; height:6px;
  border-left:2px solid var(--kh); border-bottom:2px solid var(--kh); transform:rotate(-45deg)}
.career__intro .btn{margin:0 .6rem .6rem 0}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ── Stellenbörse ─────────────────────────── */
.jobs{margin-top:clamp(3rem,6vw,4.5rem); scroll-margin-top:5.5rem}
.jobs__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem}
.jobs__filters{display:flex; flex-wrap:wrap; gap:.5rem}
.jobs__chip{font-family:var(--f-d); font-size:.86rem; font-weight:600; padding:.55rem 1.05rem;
  border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:border-color .35s, color .35s, background .35s, transform .35s}
.jobs__chip:hover{border-color:var(--acc,var(--kh)); color:var(--ink)}
.jobs__chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.jobs__loc select{font-family:var(--f-b); font-size:.86rem; font-weight:500; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:.55rem 2.2rem .55rem 1.05rem;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A69C8F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px}
.jobs__loc select:hover{border-color:var(--ink-3)}
.jobs__count{margin:1.4rem 0 0; font-size:.86rem; color:var(--ink-3)}
.jobs__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-top:1.1rem}
.job-card{display:flex; flex-direction:column; gap:.6rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); padding:1.3rem 1.4rem; cursor:pointer; text-align:left;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s}
.job-card:hover, .job-card:focus-visible{transform:translateY(-4px); border-color:var(--ink); box-shadow:var(--sh-1)}
.job-card:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.job-card.is-hidden{display:none}
.job-card__top{display:flex; align-items:center; gap:.5rem}
.job-card__dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.job-card__dot--friedrichshain{background:var(--fh)}
.job-card__dot--karlshorst{background:var(--kh)}
.job-card__dot--treptow{background:var(--tr)}
.job-card__dot--sonstige{background:var(--ink-3)}
.job-card__cat{font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3)}
.job-card__badge{margin-left:auto; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px;
  background:var(--krea-soft,color-mix(in srgb,var(--krea) 22%, transparent)); color:var(--ink)}
.job-card__title{font-size:1.08rem; line-height:1.3; letter-spacing:-.01em}
.job-card__title i{font-style:normal; font-weight:400; color:var(--ink-3)}
.job-card__org{font-size:.88rem; color:var(--ink-2)}
.job-card__foot{margin-top:auto; padding-top:.7rem; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; border-top:1px solid var(--line)}
.job-card__date{font-size:.76rem; color:var(--ink-3)}
.job-card__more{display:flex; align-items:center; gap:.4rem; font-family:var(--f-d); font-weight:600;
  font-size:.86rem; color:var(--ink); white-space:nowrap}
.job-card__more svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease)}
.job-card:hover .job-card__more svg{transform:translateX(3px)}
.jobs__empty{margin-top:1.5rem; padding:1.6rem; border:1px dashed var(--line); border-radius:var(--r-m);
  color:var(--ink-2); text-align:center}
.jobs__initiativ{margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; padding:1.4rem 1.6rem; border-radius:var(--r-m); background:var(--paper); border:1px solid var(--line)}
.jobs__initiativ p{margin:0; font-size:.88rem; color:var(--ink-2); max-width:46ch}
.jobs__initiativ-h{font-family:var(--f-d); font-weight:600; color:var(--ink)!important; font-size:1rem; margin-bottom:.2rem!important}
@media(max-width:520px){
  .jobs__bar{flex-direction:column; align-items:stretch}
  .jobs__loc select{width:100%}
  .job-card__foot{flex-direction:column; align-items:flex-start; gap:.5rem}
}

/* ── Stellen-Detail-Popup ─────────────────── */
html.modal-open{overflow:hidden}
.job-modal{position:fixed; inset:0; z-index:200; border:0; padding:0; background:transparent;
  max-width:min(640px,92vw); max-height:88vh; margin:auto; overflow:visible; border-radius:var(--r-l)}
.job-modal:not([open]){display:none}
.job-modal::backdrop{background:rgba(20,18,15,.55); backdrop-filter:blur(2px)}
.job-modal__box{background:#fff; border-radius:var(--r-l); padding:clamp(1.6rem,4vw,2.6rem); max-height:88vh;
  overflow-y:auto; position:relative; box-shadow:var(--sh-3)}
.job-modal__close{position:sticky; float:right; top:0; margin:0 0 -2.2rem auto; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--paper-2);
  border:1px solid var(--line); z-index:2; transition:background .3s, transform .3s}
.job-modal__close:hover{background:var(--ink); transform:rotate(90deg)}
.job-modal__close svg{width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:2.3; stroke-linecap:round}
.job-modal__close:hover svg{stroke:#fff}
.job-modal__top{display:flex; align-items:center; gap:.5rem; margin-top:.2rem}
.job-modal__dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.job-modal__dot--friedrichshain{background:var(--fh)}
.job-modal__dot--karlshorst{background:var(--kh)}
.job-modal__dot--treptow{background:var(--tr)}
.job-modal__dot--sonstige{background:var(--ink-3)}
.job-modal__cat{font-size:.8rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3)}
.job-modal__badge{margin-left:auto; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px;
  background:color-mix(in srgb,var(--krea) 22%, transparent); color:var(--ink)}
.job-modal__title{font-size:clamp(1.35rem,3vw,1.7rem); margin:.6rem 0 .2rem}
.job-modal__org{color:var(--ink-2); margin:0 0 1.2rem}
.job-modal__meta{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0 0 1.6rem;
  padding:1rem 1.1rem; background:var(--paper-2); border-radius:var(--r-m)}
.job-modal__meta dt{font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3)}
.job-modal__meta dd{margin:.25rem 0 0; font-size:.88rem; color:var(--ink); line-height:1.35}
.job-modal__section{margin-bottom:1.3rem}
.job-modal__section h4{font-size:.98rem; margin:0 0 .55rem}
.job-modal__section ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.job-modal__section li{position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--ink-2); line-height:1.45}
.job-modal__section li::before{content:''; position:absolute; left:0; top:.5em; width:7px; height:7px;
  border-radius:50%; background:var(--acc,var(--kh))}
.job-modal__src{font-size:.76rem; color:var(--ink-3); margin:0 0 1.4rem}
.job-modal__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.2rem; border-top:1px solid var(--line)}
.job-modal__date{font-size:.8rem; color:var(--ink-3)}
@media(max-width:600px){ .job-modal__meta{grid-template-columns:1fr} }

/* ═══════════════ FOOTER ═══════════════ */
.ft{background:var(--ink); color:rgba(255,255,255,.66); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.ft__top{display:grid; grid-template-columns:.85fr 2.15fr; gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.13)}
.ft__brand img{width:190px; margin-bottom:1.4rem}
.ft__brand p{font-size:.9rem; max-width:34ch; margin:0}
.ft__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem}
.ft__sch h3{font-size:1rem; color:#fff; margin-bottom:.9rem; position:relative; padding-left:.95rem}
.ft__sch h3::before{content:''; position:absolute; left:0; top:.42em; width:7px; height:7px; border-radius:50%}
.ft__sch--fh h3::before{background:var(--fh)}
.ft__sch--kh h3::before{background:var(--kh)}
.ft__sch--tr h3::before{background:var(--tr)}
.ft__sch--tg h3::before{background:var(--krea)}
.ft__sch p{font-size:.87rem; margin:0 0 .7rem; line-height:1.6}
.ft__sch a{display:block; font-size:.87rem; text-decoration:none; margin-bottom:.3rem;
  transition:color .3s; overflow-wrap:anywhere}
.ft__sch a:hover{color:#fff}
.ft__gf{margin-top:.9rem !important; font-size:.8rem !important; color:rgba(255,255,255,.45)}
.ft__bot{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
  padding-top:1.8rem; font-size:.83rem}
.ft__bot p{margin:0}
.ft__bot nav{display:flex; flex-wrap:wrap; gap:1.3rem}
.ft__bot a{text-decoration:none; transition:color .3s}
.ft__bot a:hover{color:#fff}
@media(max-width:1000px){ .ft__top{grid-template-columns:1fr} .ft__cols{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .ft__cols{grid-template-columns:1fr} }

/* ═══════════════ LIGHTBOX ═══════════════ */
.lb{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(12,11,9,.94); backdrop-filter:blur(8px); animation:fadeIn .3s ease both}
.lb[hidden]{display:none}
.lb figure{margin:0; max-width:min(1100px,92vw); animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
.lb img{width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r-m)}
.lb figcaption{margin-top:1rem; text-align:center; color:rgba(255,255,255,.7); font-size:.92rem}
.lb__x{position:absolute; top:1.2rem; right:1.5rem; width:46px; height:46px; border-radius:50%;
  color:#fff; font-size:2rem; line-height:1; display:grid; place-items:center;
  background:rgba(255,255,255,.1); transition:background .3s}
.lb__x:hover{background:rgba(255,255,255,.22)}
.lb__p{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  color:#fff; font-size:2.2rem; line-height:1; display:grid; place-items:center;
  background:rgba(255,255,255,.1); transition:background .3s}
.lb__p:hover{background:rgba(255,255,255,.22)}
.lb__prev{left:clamp(.6rem,2vw,2rem)}
.lb__next{right:clamp(.6rem,2vw,2rem)}
@media(max-width:600px){ .lb__p{display:none} }

/* ═══════════════ REVEAL ANIMATION ═══════════════ */
.reveal{opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}

/* Ohne JavaScript bleibt nichts unsichtbar */
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .blob,.marquee__track{animation:none !important}
  .ink-sweep::after{transform:scaleX(1)}
}