@font-face{font-family:"Alegreya Sans";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/alegreya-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/alegreya-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/alegreya-sans-latin-700-normal.woff2) format("woff2")}
:root{--blau:#004f79;--gruen:#7ba02d;--gruen-dunkel:#1f2e06;--gruen-text:#4a6612;--text:#262626;--sand:#f5f5ed;--rand:#767676;--serif:"Alegreya Sans","Gill Sans","Trebuchet MS",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.25rem/1.55 var(--serif);color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration:underline;text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #0a6cb0;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--blau);color:#fff;padding:.6rem 1rem;z-index:10;transition:top .15s}
.skip:focus{top:.5rem}
.wrap{width:min(100% - 2rem,1200px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1;color:var(--blau);letter-spacing:-.015em}
h1{font-size:clamp(3rem,9vw,7rem);margin:0 0 1.25rem}
h2{font-size:clamp(2.6rem,6.5vw,5rem);margin:0 0 1.25rem}
h3{font-size:1.6rem;font-weight:400;margin:0;letter-spacing:0;line-height:1.15}
p{margin:0 0 1rem}
.lead{font-size:1.5rem;line-height:1.45;max-width:40rem}

/* Kopf */
.kopf{background:#fff;border-bottom:1px solid #e3e3da}
.kopf-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding:.9rem 0}
.marke img{width:clamp(140px,18vw,190px);height:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 2rem}
nav a{display:inline-block;padding:.65rem 0;min-height:44px;font-size:1.2rem;text-decoration:none;color:var(--blau);border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--blau)}

/* Kacheln */
.kachel{min-width:0}
.kachel-blau{background:var(--blau);color:#fff}
.kachel-blau h1,.kachel-blau h2,.kachel-blau a{color:#fff}
.kachel-gruen{background:var(--gruen);color:var(--gruen-dunkel)}
.kachel-gruen h1,.kachel-gruen h2,.kachel-gruen a{color:var(--gruen-dunkel)}
.kachel-sand{background:var(--sand);color:var(--text)}
.kachel-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-text{padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center}
.hero-bild{min-height:300px}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.kachel-reihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.kachel-reihe li a{display:flex;flex-direction:column;gap:.25rem;min-height:190px;padding:1.75rem clamp(1.25rem,3vw,2.5rem);text-decoration:none;position:relative}
.kachel-reihe .klein{font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.kachel-reihe .gross{font-size:clamp(2rem,3.6vw,3rem);font-weight:300;line-height:1.05;margin-top:auto}
.kachel-reihe .pfeil{position:absolute;right:1.5rem;top:1.25rem;font-size:1.8rem;transition:transform .2s}
.kachel-reihe a:hover .pfeil{transform:translateX(.35rem)}
.kachel-sand a{color:var(--blau)}
.kachel-sand .gross{color:var(--blau)}

/* Aktionsbereich (Fest / Advent / ruhig) */
.aktion[hidden]{display:none}
.aktion{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.aktion-text{padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,4rem)}
.aktion-text h2{color:inherit}
.kachel-sand.aktion-text h2{color:var(--blau)}
.ueber{font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.motiv{background:#fff;border-top:1px solid #e3e3da;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.5rem);background:var(--sand)}
.motiv img{flex:1 1 260px;min-width:0;width:auto;height:auto;max-width:100%;max-height:min(75vh,680px);object-fit:contain;box-shadow:0 2px 14px rgba(0,0,0,.12)}
.motiv-ruhe img{box-shadow:none}
.aktion-mehr{grid-column:1/-1;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,4rem);background:#fff}
.aktion-mehr img{width:100%;height:auto;border:1px solid #ddd}
.aktion-mehr h3{margin:2.5rem 0 .75rem;font-size:2.2rem;font-weight:300;color:var(--blau)}
.aktion-mehr .breit{max-width:1200px;margin-top:1rem}
.knopf{display:inline-block;background:var(--gruen-dunkel);color:#fff!important;padding:.8rem 1.6rem;text-decoration:none;border:2px solid var(--gruen-dunkel);min-height:44px;font-size:1.15rem}
.knopf:hover{background:transparent;color:var(--gruen-dunkel)!important}
.kachel-blau .knopf{background:#fff;color:var(--blau)!important;border-color:#fff}
.ph,.ph-note{background:#fff3b0;color:#262626;padding:.1rem .4rem}
.ph-note{display:block;padding:.6rem .85rem;border-left:4px solid #8a6d00;margin:1.25rem 0;font-size:1.05rem}

/* Betriebe */
section.wrap{padding:clamp(3rem,7vw,6rem) 0 1rem}
.filter-leiste{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.75rem 0 .75rem}
.filter{font:400 1.1rem var(--serif);color:var(--blau);background:#fff;border:1.5px solid var(--blau);border-radius:999px;padding:.5rem 1.25rem;min-height:44px;cursor:pointer}
.filter:hover{background:var(--sand)}
.filter[aria-pressed="true"]{background:var(--blau);color:#fff}
.anzahl{margin:.5rem 0 1.25rem;color:var(--gruen-text);font-size:1.1rem}
.raster{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.karte{background:var(--sand);display:flex;flex-direction:column}
.karte[hidden]{display:none}
.logo{background:#fff;border:1px solid #e3e3da;border-bottom:0;display:flex;align-items:center;justify-content:center;height:130px;padding:.75rem}
.logo img{width:auto;max-width:100%;max-height:104px;object-fit:contain}
.karte .text{padding:1.1rem 1.25rem 1rem;display:flex;flex-direction:column;flex:1;border-top:4px solid var(--gruen)}
.karte p{margin:.2rem 0}
.sub{font-weight:700}
.kat{color:var(--gruen-text);font-size:.95rem;text-transform:uppercase;letter-spacing:.07em}
address{font-style:normal}
.info{font-size:1.05rem}
.links{margin-top:auto!important;padding-top:.5rem;display:flex;gap:1.25rem;flex-wrap:wrap}
.links a{display:inline-block;padding:.6rem 0;min-height:44px}

/* Fuß */
.fuss{background:var(--blau);color:#fff;margin-top:clamp(3rem,7vw,6rem);padding:3rem 0 1rem}
.fuss a{color:#fff}
.fuss h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}
.fuss-in{display:grid;gap:2rem;grid-template-columns:minmax(0,223px) 1fr}
.fuss p{margin:.3rem 0}
.fuss-unten{border-top:1px solid rgba(255,255,255,.4);margin-top:2rem;padding-top:1rem;font-size:1.05rem}

@media (max-width:900px){
 .kachel-hero,.aktion{grid-template-columns:1fr}
 .kachel-reihe{grid-template-columns:1fr}
 .kachel-reihe li a{min-height:140px}
 .fuss-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.intro{padding:3rem 0}
/* v3: Kacheln vom Kopfbild abgesetzt, Bildbänder mit Parallax */
.kachel-reihe{width:min(100% - 2rem,1200px);margin:1.5rem auto 0;gap:1rem}
.kachel-reihe li{box-shadow:0 8px 26px rgba(0,38,60,.16)}
.aktion-bereich{margin-top:1.5rem}
.band{position:relative;overflow:hidden;height:clamp(240px,38vw,520px);background:#dfe3e6}
.band img{position:absolute;left:0;top:-12%;width:100%;height:124%;max-width:none;object-fit:cover;will-change:transform;transform:translate3d(0,var(--ty,0px),0)}
.band-unten{margin-top:clamp(3rem,7vw,6rem)}
@media (prefers-reduced-motion:reduce){.band img{top:0;height:100%;transform:none;will-change:auto}}
/* v4: Branchen-Menü als Kacheln (mitlaufend), Karten mit Pastellfläche, Fuß mit Sponsoren */
.filter-bar{position:sticky;top:0;z-index:20;background:#fff;padding:.75rem 0 .5rem;margin:1.25rem 0 1rem;border-bottom:1px solid #e3e3da}
.filter-leiste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;margin:0}
.filter-bar .anzahl{margin:.45rem 0 0;font-size:1rem}
.filter{display:flex;align-items:center;gap:.6rem;text-align:left;font:400 1.1rem/1.15 var(--serif);color:var(--k);background:var(--kp);border:2px solid var(--k);border-radius:0;padding:.5rem .8rem;min-height:64px}
.filter:hover{background:var(--kp);box-shadow:inset 0 0 0 2px var(--k)}
.filter[aria-pressed="true"]{background:var(--k);color:#fff}
.ico{flex:none;width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.filter .ico{width:30px;height:30px}
.filter[data-filter="alle"],.karte:not([data-kat]){--k:#333333;--kp:#e8e8e2}
.filter[data-filter="dienstleistungen"],.karte[data-kat="dienstleistungen"]{--k:#004f79;--kp:#d3e5f1}
.filter[data-filter="einzelhandel"],.karte[data-kat="einzelhandel"]{--k:#4a6612;--kp:#e1edc8}
.filter[data-filter="gastronomie"],.karte[data-kat="gastronomie"]{--k:#a63f1b;--kp:#f6dccd}
.filter[data-filter="gesundheitswesen"],.karte[data-kat="gesundheitswesen"]{--k:#0b6464;--kp:#cfe9e9}
.filter[data-filter="tanzschulen"],.karte[data-kat="tanzschulen"]{--k:#7a2d6e;--kp:#efd7eb}
.karte{background:var(--kp);border-top:5px solid var(--k)}
.karte .logo{margin:1rem 1rem 0;border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.karte .text{border-top:0;padding:1rem 1.25rem 1rem}
.kat{display:flex;align-items:center;gap:.5rem;color:var(--k);font-weight:700}
.kat .ico{width:1.5em;height:1.5em}
.logo-name{padding:.75rem 1rem}
.logo-name h3{font-size:1.55rem;font-weight:400;text-align:center;color:var(--blau);line-height:1.15}
.fuss{margin-top:0;padding-top:0}
.fuss-sponsoren{background:var(--sand);padding:clamp(2.5rem,6vw,4rem) 0}
.fuss .fuss-sponsoren h2{color:var(--blau);font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .75rem}
.fuss-sponsoren .breit{width:100%;max-width:1200px;height:auto;margin-top:1rem;border:1px solid #d8d8cf}
.fuss-in{padding-top:3rem}
.fuss .fuss-sponsoren p{color:var(--text)}
@media (max-width:900px){
 .filter-leiste{display:flex;overflow-x:auto;gap:.5rem;padding-bottom:.35rem;scroll-snap-type:x proximity}
 .filter{flex:0 0 auto;min-width:175px;scroll-snap-align:start;min-height:56px}
}
/* v5: weiße Logofläche über die volle Kartenbreite */
.karte .logo{margin:0;border:0;border-bottom:1px solid rgba(0,0,0,.14);box-shadow:none}
/* v6: pastellfarbene Fläche hinter den Betriebskästen (volle Breite) */
#mitglieder{background:#e6e3d8;box-shadow:0 0 0 100vmax #e6e3d8;clip-path:inset(0 -100vmax);padding-bottom:clamp(3rem,6vw,5rem)}
#mitglieder .filter-bar{background:#e6e3d8;border-bottom-color:rgba(0,0,0,.14)}
.karte{box-shadow:0 3px 10px rgba(40,30,10,.12)}
.band-unten{margin-top:0}
/* v7: Betriebslogos gleichwertig (Größe je Logo einzeln berechnet, inline), eher klein */
.karte .logo{height:112px;overflow:hidden}
.karte .logo img{width:auto;height:auto;max-width:none;max-height:none;flex:none}
.logo-name h3{font-size:1.45rem}
/* v8: kräftigere Branchenfarben, feine Linie + Balken unten, Rubrik nur als Icon im Kreis */
.filter[data-filter="alle"],.karte:not([data-kat]){--k:#333333;--kd:#333333;--kp:#e8e8e2}
.filter[data-filter="dienstleistungen"],.karte[data-kat="dienstleistungen"]{--k:#004f79;--kd:#004f79;--kp:#d3e5f1}
.filter[data-filter="einzelhandel"],.karte[data-kat="einzelhandel"]{--k:#7ba02d;--kd:#4a6612;--kp:#e6f0cf}
.filter[data-filter="gastronomie"],.karte[data-kat="gastronomie"]{--k:#f28c00;--kd:#a34a00;--kp:#fde5c6}
.filter[data-filter="gesundheitswesen"],.karte[data-kat="gesundheitswesen"]{--k:#00a3a8;--kd:#00666b;--kp:#cdeff0}
.filter[data-filter="tanzschulen"],.karte[data-kat="tanzschulen"]{--k:#e6007e;--kd:#a8005a;--kp:#fbd3e8}
.filter{border:1px solid var(--k);border-bottom:5px solid var(--k);color:var(--kd);background:var(--kp)}
.filter:hover{background:var(--kp);box-shadow:inset 0 0 0 1px var(--k)}
.filter[aria-pressed="true"]{background:var(--kd);color:#fff}
.links{align-items:center}
.kreis{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--k);color:var(--kd)}
.kreis .ico{width:24px;height:24px}
/* v9: Logos feiner abgestimmt (Wirkung statt nur Fläche), etwas höhere Logofläche */
.karte .logo{height:120px}
/* v10: Kachelreihe volle Breite mit schmalen weißen Linien, vierte Kachel Aktuelles, größeres Kopflogo */
.marke img{width:clamp(210px,30vw,340px)}
.kopf-in{padding:1.1rem 0}
.kachel-reihe{width:100%;max-width:none;margin:0;gap:3px;background:#fff;grid-template-columns:repeat(4,minmax(0,1fr))}
.kachel-reihe li{box-shadow:none}
.kachel-reihe li a{min-height:250px}
.kachel-reihe .gross{font-size:clamp(1.9rem,2.8vw,2.7rem)}
.kachel-tuerkis{background:#0b7c86;color:#fff}
.kachel-social{display:flex;flex-direction:column;gap:.25rem;min-height:250px;padding:1.75rem clamp(1.25rem,3vw,2.5rem)}
.kachel-social .social{display:flex;gap:.75rem;margin-top:1rem}
.kachel-reihe li.kachel-social .social a{min-height:0;padding:0;width:48px;height:48px;border-radius:50%;border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,color .2s}
.kachel-reihe li.kachel-social .social a:hover,.kachel-reihe li.kachel-social .social a:focus-visible{background:#fff;color:#0b7c86}
.kachel-social .ico{width:26px;height:26px}
@media (max-width:1100px){.kachel-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}.kachel-reihe li a,.kachel-social{min-height:200px}}
@media (max-width:600px){.kachel-reihe{grid-template-columns:1fr}.kachel-reihe li a,.kachel-social{min-height:150px}.marke img{width:clamp(190px,60vw,260px)}}
/* v11: weiße Linie zwischen Kopfbild und Kachelreihe, kräftigere Icon-Kreise */
.kachel-reihe{border-top:3px solid #fff}
.kachel-reihe li.kachel-social .social a{border-width:3px}
/* v12: Abstand unter der Kachelreihe wie darüber: 3 px weiße Linie */
.aktion-bereich{margin-top:0;border-top:3px solid #fff}
/* v13: Foto unten: 3 px weiße Linie statt großem Abstand */
.band-unten{margin-top:0;border-top:3px solid #fff}
/* v14: auch das mittlere Foto mit 3 px weißer Linie darüber */
.band{border-top:3px solid #fff}
/* v15: Fuß-Kontakt: Absatz nach E-Mail Vorstand, fette Rollen, Links nur bei Mouseover/Fokus unterstrichen */
.fuss-in p.abs{margin-bottom:1.25rem}
.fuss-in strong{font-weight:700}
.fuss-in a{text-decoration:none}
.fuss-in a:hover,.fuss-in a:focus-visible{text-decoration:underline;text-underline-offset:.15em}
/* v16: Standortkarte im Fuß (Klick-Lösung) */
.fuss-karte h3{color:#fff;font-size:1.6rem;font-weight:300;margin:1rem 0 .75rem}
.karte-box{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25rem;padding:1.5rem;background:rgba(255,255,255,.1);border:3px solid #fff}
.karte-box iframe{display:block;width:100%;height:400px;border:0}
.karte-box:has(iframe){padding:0;display:block;min-height:0}
.karte-laden{font:inherit;font-weight:700;background:#fff;color:var(--blau);border:3px solid #fff;padding:.7rem 1.5rem;cursor:pointer}
.karte-laden:hover,.karte-laden:focus-visible{background:var(--blau);color:#fff}
.karte-box a:hover,.karte-box a:focus-visible{text-decoration:underline}
/* v17: Standortkarte als eigener Bereich (sand) unter den Geschäftsleuten */
.standort{background:var(--sand);padding:clamp(2.5rem,6vw,4.5rem) 0;margin-top:clamp(3rem,7vw,6rem)}
.standort-in{width:min(100% - 2.5rem,1480px);margin:0 auto}
.standort h2{text-align:center;color:var(--blau);margin:0 0 1.5rem}
.standort .karte-box{min-height:500px;background:#fff;border:1px solid #d8d8cf;color:var(--text)}
.standort .karte-box:has(iframe){min-height:0;border:0;background:none}
.standort .karte-box iframe{height:500px}
.standort .karte-laden{background:var(--blau);color:#fff;border-color:var(--blau)}
.standort .karte-laden:hover,.standort .karte-laden:focus-visible{background:#fff;color:var(--blau)}
.standort .karte-box a{color:var(--blau)}
@media (max-width:600px){.standort .karte-box,.standort .karte-box iframe{min-height:380px;height:380px}}
/* v18: Ruhe-Modus: Foto statt Plakat, unteres Foto nur wenn eine Aktion aktiv ist */
.motiv-ruhe{padding:0;border-top:0;display:block;position:relative;min-height:300px}
.motiv-ruhe img{position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;flex:none;object-fit:cover}
:root[data-aktion="ruhe"] .band-unten{display:none}
.fuss{border-top:3px solid #fff}
@media (max-width:900px){.motiv-ruhe{min-height:240px}}
/* v19: Fußzeile: Copyright links, Impressum/Datenschutz rechts auf einer Höhe */
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 2rem}
.fuss-unten p{margin:0}
.fuss-unten p:last-child{text-align:right}
@media (max-width:700px){.fuss-unten p:last-child{text-align:left}}
/* v20: unteres Foto nur ausblenden, wenn der Aktionsbereich (mit Foto) offen ist */
:root[data-aktion="ruhe"]:not(.aktion-offen) .band-unten{display:block}
.aktion-bereich[hidden]{display:none}
html{scroll-padding-top:0}
/* v21: Standortbereich in derselben Hintergrundfarbe wie die Geschäftsleute, Leaflet-Karte */
.standort{background:#e6e3d8;margin-top:0;border-top:3px solid #fff}
.standort .karte-box.offen{display:block;min-height:0;padding:0;border:0;background:none}
.karte-karte{width:100%;height:500px;z-index:0}
@media (max-width:600px){.karte-karte{height:380px}}