/* BeutelMusik - Design nach der Altseite (theme3386): weisser Header, blaue Navi-Leiste darunter, Lobster-Ueberschriften, Kopfbilder */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Lobster&family=Merriweather:wght@400;700&display=swap');

:root{ --bm-green:#93c567; --bm-green-dark:#6fae3f; --bm-blue:#2d4ea2; --bm-text:#777777; }

/* Beschreibung unter dem Logo ausblenden (Original hat keine) */
.navbar-brand .site-description, .site-description, .navbar-brand small{ display:none !important; }

body{ font-family:'Lato',Arial,sans-serif; color:var(--bm-text); font-size:18px; }
main p, main li, .item-page, .com-content-article, .com-contact{ font-size:18px; line-height:1.55; }
a{ color:var(--bm-green-dark); } a:hover,a:focus{ color:var(--bm-green); }

/* Ueberschriften in Schreibschrift (Lobster), gruen - wie "Herzlich Willkommen" auf der Altseite */
main h1, main h2, .page-header h1, .com-content-article > h2, .bm-hero-title{ font-family:'Lobster', cursive; font-weight:400; letter-spacing:.3px; }
main h1, main h2, .page-header h1, .com-content-article > h2{ color:#2F3E93; font-size:2.25rem; font-weight:400; }
/* Kategorie-/Seitentitel (.page-header h2) groesser wie Altseite: 54px */
.page-header h2, .page-header h2 a{ font-size:54px !important; line-height:1.1; }
/* Unterueberschriften im Fliesstext: normal (Lato), kleiner, nicht Schreibschrift */
main h3, main h4, .item-page h3, .item-page h4, .com-content-article h3, .com-content-article h4{ font-family:'Lato',sans-serif; font-weight:700; font-size:1.2rem; color:#2F3E93; margin-top:1.2rem; letter-spacing:0; }
/* Ueberschrift-Links (Artikel-/Kategorietitel im Blog) blau, nicht gruen */
main h1 a, main h2 a, main h3 a, .page-header a, .com-content-blog__link, .com-content-category__title a{ color:#2F3E93 !important; }
main h1 a:hover, main h2 a:hover, main h3 a:hover, .com-content-blog__link:hover{ color:#1f2d6e !important; }

/* Kopfbereich WEISS; Logo und Navi untereinander (Navi als eigene Leiste) */
.container-header, .container-header.full-width{ background:#ffffff !important; background-image:none !important; display:block !important; padding:0 !important; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.container-header > .grid-child{ width:100% !important; max-width:100% !important; }
.container-header > .grid-child:first-child{ background:transparent !important; display:flex; align-items:center; max-width:1140px; margin:0 auto; padding:.6rem 5%; }
.navbar-brand img, .header .logo img{ max-height:65px !important; width:auto !important; }

/* Navigationsleiste: blaue Vollbreit-Leiste, weisse Schrift */
.container-header > .grid-child.container-nav, .container-nav{ background-color:#2F3E93 !important; background-image:none !important; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); padding:0 !important; }
/* Navi klebt beim Scrollen oben (per JS gesetzte Klasse, wie Altseite) */
.container-nav.bm-stuck{ position:fixed !important; top:0; left:0; right:0; width:100vw !important; margin-left:0 !important; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.bm-nav-platzhalter{ display:none; }
.bm-nav-platzhalter.aktiv{ display:block; }
.container-nav .mod-menu, .container-nav ul.nav{ max-width:1140px; margin:0 auto !important; display:flex !important; flex-wrap:wrap; justify-content:flex-end; padding:0 5%; list-style:none; }
.container-nav .mod-menu > li{ list-style:none; }
.container-nav .mod-menu > li > a{ display:block; color:#ffffff !important; font-family:'Lato',sans-serif; font-weight:400; padding:.95rem 1.05rem; text-decoration:none; }
.container-nav .mod-menu > li > a:hover, .container-nav .mod-menu > li.active > a, .container-nav .mod-menu > li.current > a{ color:#ffffff !important; }
.container-nav .mod-menu > li > a:hover{ background:rgba(255,255,255,.10); }

/* Kopfbild (Hero): volle Breite, Foto, Spruch links; grosse Zeile in Lobster */
.container-banner{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); padding:0; }
.container-banner .moduletable,.container-banner .module-content,.container-banner .card{ margin:0; padding:0; border:0; background:none; box-shadow:none; }
.bm-hero{ width:100%; min-height:480px; background-size:cover; background-position:center center; background-repeat:no-repeat; display:flex; align-items:center; position:relative; }
.bm-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.12)); }
.bm-hero-inner{ position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:0 2.5%; text-align:left; }
.bm-hero-title{ white-space:nowrap; }
@media (max-width:1100px){ .bm-hero-title{ white-space:normal; } }
.bm-hero-intro{ display:block; color:#fff; font-family:'Lato',sans-serif; font-weight:400; font-size:1.5rem; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.bm-hero-title{ display:block; color:#fff; font-size:4.8rem; line-height:1.1; margin-top:.2rem; text-shadow:0 3px 14px rgba(0,0,0,.65); }
@media (max-width:900px){ .bm-hero-title{ font-size:3.2rem; } }
@media (max-width:640px){ .bm-hero{ min-height:300px; } .bm-hero-title{ font-size:2.2rem; } .bm-hero-intro{ font-size:1.1rem; } }

/* Inhaltsspalte wie Original: zentriert, max 1140px */
.container-component{ max-width:1140px !important; margin-left:auto !important; margin-right:auto !important; }
/* Aufzaehlung mit Kreis-Bullets wie Original */
main ul, .item-page ul{ list-style-type:circle; padding-left:1.5em; }
main ul li, .item-page ul li{ list-style-type:circle; }

/* Knopf: gruen bleibt, aber dunkle Schrift -> gut lesbar */
.btn-primary, main form button, main button[type="submit"], .com-contact button[type="submit"], button.button{ background:#93c567 !important; border-color:#7bb34d !important; color:#17300a !important; font-weight:700 !important; }
.btn-primary:hover, main form button:hover, main button[type="submit"]:hover, .com-contact button[type="submit"]:hover{ background:#7bb34d !important; border-color:#6fae3f !important; color:#112506 !important; }