/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
* {
box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
figure {
    overflow: hidden;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root :where(.is-layout-flow) > * {
    margin-block-start: 0px;
}
/* //CSS RESET */

:root {
    /* colors */
    --clr-neutral-100:  #FFFFFF;
    --clr-neutral-400: #EDEDED;
    --clr-neutral-800: #101921;

    --clr-accent-400: #8A0A5E;

    --clr-accent--main: var(--clr-accent-400);
    --clr-bg: var(--clr-neutral-100);
    --clr-bg--light: var(--clr-neutral-400);
    --clr-bg--dark: var(--clr-neutral-800);

    --clr-txt--light: var(--clr-neutral-100);
    --clr-txt--dark: var(--clr-neutral-800);

    /* utility */
    --radius-small: 20px;
    --radius-big: 42px;
    --radius-full: 100vw;

    --fixed-size: 1125px;
    --fixed-size--small: calc(var(--fixed-size) * 0.7);
    --fixed-size--tiny: calc(var(--fixed-size) * 0.6);

    --overflow: 75px;

    --shadow: 0px 0px 25px -15px var(--clr-bg--dark);

    /* typography */
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    color: var(--clr-txt--dark);

    --fs-hl1: clamp(2.6rem, 5vw + 1rem, 4.1rem);
    --fs-hl2: clamp(2.2rem, 4vw + 1rem, 3.2rem);
    --fs-hl3: clamp(1.6rem, 3vw + 1rem, 2.6rem);
    --fs-hl4: clamp(1.6rem, 3vw + 1rem, 2.6rem);
    --fs-hl5: clamp(1.2rem, 1.5vw + 1rem, 1.5rem);
    --fs-hl6: clamp(1.2rem, 1.5vw + 1rem, 1.5rem);
    --fs-p: clamp(1rem, 1vw + 0.8rem, 1.2rem); /* clamp(0.95rem, 1vw + 0.8rem, 1rem) */
    --fs-cap1: clamp(0.95rem, 1vw + 0.8rem, 1rem);

    --fw-hl1: 700;
    --fw-hl2: 400;
    --fw-hl3: 700;
    --fw-hl4: 400;
    --fw-hl5: 700;
    --fw-hl6: 400;
    --fw-p: 400;
    --fw-cap1: 700;

    --lh-hl1: ;
    --lh-hl2: ;
    --lh-hl3: 1.3;
    --lh-hl4: ;
    --lh-hl5: ;
    --lh-hl6: ;
    --lh-p: 1.4;
    --lh-cap1: ;

    scroll-behavior: smooth;
    scroll-padding: 25px;
}

/* TYPOGRAPHY */
@font-face {
  font-family: "Manrope";
  src: url("/wp-content/bandf-files/fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
font-display: swap;
}

.hl1 {
    font-size: var(--fs-hl1);
    font-weight: var(--fw-hl1);
    line-height: var(--lh-hl1, initial);
}
.hl2 {
    font-size: var(--fs-hl2);
    font-weight: var(--fw-hl2);
    line-height: var(--lh-hl2, initial);
}
.hl3 {
    font-size: var(--fs-hl3);
    font-weight: var(--fw-hl3);
    line-height: var(--lh-hl3, initial);
    margin-bottom: 15px;
}
.hl4 {
    font-size: var(--fs-hl4);
    font-weight: var(--fw-hl4);
    line-height: var(--lh-hl4, initial);
}
.hl5 {
    font-size: var(--fs-hl5);
    font-weight: var(--fw-hl5);
    line-height: var(--lh-hl5, initial);
}
.hl6 {
    font-size: var(--fs-hl6);
    font-weight: var(--fw-hl6);
    line-height: var(--lh-hl6, initial);
}   
.cap1 {
    font-size: var(--fs-cap1);
    font-weight: var(--fw-cap1);
    line-height: ar(--lh-cap1, initial);
}
p {
    font-size: var(--fs-p);
    font-weight: var(--fw-p);
    line-height: var(--lh-p, initial);
}
a {
    color: inherit;
}
strong {
    font-weight: var(--fw-cap1);
}

* + p:not(.hl1, .hl2, .hl3, .hl4, .hl5, .hl6, .cap1) {
    margin-top: 15px !important;
}

/* UTILITY */
.visually-hidden {
    position: absolute !important;

    width: 1px !important; 
    height: 1px !important; 
    padding: 0 !important; 
    border: 0 !important; 
    margin: -1px !important; 

    clip: rect(0, 0, 0, 0) !important; 
    overflow: hidden !important;
    white-space: nowrap !important;
}

[class*="fixed-size"] {
    margin-inline: auto;
}

.fixed-size--left {
    margin-left: unset !important;
}

.fixed-size--right {
    margin-right: unset !important;
}

.fixed-size {
    width: var(--fixed-size);
}

.fixed-size--small {
    width: var(--fixed-size--small);
}

.fixed-size--tiny {
    width: var(--fixed-size--tiny);
}

.typo--hero {
    max-width: 480px;
    text-align: center;
    margin-inline: auto;
}

.vertically--center {
    height: fit-content;
    align-self: center;
}

.radius--small {
    border-radius: var(--radius-small);
}

.radius--big {
    border-radius: var(--radius-big);
}

.bg--light {
    background-color: var(--clr-bg--light);
    padding-block: 50px;

    color: var(--clr-txt--dark);
}

.bg--dark {
    background-color: var(--clr-bg--dark);
    padding-block: 30px;

    color: var(--clr-txt--light);
}

.has-shadow {
    box-shadow: var(--shadow);
}

.overflow--top {
    position: relative;
    margin-top: calc(var(--overflow) * -1);
    z-index: 99;

    min-height: calc(var(--overflow) * 2);
}

    .before-overflow--top {
        padding-bottom: 150px;
    }

/* GENERAL */
html {
    background-color: white;
}

    body {
        background-color: var(--clr-bg--dark);
    }

        .wp-site-blocks {
            background-color: white;
            max-width: 2560px;
            margin-inline: auto;
        }


figure img {
        border-radius: inherit;
    }


/* LISTS */
.list--stars {
    display: flex;
    justify-content: space-around;
    margin-block: 50px;
}
.list--stars li {
        max-width: 175px;

        font-size: var(--fs-hl5);
        font-weight: var(--fw-hl5);
        line-height: var(--lh-hl5, initial);
        text-align: center;
}

.list--stars li::before {
        content: "\f005";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 30px;

        display: block;
        width: fit-content;
        
        margin-inline: auto;
        margin-bottom: 15px;
    }


/* BUTTONS */
button, a {
    cursor: pointer;
}

.wp-block-buttons {
    margin-top: 25px;
}

.wp-block-buttons a {
    background-color: var(--clr-accent--main);

    font-size: var(--fs-cap1);
    font-weight: var(--fw-cap1);
    line-height: ar(--lh-cap1, initial);
    
}


.btn--primary a::after {
        content: "\f054";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: 10px;
    } 


/* POPUP & MEHR LESEN */
.mehr-lesen {
    width: fit-content;
    margin-top: 25px;
}

.mehr-lesen a {
        font-size: var(--fs-cap1);
        font-weight: var(--fw-cap1);
        line-height: ar(--lh-cap1, initial);
        text-decoration: none;
	cursor: zoom-in;
}

.mehr-lesen a::after {
            content: "\f078";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-left: 10px;
        }

[id*="popup-content--"] {
    display: none;
}

#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#popup-box {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius-small);
    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    outline: none;
    isolation: isolate;
}

#popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;

    display: grid;
    place-content: center;
    width: 45px;
    aspect-ratio: 1;

    background: var(--clr-bg--light);
    border: none;
    border-radius: var(--radius-full);
    font-size: 22px;
    font-weight: 900;
    color: var(--clr-txt--dark);
    cursor: pointer;
}

/* Elements */
header {
    padding-block: 50px;
}

.header__logo-container {
    max-width: min(400px, 90%);
	display: block;
}

.header__logo-container svg {
        max-height: 100px;
		aspect-ratio: 4 / 1;
		width: 100%;
    }

.wp-block-cover.header--start {
min-height: min(75vh, 100vw) !important;
}

.header--start .wp-block-cover__inner-container {
    color: white;
}


.header--start .wp-block-cover__inner-container .header-scroll-link {
        display: grid;
        place-content: center;
        background-color: var(--clr-accent--main);
        width: 60px;
        aspect-ratio: 1/1;
        border-radius: 100vw;
        margin-top: 40px;
    }

.header--start .wp-block-cover__inner-container .header-scroll-link svg {
        transform: rotate(180deg);
    }



.float__content-box {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: fit-content;
  
  right: 25px;
  bottom: 25px;

  z-index: 999;
}

.float-icon {
  display: grid;
  place-content: center;
  background-color: var(--clr-accent--main);
  width: 60px;
  aspect-ratio: 1/1;
  border-radius: 100vw;
}


.float-icon--phone {
  position: relative;
  cursor: pointer;
}

.phone-options {
  z-index: 1000;
  display: none;
  position: absolute;
  right: 100%;
  
  padding: 20px;
  margin-right: 20px;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 100%;
  
  background-color: var(--clr-accent--main);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  white-space: nowrap;
  cursor: auto;
}

.phone-options a, .phone-options p {
  color: white;
  text-decoration: none;
}

.phone-options a:hover {
  text-decoration: underline;
}






.banner-image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.banner-logo-bg {
    background-image: url("/wp-content/uploads/2025/06/bg_logo.png");
    background-repeat: no-repeat;
    background-size: 517px 279px;
    background-position: calc(100% + 100px) 45px;
}

.banner-part-image {
    --_width-image: 50%;
    --_width-content: calc(100% - var(--_width-image));
    gap: 0px;
}

    .banner-part-image--img {
        flex-basis: var(--_width-image) !important;
    }

.banner-part-image--img figure {
            height: 100%;
        }

.banner-part-image--img figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    .banner-part-image--content {
        flex-basis: var(--_width-content) !important;
    }

    .before-overflow--top.banner-part-image {
    padding-bottom: 0px;
}

    .before-overflow--top.banner-part-image .banner-part-image--content {
            --_padding-innner: 50px;
            --_padding-outer: calc((100% - var(--fixed-size)) / 2);
            padding-bottom: 150px;
        }

    .before-overflow--top.banner-part-image .banner-part-image--content:nth-child(1) {
            padding-left: var(--_padding-outer);
            padding-right: var(--_padding-innner);
        }

    .before-overflow--top.banner-part-image .banner-part-image--content:nth-child(2) {
            padding-left: var(--_padding-innner);
            padding-right: var(--_padding-outer);
        }

.card {
    display: flex;
    flex-direction: column;    

    max-width: 70%;
    padding-block: 50px;
    padding-inline: 25px;
    border-radius: var(--radius-small);
}

.card .wp-block-buttons:last-child {
        margin-top: auto;
        padding-top: 20px;
    }



footer .footer_logo-container {
        width: fit-content;
        height: fit-content;
        max-width: 90%;
        margin-inline: auto;
}

footer nav .wp-block-navigation__container {
        gap: 0;
}

footer nav .wp-block-navigation__container li:not(:first-child):before {
            content:"|";
            margin-inline: 20px;
        }



/* RESPONSIVE */

@media screen and (max-width: 1199px) {
    :root {
        --fixed-size: 850px;
    }
}

@media screen and (max-width: 899px) {
    :root {
        --fixed-size: 90%;
        --fixed-size--small: 90%;
        --fixed-size--tiny: 90%;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.container_img-text--content {
        flex-basis: unset !important;
    }

    .container_img-text {
    width: var(--fixed-size);
    flex-wrap: wrap !important;
    isolation: isolate;

        & .container_img-text--img {
            order: 1;
            width: 100%;
            flex-basis: 100% !important;
            flex-shrink: 0 !important;
        }

        & .container_img-text--content {
            --_offset-left: 80px;
            order: 2;
            z-index: 2;
            width: calc(var(--fixed-size) - var(--_offset-left));
            flex-basis: unset !important;
            flex-shrink: 0 !important;

            background-color: white;
            border-radius: var(--radius-small);
            padding: 25px;
            margin-top: -100px;
            margin-left: var(--_offset-left);

            box-shadow: 0px 0px 25px -15px var(--clr-bg--dark);
        }
    }
}

@media screen and (max-width: 781px) {

    .card:nth-child(2n) {
        margin-left: auto;
    }
}

@media screen and (max-width: 599px) {
    .banner-image {
        aspect-ratio: 3 / 2;
    }

    .list--stars {
        display: block;
        margin-inline: auto;
        width: fit-content;
        
      
        & li {
            max-width: unset;
            text-align: unset;
            margin-bottom: 20px;
        }
      
        & li::before {
            display: inline-block;
            
            margin-inline: unset;
            margin-right: 20px;
            margin-bottom: unset;
        }
    }
}

@media screen and (max-width: 449px) {
    .banner-image {
        aspect-ratio: 3 / 2;
    }

    .card {
        max-width: 90%;
        margin-inline: auto;
    }
}





/* ********** */
/* AUSBLENDEN */
/* Bitte nur Klassen aus liste entfernen,
die wieder eingeblendet werden sollen */
.ausblenden,
.wp-block-buttons:not(.button--datenschutz, .btn--terminvereinbarung) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* ********** */