/* =========================================================
   KULTURPARK WEST – Website
   CI: Public Sans (Text/Highlight), Farben aus CI-Manual
   ========================================================= */

@font-face{font-family:"Public Sans";src:url(../fonts/public-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(../fonts/public-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(../fonts/public-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(../fonts/public-sans-latin-900-normal.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --rot:#F22F1D;
  --blau:#A7B0BF;
  --gruen:#A3BBB7;
  --grau:#B4B5B1;
  --papier:#F1F1F1;
  --papier-2:#E4E3DE;
  --tinte:#111111;
  --tinte-2:#4a4a48;
  --rand:clamp(16px,4vw,56px);
  --max:1440px;
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--font);font-size:clamp(16px,1.05vw,18px);line-height:1.55;overflow-x:clip}
html{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:.95}
p{margin:0 0 1em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

/* Papierkorn – künstlerische Druckanmutung */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;text-decoration:none;padding:.95em 1.4em;border:2px solid var(--tinte);border-radius:0;cursor:pointer;font-family:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.knopf--rot{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf--schwarz{background:var(--tinte);color:#fff}
.knopf--linie{background:transparent}
.knopf--gross{font-size:.95rem;padding:1.15em 1.7em}
.knopf:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--tinte)}
.knopf--schwarz:hover{box-shadow:5px 5px 0 #fff}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px var(--rand);transition:background .3s,box-shadow .3s,padding .3s}
.kopf.ist-gescrollt{background:rgba(241,241,241,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(0,0,0,.08);padding-block:10px}
.kopf__logo{display:block;line-height:0;margin-right:auto}
.logo-haken{width:clamp(40px,3.6vw,52px);height:auto;aspect-ratio:1;fill:var(--tinte);display:block}
.kopf__nav{display:flex;gap:28px}
.kopf__nav a{text-decoration:none;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;position:relative}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--tinte);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kopf__nav a:hover::after{transform:scaleX(1)}
.kopf__cta{padding:.7em 1.1em}
.kopf__menu{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.kopf__menu span:not(.sr){position:absolute;left:10px;right:10px;height:3px;background:var(--tinte);transition:transform .3s}
.kopf__menu span:nth-child(1){top:16px}.kopf__menu span:nth-child(2){top:25px}
.kopf__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.kopf__menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--rand);padding:120px var(--rand) 60px;max-width:var(--max);margin:0 auto;position:relative}
.kicker{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;margin-bottom:1.6em;display:flex;align-items:center;gap:.8em}
.kicker::before{content:"";width:28px;height:3px;background:var(--tinte)}
.hero__titel{font-weight:900;font-size:clamp(64px,11.2vw,184px);letter-spacing:.14em;line-height:.9;margin-left:-.06em}
.hero__titel .z{display:block;opacity:0;transform:translateY(.25em);animation:rein .9s var(--ease) forwards}
.hero__titel .z2{animation-delay:.12s}.hero__titel .z3{animation-delay:.24s}
@keyframes rein{to{opacity:1;transform:none}}
.hero__lead{font-size:clamp(18px,1.5vw,22px);max-width:34ch;margin:1.6em 0 1.8em;line-height:1.45}
.hero__knoepfe{display:inline-flex;flex-wrap:wrap;gap:14px}
.hero__bild{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:end}
.hero__haken{width:100%;height:100%;fill:var(--tinte);transform:rotate(var(--dreh,0deg));transition:transform .2s linear}
.stempel{position:absolute;right:-3%;top:-4%;width:40%;aspect-ratio:1;border-radius:50%;background:var(--rot);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(18px,2.2vw,34px);line-height:1;transform:rotate(-12deg);box-shadow:0 0 0 6px var(--papier),0 0 0 8px var(--rot);animation:wackeln 6s ease-in-out infinite}
.stempel span:nth-child(2){font-size:.6em;margin:.2em 0;letter-spacing:.3em}
@keyframes wackeln{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-4deg) scale(1.03)}}

/* Handgezeichnete Pfeile (CI) */
.pfeil path{stroke:var(--rot);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:none}
.hero__knoepfe{position:relative}
.pfeil--hero{position:absolute;left:calc(100% + 16px);bottom:-6px;width:240px;pointer-events:none}
.js .pfeil path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s var(--ease)}
.js .pfeil.ist-sichtbar path{stroke-dashoffset:0}
.js .pfeil.ist-sichtbar path:nth-child(2){transition-delay:1.2s;transition-duration:.4s}

/* ---------- Laufband ---------- */
.laufband{background:var(--tinte);color:var(--papier);overflow:hidden;padding:18px 0;transform:rotate(-1.2deg);margin:0 -10px;position:relative;z-index:2}
.laufband__spur{display:flex;align-items:center;gap:28px;width:max-content;animation:laufen 38s linear infinite}
.laufband span{font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,2.4vw,34px);white-space:nowrap}
.laufband svg{width:clamp(26px,2.6vw,40px);height:clamp(26px,2.6vw,40px);fill:var(--gruen);flex:none}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(64px,8vw,120px) var(--rand);max-width:var(--max);margin:0 auto}
.nummer{font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-2);margin-bottom:1.4em}
.titel{font-weight:900;font-size:clamp(40px,5.6vw,88px);letter-spacing:-.01em;line-height:.95;text-transform:uppercase}
.titel em{font-style:normal;background:linear-gradient(transparent 58%,var(--gruen) 58%,var(--gruen) 92%,transparent 92%);padding:0 .06em}
.titel--riesig{font-size:clamp(52px,8.4vw,140px)}
.abschnitt__kopf{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:clamp(40px,6vw,80px)}
.abschnitt__intro{max-width:52ch;font-size:clamp(17px,1.25vw,20px);margin-top:1.4em;color:var(--tinte-2)}
.fussnote{font-size:.8rem;color:var(--tinte-2);margin-top:1.4em}

.unterstrichen{position:relative;display:inline-block}
.unterstrichen svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.28em;overflow:visible}
.unterstrichen path{fill:none;stroke:var(--rot);stroke-width:7;stroke-linecap:round}

/* Duotone-/Riso-Bilder */
.duo{position:relative;overflow:hidden;background:var(--c,var(--rot));isolation:isolate}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(1.08);mix-blend-mode:multiply;transition:filter .6s var(--ease),transform .8s var(--ease)}
.duo:hover img{filter:grayscale(0) contrast(1) brightness(1);mix-blend-mode:normal;transform:scale(1.03)}
.duo--grau{--c:#d9d9d6}.duo--rot{--c:var(--rot)}.duo--gruen{--c:var(--gruen)}.duo--blau{--c:var(--blau)}
.hinweise .duo::after{content:"Referenzbild";position:absolute;right:8px;bottom:8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.85);color:var(--tinte);padding:3px 6px;z-index:2;pointer-events:none}
.hinweise .ort__bild::after{content:none}

/* ---------- Ort ---------- */
.ort{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.ort__bild{aspect-ratio:4/3;box-shadow:14px 14px 0 var(--gruen)}
.ort__bild img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.1)}
.markierung{position:absolute;left:var(--x);top:var(--y);background:var(--papier);color:var(--tinte);border:2px solid var(--tinte);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;padding:.4em .7em;z-index:3;transform:rotate(-4deg)}
.markierung--b{background:var(--tinte)}
.ort__text p{max-width:46ch;margin-top:1.4em}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin:2.2em 0 0;border-top:3px solid var(--tinte);padding-top:24px}
.fakten div{margin:0}
.fakten dt{font-weight:900;font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.02em}
.fakten dd{margin:.3em 0 0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--tinte-2)}

/* ---------- Räume (Plakate) ---------- */
.raeume .abschnitt__kopf{grid-template-columns:1fr}
.plakate{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,24px)}
.plakat{--bg:var(--rot);background:var(--bg);color:var(--tinte);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;position:relative;overflow:hidden;grid-column:span 2;transition:transform .4s var(--ease)}
.plakat:nth-child(n+4){grid-column:span 3}
.plakat:nth-child(odd){transform:rotate(-.6deg)}
.plakat:nth-child(even){transform:rotate(.5deg)}
.plakat:hover{transform:rotate(0) translateY(-6px)}
.plakat--rot{--bg:var(--rot);color:#fff}
.plakat--blau{--bg:var(--blau)}
.plakat--gruen{--bg:var(--gruen)}
.plakat--grau{--bg:var(--grau)}
.plakat--schwarz{--bg:var(--tinte);color:#fff}
.plakat--hell{--bg:var(--papier-2)}
.plakat--hell .duo{--c:var(--grau)}
.plakat .duo{--c:var(--bg);aspect-ratio:4/3;margin-bottom:22px}
.plakat--rot .duo{--c:#ff8a7e}
.plakat--schwarz .duo{--c:#9a9a9a}
.plakat h3{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(26px,2.4vw,40px);line-height:1;margin-bottom:.5em}
.plakat p{font-size:.95rem;max-width:36ch}
.plakat__link{margin-top:auto;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;text-decoration:none;align-self:flex-start;border-bottom:2px solid currentColor;padding-bottom:3px}
.plakat__haken{position:absolute;right:16px;bottom:16px;width:52px;height:52px;fill:currentColor;opacity:.9;transition:transform .5s var(--ease)}
.plakat:hover .plakat__haken{transform:rotate(-14deg) scale(1.15)}

/* ---------- Gelände / Plan ---------- */
.gelaende{background:transparent}
.plan{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center;background:var(--papier-2);padding:clamp(20px,3vw,48px);position:relative}
.plan__karte svg{width:100%;height:auto;overflow:visible}
.iso-teil{cursor:pointer;outline:none}
.iso-teil polygon{stroke:var(--tinte);stroke-width:2;stroke-linejoin:round;transition:fill .3s}
.iso-teil .oben{fill:#fff}.iso-teil .links{fill:#dcdcd8}.iso-teil .rechts{fill:#bdbdb8}
.iso-teil .fenster{fill:var(--tinte);stroke:none}
.iso-teil.ist-aktiv .oben{fill:var(--blau)}
.iso-teil.ist-aktiv .links{fill:#8e98a9}.iso-teil.ist-aktiv .rechts{fill:#737e91}
.iso-teil:hover .oben,.iso-teil:focus-visible .oben{fill:#d3d8e0}
.iso-teil.ist-aktiv:hover .oben{fill:var(--blau)}
.iso-hof .oben{fill:var(--gruen)}
.iso-hof.ist-aktiv .oben{fill:var(--blau)}
.iso-baum{fill:#7f9b95;stroke:var(--tinte);stroke-width:2}
.iso-label{font-family:var(--font);font-weight:900;font-size:20px;letter-spacing:.12em;text-transform:uppercase;fill:var(--tinte);pointer-events:none}
.iso-label-bg{fill:var(--papier);stroke:var(--tinte);stroke-width:2}
.plan__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.plan__tabs button{font-family:inherit;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:.6em .9em;border:2px solid var(--tinte);background:transparent;cursor:pointer}
.plan__tabs button[aria-selected="true"]{background:var(--tinte);color:#fff}
.plan__panel h3{font-size:clamp(30px,3vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4em}
.plan__panel .phase{display:inline-block;background:var(--tinte);color:var(--papier);font-weight:900;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:.35em .7em;margin-bottom:1em;transform:rotate(-2deg)}
.plan__panel ul{list-style:none;padding:0;margin:1em 0 0}
.plan__panel li{padding:.55em 0 .55em 1.8em;border-top:1px solid rgba(0,0,0,.15);position:relative}
.plan__panel li::before{content:"→";position:absolute;left:0;color:var(--tinte-2);font-weight:900}
.plan__panel .nutzung{font-weight:700;margin-top:1.2em}
.plan__panel{animation:einblenden .4s var(--ease)}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.zeitstrahl{list-style:none;padding:0;margin:clamp(40px,5vw,72px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.zeitstrahl::before{content:"";position:absolute;left:0;right:0;top:11px;height:3px;background:var(--tinte)}
.zeitstrahl li{position:relative;padding:40px 20px 0 0;display:flex;flex-direction:column;gap:.3em}
.zeitstrahl li::before{content:"";position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--papier);border:3px solid var(--tinte)}
.zeitstrahl__datum{font-weight:900;font-size:clamp(22px,2vw,30px);letter-spacing:.02em}
.zeitstrahl__hl::before{background:var(--rot)!important;border-color:var(--rot)!important;box-shadow:0 0 0 6px rgba(242,47,29,.2)}
.zeitstrahl__hl .zeitstrahl__datum{color:var(--tinte)}

/* ---------- Für wen ---------- */
.wer__liste{list-style:none;padding:0;margin:0 0 clamp(60px,8vw,120px);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--tinte)}
.wer__liste li{padding:24px 24px 24px 0;display:flex;flex-direction:column;gap:.4em;border-right:1px solid rgba(0,0,0,.15)}
.wer__liste li+li{padding-left:24px}
.wer__liste li:last-child{border-right:0}
.wer__nr{font-weight:900;font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--tinte)}
.wer__liste strong{font-size:1.15rem;line-height:1.2}
.wer__liste span:last-child{color:var(--tinte-2);font-size:.92rem}

.zitat{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.zitat__bilder{position:relative;aspect-ratio:1/1}
.zitat__bilder .duo{position:absolute;box-shadow:0 0 0 6px var(--papier)}
.zitat__bilder .duo:nth-child(1){left:0;top:8%;width:58%;aspect-ratio:3/4;transform:rotate(-4deg)}
.zitat__bilder .duo:nth-child(2){right:4%;top:0;width:46%;aspect-ratio:3/4;transform:rotate(3deg)}
.zitat__bilder .duo:nth-child(3){left:30%;bottom:0;width:48%;aspect-ratio:4/3;transform:rotate(-1deg)}
.zitat blockquote{margin:0;font-weight:900;font-size:clamp(32px,3.8vw,60px);line-height:1.05;letter-spacing:-.01em}
.zitat figcaption{margin-top:1.4em;max-width:44ch;color:var(--tinte-2)}

/* ---------- Bewerben ---------- */
.bewerben{background:var(--gruen);color:var(--tinte);padding:clamp(80px,10vw,150px) var(--rand);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);position:relative}
.bewerben__kopf{position:sticky;top:110px;align-self:start}
.bewerben__titel{font-weight:900;text-transform:uppercase;font-size:clamp(60px,8.6vw,150px);letter-spacing:.08em;line-height:.88;color:var(--tinte);margin-bottom:.35em}
.bewerben__titel span{display:block}
.bewerben__titel span:nth-child(2){color:var(--papier);font-size:.5em;letter-spacing:.4em;margin:.15em 0}
.bewerben__kopf p{font-size:clamp(17px,1.3vw,21px);max-width:34ch;color:var(--tinte)}
.pfeil--bewerben{width:min(220px,40%);margin-bottom:20px}
.pfeil--bewerben path{stroke:var(--tinte)}

.formular{background:var(--papier);padding:clamp(22px,3vw,48px);box-shadow:14px 14px 0 var(--tinte)}
.formular fieldset{border:0;margin:0 0 34px;padding:0}
.formular legend{font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;padding:0;margin-bottom:16px;color:var(--tinte)}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label{font-weight:700;font-size:.82rem}
.feld input,.feld select,.feld textarea{font:inherit;font-size:1rem;padding:.8em .9em;border:2px solid var(--tinte);background:#fff;border-radius:0;width:100%;color:var(--tinte)}
.feld textarea{resize:vertical;min-height:120px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;box-shadow:4px 4px 0 var(--gruen)}
.feld.ist-fehler input,.feld.ist-fehler textarea{border-color:var(--rot);background:#fff4f2}
.formular fieldset:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.formular fieldset:first-of-type legend{grid-column:1/-1}
.feld-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:.55em .95em;border:2px solid var(--tinte);font-weight:700;font-size:.85rem;background:#fff;transition:background .15s,color .15s,transform .15s}
.chips label:hover span{transform:translateY(-2px)}
.chips input:checked+span{background:var(--tinte);color:#fff}
.chips input:checked+span::before{content:"✓ "}
.chips input:focus-visible+span{outline:3px solid var(--rot);outline-offset:2px}
.chips--raum input:checked+span{background:var(--tinte);border-color:var(--tinte)}
.haekchen{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;margin-top:12px;cursor:pointer}
.haekchen input{width:22px;height:22px;flex:none;accent-color:var(--tinte);margin-top:1px}
.haekchen.ist-fehler span{color:var(--rot)}
.formular__ende{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.formular__status{margin:0;font-weight:700}
.formular__status.ok{color:#1f6f4a}
.formular__status.fehler{color:var(--rot)}
.formular.ist-gesendet{display:flex;flex-direction:column;justify-content:center;min-height:420px}
.danke{text-align:left}
.danke svg{width:120px;height:120px;fill:var(--tinte);margin-bottom:24px}
.danke h3{font-size:clamp(34px,3.5vw,56px);font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5em}

/* ---------- FAQ ---------- */
.fragen{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,5vw,80px)}
.fragen .abschnitt__kopf{margin:0}
.fragen__liste{border-top:3px solid var(--tinte)}
.fragen details{border-bottom:1px solid rgba(0,0,0,.2)}
.fragen summary{list-style:none;cursor:pointer;padding:22px 50px 22px 0;font-weight:700;font-size:clamp(18px,1.5vw,23px);position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:900;font-size:32px;color:var(--tinte);transition:transform .3s var(--ease)}
.fragen details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.fragen details p{padding:0 0 22px;max-width:62ch;color:var(--tinte-2)}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--blau);padding:clamp(50px,6vw,90px) var(--rand);display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;position:relative;overflow:hidden}
.newsletter__haken{width:clamp(80px,9vw,140px);height:clamp(80px,9vw,140px);fill:var(--tinte)}
.newsletter h2{font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(30px,3.4vw,54px);margin-bottom:.35em}
.newsletter p{margin:0;max-width:40ch}
.newsletter__form{display:flex;flex-wrap:wrap;gap:0}
.newsletter__form input{flex:1;min-width:200px;font:inherit;padding:1em;border:2px solid var(--tinte);border-right:0;background:#fff;border-radius:0}
.newsletter__form .formular__status{flex-basis:100%;margin-top:10px}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:var(--papier);padding:clamp(60px,7vw,110px) var(--rand) 30px}
.fuss__haken{width:clamp(110px,14vw,200px);height:auto;aspect-ratio:1;fill:var(--papier);display:block;margin-bottom:clamp(40px,5vw,80px)}
.fuss__spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid rgba(255,255,255,.25);padding-top:30px}
.fuss h3{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:1em}
.fuss a{text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss__klein{margin-top:50px;font-size:.78rem;opacity:.6}
.hinweis-text{display:none}.hinweise .hinweis-text{display:inline}

/* ---------- Einblenden beim Scrollen ---------- */
.js .auftauchen{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .auftauchen.ist-sichtbar{opacity:1;transform:none}
.js .plakat.auftauchen.ist-sichtbar:nth-child(odd){transform:rotate(-.6deg)}
.js .plakat.auftauchen.ist-sichtbar:nth-child(even){transform:rotate(.5deg)}
.js .plakat.auftauchen.ist-sichtbar:hover{transform:rotate(0) translateY(-6px)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pfeil--hero{display:none}
  .plakat,.plakat:nth-child(n+4){grid-column:span 3}
  .plakat:nth-child(7){grid-column:span 6}
  .plan{grid-template-columns:1fr}
  .newsletter{grid-template-columns:auto 1fr}
  .newsletter__form{grid-column:1/-1}
}
@media (max-width:900px){
  .kopf__nav{position:fixed;inset:0;background:var(--tinte);flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--rand);gap:18px;transform:translateX(100%);transition:transform .45s var(--ease);z-index:-1}
  .kopf__nav.ist-offen{transform:none}
  .kopf__nav a{font-size:clamp(36px,10vw,64px);font-weight:900;color:#fff;letter-spacing:.06em}
  .kopf__menu{display:block}
  .kopf__cta{padding:.6em .8em;font-size:.72rem}
  .hero{grid-template-columns:1fr;padding-top:110px;min-height:auto}
  .hero__bild{max-width:360px;justify-self:center;order:-1;width:70%;margin-bottom:10px}
  .pfeil--hero{display:none}
  .ort,.zitat,.fragen,.bewerben{grid-template-columns:1fr}
  .bewerben__kopf{position:static}
  .wer__liste{grid-template-columns:1fr 1fr}
  .wer__liste li{padding:22px 16px 22px 0!important;border-right:0;border-bottom:1px solid rgba(0,0,0,.15)}
  .zeitstrahl{grid-template-columns:1fr;row-gap:30px}
  .zeitstrahl::before{display:none}
  .fuss__spalten{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero__titel{letter-spacing:.1em}
  .plakate{grid-template-columns:1fr}
  .plakat,.plakat:nth-child(n+4),.plakat:nth-child(7){grid-column:auto}
  .formular fieldset:first-of-type{grid-template-columns:1fr}
  .feld-reihe{grid-template-columns:1fr}
  .wer__liste{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr}
  .newsletter__form input{border-right:2px solid var(--tinte);margin-bottom:10px}
  .newsletter__form button{width:100%;justify-content:center}
  .fakten{grid-template-columns:1fr 1fr}
  .ort__bild{box-shadow:8px 8px 0 var(--gruen)}
  .formular{box-shadow:8px 8px 0 var(--tinte)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__titel .z{opacity:1;transform:none}
  .js .auftauchen{opacity:1;transform:none}
  .js .pfeil path{stroke-dashoffset:0}
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.kopf--recht{position:sticky;top:0;background:rgba(241,241,241,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.kopf__zurueck{padding:.7em 1.1em}
.recht{max-width:780px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--rand) clamp(64px,8vw,120px)}
.recht .titel{margin-bottom:.8em}
.recht h2{font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(22px,2vw,28px);line-height:1.15;margin:2.2em 0 .8em;padding-top:1em;border-top:3px solid var(--tinte)}
.recht h3{font-weight:700;font-size:1.1rem;line-height:1.3;margin:1.8em 0 .5em}
.recht h4{font-weight:700;font-size:1rem;line-height:1.3;margin:1.4em 0 .4em;color:var(--tinte-2)}
.recht p,.recht li{max-width:68ch;overflow-wrap:anywhere}
.recht ul{padding-left:1.2em;margin:0 0 1em}
.recht li{margin-bottom:.6em}
.recht a{text-decoration:underline;text-underline-offset:2px}
.recht__quelle{margin-top:3em;font-size:.85rem;color:var(--tinte-2)}
.fuss--recht{padding-top:clamp(40px,5vw,64px)}
.fuss--recht .fuss__spalten{grid-template-columns:repeat(2,1fr);border-top:0;padding-top:0}
@media (max-width:900px){.kopf--recht .kopf__zurueck{font-size:.72rem}}

/* Formular: Spam-Falle unsichtbar, Bestätigung ohne JavaScript */
.falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.gesendet-hinweis{display:none;background:var(--gruen);font-weight:700;padding:14px 16px;margin:0 0 24px}
.gesendet-hinweis:target{display:block}