/* =========================================================================
   Förderverein MBZ Südwestfalen e.V. – Design-System
   Fundament: Luffu (warme Fotografie, Riesen-Wortmarke, runde Porträts, flach)
   Delphi: Pergament + Cognac statt Schwarz, ruhige zentrierte Aussagen
   Ditto: Textmarker-Flächen hinter Schlüsselwörtern
   Klangregion: Wellenkante, Pill-Buttons, Du-Ansprache, Newsletter
   MBZ: eine Schrift (Manrope), nummerierte Abschnitte, Icons nur bei Aufmerksamkeit, Saiten
   ========================================================================= */
:root{
  --paper:#FBF6EE;   /* Pergament (Delphi) – Seitenfläche */
  --linen:#F2EADD;   /* zweite Fläche für Wechsel (Luffu) */
  --card:#FFFCF6;
  --ink:#2A1608;     /* Cognac (Delphi) – Text, Primärbutton */
  --muted:#7F6E60;   /* gedämpfter Text */
  --line:rgba(42,22,8,.12);
  --brass:#DDA23A;   /* Messing – Akzent des Fördervereins, auf das Logo-Rot abgestimmt */
  --brass-soft:#F1D6A1;
  --brass-ink:#8A5E12;   /* dunkles Messing für Gold als Text/Symbol auf heller Fläche (WCAG AA ≥ 4.5:1) */
  --mbz:#D42A1E; --kr:#003538; --kr-2:#0D888F;   /* Markenfamilie – Rot wie im Vereinslogo */
  --sans:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --wrap:1200px; --pad:clamp(20px,4vw,56px);
  --gap:clamp(88px,10vw,150px);
  --r:16px; --hdr:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--hdr) + 24px)}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}
::selection{background:var(--brass-soft)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding-top:var(--gap)}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}.skip:focus{top:12px}

/* Typografie: eine Schrift, Hierarchie über Größe (Luffu: Gewicht bleibt leicht) */
.kick{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.3 var(--sans)}
.kick::before{content:"";width:13px;height:12px;flex-shrink:0;background:linear-gradient(var(--brass),var(--brass)) 0 100%/3px 55% no-repeat,linear-gradient(var(--brass),var(--brass)) 5px 100%/3px 100% no-repeat,linear-gradient(var(--brass),var(--brass)) 10px 100%/3px 35% no-repeat}
.h1{font:300 clamp(2.75rem,6.4vw,5.75rem)/.95 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.h2{font:300 clamp(2.25rem,4.6vw,4rem)/1 var(--sans);letter-spacing:-.05em;text-wrap:balance}
.h3{font:400 clamp(1.375rem,2vw,1.75rem)/1.1 var(--sans);letter-spacing:-.035em}
.say{font:300 clamp(1.75rem,3.6vw,3.25rem)/1.16 var(--sans);letter-spacing:-.04em;text-wrap:balance;max-width:22ch;margin:0 auto;text-align:center}
.muted{color:var(--muted)}
.meta{font:500 11.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Textmarker (Ditto): Messingfläche fährt beim Erscheinen hinter das Wort */
mark{color:inherit;background:linear-gradient(var(--brass),var(--brass)) 0 88%/0 .55em no-repeat;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--ease) .25s}
.in mark,mark.in{background-size:100% .55em}
.hero mark{background-image:linear-gradient(rgba(231,174,69,.85),rgba(231,174,69,.85))}

/* Buttons (Klangregion: Pill) */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:99px;background:var(--ink);color:#fff;font:500 15px/1 var(--sans);border:0;white-space:nowrap;transition:background .25s,transform .25s var(--ease)}
.btn:hover{background:#4a2a12}.btn:active{transform:scale(.98)}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--brass-soft)}
.ghost{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:99px;border:1px solid currentColor;font:500 15px/1 var(--sans);white-space:nowrap;transition:background .25s,color .25s}
.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tl{display:inline-flex;gap:8px;align-items:center;font:500 15px/1 var(--sans);padding-bottom:5px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.tl:hover{background-size:30% 1px}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Header: transparent über dem Foto, danach Pergament */
.hdr{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background .4s,color .4s,border-color .4s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(251,246,238,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);border-color:var(--line)}
.hdr .wrap{height:var(--hdr);display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;margin-right:auto}
.logo img{height:clamp(40px,8.5vw,50px);width:auto;display:block}
/* Freigestelltes Logo: über dem Hero weiß, auf der hellen Leiste farbig */
.logo .l-c{display:none}
.hdr.solid .logo .l-c{display:block}
.hdr.solid .logo .l-w{display:none}
.nav{display:flex;gap:4px}
.nav a{font-size:14.5px;padding:10px 14px;border-radius:99px;transition:background .2s}
.nav a:hover{background:rgba(255,255,255,.16)}.hdr.solid .nav a:hover{background:rgba(42,22,8,.06)}
.hdr .btn{height:42px;padding:0 18px;font-size:14px;background:var(--brass);color:var(--ink)}
.hdr .btn:hover{background:#e9b85a}

/* Hero (Luffu): Vollbild-Foto, Text direkt auf dem Bild, Riesen-Wortmarke, Wellenkante (Klangregion) */
.hero{position:relative;min-height:100svh;color:#fff;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.hero > img{position:absolute;inset:0;z-index:-2;animation:heroIn 2.4s var(--ease) both;object-position:50% 40%}
@keyframes heroIn{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,12,4,.72),rgba(25,12,4,.25) 65%),linear-gradient(to top,rgba(25,12,4,.55),transparent 50%)}
.hero .copy{padding-top:calc(var(--hdr) + clamp(40px,8vh,96px));flex:1;width:100%}
.hero .h1{max-width:16ch;font-size:clamp(2.5rem,5.4vw,5rem)}
.hero .copy p{font:300 clamp(1.125rem,1.6vw,1.375rem)/1.35 var(--sans);letter-spacing:-.02em;max-width:34ch;margin:22px 0 30px;color:rgba(255,255,255,.9)}
.hero .wm{position:relative;margin:clamp(32px,5vh,64px) 0 clamp(30px,4.4vw,70px);padding-left:var(--pad);font:300 clamp(4rem,14.5vw,15rem)/.8 var(--sans);letter-spacing:-.075em;white-space:nowrap;color:rgba(255,255,255,.94);pointer-events:none;margin-left:-.04em}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(36px,5vw,80px);fill:var(--paper);z-index:2}

/* Abschnittskopf: nummeriert wie das Menü (MBZ) */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.sh .h2{margin-top:14px}

/* Projekte: zwei Fotos + eine Farbkachel (Klangregion) */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pc{background:var(--linen);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.pc:hover{transform:translateY(-4px)}
.pc .ph{aspect-ratio:4/3;overflow:hidden}
.pc .ph img{transition:transform 1.2s var(--ease)}
.pc:hover .ph img{transform:scale(1.04)}
.pc .tx{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.pc .tx .tl{margin-top:auto;align-self:flex-start}
.pc.kr{background:var(--kr);color:#fff}
.pc.kr .ph{display:grid;place-items:center;background:var(--kr);position:relative}
.pc.kr .ph svg{width:72%;height:auto;color:#12BFC9}
.pc.kr .meta{color:rgba(255,255,255,.65)}

/* Mitmachen: drei Wege, einer hervorgehoben */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.way{border-radius:var(--r);padding:clamp(24px,2.6vw,34px);min-height:330px;display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line)}
.way.main{background:var(--brass-soft);border-color:transparent}
.way .ic{width:64px;height:64px;color:var(--ink)}
.way p{color:var(--muted);font-size:15.5px;max-width:30ch}
.way .acts{margin-top:auto}

/* Termine */
.evl{border-top:1px solid var(--ink)}
.evr{display:grid;grid-template-columns:96px 1fr 44px;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.evr:hover{padding-left:10px}
.evd{border-left:2px solid var(--brass);padding-left:14px;line-height:1}
.evd b{display:block;font:300 2.5rem/1 var(--sans);letter-spacing:-.05em}
.evd span{font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.evr .t{font:400 clamp(1.25rem,1.8vw,1.5rem)/1.2 var(--sans);letter-spacing:-.03em;display:block}
.evr .m{font-size:14px;color:var(--muted)}
.go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
a:hover .go{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Aus dem Verein: runde Bildausschnitte (Luffu) */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.post{display:flex;flex-direction:column;gap:16px}
.post .rd{width:clamp(120px,12vw,168px);aspect-ratio:1;border-radius:50%;overflow:hidden;transition:transform .6s var(--ease)}
.post:hover .rd{transform:scale(1.04) rotate(-2deg)}
.post h3{font:400 1.25rem/1.25 var(--sans);letter-spacing:-.025em;text-wrap:balance}

/* Newsletter (Klangregion) */
.news{background:var(--linen);border-radius:24px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.nl{display:flex;background:#fff;border-radius:99px;padding:6px;border:1px solid var(--line)}
.nl input{flex:1;border:0;background:none;outline:none;padding:0 18px;font-size:16px;min-width:0}
.nl .btn{height:46px}
.news small{display:block;margin-top:10px;color:var(--muted);font-size:13px}

/* Footer: Cognac, Saiten mit Messing-Noten, Markenfamilie */
.ftr{background:var(--ink);color:#d9cbbd;margin-top:var(--gap);padding:clamp(56px,7vw,96px) 0 28px}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;font-size:15px}
.ft p.meta{color:#9c8b7d;margin-bottom:14px}
.ft ul{list-style:none;display:grid;gap:8px}
.ft a:hover{color:#fff}
.strings{position:relative;height:clamp(110px,10vw,150px);margin-top:clamp(40px,5vw,64px);touch-action:pan-y;cursor:crosshair}
.strings canvas{position:absolute;inset:0;width:100%;height:100%}
.family{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.family a{display:inline-flex;align-items:center;gap:8px}
.family i{width:10px;height:10px;border-radius:50%}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:#9c8b7d}
.legal nav{display:flex;gap:18px}

/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}

/* Icons: stehen still, bewegen sich nur bei Aufmerksamkeit (wie MBZ) */
.ic{display:inline-block;flex-shrink:0}
.ic svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic svg *{transform-box:view-box}
.ic .f{fill:currentColor;stroke:none}
.ic:not(.run) svg *{animation:none!important}
.ic-heart .hb{transform-origin:38px 38px;animation:pulse 1.6s ease-in-out infinite}
.ic-heart .ekg{stroke-dasharray:1;animation:wv 1.6s linear infinite}
.ic-notes .nn{transform-origin:40px 64px;animation:sway 2.4s ease-in-out infinite}
.ic-voice .a{transform-origin:16px 38px;animation:voice 2.4s var(--ease) infinite}
.ic-voice .a2{animation-delay:.3s}.ic-voice .a3{animation-delay:.6s}
@keyframes pulse{0%,100%{transform:scale(1)}15%{transform:scale(1.07)}30%{transform:scale(1)}45%{transform:scale(1.05)}}
@keyframes wv{0%{stroke-dashoffset:1}55%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(5deg) translateY(-3px)}}
@keyframes voice{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

@media (max-width:1000px){
  .nav{display:none}
  .proj,.ways,.posts{grid-template-columns:1fr 1fr}
  .proj > :first-child{grid-column:1/-1}
  .news,.ft{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero .wm{font-size:21vw}
  .proj,.ways,.posts{grid-template-columns:1fr}
  .hdr .btn{display:none}
  .way{min-height:0}
  .evr{grid-template-columns:72px 1fr 40px;gap:14px}
  .evd b{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.rv{opacity:1;transform:none}mark{background-size:100% .55em}}

/* =========================================================================
   v2 – Animierter Hero, Projekte, Mitgliedschaft, Vorstand
   ========================================================================= */
.nav a[aria-current="page"]{box-shadow:inset 0 -1.5px 0 currentColor;border-radius:0}
.burger{display:none;background:none;border:0;font:500 14px var(--sans);color:inherit;padding:10px 0}
.mnav{display:none}
@media (max-width:1000px){
  .burger{display:block}
  .hdr.open{background:var(--paper);color:var(--ink)}
  .hdr.open .mnav{display:grid;gap:4px;padding:8px var(--pad) 24px;border-top:1px solid var(--line)}
  .mnav a{font:300 1.75rem/1.2 var(--sans);letter-spacing:-.04em;padding:10px 0;border-bottom:1px solid var(--line)}
  .mnav .btn{font:500 15px var(--sans);margin-top:16px;justify-self:start;border:0;background:var(--brass);color:var(--ink)}
}

/* Hero dunkel mit Notenlinien (statt Foto) */
.hero.dark{background:radial-gradient(120% 90% at 85% 10%,#4a2a12 0%,#2A1608 55%,#1d0f05 100%)}
.hero.dark::after{display:none}
.staff{position:absolute;inset:0;z-index:0;cursor:pointer;touch-action:pan-y}
.staff canvas{position:absolute;inset:0;width:100%;height:100%}
.hero.dark .copy{position:relative;z-index:1;pointer-events:none}
.hero.dark .copy a,.hero.dark .copy button{pointer-events:auto}
.hero .ghostwm{position:absolute;left:var(--pad);bottom:clamp(40px,7vw,110px);font:300 clamp(5rem,19vw,19rem)/.8 var(--sans);letter-spacing:-.075em;white-space:nowrap;color:rgba(255,248,236,.045);pointer-events:none;margin:0 0 0 -.04em;z-index:0}
.staff-bar{position:absolute;left:0;right:0;bottom:clamp(44px,6vw,92px);z-index:1;pointer-events:none}
.staff-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.staff-msg{font:500 13px/1.4 var(--sans);color:rgba(255,248,236,.7);transition:color .4s}
.staff-msg.on{color:var(--brass)}
.snd{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,248,236,.28);background:none;color:rgba(255,248,236,.85);font:500 13px var(--sans);cursor:pointer}
.snd[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.snd i{width:12px;height:10px;background:linear-gradient(currentColor,currentColor) 0 100%/2px 50% no-repeat,linear-gradient(currentColor,currentColor) 5px 100%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 10px 100%/2px 70% no-repeat}

/* Platzhalter-Kennzeichnung */
.ph{display:inline-flex;align-items:center;font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:#FFE58A;color:#5a4300;border-radius:4px;padding:4px 6px;vertical-align:middle;margin-left:8px}

/* Projektkarten in den Tönen der Familie */
.proj .pc{position:relative}
.pc .ph-img{aspect-ratio:4/3;overflow:hidden;position:relative;display:grid;place-items:center}
.pc .ph-img img{transition:transform 1.2s var(--ease)}
.pc:hover .ph-img img{transform:scale(1.04)}
.pc .ph-img .ic{width:clamp(90px,9vw,128px);height:clamp(90px,9vw,128px)}
.pc .st{position:absolute;left:14px;top:14px;background:rgba(255,252,246,.94);color:var(--ink);border-radius:99px;padding:6px 11px;font:500 12px/1 var(--sans)}
.pc .sh-t{font-size:15.5px;opacity:.75}
.t-kr{background:var(--kr);color:#fff}.t-kr .ph-img{color:#12BFC9}
.t-wine{background:#370300;color:#fff}
.t-sand{background:var(--linen)}
.t-peach{background:#EDCDB9}
.t-rose{background:#F3DCD0}
.t-brass{background:var(--brass-soft)}
.t-kr .meta,.t-wine .meta{color:rgba(255,255,255,.65)}

/* Seitenkopf der Unterseiten */
.phd{padding-top:calc(var(--hdr) + clamp(48px,7vw,96px))}
.crumbs{display:flex;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}
.lead{font:300 clamp(1.2rem,1.9vw,1.5rem)/1.35 var(--sans);letter-spacing:-.025em;max-width:42ch;color:var(--muted);margin-top:20px}

/* Projekt-Detail */
.pd-media{margin-top:clamp(36px,5vw,64px);border-radius:24px;overflow:hidden;aspect-ratio:21/9;display:grid;place-items:center;position:relative}
.pd-media .ic{width:clamp(140px,16vw,220px);height:clamp(140px,16vw,220px)}
.pd-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.pd-grid .prose p{font-size:18px;line-height:1.6;margin-bottom:18px;max-width:58ch}
.facts dl{border-top:1px solid var(--ink)}
.facts dl div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts dt{color:var(--muted)}.facts dd{text-align:right}
.help{background:var(--brass-soft);border-radius:24px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}

/* Mitglied werden */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px}
.card .ic{width:56px;height:56px}
.card p{color:var(--muted);font-size:15.5px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.steps3 div{padding:22px 22px 0 0}
.steps3 div + div{border-left:1px solid var(--line);padding-left:22px}
.steps3 b{display:block;font:300 3rem/1 var(--sans);letter-spacing:-.05em;color:var(--brass-ink);margin-bottom:10px}
.form{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt > span{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card);transition:border-color .2s,box-shadow .2s}
.opt b{font:500 16px var(--sans)}
.opt small{color:var(--muted);font-size:14px}
.opt input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}
.fld{display:flex;flex-direction:column;gap:4px;background:rgba(42,22,8,.04);border:1px solid transparent;border-radius:14px;padding:10px 16px;min-height:60px;justify-content:center}
.fld:focus-within{background:#fff;border-color:var(--ink)}
.fld.err{border-color:#b3261e;background:#fff}
.fld label{font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fld input{border:0;background:none;outline:none;font:500 16px var(--sans)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:38px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:none;font:500 14px var(--sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.check{display:flex;gap:12px;font-size:14.5px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ink);flex-shrink:0;margin-top:1px}
.stp{display:flex;align-items:center;gap:8px}
.stp button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer}
.stp output{min-width:90px;text-align:center;font:300 2rem/1 var(--sans);letter-spacing:-.04em}
.sum{position:sticky;top:calc(var(--hdr) + 24px);background:var(--ink);color:#fff;border-radius:24px;padding:clamp(24px,3vw,36px);display:grid;gap:14px}
.sum .big{font:300 clamp(3rem,5vw,4.25rem)/1 var(--sans);letter-spacing:-.06em}
.sum .meta{color:rgba(255,255,255,.6)}
.sum ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.sum ul li::before{content:"✓";color:var(--brass);margin-right:10px}
.sum .btn{background:var(--brass);color:var(--ink);justify-content:center}
.ok{background:#E9F0E1;border-radius:24px;padding:clamp(28px,5vw,56px)}
.iban{font:400 clamp(1.25rem,2.2vw,1.75rem)/1.3 var(--sans);letter-spacing:.02em}
/* Spenden: ein ruhiger Fokus – Logo, IBAN, ein Klick. */
#spenden .spende{max-width:600px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:var(--r);padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
#spenden .spende-logo{width:min(300px,78%);height:auto;object-fit:contain;margin-bottom:4px}
#spenden .spende .iban{letter-spacing:.05em;color:var(--ink)}
#spenden .spende .acts{margin-top:6px;justify-content:center}
#spenden .spende .btn{background:var(--brass);color:var(--ink)}
#spenden .spende .btn:hover{background:#c68c2b}

/* Vorstand */
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px)}
.mem{display:flex;flex-direction:column;gap:12px}
.mem .rd{aspect-ratio:1;border-radius:50%;background:var(--linen);display:grid;place-items:center;color:var(--muted);overflow:hidden}
.mem .rd .ic{width:44%;height:44%}
.mem b{font:400 1.25rem/1.2 var(--sans);letter-spacing:-.025em}
.docs{border-top:1px solid var(--ink)}
.docs a{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.docs a:hover{padding-left:8px}
.docs .ic{width:40px;height:40px}

@media (max-width:1000px){
  .pd-grid,.help,.form{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(3,1fr)}
  .why,.steps3{grid-template-columns:1fr}
  .steps3 div + div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:18px}
  .sum{position:static}
}
@media (max-width:640px){
  .board{grid-template-columns:1fr 1fr}
  .types,.row2{grid-template-columns:1fr}
  .pd-media{aspect-ratio:4/3}
  .hero .ghostwm{bottom:120px}
}
.ic-talk .b1{animation:talk 4s var(--ease) infinite}
.ic-talk .b2{animation:talk 4s var(--ease) 2s infinite}
@keyframes talk{0%{opacity:0;transform:translateY(6px)}12%,50%{opacity:1;transform:none}62%,100%{opacity:0}}
.ic-doc .ln{stroke-dasharray:1;animation:wv 3s var(--ease) infinite}
.ic-wave path{animation:wavy 3s ease-in-out infinite alternate}
.ic-wave path:nth-child(2){animation-delay:.2s}.ic-wave path:nth-child(3){animation-delay:.4s}.ic-wave path:nth-child(4){animation-delay:.6s}
@keyframes wavy{to{transform:translateY(-3px)}}

.hero.dark .copy{padding-bottom:clamp(330px,40vh,400px)}
.news > *,.form > *,.help > *,.pd-grid > *{min-width:0}.nl input{width:100%}

/* =========================================================================
   v3 – Klangfeld-Hero, Klangregion-Bühne, Projektarchiv, Steckbrief
   ========================================================================= */
.hero.dark .copy{padding-bottom:clamp(160px,22vh,240px)}
.field{position:absolute;inset:0;z-index:0}
.field canvas{position:absolute;inset:0;width:100%;height:100%}
.impact{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(28px,5vw,72px);margin-top:auto;padding:0 0 clamp(70px,8vw,110px)}
.impact div{border-left:1px solid rgba(231,174,69,.55);padding-left:18px}
.impact b{display:block;font:300 clamp(2.25rem,4vw,3.5rem)/1 var(--sans);letter-spacing:-.05em;color:#fff}
.impact span{font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,244,226,.65)}

/* Klangregion als Bühne auf der Startseite */
.krs{background:var(--kr);color:#fff;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;position:relative;isolation:isolate}
.krs .kt{padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.krs .kick{color:#fff}.krs .kick::before{filter:hue-rotate(140deg) saturate(1.4)}
.krs .h2{color:#fff}.krs .h2 mark{background-image:linear-gradient(#0D888F,#0D888F)}
.krs p{color:rgba(255,255,255,.78);max-width:44ch;font-size:17px}
.krs ul{list-style:none;display:grid;gap:10px;font-size:15.5px}
.krs ul li{display:flex;gap:12px;align-items:baseline}
.krs ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:#12BFC9;flex-shrink:0;transform:translateY(-1px)}
.krs .btn{background:#12BFC9;color:#002628}.krs .btn:hover{background:#5fd9e0}
.krs .ghost{color:#fff}
.krs .kv{position:relative;min-height:440px;padding:clamp(24px,3vw,40px);display:grid;align-content:center}
.krs .waves{position:absolute;inset:0;width:100%;height:100%;color:#12BFC9;opacity:.35}
.mock{position:relative;background:#fff;color:#002628;border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden;max-width:440px;justify-self:center;width:100%}
.mock .mh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e3eeee;font:600 14px var(--sans)}
.mock .mh i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0D888F;margin-right:8px}
.mock .map{height:150px;background:radial-gradient(circle at 30% 40%,#cfe9ea 0 8%,transparent 9%),linear-gradient(135deg,#eef6f3,#e2efe9);position:relative}
.mock .map b{position:absolute;width:22px;height:22px;border-radius:50%;background:#0D888F;color:#fff;font:600 11px/22px var(--sans);text-align:center;box-shadow:0 0 0 6px rgba(13,136,143,.18)}
.mock .row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid #eef3f3;font-size:14px}
.mock .row .d{font:600 18px/1 var(--sans);text-align:center}.mock .row .d small{display:block;font:500 9px var(--sans);letter-spacing:.1em;color:#5b7778}
.mock .row em{font-style:normal;font-size:12px;color:#0D888F;background:#e6f4f4;border-radius:99px;padding:3px 8px}
.mock .cap{position:absolute;right:12px;top:12px;font:500 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,38,40,.8);color:#fff;padding:4px 7px;border-radius:4px}

/* Projektkarten: Text zuerst, Steckbrief-Fakten unten */
.pks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pk{border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.pk:hover{transform:translateY(-4px)}
.pk-img{aspect-ratio:16/10;overflow:hidden;display:block;position:relative}
.pk-img img{transition:transform 1.2s var(--ease)}.pk:hover .pk-img img{transform:scale(1.04)}
.pk-ic{aspect-ratio:16/10;display:grid;place-items:center;border-bottom:1px solid rgba(0,0,0,.06)}
.pk-ic .ic{width:clamp(72px,7vw,96px);height:clamp(72px,7vw,96px)}
.pk-b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pk-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pk .sh-t{font-size:15px;opacity:.78}
.pk-f{display:grid;gap:6px;margin-top:auto;padding-top:14px;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 16%,transparent);font-size:14px}
.pk-f i{font-style:normal;display:inline-block;min-width:72px;opacity:.6}
.st{font:500 11.5px/1 var(--sans);border-radius:99px;padding:6px 10px;white-space:nowrap;background:rgba(255,255,255,.75);color:var(--ink)}
.st-run{background:#DCEFD6;color:#1f4a17}.st-plan{background:#FFF0C7;color:#5a4300}.st-off{background:#eee;color:#666}
.t-kr .st,.t-wine .st{background:rgba(255,255,255,.92)}
.t-kr .pk-ic{color:#12BFC9}.t-wine .pk-ic{color:#F3B9A6}

/* Filter im Projektarchiv */
.filters{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin-bottom:24px}
.count{font-size:14px;color:var(--muted)}
.pk.hide{display:none}

/* Steckbrief auf der Projektseite */
.sb{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:clamp(36px,5vw,56px)}
.sb div{padding:20px 20px 0 0}
.sb div + div{border-left:1px solid var(--line);padding-left:20px}
.sb .meta{display:block;margin-bottom:10px}
.sb b{display:block;font:300 clamp(1.5rem,2.4vw,2.125rem)/1.12 var(--sans);letter-spacing:-.04em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two .card ul{list-style:none;display:grid;gap:12px;font-size:16px}
.two .card ul li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.two .card ul li::before{content:"✓";color:var(--brass-ink);font-weight:600}
.two .card .res{font:300 clamp(1.25rem,1.8vw,1.5rem)/1.35 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font:500 13.5px var(--sans);border:1px solid var(--line);border-radius:99px;padding:8px 13px;background:var(--card)}
@media (max-width:1000px){.krs{grid-template-columns:1fr}.krs .kv{min-height:360px}.pks{grid-template-columns:1fr 1fr}.sb{grid-template-columns:1fr 1fr}.sb div:nth-child(3){border-left:0;padding-left:0}.sb div:nth-child(n+3){border-top:1px solid var(--line);margin-top:18px}}
@media (max-width:640px){.pks,.two{grid-template-columns:1fr}.impact{grid-template-columns:1fr 1fr}.impact div:nth-child(3){display:none}.hero.dark .copy{padding-bottom:40px}}

/* v3.1 – Hero passt in den ersten Bildschirm, Linienfeld bleibt unter dem Text */
.hero.dark{min-height:min(100svh,920px)}
.hero.dark .h1{font-size:clamp(2.5rem,5vw,4.5rem)}
.hero.dark .copy{padding-top:calc(var(--hdr) + clamp(28px,6vh,72px));padding-bottom:24px;flex:0 0 auto}
.hero.dark .copy p{margin:18px 0 26px}
.field{top:0;height:auto}
.impact{padding-bottom:clamp(64px,7vw,96px)}
@media (max-width:640px){.hero.dark{min-height:0}.impact{padding-top:150px}}
.impact{width:100%}
.impact{padding-left:var(--pad);padding-right:var(--pad)}
.hero mark{animation:mk 1.1s var(--ease) .45s both}
@keyframes mk{from{background-size:0 .55em}to{background-size:100% .55em}}

/* =========================================================================
   v4 – Region, Screenshot, Partner, Vorstand mit Monogrammen
   ========================================================================= */
/* Karte der fünf Kreise */
.region{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center}
.kmap{margin:0}
.kmap svg{width:100%;height:auto;overflow:visible}
.kmap .k path{stroke:var(--paper);stroke-width:3;stroke-linejoin:round;transition:fill .3s,transform .4s var(--ease);transform-box:fill-box;transform-origin:center}
.kmap .k text{font:500 13px var(--sans);fill:var(--ink);text-anchor:middle;pointer-events:none}
.kmap .k-soe path{fill:#F2EADD}.kmap .k-mk path{fill:#EDCDB9}.kmap .k-oe path{fill:#F3DCD0}.kmap .k-si path{fill:#F5DFAE}
.kmap .k-hsk path{fill:#2A1608}.kmap .k-hsk text{fill:#fff}
.kmap .k:hover path,.kmap .k:focus path{fill:var(--brass);transform:scale(1.02)}
.kmap .k:focus{outline:none}
.kmap .mbz .dot{fill:var(--brass);stroke:#2A1608;stroke-width:2}
.kmap .mbz .ring{fill:none;stroke:var(--brass);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
.kmap .mbz text{font:600 12px var(--sans);fill:#fff;paint-order:stroke;stroke:#2A1608;stroke-width:3px}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.kmap figcaption{margin-top:8px;text-align:right}
.klist{list-style:none;display:grid;gap:0;border-top:1px solid var(--ink);margin-top:22px}
.klist li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.klist li span{color:var(--muted);font-size:14px}

/* Screenshot im Browserrahmen */
.browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);width:100%;max-width:560px;justify-self:center;position:relative}
.browser .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f4f4;border-bottom:1px solid #e3eaea}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#d6dede}
.browser .bar span{margin-left:10px;flex:1;background:#fff;border-radius:6px;padding:4px 10px;font:500 11.5px var(--sans);color:#5b7778;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.fund{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.3 var(--sans);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:8px 14px}
.fund b{font-weight:600;color:#fff;letter-spacing:.06em}
.pk-img.shot img{object-position:top}
.pd-media.shot{background:#e9f1f1;padding:clamp(20px,4vw,48px);aspect-ratio:auto}
.pd-media.shot .browser{max-width:900px}
.symb{position:absolute;right:14px;bottom:12px;font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(42,22,8,.7);color:#fff;padding:5px 9px;border-radius:99px}

/* Projekttext */
.about{display:grid;grid-template-columns:.8fr 1.6fr;gap:clamp(24px,5vw,80px);align-items:start}
.about .prose p{font-size:18.5px;line-height:1.65;margin-bottom:18px;max-width:62ch}
.about .prose p:first-child{font:300 clamp(1.3rem,2vw,1.6rem)/1.45 var(--sans);letter-spacing:-.02em;color:var(--ink)}

/* Partnerleiste */
.partners{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:20px}
.partners span{font:500 14px var(--sans);border:1px solid var(--line);border-radius:99px;padding:10px 16px;background:var(--card)}

/* Vorstand mit Monogrammen */
.mem .rd.mono{background:var(--ink);color:var(--brass)}
.mem .rd.mono b{font:300 clamp(2rem,3.4vw,2.75rem)/1 var(--sans);letter-spacing:-.04em;color:var(--brass)}
.mem .rd.mono.lead{background:var(--brass)}.mem .rd.mono.lead b{color:var(--ink)}
.beirat{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.coop{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:16px}
.coop .kick{color:#fff}.coop p{color:rgba(255,255,255,.78);font-size:16.5px;max-width:52ch}
.coop ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.coop li{font:500 13.5px var(--sans);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:7px 12px}
@media (max-width:1000px){.region,.about,.beirat{grid-template-columns:1fr}}
.impact a{border-left:1px solid rgba(231,174,69,.55);padding-left:18px;display:block}

/* ===== v5: Vorstand als Liste, Kooperation LMA, Logos ===== */
/* Zweispaltig: Überschrift links (sticky), Inhalt rechts – wie Delphi */
.vs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(28px,6vw,110px);align-items:start}
.vs-h{position:sticky;top:calc(var(--hdr) + 36px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.vs-h p{color:var(--muted);font-size:16.5px;max-width:38ch}
.people{list-style:none;border-top:1px solid var(--ink)}
.people li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.people .av{width:52px;height:52px;border-radius:50%;background:var(--linen);display:grid;place-items:center;font:500 14px/1 var(--sans);letter-spacing:.04em;color:var(--ink)}
.people .av.lead{background:var(--brass-soft)}
.people b{font:400 clamp(1.3rem,2vw,1.75rem)/1.15 var(--sans);letter-spacing:-.035em}
.people .r{font:500 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.beirat2{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.beirat2 .ic{width:56px;height:56px}
.beirat2 p{color:var(--muted);font-size:16px}
.beirat2 ul{list-style:none;display:grid;gap:10px;font-size:15.5px}
.beirat2 li{display:flex;gap:12px;align-items:baseline}
.beirat2 li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);flex-shrink:0;transform:translateY(-1px)}

/* Kooperation Landesmusikakademie: dunkle Bühne in Cognac, Messing-Akzente */
.lma{background:var(--ink);color:#fff;border-radius:28px;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,64px);padding:clamp(28px,5vw,72px);position:relative;overflow:hidden;isolation:isolate}
.lma::before{content:"";position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(231,174,69,.16),transparent);z-index:-1}
.lt{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.lma .kick{color:#fff}
.lma .h2{color:#fff}
.lt p{color:rgba(255,255,255,.78);font-size:17px;max-width:48ch}
.lma .ghost{color:#fff}
.lma-logo{background:#fff;border-radius:14px;padding:14px 18px;display:inline-flex;align-items:center;min-height:64px}
.lma-logo img{height:40px;width:auto;max-width:240px;object-fit:contain}
.lma-logo b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.lfacts{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,3vw,40px);border-top:1px solid rgba(255,255,255,.18);padding-top:20px;width:100%}
.lfacts b{display:block;font:300 clamp(1.75rem,3vw,2.5rem)/1 var(--sans);letter-spacing:-.04em;color:var(--brass)}
.lfacts span{font-size:13.5px;color:rgba(255,255,255,.7)}
.lr .meta{color:rgba(255,255,255,.6);margin-bottom:10px}
.lr ul{list-style:none;border-top:1px solid rgba(255,255,255,.3)}
.lr a{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);transition:padding .4s var(--ease)}
.lr a:hover{padding-left:8px}
.lr b{display:block;font:400 1.2rem/1.25 var(--sans);letter-spacing:-.02em}
.lr a span span{display:block;font-size:14px;color:rgba(255,255,255,.65);margin-top:4px}
.lr .st{white-space:nowrap}
.lr .go{border-color:rgba(255,255,255,.25)}
.lr a:hover .go{background:var(--brass);color:var(--ink);border-color:var(--brass)}

/* Logos */
.lgrp + .lgrp{margin-top:28px}
.lgrp .meta{margin-bottom:12px}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lg{background:#fff;border:1px solid var(--line);border-radius:14px;height:112px;display:grid;place-items:center;padding:18px 20px}
.lg img{max-height:56px;max-width:100%;width:auto;height:auto;object-fit:contain}
.lg.wm span{font:500 15px/1.25 var(--sans);letter-spacing:-.01em;text-align:center;color:var(--ink)}

@media (max-width:1000px){
  .vs,.lma{grid-template-columns:1fr}
  .vs-h{position:static}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .people li{grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
  .people .av{width:44px;height:44px;grid-row:span 2}
  .people .r{text-align:left}
  .lfacts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lr a{grid-template-columns:minmax(0,1fr) 44px}
  .lr .st{grid-column:1;justify-self:start;grid-row:2}
  .lr .go{grid-row:1/3;grid-column:2}
  .logos{grid-template-columns:1fr 1fr}
  .lg{height:96px}
}
.lma .h2{font-size:clamp(2rem,3.6vw,3.25rem);max-width:16ch}
.lma .h2 mark{background-image:linear-gradient(rgba(231,174,69,.55),rgba(231,174,69,.55));color:#fff}
.lg.sq img{max-height:76px}
.fund img{height:26px;width:auto;flex-shrink:0}
.fund{border-radius:14px;padding:10px 14px;gap:14px;flex-wrap:wrap}
.fund span b{letter-spacing:0}
@media (min-width:1001px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- v6: Ansprechpartner, Vorstand-Raster, LMA-Label, LMA kurz, echte Karte ---------- */
.rv{transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.d1{transition-delay:.05s}.rv.d2{transition-delay:.1s}

/* Koordination: die eine Anlaufstelle – Messing-Hauptkachel */
.ko{background:var(--brass);color:var(--ink);border-radius:28px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.ko-av{width:clamp(108px,13vw,168px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--brass);display:grid;place-items:center;font:300 clamp(2rem,3.4vw,3rem)/1 var(--sans);letter-spacing:-.02em}
.ko-b{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ko .kick{color:var(--ink)}
.ko-n{font:300 clamp(2rem,4vw,3.25rem)/1.02 var(--sans);letter-spacing:-.045em}
.ko-r{font:500 12.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.ko p{font-size:16.5px;max-width:52ch;margin-top:6px}
.ko .acts{margin-top:8px}
.ko .ph{margin-top:4px}

/* Ehrenamtlicher Vorstand: leise, gleichrangig */
.board{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.board li{padding:18px 18px 18px 0;display:flex;flex-direction:column;gap:6px}
.board li + li{padding-left:18px;border-left:1px solid var(--line)}
.board .r{font:500 11.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.board b{font:400 1.15rem/1.25 var(--sans);letter-spacing:-.02em}
.vboard{margin-top:clamp(40px,5vw,64px)}
.vboard .meta{margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}

/* Label an Projekten aus der LMA-Kooperation */
.lmat{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 10px 5px 8px}
.lmat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}

/* LMA kurz (Startseite) */
.lma.kurz{grid-template-columns:1fr 1.1fr;align-items:end}

/* Karte mit echten Kreisgrenzen */
.kmap svg{overflow:hidden;border-radius:20px}
.kmap .nb{fill:none;stroke:#D9CDBB;stroke-width:1;stroke-linejoin:round}
.kmap .k path{stroke:var(--paper);stroke-width:2;transform:none!important;transition:fill .3s}
.kmap .k text{font:600 13px var(--sans);letter-spacing:.01em}
.kmap .k-hsk text{fill:var(--brass)}
/* HSK ist dunkel gefüllt, beim Hover wird die Fläche golden – Label dann dunkel, damit es lesbar bleibt */
.kmap .k-hsk:hover text,.kmap .k-hsk:focus text{fill:var(--ink)}
.kmap .towns circle{fill:var(--ink);opacity:.55}
.kmap .towns text{font:500 10.5px var(--sans);fill:var(--muted);paint-order:stroke;stroke:rgba(251,246,238,.75);stroke-width:3px}
.kmap .towns .in circle{fill:#fff;opacity:.8}.kmap .towns .in text{fill:rgba(255,244,226,.85);stroke:rgba(42,22,8,.7)}
.kmap .mbz text{font:600 12.5px var(--sans)}

@media (max-width:1000px){
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .board li:nth-child(3n+1){padding-left:0;border-left:0}
  .lma.kurz{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ko{grid-template-columns:1fr;border-radius:22px}
  .board{grid-template-columns:1fr 1fr}
  .board li,.board li + li{padding:14px 12px 14px 0;border-left:0}
  .board li:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .board li{border-bottom:1px solid var(--line)}
}

.kmap .mbz .pin rect{fill:var(--ink);stroke:var(--brass);stroke-width:1.5}.kmap .mbz .pin text{fill:#fff;stroke:none;font:600 12px var(--sans)}
.ko .kick::before{background:linear-gradient(var(--ink),var(--ink)) 0 100%/3px 55% no-repeat,linear-gradient(var(--ink),var(--ink)) 5px 100%/3px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 10px 100%/3px 35% no-repeat}

/* v7: Porträt, Beirat-Liste, Steckbrief ohne Volumen, Impressum */
img.ko-av{object-fit:cover;background:var(--ink)}
.brt{list-style:none;border-top:1px solid var(--line);margin-top:6px}
.brt li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.brt b{font:500 15.5px/1.3 var(--sans);color:var(--ink)}
.brt span{font-size:14px;color:var(--muted)}
.sb{grid-template-columns:repeat(3,1fr)}
.legal-t{max-width:760px;display:grid;gap:10px}
.legal-t h2{margin-top:18px;font-size:1.25rem}
.legal-t a{text-decoration:underline}
@media (max-width:1000px){.sb{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.brt li{grid-template-columns:1fr;gap:2px}}
img.ko-av{height:auto;aspect-ratio:1;object-position:50% 30%}
.beirat2 .brt li{display:grid;gap:16px}
.beirat2 .brt li::before{content:none}
@media (max-width:640px){.beirat2 .brt li{gap:2px}}
.legal-t{grid-template-columns:minmax(0,1fr)}.legal-t p{overflow-wrap:anywhere}

/* v8: Beitragsordnung */
.bo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,32px);overflow-x:auto}
.bo table{width:100%;border-collapse:collapse;font-size:15.5px}
.bo th{font:500 11.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.bo td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.bo td:first-child{color:var(--muted);width:64px}
.bo th:last-child,.bo td:last-child{text-align:right;white-space:nowrap;padding-right:0}

/* v9: Logos als Links, ruhigere Projektkacheln */
a.lg{transition:border-color .3s,transform .4s var(--ease)}
a.lg:hover,a.lg:focus-visible{border-color:var(--ink);transform:translateY(-2px)}
.pk-f>span{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:8px;align-items:baseline}
.pk-f i{min-width:0}
.pk .h3{text-wrap:balance}
.pk .sh-t{text-wrap:pretty}
.pk-top .meta{min-width:0}
.pk-top .st{flex-shrink:0}
@media (max-width:1180px) and (min-width:1001px){.pks{grid-template-columns:repeat(2,1fr)}}

/* v10: Hero als weite Landschaft (Symbolbild), Klanglinien darüber */
.hero2 .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;z-index:-1;animation:heroIn 2.6s var(--ease) both}
.hero2::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(30,15,5,.86) 0%,rgba(30,15,5,.6) 38%,rgba(30,15,5,.1) 72%),linear-gradient(to top,rgba(30,15,5,.55),transparent 45%)}
.hero2 .field{z-index:0;opacity:.55}
.hero2 .hgrid{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-top:calc(var(--hdr) + clamp(28px,6vh,72px));padding-bottom:clamp(110px,12vw,170px)}
.hero.dark.hero2 .copy{padding:0;flex:none;max-width:640px}
.hero2 .hsym{position:absolute;right:var(--pad);bottom:clamp(64px,6.5vw,104px);z-index:1;font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:900px){
  .hero2 .hbg{object-position:68% 50%}
  .hero2::before{background:linear-gradient(to bottom,rgba(30,15,5,.82),rgba(30,15,5,.55) 55%,rgba(30,15,5,.35))}
  .hero2 .hgrid{align-items:flex-start;padding-bottom:clamp(160px,30vw,220px)}
}
@media (prefers-reduced-motion:reduce){.hero2 .hbg{animation:none}}

/* v11 – KI-Kennzeichnung (EU AI Act Art. 50) */
.pk-img .symb{right:10px;bottom:10px;font-size:10.5px;padding:4px 8px;background:rgba(42,22,8,.78)}
.hero2 .hsym{color:#fff;background:rgba(42,22,8,.55);padding:6px 10px;border-radius:99px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* v12 – Projektvideos: datensparsame „Erst klicken, dann laden“-Variante (YouTube erst nach Klick) */
.pd-videos{display:grid;gap:clamp(16px,2.5vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:clamp(24px,4vw,40px)}
.ytf{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;aspect-ratio:16/9;width:100%;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:left;cursor:pointer;color:#fff;background:linear-gradient(160deg,#3a2410,#1c120a);overflow:hidden;transition:transform .3s var(--ease)}
.ytf:hover{transform:translateY(-2px)}
.ytf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:var(--brass);display:grid;place-items:center;transition:transform .3s var(--ease),background .2s}
.ytf-play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink);margin-left:4px}
.ytf:hover .ytf-play{transform:translate(-50%,-50%) scale(1.06)}
.ytf-l{position:relative;font:500 1.1rem/1.2 var(--sans);letter-spacing:-.02em}
.ytf-note{position:relative;font:400 12.5px/1.45 var(--sans);color:rgba(255,255,255,.72)}
.ytf-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r);overflow:hidden;background:#000}
.ytf-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}