/* Schrift lokal eingebunden (kein Google-Server) */
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}

/* Layout: Figma-Collage – Bilder frei auf einer 1280er (Desktop) bzw. 375er (Mobil) Leinwand verteilt, Kopf mittig, Verlaufsband als Fuß */
:root{
  --lime:#ccd932;
  --green:#2b5c2d;
  --paper:#ffffff;
  --ink:#000000;
  --ink-soft:#3a4a2c;
  --line:#dfe5a8;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --page-bg:var(--paper); --page-fg:var(--ink); --nav-fg:var(--ink); --nav-active:var(--lime);
  --logo-fg:#335d28; --foot-fg:var(--ink); --glow:var(--lime);
  --fade:linear-gradient(to bottom, rgba(204,217,50,0) 0%, rgba(204,217,50,.35) 45%, var(--lime) 100%);
  color-scheme:light;
}
body{margin:0;background:var(--page-bg);color:var(--page-fg);font-family:var(--f-body);font-size:16px;transition:background .35s ease,color .35s ease}
body[data-view="werk"],body[data-view="person"]{--page-bg:var(--lime);--glow:var(--green);--nav-active:var(--green);--foot-fg:var(--lime);
  --fade:linear-gradient(to bottom, rgba(43,92,45,0) 0%, rgba(43,92,45,.5) 45%, var(--green) 100%)}
body[data-view="ueber-uns"]{--page-bg:var(--green);--page-fg:#ffffff;--nav-fg:#ffffff;--logo-fg:var(--lime)}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
body[data-view="ueber-uns"] :focus-visible{outline-color:var(--lime)}
img{display:block}

/* Schriftzüge in zwei Farben: .on-light (Standard) / .on-lime (auf Lime-Seiten) */
.on-lime{display:none}
body[data-view="werk"] .on-light,body[data-view="person"] .on-light{display:none}
body[data-view="werk"] .on-lime,body[data-view="person"] .on-lime{display:block}

.wrap{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));max-width:1280px;margin-inline:auto;box-sizing:border-box}

/* Kopf */
header.site{position:relative;padding-block:10px 0;display:grid;justify-items:center;gap:10px}
.logo{color:var(--logo-fg);display:block;width:min(479px,100%);transition:color .35s}
.logo svg{display:block;width:100%;height:auto}
.logo svg .cls-3{fill:currentColor}
nav.main{display:flex;justify-content:space-between;width:min(479px,100%);font-size:clamp(13px,1.5vw,19px);text-transform:uppercase}
nav.main a{text-decoration:none;color:var(--nav-fg);transition:color .2s}
nav.main a[aria-current="page"],nav.main a:hover{color:var(--nav-active)}
.donate{position:absolute;right:max(16px, env(safe-area-inset-right, 0px));top:18px;display:block;transition:transform .2s}
.donate img{height:clamp(30px,3.6vw,46px);width:auto}
.donate:hover,.donate[aria-current="page"]{transform:rotate(-3deg)}
@media (max-width:700px){.donate{position:static;justify-self:end}.donate img{height:26px}}

/* Collage-Leinwand */
.canvas{position:relative;width:100%;aspect-ratio:1280/var(--ch);max-width:100%}
.canvas>*{position:absolute;left:calc(var(--x) / 1280 * 100%);top:calc(var(--y) / var(--ch) * 100%);width:calc(var(--w) / 1280 * 100%);height:calc(var(--h) / var(--ch) * 100%)}
.tile{display:block;border:0;padding:0;margin:0;cursor:grab;background:var(--c);transition:box-shadow .25s ease;text-decoration:none;-webkit-user-drag:none;user-select:none}
/* Hover: Leuchten wie im Figma-Mockup */
.tile:hover,.tile:focus-visible,.tile.dragging{box-shadow:0 0 34px 0 var(--glow)}
.tile.dragging{cursor:grabbing;transition:none}
@media (hover:none){.tile{cursor:pointer}}
.tile{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tile.lifted{transform:scale(1.04);transition:transform .15s ease,box-shadow .15s ease}
.tile>span{position:absolute;left:8px;bottom:6px;right:8px;text-align:left;font:400 11px/1.25 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.tile.lightc>span{color:rgba(0,0,0,.65)}
.tile .who{display:block;font-weight:700}
.announce{font-size:clamp(19px,3.2vw,41px);color:var(--lime);text-align:center;line-height:1.3;margin:0;z-index:100000;pointer-events:none}
@media (max-width:700px){
  .canvas{aspect-ratio:375/var(--mch)}
  .canvas>*{left:calc(var(--mx) / 375 * 100%);top:calc(var(--my) / var(--mch) * 100%);width:calc(var(--mw) / 375 * 100%);height:calc(var(--mh) / var(--mch) * 100%)}
  .canvas>.m-hide{display:none}
}

/* Werk- & Personen-Detail */
.feature{display:grid;grid-template-columns:409fr 640fr;gap:clamp(20px,4vw,51px);align-items:end;padding-block:60px 40px;position:relative}
.feature .img{aspect-ratio:409/516;background:var(--c);position:relative}
.ph-label{position:absolute;left:10px;bottom:8px;font:400 11px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.facts{min-width:0;font-size:clamp(15px,1.5vw,19px);line-height:1.25;display:grid;gap:16px;justify-items:start}
.facts p{margin:0}
.facts .up{text-transform:uppercase}
.facts .note{line-height:1.3;max-width:46ch;font-size:clamp(14px,1.3vw,17px)}
.cr{font-size:12px;line-height:1.35;color:var(--ink-soft);max-width:52ch}
.facts .links{display:flex;gap:18px;flex-wrap:wrap}
.textlink{color:var(--green);text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.close{position:absolute;right:4%;top:20px;font:400 34px/1 var(--f-body);background:none;border:0;cursor:pointer;color:var(--ink);padding:4px 8px;text-decoration:none}
.person{grid-template-columns:581fr 490fr}
.person .img{aspect-ratio:581/386}
.person .bio{text-align:justify;hyphens:auto;max-width:52ch;line-height:1.3;font-size:clamp(14px,1.3vw,17px)}
.more-title{text-transform:uppercase;font-size:clamp(13px,1.4vw,17px);letter-spacing:.06em;margin:0 0 10px}
@media (max-width:700px){
  .feature,.person{grid-template-columns:1fr;padding-block:40px 24px;gap:20px}
  .close{top:6px;right:0}
}

/* Raum */
.raum{padding-block:40px 60px;display:grid;gap:clamp(28px,4vw,48px)}
.raum-strip{display:flex;overflow-x:auto;padding-bottom:8px;scrollbar-color:var(--lime) transparent}
/* Panorama: feste Mindesthöhe – auf kleinen Screens wird ein Ausschnitt gezeigt statt verkleinert */
.raum-strip img{flex:0 0 auto;height:clamp(340px,36vw,460px);width:auto;max-width:none;margin-inline:auto}
.raum-strip{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}
.raum-strip.dragging{cursor:grabbing}
.raum-strip img{-webkit-user-drag:none;pointer-events:none}
.raum-strip.no-overflow{cursor:default}
.raum-strip.no-overflow+.drag{visibility:hidden}
.tile.has-img{background-image:var(--bg-img);background-size:cover;background-position:center;background-repeat:no-repeat}
.tile.fit{background-size:contain;background-color:#000;image-rendering:pixelated}
.tile.has-img>span{left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));color:#fff}
.feature .img.has-img{background:var(--c) var(--bg-img) center/cover no-repeat}
.feature .img.has-img.fit{background-size:contain;background-color:#000;image-rendering:pixelated}
.feature .img.has-img .ph-label{display:none}
.feature .img.pix{image-rendering:pixelated}
/* Bilder mit Nutzungsauflage (keine Bearbeitung): Originalformat, kein Beschnitt */
.tile.keep,.feature .img.keep{background-size:contain;background-color:transparent}
.tile.has-img.fit>span,.tile.has-img.keep>span{top:100%;bottom:auto;left:0;right:auto;max-width:100%;padding:5px 0 0;background:none;color:var(--page-fg)}
.about .img img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.drag{text-align:center;text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:var(--ink-soft);margin:-24px 0 0}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.offers h2{font-size:clamp(17px,1.6vw,21px);font-weight:400;text-transform:uppercase;margin:0 0 10px;color:var(--green);text-wrap:balance}
.offers p{margin:0;line-height:1.4;max-width:42ch}
.inline-join{background:none;border:0;padding:0;font:inherit;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.write{display:grid;gap:8px;justify-items:start}
.write a img{height:clamp(40px,4.6vw,58px);width:auto}
.write a:hover img{transform:rotate(-2deg)}
.mail-plain{font-size:13px;letter-spacing:.04em;user-select:all}
@media (max-width:760px){.offers{grid-template-columns:1fr}}

/* Über uns */
.about{display:grid;grid-template-columns:548fr 533fr;gap:clamp(20px,3vw,39px);align-items:center;padding-block:clamp(40px,10vw,130px) clamp(40px,12vw,200px)}
.about .img{aspect-ratio:548/411;background:var(--c);position:relative}
.about .text{min-width:0;font-size:15px;line-height:1.35;display:grid;gap:14px}
.about .text p{margin:0;max-width:56ch}
.inline-join.on-green{color:var(--lime)}
@media (max-width:700px){.about{grid-template-columns:1fr}}

/* Spenden */
.give{padding-block:50px 70px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.give h2{margin:0 0 14px}
.give h2 img{height:clamp(46px,5vw,64px);width:auto}
.give .lead{margin:0 0 18px;line-height:1.4;max-width:46ch}
.bank{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px}
.bank dt{text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--ink-soft);padding-top:2px}
.bank dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.copy{margin-top:16px;background:var(--green);color:var(--lime);border:0;font:inherit;text-transform:uppercase;font-size:14px;padding:8px 12px;cursor:pointer}
.need{list-style:none;margin:0;padding:0;display:grid}
.need li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding:10px 0;text-transform:uppercase;font-size:clamp(15px,1.4vw,18px)}
.need li small{text-transform:none;font-size:13px;color:var(--ink-soft);text-align:right}
.need li.ph{color:#9aa07a}
.member{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 30px;align-items:baseline}
.member p{margin:0;max-width:62ch;line-height:1.45}
.member-text{display:grid;gap:10px;flex:1 1 420px;min-width:0}
.member-h{margin:0;font-size:clamp(17px,1.6vw,21px);font-weight:400;text-transform:uppercase;color:var(--green)}
.btn-join{background:var(--green);color:var(--lime);border:0;font:inherit;text-transform:uppercase;font-size:15px;padding:12px 16px;cursor:pointer;align-self:end}
.btn-join:hover{background:#1f4521}
@media (max-width:760px){.give{grid-template-columns:1fr}}

/* Impressum */
.imprint{text-align:center;font-size:clamp(14px,1.5vw,19px);line-height:1.35;padding-block:clamp(60px,14vw,170px) clamp(80px,22vw,330px);display:grid;gap:18px;justify-items:center}
.imprint p{margin:0}
.ph-text{opacity:.45}

/* Fuß */
footer.site{position:relative;margin-top:10px;background:var(--fade)}
footer.site .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-block:58px 10px}
.contact{display:flex;gap:clamp(16px,5vw,64px);flex-wrap:wrap;text-transform:uppercase;font-size:clamp(12px,1.5vw,19px);color:var(--foot-fg);min-width:0}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline}
.imp-link img{height:clamp(26px,3.2vw,41px);width:auto}
@media (max-width:700px){footer.site .wrap{padding-block:40px 10px}.contact{gap:4px 14px;font-size:11px}}


/* Mitgliedsantrag */
.join-card{display:block;width:min(760px,100%);padding:44px clamp(16px,4vw,44px) 32px}
.join-title{margin:0 0 4px;font-size:clamp(20px,2.2vw,28px);font-weight:400;text-transform:uppercase;color:var(--green)}
.join-sub{margin:0 0 20px;font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.jf{border:0;border-top:1px solid var(--line);margin:0;padding:18px 0;display:grid;gap:12px;min-width:0}
.jf legend{padding:0;margin-bottom:10px;text-transform:uppercase;font-size:13px;letter-spacing:.08em;color:var(--green);float:left;width:100%}
.opt-l{text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.seg{display:flex;flex-wrap:wrap;gap:10px 24px}
.seg label,.chk,.opt{display:flex;gap:10px;align-items:flex-start;line-height:1.4;font-size:15px;cursor:pointer}
.chk{font-size:13.5px}
.chk a{color:var(--green)}
.textlink.plain{text-transform:none}
.opt{padding:12px;border:1px solid var(--line)}
.opt:has(input:checked){border-color:var(--green);background:rgba(204,217,50,.12)}
input[type=radio],input[type=checkbox]{accent-color:var(--green);width:18px;height:18px;flex:0 0 auto;margin:2px 0 0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.fld{display:grid;gap:4px;font-size:13px;color:var(--ink-soft);min-width:0}
.fld.wide{grid-column:1/-1}
.fld input{font:inherit;font-size:16px;color:var(--ink);border:0;border-bottom:1.5px solid var(--ink);padding:6px 0;background:transparent;border-radius:0;min-width:0}
.fld input:focus{outline:0;border-bottom-color:var(--green);box-shadow:0 2px 0 var(--lime)}
.fld input.bad{border-bottom-color:#b3261e}
.info{font-size:14px}
.info summary{cursor:pointer;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px}
.info ul{margin:6px 0 0;padding-left:18px;line-height:1.4}
.join-err{margin:6px 0 0;color:#b3261e;font-size:14px}
.join-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:16px}
.join-hint{font-size:13px;color:var(--ink-soft)}
#joinDone{display:grid;gap:16px}
#joinDone p{margin:0;line-height:1.45}
.draft-box{background:#f4f6dc;padding:12px 14px;font-size:13px}
.draft-box pre{white-space:pre-wrap;font:12px/1.45 ui-monospace,Menlo,monospace;margin:8px 0 0;max-height:220px;overflow:auto}
@media (max-width:600px){.grid2,.info-grid{grid-template-columns:1fr}}
/* Werk-Pop-up auf der Personenseite */
.lb{position:fixed;inset:0;z-index:200000;background:rgba(20,30,15,.55);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.lb-card{position:relative;background:var(--paper);color:var(--ink);width:min(1040px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:52px clamp(16px,3vw,32px) 28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;box-shadow:0 0 60px 0 rgba(204,217,50,.55)}
.lb figure{margin:0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(16px,3vw,36px);align-items:end;min-width:0}
.lb-img{min-width:0;display:flex;justify-content:center}
.lb-img img{max-width:100%;max-height:68vh;width:auto;height:auto;object-fit:contain}
.lb-img .lb-ph{width:100%;aspect-ratio:4/3;background:var(--c);display:grid;place-items:center;color:#fff;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lb figcaption{display:grid;gap:12px;font-size:clamp(14px,1.3vw,17px);line-height:1.3;min-width:0}
.lb figcaption p{margin:0}
.lb .up{text-transform:uppercase}
.lb .cr{color:var(--ink-soft)}
.lb .note{max-width:46ch}
.lb-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--ink);font:400 36px/1 var(--f-body);cursor:pointer;padding:4px 8px}
.lb-x:hover{color:var(--green)}
.lb-nav{background:none;border:0;color:var(--green);font:400 30px/1 var(--f-body);cursor:pointer;padding:8px}
.lb-nav:disabled{opacity:.2;cursor:default}
.lb-count{font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
@media (max-width:700px){.lb-card{grid-template-columns:1fr;padding-bottom:64px}.lb figure{grid-template-columns:1fr}.lb-img img{max-height:50vh}.lb-nav{position:absolute;bottom:10px}.lb-nav.prev{left:12px}.lb-nav.next{right:12px}}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Datenschutz */
.legal{max-width:760px;margin-inline:auto;padding-block:clamp(40px,8vw,90px) clamp(60px,10vw,120px);line-height:1.5;font-size:15px}
.legal h1{font-size:clamp(20px,2.2vw,28px);font-weight:400;text-transform:uppercase;color:var(--green);margin:0 0 20px}
.legal h2{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:28px 0 8px}
.legal p,.legal ul{margin:0 0 10px}
.legal .stand{color:var(--ink-soft);font-size:13px}
.foot-links{display:flex;gap:18px;align-items:flex-end}
.foot-links .small{font-size:13px;text-transform:uppercase;color:var(--foot-fg);text-decoration:none;padding-bottom:4px}
.foot-links .small:hover{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.foot-links{flex-shrink:0}
.imp-link img{flex:none;max-width:none}
@media (max-width:700px){footer.site .wrap{flex-wrap:wrap;row-gap:8px}.contact{flex:1 1 100%}.foot-links{margin-left:auto}}