/* CSS Document 
Theme Name: CP Breuer
Author: EDB
Version: 1.0
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {    font-family: 'Fira Sans'; 
 src: url('fonts/FiraSans-Medium.woff2') format('woff2'),   
 url('fonts/FiraSans-Medium.woff')format('woff');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Bold.woff2') format('woff2'),
        url('fonts/FiraSans-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-SemiBold.woff2') format('woff2'),
        url('fonts/FiraSans-SemiBold.woff') format('woff');
    font-weight: 600;    font-style: normal;}
@font-face {    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Regular.woff2') format('woff2'),
        url('fonts/FiraSans-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Fira Sans Condensed';
    src: url('fonts/FiraSansCondensed-Medium.woff2') format('woff2'),
        url('fonts/FiraSansCondensed-Medium.woff') format('woff');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'PT Serif';
    src: url('fonts/PTSerif-Bold.woff2') format('woff2'),
        url('fonts/PTSerif-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'PT Serif';
    src: url('fonts/PTSerif-Regular.woff2') format('woff2'),
        url('fonts/PTSerif-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}

html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Fira Sans'; font-size:17px; font-weight: 400; color: #303030;  width: 100%; font-variant-ligatures: none; }
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: left;}
.text-left{text-align: left;}
.clear{clear: both;}
figure{width: 100%; height: auto; position: relative; display: inline-block; text-align: center;}
strong{font-weight: 700;}
p{margin-bottom: 15px; line-height: 1.6em; text-align: left;}
a{cursor: pointer; text-decoration: none;}
a:focus{outline: 3px solid #ff8a00;}
h1,h2,h3,h4,h5,h6{font-weight: 400; color: #507a00; margin-bottom: 30px;}
h1{font-size: 2.3em; font-family: 'PT Serif';}
h2{font-size: 1.7em; margin-top: 30px;}
.green h2{color: #fff; font-weight: 600;}
h3{font-size: 1.1em; margin-top: 20px; margin-bottom: 10px;}
footer h2{color: #507a00; position: relative; margin-top: 0; font-family: 'PT Serif'; font-size: 1.2em; font-weight: 700;}
footer h2 strong{color: #303030; font-family: 'Fira Sans'; font-weight: 500; font-size: 0.8em;}
main a{color: #507a00; font-weight: 600; text-decoration: none;}
main ul, main ol{margin-left: 15px; margin-bottom: 30px;} 
main ul li, main ol li{margin-bottom: 10px;}

.row, 
main .wp-block-group, 
footer .wp-block-group{width: 1300px; margin: 0 auto; padding: 0 10px; position: relative;}
main, 
footer{width: 100%; margin: 0 auto; padding: 0; position: relative;}


/* HEADER & FOOTER*/
header{position: relative; width: 100%; display: inline-block; padding-top: 20px;} 
header .container.nav-wrap{ background: #77b009; color: #fff; border-radius: 30px; padding: 5px; }
header  .logo{width: 100%; height: auto;  float: left; text-align: center; background: #fff; padding: 5px 10px; border-radius: 20px;}
header  .logo img{width: 90%; height:auto;}
.site-header-acf {    position: relative;    min-height: 520px;    background-size: cover;    background-position: center;    overflow: hidden;}
.site-header-acf-inner {   position: relative;    z-index: 2;    width: min(1200px, 90%);    min-height: 520px;    margin: 0 auto;}
/* Grüne Kontur */
.site-header-acf::before {    content: "";    position: absolute;    left: 0;    right: 0;    bottom: -1px;    height: 122px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23507a00' d='M0,80 C240,45 480,25 720,45 C960,65 1200,95 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom center;     background-size: 100% 100%;    z-index: 1;}
/* Weiße Welle */
.site-header-acf::after {    content: "";    position: absolute;    left: 0;    right: 0;    bottom: -3px;      /* 2px tiefer als die grüne */    height: 120px;    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,80 C240,45 480,25 720,45 C960,65 1200,95 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom center;    background-size: 100% 100%;    z-index: 2;}
/* Kreis rechts unten */
.site-header-kreis {    position: absolute;    right: 40px;    top: 60px;    width: 280px;    height: 280px;    border-radius: 50%;    background: #fff;    color: #4a8f2a;    display: flex;    flex-direction: column;    justify-content: center;    text-align: center;    padding: 35px;    box-shadow: 0 12px 30px rgba(0,0,0,0.12);    z-index: 3;}
.site-header-kreis .inhalt span{    font-size: 1.38em;    line-height: 1.2;    padding-bottom: 10px; margin-bottom: 20px;font-family: 'PT Serif'; display: block; border-bottom: 1px solid #77b009; letter-spacing: -1px;}
.site-header-kreis .inhalt p{    font-size: 0.9em;    line-height: 1.5em;  text-align: center;  }

.site-header-kreis::before{content:""; position: absolute; bottom: -40px; left: -50px; width: 120px; height: 120px; border-radius: 100px; background: #77b009; z-index: 1;}
.site-header-kreis::after{content:""; position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 20px; background: #77b009; z-index: 1;}
@media (max-width: 960px) {
.site-header-kreis{display: none;}
.site-header-acf {min-height: 420px; }
}
@media (max-width: 800px) {
    .site-header-acf,
    .site-header-acf-inner {        min-height: 430px;    }
}

footer {    position: relative;    background: #fff;    padding: 60px 0 0;    margin-top: 0px;}
footer::before {    content: "";    position: absolute;    left: 0;    right: 0;    top: -130px;  height: 130px;    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='rgba(80,122,0,0.5)' d='M0,40 C240,75 480,95 720,75 C960,55 1200,25 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E")
        no-repeat top center;     background-size: 100% 100%;    z-index: 1;}
footer::after {    content: "";    position: absolute;    left: 0;    right: 0;    top: -120px;   height: 120px;    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C240,75 480,95 720,75 C960,55 1200,25 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E")
        no-repeat top center;    background-size: 100% 100%;    z-index: 2;}
footer > * {    position: relative;    z-index: 3;}
footer .wp-block-media-text{width: auto !important; grid-template-columns: 0% auto !important;}
footer .wp-block-media-text figure img{width: 25px !important; height: auto !important;}
footer .wp-block-media-text p.wp-block-paragraph a{padding-top: 15px;    position: relative;    display: inline-block;}
footer .widget_nav_menu ul {    list-style: none;    padding: 0;    margin: 0; margin-top: 50px;}
footer .widget_nav_menu ul li{margin-bottom: 12px; }
footer a, footer .widget_nav_menu ul li a{color: #507a00;}
footer .widget_nav_menu li a::before {    content: "\00BB"; /* » */    margin-right: 6px;}
footer a:hover, footer .widget_nav_menu li:hover a , footer .widget_nav_menu li.current-menu-item{ font-weight: 600;}
footer .foot-green{background: #507a00; color: #fff; border-top-left-radius: 50px; border-top-right-radius: 50px; padding: 20px 50px 0 50px; position: relative; margin-top: 50px;}
footer .foot-green::before {    content: "";    position: absolute;    top: -10px;    left: 50%;    transform: translateX(-50%);
    width: 300px;    height: 1px;    background: #507a00;}
	footer .foot-green .widget_nav_menu ul{margin-top: 0px;}
footer .foot-green .widget_nav_menu ul li{margin-bottom: 0px; float: left;  margin-left: 20px;}
footer .foot-green .widget_nav_menu ul li a{color: #fff;}
footer .foot-green .widget_nav_menu ul li a::before {    display: none;}
.footer-bild {    width: 100%;    height: 600px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; margin-top:-100px; z-index: 1;}

@media (max-width: 960px) {
	footer .foot-green .widget_nav_menu ul li{margin-left: 10px;}
}

/* NAVIGATION */

.main-navigation {  color: #fff; display: none;  flex-direction: column;  padding: 15px 10px 10px 10px; font-family: 'Fira Sans Condensed'; font-weight: 500; }
.main-navigation.menu-open {  display: flex;}
.main-navigation ul {  list-style: none;  padding: 0;  margin: 0;}
.main-navigation li {  position: relative;  width: 100%;}
.main-navigation li a,
.main-navigation li button {  display: inline-block;  padding: 15px 20px;  color: #fff;  text-decoration: none;  font-size: 1.1em;  background: none;  border: none;  width: 100%;  text-align: left;    letter-spacing: 0.05em;}
.main-navigation li.menu-item-has-children > a::after {  content: '+';  float: right;  color: #fff;  font-weight: bold;padding-left: 10px;}
.main-navigation li.menu-item-has-children.active > a::after {  content: '-';}
.main-navigation .sub-menu {  display: none;  background-color: #fff;  padding: 0;}
.main-navigation .menu-item-has-children.active > .sub-menu {  display: block;}
.main-navigation li a:focus,
.main-navigation li button:focus {  outline: 3px solid #ff8a00;}
.main-navigation li a:hover,
.main-navigation li a.active,
.main-navigation li button:hover {  background: #507a00;  color: #fff;}
.main-navigation .current-menu-ancestor > a {  color: #fff;  background: none; border-bottom: 2px solid #fff;}
.main-navigation .current-menu-item > a {  color: #507a00;  background-color: #f0f0f0;}
.main-navigation li .sub-menu li a{color: #507a00;}
.main-navigation li .sub-menu li a:hover{background: #507a00;  color: #fff;}
.mobile_menu_button {  display: flex;  background: #507a00; color: #fff;  border: none;  padding: 20px;  cursor: pointer;  align-items: center;  z-index: 9999;  position: relative; float: right;}
.menu-icon {  display: flex;  flex-direction: column;  gap: 5px;  margin-right: 10px;}
.menu-icon div {  width: 25px;  height: 3px;  background: #fff;}
.no-scroll {  overflow: hidden;}

@media (min-width: 960px) {
  .mobile_menu_button {    display: none;  }
  .main-navigation {    display: flex !important;    flex-direction: row;    justify-content: flex-start;    align-items: center;  }
  .main-navigation ul {    flex-direction: row;    display: flex;    width: 100%;  }
  .main-navigation li {    width: auto;  }
  .main-navigation .sub-menu {    position: absolute;    top: 100%;    left: 0;    min-width: 230px;    background: #fff;    display: none;    z-index: 1000;  }
  .main-navigation li:hover > .sub-menu {    display: block;  }
header .container.nav-wrap{z-index: 10;}
}

/* CONTENT */
.wrap{width: 100%; height: auto; position: relative; clear: both;}

.acf-oeffnungszeiten {    display: flex;    flex-direction: column;    gap: 8px;}
.acf-oeffnungszeiten-zeile {    display: grid;    grid-template-columns: 160px 1fr;    gap: 20px;}
.acf-oeffnungszeiten-zeile.is-heute {    font-weight: 700;}
.acf-oeffnungszeiten-zeiten {    display: flex;    gap: 20px;}

details.wp-block-details{width: 100%; margin: 15px 0;}
details.wp-block-details summary{width: 100%; padding: 20px;  font-weight: 600; color: #507a00; border: 2px solid #DCDCDC; border-radius: 15px;}
details.wp-block-details .wp-block-column, details.wp-block-details ul.wp-block-list{padding: 30px 0;}
main figcaption{font-size: 0.8em;}

main .green {    position: relative;    background: #507a00;    color: #fff;    z-index: 3;    box-shadow: 0 10px -8px rgba(0,0,0,0.35);}
main .green::before,
main .green::after{    content:"";    position:absolute;    top:0;    bottom:0;    width:100vw;   background:#507a00;    z-index:-1;
    box-shadow: 0 10px -8px rgba(0,0,0,0.35);}
main .green::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: #507a00; border-bottom-left-radius: 100px; box-shadow: 0 10px 15px -8px rgba(0, 0, 0, 0.45); }
main .green::after{    left:100%;}

main .green .wp-block-image {    position: relative;    display: inline-block;    width: 350px;    margin: 0 0 0 35px;}
main .green .wp-block-image::before {    content: "";    position: absolute;    left: -25px;    top: 55px;    bottom: 25px;    width: 100%;    background: #77b009;    border-radius: 40px;    z-index: -1;}
main .green .wp-block-image img {    width: 350px;    aspect-ratio: 1 / 1;    height: auto;    object-fit: cover;    border-radius: 40px;    border: 2px solid #fff;}
main .wp-block-group{ padding: 70px 10px;}
main .wp-block-group .wp-block-button {    text-align: center;}

main .wp-block-group .wp-block-button .wp-block-button__link,
main .wp-block-group .wp-block-button a {    position: relative;    display: inline-block;    min-width: 220px;    padding: 10px 35px;    background: #fff;    color: #507a00;    border: 1px solid #77b009;    border-radius: 40px;    font-weight: 600;    text-decoration: none;    transition: .25s ease;}

main .wp-block-group .wp-block-button .wp-block-button__link::before,
main .wp-block-group .wp-block-button .wp-block-button__link::after,
main .wp-block-group .wp-block-button a::before,
main .wp-block-group .wp-block-button a::after{    content: "";    position: absolute;    top: 50%;    width: 22px;    height: 22px;
    background: #77b009;    border-radius: 50%;    transform: translateY(-50%);    z-index: -1;}
main .wp-block-group .wp-block-button .wp-block-button__link::before,
main .wp-block-group .wp-block-button a::before{    left: -11px;}
main .wp-block-group .wp-block-button .wp-block-button__link::after,
main .wp-block-group .wp-block-button a::after{    right: -11px;}
main .wp-block-group .wp-block-button .wp-block-button__link:hover,
main .wp-block-group .wp-block-button a:hover{    background: #77b009;    color: #fff;}

main .green .wp-block-button a{margin-top: 50px;}

.wp-block-group[id] {  scroll-margin-top: 120px;}

main .main-image {    position: relative;    display: block;    width: 100%;    max-width: 420px;    margin: 0 32px 32px 0;    isolation: isolate;}
main .main-image img {    position: relative;    z-index: 1;    display: block;    width: 100%;    aspect-ratio: 3 / 4;    object-fit: cover;    object-position: center;}
main .main-image::before {    content: "";    position: absolute;    z-index: -1;    top: 22px;    left: 40px;    right: -14px;
    bottom: -14px;    border-right: 2px solid #77b009;    border-bottom: 2px solid #77b009;}
main .main-image::after {    content: "";    position: absolute;    z-index: -2;    right: -28px;    bottom: -28px;    width: 44px;
    height: 44px;    background: #77b009;    border-radius: 50%;}

main hr.wp-block-separator{margin: 20px 0;}
main #page-11 hr.wp-block-separator{border: none;height: 20px; width: 20%; float: left; background: #1BAD98; background: linear-gradient(90deg, rgba(27, 173, 152, 1) 0%, rgba(6, 81, 136, 1) 100%); position: relative; margin: 0; margin-top: -10px; z-index: 30;} 
main #page-11 hr.wp-block-separator:nth-of-type(odd) {float: right;}

main ul{margin-right: 15px;}


/* FORMULAR */
form{margin-top: 30px;}
form fieldset.daten {width: 99%; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; float: left; margin-right: 1%;}
form fieldset legend {width: 100%; clear: both; margin-bottom: 20px; font-size: 1.15em; color: #507a00; font-weight: 600;}
form fieldset.full {float: left; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; margin-right: 1%; width: 100%;}
form fieldset.full label{float: left; margin-right: 30px;}
form fieldset.daten span.data{width: auto; display: block; float: left; margin-right: 10px;}
form fieldset.daten span.wpcf7-form-control-wrap input, 
form fieldset.full span.wpcf7-form-control-wrap input{width: 250px;}

form fieldset.full textarea{width: 100%;}
form input.send{display: inline-block; padding: 20px 30px; background: #3badb5; color: #fff; border: none; font-size: 1.1em; font-weight: 600; border-radius: 30px;}
form p.hinweis{margin: 20px 0 50px 0;}
form .wpcf7-form-control.wpcf7-radio{padding: 20px 0; display: inline-block;}
form .wpcf7-form-control.wpcf7-radio span.first{margin-left: 0;}


/* =========================
   Popup: aktueller Beitrag
   ========================= */

.latest-post-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.65);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.latest-post-popup__window {
    position: relative;

    width: min(900px, 100%);
    max-height: calc(100dvh - 60px);

    margin: auto;

    background: #fff;
    border-radius: 25px;
    overflow-y: auto;

    box-shadow: 0 15px 60px rgba(0,0,0,.35);
}

.latest-post-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: #fff;
    font-size: 32px;
    line-height: 1;

    background: rgba(0, 0, 0, 0.7);
    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.latest-post-popup__close:hover,
.latest-post-popup__close:focus-visible {
    background: #000;
    transform: scale(1.08);
}


.latest-post-popup__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 65px 55px 55px;
}

.latest-post-popup__label {
    margin-bottom: 12px;

    color: #77b009;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.latest-post-popup__title {
    margin: 0 0 20px;

    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
}

.latest-post-popup__excerpt {
    margin-bottom: 28px;
    line-height: 1.65;
}

.latest-post-popup__excerpt p {
    margin: 0;
}

.latest-post-popup__button {
    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 25px;

    color: #fff;
    font-weight: 600;
    text-decoration: none;

    background: #77b009;
    border-radius: 30px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.latest-post-popup__button:hover,
.latest-post-popup__button:focus-visible {
    color: #fff;
    background: #507a00;
    transform: translateY(-2px);
}

.latest-post-popup.is-closed {
    display: none;
}


/* Tablet und Mobil */
@media screen and (max-width: 760px) {

    .latest-post-popup {
        align-items: flex-start;
        padding: 20px;
    }

   .latest-post-popup__window {
        grid-template-columns: 1fr;

        max-height: none;
        margin: auto;

        border-radius: 20px;
        overflow: visible;
    }

    

    .latest-post-popup__content {
        padding: 35px 25px 30px;
    }

    .latest-post-popup__title {
        font-size: 27px;
    }

    .latest-post-popup__button {
        width: 100%;
    }
}


/* Sehr kleine Displays */
@media screen and (max-width: 420px) {

    .latest-post-popup {
        padding: 12px;
    }

    .latest-post-popup__content {
        padding: 30px 20px 25px;
    }

    .latest-post-popup__close {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        font-size: 28px;
    }
}

/* =========================================================
   MOBILE / RESPONSIVE
========================================================= */

@media (max-width: 1300px) {  
.row,  
main .wp-block-group,
 footer .wp-block-group {    width: 100%;    max-width: 1300px;  }
}
@media (max-width: 1220px) {  
.row,  
main .wp-block-group,
 footer .wp-block-group {    width: 100%;    max-width: 100%; padding-left: 20px; padding-right: 20px;  }
 main .green::before,
main .green::after{display: none;}
main .green .wp-block-image {        width: min(100%, 350px);        margin: 30px auto 0;    }
main .green .wp-block-image img {        width: 100%;        aspect-ratio: 1 / 1;        height: auto;        border-radius: 30px;  }
main .green .wp-block-image::before {        display: none;    }
}

@media (max-width: 1069px) {
  header .header-container {    padding: 10px 10px 20px 10px;  }
  header .header-container .logo {    width: 220px;    float: right;    text-align: left;	position: absolute;	top: 10px;
	right: 10px;  }
  .mobile_menu_button {    float: left;  }
  .main-navigation {    clear: both;    width: 100%;  }
  .footer-bild { height: 400px; }
}

@media (max-width: 800px) {
  body {    font-size: 15px;  }
  h1 {    font-size: 2em;  }
  h2 {    font-size: 1.45em;  }
  details.wp-block-details summary {    padding: 15px;  }
  details.wp-block-details .wp-block-column {    padding: 20px 0;  }
  main .green .wp-block-image{display: none;}
  main .main-image {display: none;}
  header .container.nav-wrap{width: 100%;}
  header .container.nav-wrap .col-20{flex: 0 0 30%;}
  header .container.nav-wrap .col-80{flex: 0 0 70%;}  
  footer {    padding: 40px 0 25px;  }
  footer .wp-block-group {    padding: 0 20px;  } 
  footer .foot-green{border-radius: 0px; padding: 20px 50px 20px 50px;}
  form fieldset.daten,
  form fieldset.full {    width: 100%;    float: none;    margin-right: 0;  }
  form fieldset.full label,
  form fieldset.daten span.data {    float: none;    display: block;    margin-right: 0;    margin-bottom: 8px;  }
  form fieldset.daten span.wpcf7-form-control-wrap input,
  form fieldset.full span.wpcf7-form-control-wrap input,
  form input,
  form textarea {    width: 100%;    max-width: 100%;  }
}

@media (max-width: 480px) {
  header .header-container .logo {    width: 180px;  }
  .mobile_menu_button {    padding: 15px;  }
  }