/*
Theme Name: Gewerbeverein Marne
Theme URI: https://gewerbeverein-marne.de/
Author: Generated by ChatGPT
Author URI: https://openai.com/
Description: Schlichtes, responsives Theme für den Gewerbeverein Marne (einseitig + Events).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: gewerbeverein-marne
*/

body{font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;margin:0;color:#111}
.header{background:#f9f9f9;padding:1rem;border-bottom:1px solid #eee;position:sticky;top:0;z-index:1000}
.container{max-width:1000px;margin:0 auto;padding:1rem}
.footer{background:#f1f1f1;padding:1rem;border-top:1px solid #eee}
.nav a{margin-right:.5rem;text-decoration:none;color:#555}
.btn{display:inline-block;padding:.5rem .75rem;border-radius:6px;text-decoration:none;background:#0b66c3;color:#fff}
.card{background:#fff;border:1px solid #eee;padding:1rem;border-radius:8px;margin-bottom:1rem}
@media(max-width:700px){.nav{display:block}}

/* Sticky shadow on scroll */
.stuck{box-shadow:0 6px 12px rgba(0,0,0,.06)}

/* Mobile menu */
.menu-toggle{display:none;background:transparent;border:1px solid #ddd;border-radius:8px;padding:.4rem .6rem;font-size:1rem}
@media(max-width:780px){
  .menu-toggle{display:inline-block;margin-left:auto}
  .nav{display:none}
  .header.nav-open .nav{display:block;margin-top:.5rem}
  .header.nav-open .nav ul{display:flex;flex-direction:column;gap:.25rem}
  .nav a{display:block;padding:.4rem .5rem;border-radius:6px}
}

/* UX nav fix */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.nav li{margin:0}
.nav a{display:block;text-decoration:none;color:#444;padding:.5rem .75rem;border-radius:8px}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{background:#0b66c3;color:#fff}
.header .container{display:flex;align-items:center;gap:1rem}
.logo a{text-decoration:none;color:#0b66c3}
/* card polish */
.card{border-radius:10px;border:1px solid #e7e7e7;background:#fff}
.container{max-width:1100px}
h1,h2,h3{letter-spacing:.2px}

/* === Transparent hero header & single-line nav === */
.header{position:sticky;top:0;z-index:1000;transition:background .25s ease, box-shadow .25s ease}
.header.transparent{background:transparent;border-bottom-color:transparent}
.header.transparent .nav a{color:#fff}
.header.transparent .menu-toggle{color:#fff;border-color:rgba(255,255,255,.6)}
.header.scrolled{background:#fff;border-bottom:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.header .container{display:flex;align-items:center;gap:1rem}
.logo img{height:38px;width:auto;display:block}

/* Single-line nav: prevent wrapping on desktop */
@media(min-width: 900px){
  .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center;flex-wrap:nowrap;white-space:nowrap}
  .nav{max-width:100%;overflow:hidden}
  .nav a{display:block;padding:.55rem .8rem;border-radius:10px;text-decoration:none;color:#334;line-height:1}
}

/* Active + hover */
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{background:#0b66c3;color:#fff}

/* Mobile menu – cleaner panel */
.menu-toggle{display:none;background:transparent;border:1px solid #ddd;border-radius:10px;padding:.45rem .7rem;font-size:1rem}
@media(max-width: 899px){
  .menu-toggle{display:inline-block;margin-left:auto}
  .nav{display:none}
  .header.nav-open .nav{display:block;margin-top:.5rem}
  .header.nav-open .nav ul{display:flex;flex-direction:column;gap:.25rem}
  .nav a{display:block;padding:.7rem .9rem;border-radius:10px}
}

/* Hero full viewport */
.hero-viewport{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-viewport .hero-inner{position:relative;z-index:1;max-width:1100px;margin:auto;padding:2rem}
.hero-viewport .hero-inner h1{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin:0 0 .5rem 0}
.hero-viewport .hero-inner p{color:#fff;font-size:clamp(1rem,2.2vw,1.2rem);max-width:800px}
.hero-viewport .hero-buttons{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap}
.hero-viewport .btn{background:#0b66c3;color:#fff}

/* Elementor helpers */
.page-content{padding:1rem}.page-content-full{padding:0;margin:0}


.parallax-hero{background-attachment:scroll}
@media(min-width:900px){ .parallax-hero{will-change:background-position;backface-visibility:hidden;perspective:1000px} }

/* Elementor no-padding fixes */
body.elementor-page #main{padding:0;margin:0}

/* Overlay header v3 */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .25s ease, box-shadow .25s ease, color .2s ease;background:transparent;border-bottom-color:transparent}
.header.transparent{background:transparent;box-shadow:none;border-color:transparent}
.header.scrolled{background:#fff;border-bottom:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.header.transparent .nav a, .header.transparent .menu-toggle{color:#fff}
.header .container{display:flex;align-items:center;gap:1rem}
.logo img{height:38px;width:auto;display:block}
/* main spacing is handled via JS so hero can sit behind header */
#main{margin-top:0}

/* Hero fullscreen */
.hero-viewport{min-height:100vh;position:relative;margin:0;padding:0}
                
/* Overlay header v4: stable spacing, no flicker */
html,body{background:#fff}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border:0;transition:background .25s ease, box-shadow .25s ease}
.header.transparent{background:transparent;box-shadow:none}
.header.scrolled{background:#fff;box-shadow:0 6px 12px rgba(0,0,0,.06);border-bottom:1px solid #eee}
.header.transparent .nav a, .header.transparent .menu-toggle{color:#fff}
.logo img{height:38px;width:auto;display:block}
/* Always reserve space for header; pull hero up behind it */
body{--header-h:64px}
body.ready main{padding-top:var(--header-h)}
.hero-viewport{min-height:100vh;position:relative;margin-top:calc(var(--header-h) * -1);padding-top:0}
.elementor-top-section:first-of-type{margin-top:0 !important}

/* Smooth scrolling performance */
.hero-viewport, .header{will-change:transform, background-position}

/* Overlay header CLEAN build (no parallax) */
:root{--gvm-hh:72px}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border:0;box-shadow:none;transition:background .25s ease, box-shadow .25s ease}
.header.transparent{background:transparent;box-shadow:none;border-color:transparent}
.header.scrolled{background:#fff;border-bottom:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.header.transparent .nav a, .header.transparent .menu-toggle{color:#fff}
#main{padding-top:var(--gvm-hh)}
.logo img{height:38px;width:auto;display:block}
/* Hero should sit behind header and fill viewport */
.hero-viewport{min-height:100vh;margin-top:calc(var(--gvm-hh)*-1);padding-top:0}
.elementor-top-section:first-of-type{margin-top:0 !important;padding-top:0 !important}
/* Ensure full-width */
body.elementor-page #main{margin:0;padding:0}
body.page-template-page-builder-fullwidth .elementor-section .elementor-container{max-width:none}

/* Overlay header CLEAN v2: ensure initial transparency & admin bar support */
:root{--gvm-hh:72px; --adminbar:0px}
body.admin-bar { --adminbar:32px } /* WP admin bar height on desktop */
@media(max-width:782px){ body.admin-bar { --adminbar:46px } } /* admin bar mobile */

.header{position:fixed;top:var(--adminbar);left:0;right:0;z-index:1000;background:transparent;border:0;box-shadow:none;transition:background .25s ease, box-shadow .25s ease}
.header.transparent{background:transparent;box-shadow:none}
.header.scrolled{background:#fff;border-bottom:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.header.transparent .nav a, .header.transparent .menu-toggle{color:#fff}
#main{padding-top:calc(var(--gvm-hh) + var(--adminbar))}
.hero-viewport{min-height:100vh;margin-top:calc((var(--gvm-hh) + var(--adminbar)) * -1);padding-top:0}
.elementor-top-section:first-of-type{margin-top:0 !important;padding-top:0 !important}

/* Overlay FINAL */
:root{--gvm-hh:72px; --adminbar:0px}
body.admin-bar { --adminbar:32px }
@media(max-width:782px){ body.admin-bar { --adminbar:46px } }

.header{position:fixed;top:var(--adminbar);left:0;right:0;z-index:1000;border:0;box-shadow:none;transition:background .25s ease, box-shadow .25s ease}
/* default: transparent */
.header{background:transparent !important}
.header.transparent{background:transparent !important;box-shadow:none}
/* only this class paints it white */
.header.scrolled{background:#fff !important;border-bottom:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.header.transparent .nav a, .header.transparent .menu-toggle{color:#fff}

#main{padding-top:calc(var(--gvm-hh) + var(--adminbar))}
.hero-viewport{min-height:100vh;margin-top:calc((var(--gvm-hh) + var(--adminbar)) * -1);padding-top:0}
.elementor-top-section:first-of-type{margin-top:0 !important;padding-top:0 !important}