/* Grabmale Strässer – statische Seite. Schrift: Open Sans (lokal, SIL OFL). */

@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/open-sans-normal-latin-ext-300-800.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/open-sans-normal-latin-300-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --red:#a8181e;
  --text:#3f3f3f;
  --faded:#868988;
  --sp:21px;            /* Absatzabstand (1,5 x Schriftgröße) */
  --pad-x:35px;         /* seitlicher Abstand der Bereiche */
  --hdr-top:40px;       /* Höhe der Kontaktleiste oben */
  --hdr-mid:80px;       /* Höhe der Menüleiste */
  --hdr-x:35px;
  --logo-w:87px;
  --pad-small:28px;
  --pad-medium:56px;
  --fs-h2:34px;--fs-h3:28px;--fs-h4:24px;
  --lh:24px;--ci:49px;--cgap:18.2px;--cmr:14px;--hpt:21px;--fsp:21px;--fmb:14px;--fli:19.6px;--fliMb:7px;--fpad:45px;
}
@media (max-width:1024px){
  :root{--hdr-top:36px;--hdr-x:14px;--logo-w:58px;--pad-medium:35px}
}
@media (max-width:600px){
  :root{--sp:24px;--pad-x:24px;--hdr-mid:50px;--hdr-x:16px;--logo-w:44px;--pad-small:24px;--pad-medium:24px;--lh:28px;--ci:56px;--cgap:20.8px;--cmr:16px;--hpt:16px;--fsp:16px;--fmb:16px;--fli:22px;--fliMb:8px;--fpad:44px;--fs-h2:26px;--fs-h3:24px;--fs-h4:22px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#f2f2f2;color:var(--text);font:400 14px/24px "Open Sans",Arial,Helvetica,sans-serif;overflow-wrap:break-word}
@media (max-width:600px){body{font-size:16px;line-height:28px}}
img{max-width:100%;height:auto;border:0}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:#fff;color:var(--red);padding:8px 14px;border:2px solid var(--red)}
.skip-link:focus{top:8px}

.canvas{background:#fff}

/* ---------- Überschriften & Text ---------- */
h1,h2,h3,h4{margin:0 0 var(--sp);color:var(--red);font-weight:400;hyphens:auto;-webkit-hyphens:auto}
h1,h2{font-size:var(--fs-h2);line-height:1.2}
h3{font-size:var(--fs-h3);line-height:1.2}
h4,.h4{font-size:var(--fs-h4);line-height:1.2}
.h3{font-size:var(--fs-h3);line-height:1.2}
p{margin:0 0 var(--fsp)}
p.gap{margin-bottom:var(--sp)}
.nomb{margin-bottom:0!important}
.tw>:last-child{margin-bottom:0}
.tw>*+h2{padding-top:var(--hpt)}
.flow>h2+h3{padding-top:0}
.flow>h3.keep-pt{padding-top:var(--hpt)}
.center{text-align:center}
.flow>:first-child{margin-top:0}
.flow>:last-child{margin-bottom:0}
/* Überschriften nach einem anderen Element: zusätzlicher Abstand oben (wie im Original) */
.flow>*+h1,.flow>*+h2,.flow>*+h3,.flow>*+h4{padding-top:var(--hpt)}
.lead{margin-top:var(--sp)!important;padding-top:var(--hpt)!important}
.spacer-top{padding-top:calc(var(--sp) + var(--lh))}  /* früher: unsichtbarer Punkt als Abstandshalter */

/* ---------- Kopfbereich ---------- */
.site-header{position:sticky;top:calc(-1 * var(--hdr-top));z-index:100;background:#fff}
.topbar{height:var(--hdr-top);background:#f2f2f2;color:var(--faded);font-size:13px;line-height:20px}
.topbar .in{height:100%;display:flex;align-items:center;gap:19px}
.topbar a,.topbar span.item{display:inline-flex;align-items:center;gap:5px;color:var(--faded)}
.topbar a:hover{color:var(--red)}
.topbar svg{width:13px;height:13px;flex:none}
.mainbar{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.mainbar .in{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:var(--hdr-mid)}
.in{max-width:calc(1140px + 2 * var(--hdr-x));margin:0 auto;padding:0 var(--hdr-x)}
.logo{display:block;line-height:0}
.logo img{width:var(--logo-w);height:auto;aspect-ratio:266/183}

.nav-toggle{position:absolute;opacity:0;width:44px;height:44px;right:0;top:calc(var(--hdr-mid) / 2);margin:-22px 0 0;cursor:pointer;z-index:2}
.hamburger{display:none;position:absolute;right:0;top:calc(var(--hdr-mid) / 2);width:44px;height:44px;margin-top:-22px;cursor:pointer}
.hamburger span{position:absolute;left:14px;top:20px;width:16px;height:3px;background:var(--faded);box-shadow:0 -6px 0 var(--faded),0 6px 0 var(--faded)}
.nav-toggle:focus-visible~.hamburger{outline:2px solid var(--red);outline-offset:-2px}
.nav-toggle:checked~.hamburger span{box-shadow:none}
.mainbar nav{margin-left:auto}
.nav-list{list-style:none;margin:0;padding:0;display:flex}
.nav-list a{display:block;padding:0 12px;line-height:50px;font-size:16px;color:var(--faded);position:relative}
.nav-list a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--red)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--red)}
@media (prefers-reduced-motion:reduce){.nav-list a::after{transition:none}}

@media (max-width:900px){
  .hamburger{display:block}
  .mainbar nav{flex-basis:100%;width:100%;margin-left:0}
  .nav-list{display:none;flex-direction:column;width:100%;background:#fff;border-top:1px solid #e8e8e8;max-height:calc(100vh - var(--hdr-mid) - var(--hdr-top));overflow-y:auto}
  .nav-list a{padding:0;line-height:50px;font-size:16px}
  .nav-list li:last-child a{border-bottom:0}
  .nav-list a::after{display:none}
  .nav-toggle:checked~nav .nav-list{display:flex}
  .mainbar .in{height:auto;min-height:var(--hdr-mid)}
  .mainbar .logo{height:var(--hdr-mid);display:flex;align-items:center}
}

/* ---------- Bereiche ---------- */
.sec{padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec--auto{padding-top:0;padding-bottom:0}
.sec--small{padding-top:var(--pad-small);padding-bottom:var(--pad-small)}
.sec--medium{padding-top:var(--pad-medium);padding-bottom:var(--pad-medium)}
.sec__in{max-width:1140px;margin:0 auto}
.sec--bg{background-repeat:no-repeat;background-position:center;background-size:cover}
.sec--ausstellung{background-image:url("../img/home-ausstellung.jpg");padding-top:140px;padding-bottom:210px}
.sec--innen{background-image:url("../img/home-innen.jpg");padding-top:130px;padding-bottom:130px}
@media (max-width:1024px){.sec--innen{padding-top:9vw;padding-bottom:9vw}}
@media (max-width:900px){.sec--innen{padding-top:35px;padding-bottom:35px;min-height:170px}}
@media (max-width:600px){.sec--innen{padding-top:54px;padding-bottom:54px;min-height:170px}}

.hero{background:#e9e9e9;text-align:center}
.hero img{display:block;width:100%;height:auto;aspect-ratio:32/12;max-height:360px;margin:0 auto;object-fit:cover;object-position:50% 0}

.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px}
.cols--tight{gap:42px}
.cols>*>:last-child{margin-bottom:0}
.home-intro{padding-top:25px}
.home-intro h1{margin-top:var(--sp)}
.home-images img{display:block;width:100%;height:auto;aspect-ratio:640/368}
@media (max-width:767px){
  .cols{grid-template-columns:minmax(0,1fr);gap:var(--sp)}
}

/* ---------- Galerie mit CSS-Lightbox ---------- */
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.gallery a{display:block;aspect-ratio:1;overflow:hidden;background:#f2f2f2}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery a:hover img,.gallery a:focus-visible img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}}
@media (max-width:1024px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lightbox{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.88);align-items:center;justify-content:center}
.lightbox:target{display:flex;animation:lb-in .2s ease-out}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lightbox:target{animation:none}}
.lightbox img{max-width:min(92vw,1100px);max-height:86vh;width:auto;height:auto;display:block;box-shadow:0 0 30px rgba(0,0,0,.5)}
.lightbox a.lb-close,.lightbox a.lb-prev,.lightbox a.lb-next{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;font-size:34px;line-height:1;background:rgba(0,0,0,.35);border-radius:50%}
.lightbox a.lb-close:hover,.lightbox a.lb-prev:hover,.lightbox a.lb-next:hover{background:rgba(255,255,255,.25);color:#fff}
.lightbox a:focus-visible{outline-color:#fff}
.lb-close{top:14px;right:14px}
.lb-prev{left:10px;top:50%;margin-top:-24px}
.lb-next{right:10px;top:50%;margin-top:-24px}
.lb-bg{position:absolute;inset:0;cursor:default}

/* ---------- Kontakt ---------- */
.contact-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:42px;align-items:start}
@media (max-width:767px){.contact-wrap{grid-template-columns:minmax(0,1fr)}}
.map-box{position:relative;min-height:380px;border:1px solid #e8e8e8;background:#f2f2f2;display:flex;align-items:center;justify-content:center;text-align:center}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-box.is-loaded{display:block}
.map-consent{padding:24px;max-width:460px}
.map-consent p{margin:0 0 12px}
.btn-map{background:var(--red);color:#fff;border:0;padding:12px 26px;font:inherit;cursor:pointer}
.btn-map:hover{background:var(--text)}
.map-alt{font-size:13px;margin:8px 0 0!important;text-align:right}
.contact-list{list-style:none;margin:var(--sp) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cgap)}
.contact-list li{display:flex;align-items:center;gap:var(--cmr);min-height:var(--ci)}
.contact-list .ci{flex:none;display:flex;align-items:center;justify-content:center;width:var(--ci);height:var(--ci);border:2px solid var(--red);border-radius:50%;color:var(--red)}
.contact-list .ci svg{width:calc(var(--ci) * .4);height:calc(var(--ci) * .4)}

/* ---------- Öffnungszeiten ---------- */
.hours-title{font-size:var(--fs-h4);line-height:1.2;margin-bottom:var(--sp)}
.hours-title span{font-size:16px}

/* ---------- Fuß ---------- */
.site-footer{background:#3f3f3f;color:#e8e8e8}
.foot-top{padding:var(--pad-medium) var(--pad-x)}
.foot-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:62px}
@media (max-width:767px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp)}}
.foot-title{margin:0 0 var(--fmb);color:#ccc;font-size:var(--fs-h4);line-height:1.2;font-weight:400}
.foot-col p{margin:0 0 var(--fsp)}
.foot-col>p:last-child{margin-bottom:0}
.foot-col .pad-end{padding-bottom:var(--fpad)}
.foot-col .pad-end-m{padding-bottom:0}
.foot-menu{list-style:none;margin:0;padding:0}
.foot-menu li{line-height:var(--fli);margin:0 0 var(--fliMb)}
.foot-menu li:last-child{margin-bottom:0}
.foot-menu a{color:#e8e8e8}
.site-footer a:hover,.foot-mail:hover{color:#fff;text-decoration:underline}
.foot-menu a:hover{color:#fff;text-decoration:underline}
.foot-bottom{background:#706c70;padding:28px var(--pad-x);text-align:center}
.foot-bottom p{margin:0;color:#e8e8e8}
@media (max-width:600px){.foot-bottom{padding:24px var(--pad-x)}}

/* ---------- Cookie-Hinweis ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#000;color:#fff;font:400 13px/1.4 -apple-system,BlinkMacSystemFont,Arial,Roboto,"Helvetica Neue",sans-serif;animation:cookie-in .4s ease-out}
.cookie[hidden]{display:none}
@keyframes cookie-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cookie{animation:none}}
.cookie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;padding:15px 50px 15px 25px;text-align:center}
.cookie-text{margin:0}
.cookie-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cookie .btn{display:inline-block;padding:10.4px 23.4px;background:#f0f0f0;color:#000;border:0;border-radius:0;font:inherit;cursor:pointer;line-height:15px}
.cookie .btn:hover{background:#fff;color:#000}
.cookie .x{position:absolute;top:50%;right:20px;width:20px;height:20px;margin-top:-10px;padding:0;border:0;background:none;color:#fff;cursor:pointer;opacity:.6}
.cookie .x:hover{opacity:1}
.cookie .x::before,.cookie .x::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;background:currentColor;transform:rotate(45deg)}
.cookie .x::after{transform:rotate(-45deg)}
.cookie :focus-visible{outline-color:#fff}
@media (max-width:600px){.cookie-in{padding:15px 25px;flex-direction:column}.cookie .x{top:12px;margin-top:0;right:12px}}

/* ---------- 404 ---------- */
.notfound{text-align:center}