/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;background:#f9f9f9;line-height:1.6}
img{max-width:100%;display:block}

/* ===== CONTAINER ===== */
.container{width:98%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== COLORS ===== */
:root{
  --brand:#c8102e;
  --brand-dark:#a20c21;
  --ink:#1e1e1e;
  --muted:#6b6b6b;
  --card:#ffffff;
  --border:#e7e7e7;
  --bg:#f9f9f9;
}

/* ===== HEADER + NAV ===== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eee}
.header-flex{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;position:relative}
.logo{max-height:80px;height:auto;display:block}
.menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;font-size:22px;border:0;background:transparent;cursor:pointer;color:#333}
.main-nav{display:none}
.main-nav.show{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;z-index:1000;border-top:1px solid rgba(0,0,0,.06);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.nav-list{list-style:none;margin:0;padding:.25rem .75rem;display:flex;flex-direction:column;gap:0}
.nav-item{position:relative}
.nav-link{display:block;padding:.9rem .5rem;text-decoration:none;color:#333;font-weight:600;background:transparent}
.site-header nav a:hover,.nav-link:hover,.nav-link:focus{color:#007BFF;background:transparent}
.submenu{display:none;margin:0;padding:.25rem 0;list-style:none}
.nav-item.open>.submenu{display:block}
.submenu .nav-link{display:block;padding:.6rem .5rem;padding-left:1.25rem}
.main-nav.show .nav-list{flex-direction:column;align-items:stretch;gap:0}
.main-nav.show .nav-item{width:100%}
.main-nav.show .nav-link{padding:.9rem 0;width:100%;justify-content:space-between}

/* ===== BUTTONS ===== */
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:10px;padding:12px 18px;transition:transform .05s ease, filter .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.96)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:#1e1e1e}
.btn-ghost:hover{background:#fff}
.btn-small{padding:9px 14px;border-radius:8px;font-weight:600}

/* ===== HERO (ohne Overlay) ===== */
.hero{position:relative}
.hero-media{
  height:44vh;min-height:280px;background:#ddd center/cover no-repeat;
  /* Neu: Bild kommt aus CSS-Variable --hero, die du in der HTML setzt */
  background-image: var(--hero, url(""));
  filter:saturate(1.05);
}
.hero-content{position:relative;margin-top:-72px}
.hero h1{color:#111;font-size:clamp(1.8rem,3.5vw,3rem);margin-bottom:.25rem;text-shadow:none}
.hero p{color:#333;max-width:720px}

/* Weißer, kräftiger Text */
.hero-light h1{ color:#fff; font-weight:800; letter-spacing:.2px; text-shadow:0 2px 18px rgba(0,0,0,.45) }
.hero-light p{ color:#f1f3f5; text-shadow:0 1px 12px rgba(0,0,0,.35) }

/* Nur hinter dem Text ein transparenter „Chip“ – kein Voll-Overlay */
.hero-light .hero-content{
  display:inline-block;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
}

/* Ghost-Button auf Bild */
.hero-light .btn-ghost{
  border-color:rgba(255,255,255,.75);
  color:#fff;
}
.hero-light .btn-ghost:hover{ background:rgba(255,255,255,.08) }

.hero-media::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:40%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}


/* ===== INFOBAR ===== */
.infobar{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.infobar-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 0}
.info .label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:2px}
.info .value{font-weight:700}
#openState{font-weight:700}
#openState.is-open{color:#2e7d32}

/* ===== GALLERY ===== */
.gallery{margin:28px auto}
.gallery-main{aspect-ratio:16/9;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.gallery-video,.gallery-image{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{margin-top:10px;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;overflow:auto;scroll-snap-type:x mandatory;padding:6px}
.thumb{border:1px solid var(--border);background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;scroll-snap-align:center}
.thumb img{height:68px;width:auto;display:block}
.gallery-main{ aspect-ratio:16/9; background:#000; border:1px solid var(--border); border-radius:12px; overflow:hidden }
.gallery-video{ width:100%; height:100%; object-fit:cover; background:#000 } /* falls Poster mal nicht greift */


/* ===== FEATURES ===== */
.features{margin:34px auto}
.features h2{font-size:1.7rem;margin-bottom:12px;text-align:center}
.feature-grid{display:grid;grid-template-columns:1fr;gap:12px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}

/* ===== HOURS ===== */
.hours{margin:28px auto}
.hours h2{font-size:1.7rem;margin-bottom:12px;text-align:center}
.hours-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.hours-table th,.hours-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.hours-table tr:last-child td{border-bottom:0}
.hours-note{color:var(--muted);margin-top:8px;text-align:center}
#openState.is-open { color:#2e7d32 }  /* Grün bei geöffnet */
#openState { color:#b00020; } /* Rot bei geschlossen */



/* ===== TEAM ===== */
.team{margin:34px auto}
.team h2{font-size:1.7rem;margin-bottom:12px;text-align:center}
.team-photo{margin:0 0 16px 0}
.team-photo img{width:100%;border-radius:12px;border:1px solid var(--border);object-fit:cover}
.team-photo figcaption{color:var(--muted);font-size:.92rem;margin-top:6px;text-align:center}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.person{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;text-align:center;padding-bottom:10px}
.person img{aspect-ratio:1/1;object-fit:cover}
.person h3{margin-top:8px;font-size:1rem}
.person .role{color:var(--muted);font-size:.9rem}

/* ===== MAP (ohne Embed) ===== */
.map-wrap{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0;margin-top:24px}
.map-wrap h2{font-size:1.7rem;margin-bottom:12px;text-align:center}
.map-card{display:grid;gap:12px}
.map-static{width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:12px;object-fit:cover}
.map-meta{background:#fff}
.map-actions{display:flex;gap:10px;margin-top:6px}

/* ===== FAQ (größer, ohne Schatten) ===== */
.faq{margin:34px auto}
.faq h2{font-size:1.8rem;margin-bottom:16px;text-align:center}
.accordion .item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:12px}
.accordion .toggle{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:18px 18px;
  font-weight:800;
  font-size:1.15rem;
  line-height:1.35;
  cursor:pointer;
}
.accordion .toggle:hover{background:#f7f7f7}
.accordion .content{
  max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
  padding:0 18px;
}
.accordion .toggle.active + .content{padding:0 18px 14px}
.accordion .content p{margin:12px 0;color:#333;font-size:1rem}

/* ===== STICKY CTA ===== */
.sticky-cta{position:sticky;bottom:12px;display:flex;justify-content:center;margin:24px 0 12px;z-index:5}
.sticky-cta .btn{box-shadow:0 10px 24px rgba(200,16,46,.18)}

/* ===== FOOTER ===== */
.site-footer{background:#fff;color:#555;border-top:1px solid #e0e0e0;padding:40px 20px 20px;margin-top:60px}
.footer-flex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;max-width:1200px;margin:0 auto}
.footer-info,.footer-kontakt,.footer-links{flex:1 1 200px}
.footer-logo{max-width:120px;margin-bottom:10px;display:block}
.site-footer a{color:#666;text-decoration:none}
.site-footer a:hover{color:var(--brand);text-decoration:underline}
.copyright{text-align:center;margin-top:30px;font-size:.9rem;color:#888}

/* ===== RESPONSIVE ===== */
@media (min-width:720px){
  .infobar-grid{grid-template-columns:2fr 1fr 1fr auto;align-items:center}
  .feature-grid{grid-template-columns:repeat(4,1fr)}
  .map-card{grid-template-columns:1.2fr .8fr;align-items:start}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .hero-media{height:52vh;min-height:360px}
}