/*
Theme Name: bvbm
Description: Starter-Theme für bvbm
Version: 0.2.0
Text Domain: bvbm
*/
:root{
  --bvbm-green:#008080;   /* Primär */
  --bvbm-grau:#CCCCCC;  /* Sekundär */
  --bvbm-grey:#CCCCCC;
  --bvbm-lightgreen:#F9FFFF;
  --bvbm-lightgrey:#F4F4F4;
  --bvbm-lightgrau:#F4F4F4;
  --content-max:1240px;
}

/* Nunito Sans lokal eingebunden */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-sans/nunito-sans-v18-latin-regular.woff2') format('woff2'),
       url('assets/fonts/nunito-sans/nunito-sans-v18-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/nunito-sans/nunito-sans-v18-latin-600.woff2') format('woff2'),
       url('assets/fonts/nunito-sans/nunito-sans-v18-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/nunito-sans/nunito-sans-v18-latin-800.woff2') format('woff2'),
       url('assets/fonts/nunito-sans/nunito-sans-v18-latin-800.woff') format('woff');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px; -webkit-text-size-adjust: 100%;}
body{
  margin:0;
  font-family:"Nunito Sans", system-ui, -apple-system, Sege UI, Roboto, Arial, sans-serif;
  font-size:16px;
  color:#111; line-height:1.6; background:#fff;
}

button{
  font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111; line-height:1.6; background:#fff;font-size:16px;}

.container{width:100%; max-width:var(--content-max); margin:0 auto; padding:0 16px;}
a{color:var(--bvbm-green); text-decoration:none}
a:hover{color:var(--bvbm-grey)}

/* ---------- Topbar ---------- */
.topbar{
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.topbar .bar{
  display:flex; align-items:center; gap:16px; min-height:38px;
  font-size:16px;
}
.topbar .spacer{flex:1}
.topbar .search{
  position:relative; margin-left:auto; display:flex; align-items:center;
}
.search-toggle{
  border:0; background:none; font-size:20px; cursor:pointer; padding:6px; margin-right: -16px;
}
.search-form{
  overflow:hidden; transition:max-width .25s ease, opacity .2s ease;
  max-width:0; opacity:0; margin-left:8px;
}
.search-form.open{max-width:360px; opacity:1}
.search-form input{
  width:100%; padding:8px 10px; border:1px solid var(--bvbm-grey); border-radius:999px; 
}

/* ---------- Header & Navigation ---------- */
.site-header{background:#fff; position:sticky; top:0; z-index:50;}
.site-header .container.bar{display:flex; flex-direction: row-reverse;justify-content:space-between;align-items:center; gap:24px; min-height:76px;}
.site-header .container.bar{padding:16px;}
.site-header .site-title{display:none;}
.site-brand{display:flex; align-items:center; gap:12px; color:inherit}
.site-brand img{height:52px; width:auto; display:block;}
.site-title{font-weight:800;}

.nav-toggle{display:none; margin-left:auto; background:none; border:0; font-size:28px;}

.primary-nav{margin-left:0px;}
.primary-nav > ul{
  list-style:none; padding:0; margin:0;padding-bottom:20px;
  display:flex; gap:24px; align-items:stretch;
}

/* Orangene, zweizeilige Labels */
.primary-nav > ul > li > a{
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  min-height:54px; /* Platz für 2 Zeilen */
  color:var(--bvbm-green);
  background:#FFFFFF;
  border-radius:10px;
  text-align:center;
  line-height:1.15;
  font-weight:700;
  white-space:normal; /* zweizeilig möglich */
}
.primary-nav > ul > li:hover > a{outline:2px solid var(--bvbm-green);}

/* Dropdowns bis 2 Ebenen */
.primary-nav li{position:relative;}
.primary-nav li ul{
  list-style:none; padding:8px 0; margin:0;
  position:absolute; left:0; top:calc(100%);
  min-width:230px; background:#fff; border:1px solid var(--bvbm-grey); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:none; z-index:60;
}
.primary-nav li:hover > ul{display:block}
.primary-nav li ul li a{
  display:block; padding:10px 14px; color:#222; background:#fff; font-weight:600;
}
.primary-nav li ul li a:hover{background:var(--bvbm-lightgrau);}

/* Sub-Sub */
.primary-nav li ul li{position:relative}
.primary-nav li ul li ul{
  top:0; left:100%; margin-left:8px;
}

/* ---------- Hero 6:1 mit Wellenabschluss ---------- */
.hero{position:relative; isolation:isolate;}
.hero picture, .hero img{display:block; width:100%; height:auto;}
.hero .hero-inner{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  padding:clamp(16px,3vw,36px);
}
.hero-title{
  color:#fff; margin:0; font-weight:800; font-size:clamp(22px,4vw,44px);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
/* 6:1 Aspect Helper (falls noch kein Bild vorhanden) */
.hero--ratio{aspect-ratio:6/1; background:#ddd}

/* dynamische Welle unter Hero */
.wave-bottom{
  position:absolute; bottom:0px; left:0px; width:100%;  background:transparent;
}
.wave-bottom-flyin{
  position:absolute; top:0px; left:0px; width:100%;  background:transparent;
}
.wave-bottom svg,.wave-bottom-flyin svg{display:block; width:100%;  }

/* ---------- Main ---------- */
main{padding:32px 0;}
.maincontainer{position:relative;padding-bottom:0px;z-index:1;}
.maincontainer .wave-bottom{position:relative;}
@media(min-width: 960px){
.footerversatz{position:relative;margin-top:-40px;z-index:10;}
}
@media(min-width: 550px) and (max-width:960px){
.footerversatz{position:relative;margin-top:-20px;z-index:10;}
}
@media(max-width: 960px){
div.maincontainer main.container{padding-bottom:16px;}
}

/* ---------- Footer + Wellenabschluss oben ---------- */

.pref-vorueberschrift{display:flex;align-items:center;gap:15px;font-size:24px;font-weight:bold;}
.pref-vorueberschrift-flex{flex:1;}

.pref-kastenzeile{padding:14px 0px;display:flex;align-items:top;}
.pref-kastenicon{width:30px;}
.pref-tellink{text-decoration:none;color:#000000 !important;}
.pref-kastentext{flex:1;}

.pref-kastenlink{display:inline-block;margin:0px auto;}
.pref-kastenlink a{border:1px solid var(--bvbm-green);border-radius:16px; padding:12px;text-decoration:none;font-weight:bold;display:block;}
.pref-kastenlink a:hover{background-color: var(--bvbm-green);color:#FFFFFF;}

.prefooter .pref-newsletter-c{display:flex;justify-content:center;padding-top:6px !important;}
.pref-newsletter{display:flex;gap:20px;text-align:center;align-items:center;background-color:#FFFFFF;padding:28px;border-radius:16px;}
.pref-newsletter-acutal{flex:1;}
.pref-newsletter-icon{border:1px solid #000000;padding:12px 15px !important;border-radius:72px;}
.pref-newsletter-link a{border:1px solid var(--bvbm-green);border-radius:16px; padding:12px;text-decoration:none;font-weight:bold;display:block;}
.pref-newsletter-link a:hover{background-color: var(--bvbm-green);color:#FFFFFF;}
@media(min-width: 960px){
.pref-newsletter{width:92%;}
}
@media(max-width: 960px){
.pref-newsletter{display:block;}
.pref-newsletter div{display:inline-block;padding:3%;}
}

/* ---- Prefooter Cards ---- */
:root{
  /* ein Wert, der fürs Padding UND für den Grid-Gap genutzt wird */
  --prefooter-space: clamp(24px, 4vw, 56px);
}

/* Fallback-Hintergrund (#6FDC8A) + moderne Mischung als Primär */
.prefooter{
  position: relative;
  padding:4% 0px 10% 0px;
  margin-bottom:-35px;	
  background: var(--bvbm-lightgrau);
}
@media (max-width: 700px){
.prefooter{margin-bottom:0;}
}
@media (min-width: 700px) and (max-width: 1000px){
.prefooter{margin-bottom:-20px;}
}
.prefooter .wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--prefooter-space) 16px;
}

.prefooter-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--prefooter-space); /* gleich groß wie das Padding */
}

.prefooter-card{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: clamp(16px, 2.2vw, 28px);
  min-height: 160px; /* optionaler Startwert */
}

/* Tablet: 2 Spalten */
@media (max-width: 1024px){
  .prefooter-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile: 1 Spalte */
@media (max-width: 640px){
  .prefooter-grid{ grid-template-columns: 1fr; }
}

.site-footer{
  position:relative;background:#fff; color:#333; padding:14px 0 28px 0px; margin-top:10px;z-index:11;
}

.footer-flex,.footer-blog-subline{display:flex;justify-content:space-between;gap:20px;}
.footer-blog-subline{margin-top:24px;}

.footer-mbox-1{width:200px;display:flex;justify-content:start;flex-direction:column;gap:20px;}
.footer-mbox-2{flex:1;display:flex;align-items:top;flex-direction:column;gap:20px;}

.footer-mbox-11,.footer-mbox-21{height:130px;}

.footer-mbox-12 img,.footer-mbox-21 img{height:100%;}
.footer-mbox-12 img{width:100%;height:auto;}


@media (max-width: 960px){
.footer-flex,.footer-blog-subline,.footer-mbox-1,.footer-mbox-2{display:block;}
.footer-mbox-1 div,.footer-mbox-21 img{padding-bottom:16px;}
.footer-mbox-1{width:auto;}
.footer-mbox-11,.footer-mbox-21{height:auto;}
.footer-mbox-11 a,.footer-mbox-21 a{display:block;margin:0px;}
.footer-mbox-11 img,.footer-mbox-12 img,.footer-mbox-21 img{height:auto;width:65%;}
.footer-blog-subline-1{order:2;}
.footer-blog-subline-2{order:1;}
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .primary-nav > ul{gap:12px}
  .primary-nav > ul > li > a{min-height:48px; padding:10px 8px}
}
@media (max-width: 960px){
  .nav-toggle{display:block}
  .primary-nav{display:none}
  .primary-nav.open{display:block}
  .primary-nav > ul{flex-direction:column; gap:8px}
  .primary-nav li ul,
  .primary-nav li ul li ul{
    position:static; display:none; box-shadow:none; border:0; margin-left:0; border-radius:0;
  }
  .primary-nav li.open > ul{display:block}
  .primary-nav li ul a{border-radius:10px;}
}

@media(max-width:960px){
.site-header .container.bar{display:block;}
.site-header .container.bar{min-height:auto;padding:16px;}
.site-brand{justify-content:flex-end;}
.site-brand img{height:80px;max-width:70%;}
.nav-toggle{position:absolute;left:12px;top:18px;color:var(--bvbm-green);}
.primary-nav{background-color:#FFFFFF;border-top:24px solid #FFFFFF;}
.primary-nav > ul > li > ul.sub-menu > li > ul.sub-menu{padding:0px;}
.primary-nav li ul li.menu-item-has-children > a:after{content:'\f0d7';font-family:FontAwesome;padding-left:10px;color:#000000;}
}
@media(min-width:960px){
.site-header{padding:0px;}
.site-brand img{height:90px;}
.primary-nav{margin-top:10px;}
.primary-nav > ul{gap:auto;display:inherit;padding-top:5px;}
.primary-nav > ul > li{display:inline-block;}
.primary-nav > ul > li ul li{display:block;}
.primary-nav > ul > li > a,.primary-nav > ul > li > a:hover{background-color:#FFFFFF;padding:12px 18px 12px 0px;color:var(--bvbm-green);text-transform:uppercase;background:none;border:none;}
.primary-nav > ul > li.menu-item-has-children > a:after{content:'\f0d7';font-family:FontAwesome;padding-left:10px;color:var(--bvbm-green);}
.primary-nav > ul > li:hover > a{outline:0px;}
.primary-nav > ul > li > ul.sub-menu{top:calc(100%-10px);}
.primary-nav > ul > li > ul.sub-menu > li > ul.sub-menu{margin-left:0px;margin-top:-9px;}
.primary-nav > ul > li > ul.sub-menu > li.menu-item-has-children{position:relative;}
.primary-nav > ul > li > ul.sub-menu > li.menu-item-has-children > a:after{position:absolute;content:'\f0da';font-family:FontAwesome;padding-left:10px;color:#FFFFFF;top:10px;right:12px;color:#000000;}
}

/* H1 – bleibt grün, H2-Detailstyling in typography.css */
main h1{color:var(--bvbm-green);line-height:30px;display:flex;font-size:24px;}
/* main h1:before{content:'\f110';font-family:FontAwesome;color:var(--bvbm-green);margin-right:14px;} */
main h1 a:hover{color:var(--bvbm-green);cursor:default;}
/* main h2 wird in typography.css genauer gestylt */
main h2{color:var(--bvbm-green);}

/* Buttons */
main div.buttonorange{margin:24px 0px;}
main div.buttonorange a,main div.buttonorange a:hover{border:1px solid var(--bvbm-green);background-color:var(--bvbm-green);color:#FFFFFF;border-radius:16px;padding:12px;text-decoration:none;display:inline-block;}
main div.buttonpdf{margin:24px 0px;}
main div.buttonpdf a,main div.buttonpdf a:hover{border:1px solid var(--bvbm-green);background-color:var(--bvbm-green);color:#FFFFFF;border-radius:16px;padding:12px;text-decoration:none;display:inline-block;}

/* Link-Icons für externe Links / PDF / JS / TEL */
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="http"]:before,
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="https"]:before {
  color: var(--bvbm-green);
  display:inline-block;
  content:'\f08e';
  font-family:FontAwesome;
  width:16px;
  padding-left:4px;padding-right:6px;
}
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="javascript"]:before {
  color: var(--bvbm-green);
  display:inline-block;
  content:'\f0e0';
  font-family:FontAwesome;
  width:17px;
  padding-left:4px;padding-right:6px;
}
main.container :not(.buttonorange) :not(.buttonpdf) a[href$=".pdf"]:before {
  color: var(--bvbm-green);
  display:inline-block;
  content:'\f15b';
  font-family:FontAwesome;
  width:15px;
  padding-left:4px;padding-right:4px;
}
/* NEU: Telefonlinks mit Hörer-Icon */
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="tel:"]:before {
  color: var(--bvbm-green);
  display:inline-block;
  content:'\f095'; /* FontAwesome phone */
  font-family:FontAwesome;
  width:15px;
  padding-left:4px;
  padding-right:6px;
}

/* Hover-Farbe korrekt inkl. tel: */
main.container :not(.buttonorange) :not(.buttonpdf) a[href$=".pdf"]:hover:before,
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="https"]:hover:before,
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="http"]:hover:before,
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="javascript"]:hover:before,
main.container :not(.buttonorange) :not(.buttonpdf) a[href^="tel:"]:hover:before {
  color: var(--bvbm-green);
}

/* bvbm – Blockquote Globalstyle innerhalb maincontainer/container */
div.maincontainer main.container blockquote,
div.maincontainer main.container .wp-block-quote {
  position: relative;
  margin: 1rem 0;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  background: #fff;
}

/* Vertikale grüne Linie über die volle Zitat-Höhe */
div.maincontainer main.container blockquote::before,
div.maincontainer main.container .wp-block-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--bvbm-green, #008080);
}

/* Grünes Anführungszeichen am Textbeginn */
div.maincontainer main.container blockquote p:first-child::before,
div.maincontainer main.container .wp-block-quote p:first-child::before {
  content: "“";
  color: var(--bvbm-green, #008080);
  margin-right: 10px;
  line-height: 0;
}
div.maincontainer main.container blockquote p:first-child::before{
  font-family:Times, sans-serif;font-size:34px !important;font-weight:bold;
}
div.maincontainer main.container blockquote, div.maincontainer main.container .wp-block-quote{
  padding:0.1rem 1rem 0.1rem 1.25rem;
}
div.maincontainer main.container blockquote p:first-child {margin-block-start:10px;}
div.maincontainer main.container blockquote p:last-child {margin-block-end:0px;}

/* cite */
div.maincontainer main.container blockquote cite,
div.maincontainer main.container .wp-block-quote cite {
  display: block;
  margin-top: .4rem;
  color: #555;
  font-style: normal;
}

main h1 a[href^="https" i]::before, main h1 a[href$=".pdf" i]::before { content: none !important; }
main .breadcrumb a[href^="https" i]::before,
main .breadcrumb .breadcrumb__link[href$=".pdf" i]::before { content: none !important; }
main .breadcrumb a[href^="https" i]::before,
main .breadcrumb .breadcrumb__link[href$=".pdf" i]::before { content: none !important; }

/* ===== Farben (bvbm) ===== */
:root {
  --bvbm-green:  #008080;
  --bvbm-grey:   #C4C4C4;
}

/* --- bvbm: Bulletpoints dezenter --- */
main ul li {
  padding-left: 6px;
  margin: .35rem 0;
}

/* Grund-Bullet */
main ul li::before {
  width: 0.66rem;
  height: 0.66rem;
  top: .72em;
  opacity: .6;
}

/* Unterebenen */
main ul ul li::before {
  width: 0.58rem;
  height: 0.58rem;
  opacity: .55;
}

/* Ring-Bullet: dünnerer Strich */
main ul {
  padding-left: 18px;
  --mask-ring: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='none' stroke='%23fff' stroke-width='2'/>\
</svg>");
}

/* Unterlisten etwas dichter */
main ul li > ul {
  margin-top: .2rem;
}

/* Mobile noch dezenter */
@media (max-width: 680px) {
  main ul li        { padding-left: 3px; margin: .3rem 0; }
  main ul li::before{ width: .6rem; height: .6rem; opacity: .55; }
  main ul ul li::before { width: .52rem; height: .52rem; opacity: .5; }
}

/* --- Bulletpoints generell in Schwarz --- */
main ul li::before {
  background-color: #111;
  opacity: 0.85;
}
main ul ul li::before {
  background-color: #111;
  opacity: 0.75;
}

/* Fallback ohne Masken-Support */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  main > ul > li::before {
    background-color: var(--bvbm-green);
  }
  main ul li ul > li::before {
    background: transparent;
    border: 2px solid var(--bvbm-green);
  }
}

/* ===== Layout ===== */
.breadcrumb { width: 100%; font-size: .95rem; line-height: 1.4; }

.breadcrumb__list {
  list-style: none; padding: .5rem 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .5rem;
}

/* Separator (›) */
.breadcrumb__item { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; color: var(--bvbm-grey); opacity: .9;
}

.breadcrumb__link { color:#000000;
   text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.breadcrumb__link:hover, .breadcrumb__link:focus { text-decoration: none; color: var(--bvbm-green); }
.breadcrumb__current { color: #111; }

.breadcrumb__home { fill: #000000; display: block; }
.breadcrumb__link:hover .breadcrumb__home{fill: var(--bvbm-green);}
.sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

main .wp-block-media-text{gap:25px;}
main .wp-block-media-text>.wp-block-media-text__content{padding:0px;}
main .wp-block-media-text>.wp-block-media-text__content p:first-child{margin-block-start:0px;}
main.containersearch a:before{display: none !important;}
main.containersearch div.search-results > p:first-child{padding:14px 0px 0px 0px;}
main.containersearch .search-result__title { display: flex; align-items: baseline; gap: .5rem; color: var(--bvbm-green);}

main.containersearch .pagination { margin: 2rem 0; }
main.containersearch .pagination ul { display: flex; gap: .5rem; list-style: none; padding: 0; }
main.containersearch .pagination a,main.containersearch .pagination span {
  display: inline-block; padding: .5rem .75rem; border: 1px solid var(--bvbm-grey); text-decoration: none;
}
main.containersearch .pagination .current { background: var(--bvbm-lightgrey); font-weight: 700; }

@media (max-width: 768px) {
  html,body,h3,h4,button { font-size: 17px; }
}

/* Desktop: dritte Ebene breiter */
@media (min-width: 960px) {
.sub-menu .menu-item-225 .sub-menu, .sub-menu .menu-item-226 .sub-menu {
    width: 460px !important;
    white-space: normal;
    box-sizing: border-box;
  }
}

/* ===== Bürgermedien: Bundesländer-Navi ===== */
.bvbm-bundeslaender-nav{
  border: 1px solid var(--bvbm-green);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0 1.5rem;
  background: var(--bvbm-lightgreen);
}

.bvbm-bundeslaender-text{
  margin: 0 0 .5rem;
  font-weight: 600;
}

.bvbm-bundeslaender-links{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  align-items: center;
}

.bvbm-bundeslaender-links a{
  font-weight: 600;
}

.bvbm-bundeslaender-links span{
  margin: 0 .1rem;
  opacity: .7;
}

/* Extra-Abstand: erstes H2 nach der Bundesländer-Box */
.bvbm-bundeslaender-nav + h2{
  margin-top: 2.25rem;
}

/* Punkt-Trenner exakt auf Text-Höhe ausrichten */
.bvbm-bundeslaender-links span{
  display: inline-block;
  font-size: inherit;        /* genau gleiche Schriftgröße wie die Links */
  line-height: inherit;      /* gleiche Zeilenhöhe */
  vertical-align: baseline;}

details{margin-block-start:1em !important;margin-block-end:1em !important;}

/* Icon nur für Links mit .bvbm-link-out */
main.container a.bvbm-link-out:before {
padding-left:0px !important;
 content: "\f015" !important; 
}





/* ---------- main: Blocksatz + deutsche Silbentrennung ---------- */

main p,
main li,
main .wp-block-paragraph,
main .wp-block-list,
main .wp-block-details,
main .wp-block-list li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  /* wichtig für deutsche Trennung */
  lang: de;
}

html[lang="de-DE"] main p,
html[lang="de"] main p {
  hyphens: auto;
}

main p {
  text-justify: inter-word;
}