/* ============================================================================
   KulturWerkstatt – Wir sind Vielfalt e.V. · Greußen
   „Leg dein Feld dazu" — Die offene Mosaik-Werkstatt
   Statisch, self-hosted Fonts (DSGVO), kein Tracking, WCAG 2.1 AA.
   ============================================================================ */

/* ---------- FONTS (self-hosted woff2) ---------- */
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GeistMono";src:url(fonts/geistmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GeistMono";src:url(fonts/geistmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ============================ TOKENS ============================ */
:root{
  --font-display:"Bricolage","Hanken",-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  --font-text:"Hanken",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
  --font-mono:"GeistMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Reine Logo-Farben (Flächen/Dekoration) — exakt aus dem Vereinslogo gemessen */
  --brand-orange:#D98B40;
  --brand-black:#111111;
  --brand-blue:#88C8EC;
  --brand-red:#DC5C2D;
  --brand-white:#FFFFFF;

  /* AA-sichere Aktions-/Linkfarben auf Papier */
  --werkrot:#B5300F;        /* ~5,2:1 — primäre Aktion/Link */
  --tiefblau:#155E7D;       /* Links/Fokus */
  --gebrannt:#8C4B0C;       /* Kicker/Über-uns — AA auf Papier (~6,7:1) */

  /* Untergrund + Tinte */
  --paper:#F4EDE1;
  --paper-deep:#ECE3D4;
  --card:#FFFFFF;
  --ink:#141417;            /* ~16:1 auf Papier */
  --ink-soft:#4A4A45;
  --dark:#141417;
  --ink-on-dark:#F4F2EE;
  --line:rgba(20,20,23,.14);
  --line-2:rgba(20,20,23,.22);

  --akzent:var(--tiefblau);  /* pro Sektion überschrieben */
  --focus:var(--tiefblau);

  --radius:10px;
  --radius-sm:4px;
  --stamp:4px 4px 0 var(--brand-black);
  --stamp-sm:3px 3px 0 var(--brand-black);
  --wrap:1140px;
  --gutter:clamp(16px,5vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

/* ============================ RESET ============================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--font-text);background:var(--paper);color:var(--ink);
  line-height:1.65;font-size:clamp(1.0625rem,1rem + .3vw,1.125rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh;position:relative;
}
img{max-width:100%;display:block}
a{color:var(--werkrot);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--akzent)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul{list-style:none}
::selection{background:var(--brand-orange);color:var(--brand-black)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}

/* dezentes Fugen-/Verlege-Rautenraster hinter dem Papier */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;
  background-image:linear-gradient(45deg,var(--ink) 1px,transparent 1px),linear-gradient(-45deg,var(--ink) 1px,transparent 1px);
  background-size:46px 46px;
}

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(64px,9vw,120px);position:relative}
.section--deep{background:var(--paper-deep)}
.section--dark{background:var(--dark);color:var(--ink-on-dark)}
.section--red{background:var(--brand-red);color:var(--brand-black)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:var(--radius);font-weight:600;transition:top .2s}
.skip-link:focus{top:12px}

/* Facetten je Sektion */
[data-facet="blau"]{--akzent:var(--tiefblau)}
[data-facet="orange"]{--akzent:var(--gebrannt)}
[data-facet="rot"]{--akzent:var(--werkrot)}
[data-facet="schwarz"]{--akzent:var(--ink)}
.section--dark[data-facet]{--akzent:var(--brand-orange)}

/* ============================ TYPO ============================ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.75rem,7vw,5.5rem);line-height:1.02}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.375rem}
p{max-width:64ch}
.kicker{font-family:var(--font-mono);font-weight:500;font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gebrannt);display:inline-flex;align-items:center;gap:12px}
.section--dark .kicker,.section--red .kicker{color:inherit;opacity:.85}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;max-width:60ch;color:var(--ink-soft)}
.section--dark .lead{color:rgba(244,242,238,.86)}
.section--red .lead{color:#1c0c06;opacity:.92;max-width:60ch}
.section-head{margin-bottom:clamp(36px,5vw,60px);max-width:820px}

/* ============================ RAUTE-PRIMITIVE ============================ */
/* Mini-Raute (Quadrat 45° gedreht, 4 Zellen, SCHWARZER Rahmen wie im Logo;
   eine Zelle WEISS) */
.raute{width:var(--rs,30px);height:var(--rs,30px);flex:0 0 auto;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;transform:rotate(45deg);
  background:var(--brand-black);padding:2px;border-radius:3px}
.raute i{display:block;border-radius:1px}
.raute .o{background:var(--brand-orange)}
.raute .k{background:var(--brand-white)}
.raute .b{background:var(--brand-blue)}
.raute .r{background:var(--brand-red)}
/* Sektionsmark: nur der Facetten-Quadrant leuchtet */
.mark[data-facet] i{opacity:.28;filter:saturate(.4)}
.mark[data-facet="orange"] .o,.mark[data-facet="blau"] .b,
.mark[data-facet="rot"] .r,.mark[data-facet="schwarz"] .k{opacity:1;filter:none}
.section-mark{display:inline-flex;align-items:center;gap:14px;margin-bottom:18px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}

/* Bullet-Raute */
/* Rauten-Motiv bewusst SPARSAM: dekorative Mini-Rauten auf Karten/Stats/Nav/Downloads
   ausgeblendet (sonst zu viele „Vierecke"). Logo, Hero-Mosaik, Sektions-Marken und der
   Antrags-Fortschritt behalten ihre Raute. */
.b-raute,.stat .raute,.value .raute,.project-body .raute,.path .raute,
.impact-card .raute,.beitrag-card .raute,.dl .raute,.contact-card .raute,
.social-row .raute,.event .cat{display:none}

/* ============================ HEADER / NAV ============================ */
.site-header{position:sticky;top:0;z-index:1000;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:40px;height:40px}
.site-header .brand img{width:48px;height:48px}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.02em;line-height:1.05}
.brand span{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.nav-menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-menu a{padding:8px 10px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;color:var(--ink);
  position:relative;text-decoration:none;white-space:nowrap}
.nav-menu a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2.5px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-menu a:hover::after,.nav-menu a[aria-current="true"]::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:10px;flex:0 0 auto}
.burger{display:none}

/* Mobile-Menü */
.mobile-menu{position:fixed;inset:0;z-index:1500;background:var(--paper);padding:88px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .4s var(--ease);
  visibility:hidden}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mobile-menu .m-cta{margin-top:24px;display:grid;gap:12px}
.mm-close{position:absolute;top:20px;right:var(--gutter);width:48px;height:48px;border:1px solid var(--line);
  border-radius:var(--radius);display:grid;place-items:center}

/* ============================ BUTTONS (Stempel) ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:13px 22px;border-radius:var(--radius);font-weight:700;font-family:var(--font-display);
  letter-spacing:.01em;text-decoration:none;border:2px solid var(--brand-black);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);text-align:center}
.btn--stamp{box-shadow:var(--stamp)}
.btn--stamp:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--brand-black)}
.btn--stamp:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--brand-black)}
.btn--spenden{background:var(--brand-red);color:var(--brand-black)}
.btn--mitglied{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none;border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{min-height:44px;padding:10px 16px;font-size:.92rem}
.btn--block{width:100%}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--on-red{background:var(--ink);color:#fff;border-color:var(--ink)}
.scroll-hint{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--ink-soft);
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em}

/* Stempel-Etikett */
.stamp-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border:2px solid var(--ink);border-radius:6px;padding:6px 12px;transform:rotate(-2deg);
  background:#fff8ec}

/* ============================ SEAM (Zickzack-Fuge 45°) ============================ */
.seam{height:22px;width:100%;background:var(--seam-color,var(--paper-deep));
  clip-path:polygon(0 100%,0 50%,5% 0,10% 50%,15% 0,20% 50%,25% 0,30% 50%,35% 0,40% 50%,45% 0,50% 50%,55% 0,60% 50%,65% 0,70% 50%,75% 0,80% 50%,85% 0,90% 50%,95% 0,100% 50%,100% 100%)}

/* ============================ HERO ============================ */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px);position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,64px);align-items:center}
.hero-copy{max-width:640px}
.hero h1{margin:18px 0 24px}
.mosaic-underline{position:relative;white-space:nowrap}
.mosaic-underline::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;
  background:linear-gradient(90deg,var(--brand-orange) 0 25%,var(--brand-blue) 25% 50%,var(--brand-red) 50% 75%,var(--brand-black) 75% 100%);
  border-radius:3px}
.hero .lead{margin-bottom:28px;color:var(--ink-soft)}
.tape{margin-bottom:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}

/* Hero-Mosaik */
.hero-mosaic{position:relative;width:min(420px,80vw);aspect-ratio:1;margin:0 auto;
  display:grid;place-items:center}
.hero-mosaic .big{width:78%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:7px;transform:rotate(45deg);background:var(--brand-black);padding:7px;border-radius:10px;box-shadow:var(--stamp)}
.hero-mosaic .tile{border-radius:4px;opacity:0;animation:tile-in .7s var(--ease) forwards}
.hero-mosaic .tile.o{background:var(--brand-orange)}
.hero-mosaic .tile.k{background:var(--brand-white)}
.hero-mosaic .tile.b{background:var(--brand-blue)}
.hero-mosaic .tile.r{background:var(--brand-red)}
.hero-mosaic .tile:nth-child(1){animation-delay:.05s}
.hero-mosaic .tile:nth-child(2){animation-delay:.22s}
.hero-mosaic .tile:nth-child(3){animation-delay:.39s}
.hero-mosaic .tile:nth-child(4){animation-delay:.56s}
@keyframes tile-in{from{opacity:0;transform:translate(var(--tx,20px),var(--ty,-24px)) rotate(var(--tr,-8deg)) scale(.8)}
  to{opacity:1;transform:none}}
.hero-mosaic .tile:nth-child(1){--tx:-30px;--ty:-26px;--tr:-7deg}
.hero-mosaic .tile:nth-child(2){--tx:34px;--ty:-20px;--tr:6deg}
.hero-mosaic .tile:nth-child(3){--tx:-26px;--ty:28px;--tr:5deg}
.hero-mosaic .tile:nth-child(4){--tx:30px;--ty:26px;--tr:-6deg}
.hero-mosaic .float{position:absolute;width:34px;height:34px;border-radius:5px;transform:rotate(45deg);box-shadow:var(--stamp-sm)}
.hero-mosaic .f1{background:var(--brand-orange);top:-6%;left:8%;animation:bob 5s var(--ease) infinite}
.hero-mosaic .f2{background:var(--brand-blue);bottom:2%;right:-2%;animation:bob 6s var(--ease) infinite .8s}
.hero-mosaic .f3{background:var(--brand-red);bottom:18%;left:-6%;animation:bob 5.5s var(--ease) infinite .4s}
@keyframes bob{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-9px)}}

/* Kennzahlen-Leiste */
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(36px,5vw,52px)}
.stat{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink);
  border-radius:var(--radius);padding:12px 18px;font-weight:600}
.stat .raute{--rs:22px}

/* ============================ CARDS / GRIDS ============================ */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Werte (Flip) */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.value{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:24px;
  position:relative;overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.value:hover,.value:focus-within{transform:translateY(-4px);box-shadow:var(--stamp)}
.value .raute{--rs:34px;margin-bottom:16px}
.value h3{font-size:1.2rem;margin-bottom:8px}
.value p{font-size:.98rem;color:var(--ink-soft)}
.value::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;
  background:linear-gradient(90deg,var(--brand-orange),var(--brand-blue),var(--brand-red))}

/* Projekt-Pegboard */
.pegboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.project{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.project:hover{transform:translateY(-4px);box-shadow:var(--stamp)}
.photo-slot{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#f0e6d4,#f0e6d4 12px,#e9ddc8 12px,#e9ddc8 24px);
  display:grid;place-items:center;position:relative;border-bottom:2px solid var(--ink)}
.photo-slot .ps-label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);background:#fff;border:1.5px dashed var(--line-2);padding:6px 12px;border-radius:6px}
.project-body{padding:20px;display:flex;gap:14px;align-items:flex-start}
.project-body .raute{--rs:26px;margin-top:3px}
.project h3{font-size:1.15rem;margin-bottom:6px}
.project p{font-size:.96rem;color:var(--ink-soft)}

/* Mitmach-Wege */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.path{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:24px}
.path .raute{--rs:30px;margin-bottom:14px}
.path h3{margin-bottom:8px}
.path p{font-size:.96rem;color:var(--ink-soft);margin-bottom:12px}
.path .step{font-family:var(--font-mono);font-size:.82rem;color:var(--tiefblau);line-height:1.5}

/* ============================ TERMINE (dunkel) ============================ */
.events{display:grid;gap:14px;margin-top:24px}
.event{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(244,242,238,.16);border-radius:var(--radius);padding:18px 22px}
.event .date{font-family:var(--font-mono);font-weight:500;font-size:1.5rem;color:var(--brand-orange);
  border-right:1px solid rgba(244,242,238,.2);padding-right:20px;min-width:88px;text-align:center}
.event h3{font-size:1.15rem;color:#fff}
.event .meta{font-size:.92rem;color:rgba(244,242,238,.7);margin-top:2px}
.event .cat{--rs:22px}
.note-box{margin-top:24px;border:1.5px dashed rgba(244,242,238,.3);border-radius:var(--radius);padding:20px 24px;
  color:rgba(244,242,238,.82);font-size:.96rem}

/* ============================ SPENDEN (rot) ============================ */
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:32px 0}
.impact-card{background:#fff;border:2px solid var(--brand-black);border-radius:var(--radius);padding:22px;
  box-shadow:var(--stamp);display:flex;gap:14px;align-items:flex-start}
.impact-card .raute{--rs:30px;margin-top:2px}
.impact-card .betrag{font-family:var(--font-display);font-weight:800;font-size:1.6rem;display:block;color:var(--werkrot)}
.impact-card .what{color:var(--ink);font-size:.96rem}
.bank-box{background:var(--ink);color:var(--ink-on-dark);border-radius:var(--radius);padding:24px;
  font-family:var(--font-mono);font-size:.96rem;line-height:1.9;max-width:560px}
.bank-box .row{display:flex;flex-wrap:wrap;gap:8px}
.bank-box .lbl{color:var(--brand-orange);min-width:130px}
.bank-box .val.ph{color:#cfd4cf}
.copy-btn{margin-top:14px}
.copy-btn[data-copied]::after{content:" ✓ kopiert";color:var(--brand-blue)}
.spenden-foot{margin-top:24px;max-width:64ch}
.spenden-foot .small{font-size:.92rem;color:#2a1108}
/* Platzhalter dezent statt boxig: nur dünne gepunktete Unterstreichung, kein Kasten. */
.placeholder-note{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-faint);
  border-bottom:1.5px dotted var(--line-2);padding:0 1px}

/* ============================ MITGLIED ============================ */
.member-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.beitrag{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:24px 0 8px}
.beitrag-card{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:20px;text-align:center}
.beitrag-card .raute{--rs:26px;margin:0 auto 12px}
.beitrag-card .art{font-family:var(--font-display);font-weight:800;font-size:1.2rem}
.beitrag-card .preis{font-family:var(--font-mono);color:var(--tiefblau);margin-top:6px;font-size:.92rem}
.notice{background:#fff8ec;border:2px solid var(--gebrannt);border-radius:var(--radius);padding:18px 20px;
  margin:24px 0;font-size:.96rem}
.notice strong{color:var(--gebrannt)}

.member-form{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(20px,3vw,32px);box-shadow:var(--stamp)}
.member-form fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:22px}
.member-form legend{font-family:var(--font-display);font-weight:700;font-size:1.1rem;padding:0 8px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.field .req{color:var(--werkrot)}
.field input,.field select{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--ink-soft);
  border-radius:var(--radius-sm);background:#fff;font:inherit;color:var(--ink)}
.field input:focus-visible,.field select:focus-visible{border-color:var(--tiefblau)}
/* Fokus-Indikator: auf dunklen Flaechen hell, in der hellen Formularkarte dunkel (WCAG SC 1.4.11) */
.section--dark,.site-footer{--focus:var(--ink-on-dark)}
.contact-form-wrap{--focus:var(--tiefblau)}
.field .hint{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);border-radius:var(--radius);
  padding:10px 16px;min-height:44px;cursor:pointer}
.radio-chip:has(input:checked){border-color:var(--tiefblau);background:#eef6fb}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;margin-bottom:14px}
.check input{margin-top:4px;width:20px;height:20px;flex:0 0 auto}
.form-progress{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft)}
.form-progress .raute i{opacity:.22;transition:opacity .3s}
.form-progress .raute i.done{opacity:1}
.pdf-btn{margin-bottom:22px}

/* Mitmach-Mosaik */
.mitmach{background:var(--paper-deep);border:2px solid var(--ink);border-radius:var(--radius);padding:24px}
.mitmach h3{margin-bottom:8px}
.mitmach p{font-size:.96rem;color:var(--ink-soft);margin-bottom:18px}
.mosaic-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px}
.cell{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;text-align:center;
  transform:rotate(45deg);border:2px solid var(--ink)}
.cell span{transform:rotate(-45deg);font-size:.62rem;font-weight:700;line-height:1.1;padding:2px}
.cell.o{background:var(--brand-orange)}.cell.b{background:var(--brand-blue)}
.cell.r{background:var(--brand-red);color:#fff}.cell.k{background:var(--brand-black);color:#fff}
.cell.empty{background:#fff;border-style:dashed;color:var(--ink-soft);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(181,48,15,.4)}50%{box-shadow:0 0 0 8px rgba(181,48,15,0)}}

/* ============================ SATZUNG ============================ */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:32px}
.dl{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:var(--radius);
  padding:18px;font-weight:600;text-decoration:none;color:var(--ink);box-shadow:var(--stamp-sm);transition:transform .12s}
.dl:hover{transform:translate(-1px,-1px)}
.dl .raute{--rs:26px}
.dl small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.74rem;color:var(--ink-soft);margin-top:2px}
.facts{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:24px;
  font-family:var(--font-mono);font-size:.9rem;line-height:1.9}
.facts .lbl{color:var(--tiefblau)}
.plakette{display:inline-flex;align-items:center;gap:10px;border:2.5px solid var(--werkrot);color:var(--werkrot);
  border-radius:50px;padding:10px 20px;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;font-size:.78rem;transform:rotate(-3deg);margin-top:20px}

/* ============================ KONTAKT (dunkel) ============================ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px}
.contact-card{background:rgba(255,255,255,.05);border:1px solid rgba(244,242,238,.16);border-radius:var(--radius);padding:24px}
.contact-card h3{color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.contact-card .raute{--rs:24px}
.contact-card p{color:rgba(244,242,238,.82);font-size:.96rem}
.contact-card a{color:var(--brand-blue)}
/* ---- Kontaktformular (helle Werkpapier-Karte im dunklen Bereich) ---- */
.contact-form-wrap{background:var(--paper);border:2px solid var(--brand-black);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);box-shadow:var(--stamp);color:var(--ink);max-width:760px}
.cf-title{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--ink);
  display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cf-title .raute{--rs:28px}
.cf-intro{color:var(--ink-soft);font-size:.98rem;margin-bottom:22px}
.contact-form textarea{width:100%;min-height:140px;padding:11px 14px;border:1.5px solid var(--line-2);
  border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink);resize:vertical}
.contact-form textarea:focus-visible{border-color:var(--tiefblau);outline:2px solid var(--focus);outline-offset:1px}
.contact-form .check{color:var(--ink)}
.contact-form .check a{color:var(--tiefblau);text-decoration:underline}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{margin-top:14px;font-size:.92rem;min-height:1.2em}
.cf-status.is-ok{color:#1f7a3d;font-weight:600}
.cf-status.is-error{color:var(--werkrot);font-weight:600}
.contact-form button[data-cf-submit][aria-busy="true"]{opacity:.6;pointer-events:none}
.social-row{display:flex;gap:12px;margin-top:14px}
.social-row .raute{--rs:30px}
.social-row .social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(244,242,238,.18);color:#fff;transition:background .2s,border-color .2s,color .2s,transform .2s}
.social-row .social-link:hover,.social-row .social-link:focus-visible{background:rgba(255,255,255,.08);border-color:var(--brand-blue);color:var(--brand-blue);transform:translateY(-2px)}
.social-row .social-link svg{width:22px;height:22px}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--dark);color:var(--ink-on-dark);padding-block:clamp(48px,7vw,80px) 0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand .brand b{color:#fff}
.footer-brand .brand span{color:rgba(244,242,238,.6)}
.footer-brand p{color:rgba(244,242,238,.72);font-size:.95rem;margin-top:14px;max-width:34ch}
.footer-col h4{font-family:var(--font-display);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-orange);margin-bottom:14px}
.footer-col a{display:block;color:rgba(244,242,238,.82);padding:5px 0;text-decoration:none;font-size:.95rem}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(244,242,238,.16);padding-block:22px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-size:.85rem;color:rgba(244,242,238,.6);font-family:var(--font-mono)}
.footer-band{display:flex;gap:4px;overflow:hidden;height:14px}
.footer-band i{flex:1;min-width:14px;height:14px;transform:rotate(45deg);transform-origin:center}
.footer-band i:nth-child(4n+1){background:var(--brand-orange)}.footer-band i:nth-child(4n+2){background:var(--brand-blue)}
.footer-band i:nth-child(4n+3){background:var(--brand-red)}.footer-band i:nth-child(4n){background:rgba(255,255,255,.3)}

/* ============================ REVEAL ============================ */
/* Reveal NUR aktiv, wenn JS läuft (html.reveal-ready). Ohne/bei kaputtem JS bleibt
   der Inhalt sichtbar — keine leere Seite. */
.reveal-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.reveal-ready .reveal.in-view{opacity:1;transform:none}

/* Unterseiten */
.subpage{padding-block:clamp(48px,7vw,90px)}
.subpage h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:24px}
.subpage .ph-list{display:grid;gap:14px;max-width:760px}
.subpage .ph-item{background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--radius);padding:16px 20px;
  font-family:var(--font-mono);font-size:.9rem;color:var(--ink-soft)}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-weight:600;text-decoration:none;color:var(--tiefblau)}

/* ============================ RESPONSIVE ============================ */
@media(min-width:720px){
  .field-row{grid-template-columns:1fr 2fr}
  .member-grid{grid-template-columns:1.2fr .8fr}
}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.1fr .9fr}
  .hero-mosaic{margin:0}
}
@media(max-width:980px){
  .nav-menu,.nav-cta .btn{display:none}
  .burger{display:grid;place-items:center;width:48px;height:48px;margin-left:auto;color:var(--ink)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr}
  .event{grid-template-columns:auto 1fr;gap:14px}
  .event .cat{display:none}
  .cta-row .btn{width:100%}
}

/* ============================ MOTION-OFF ============================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.reveal-ready .reveal{opacity:1;transform:none}
  .hero-mosaic .tile{opacity:1}
}