/*
 Theme Name:   Infinite Child
 Theme URI:    http://demo.goodlayers.com/infinite
 Description:  Goodlayers Infinite Child Theme
 Author:       Goodlayers
 Author URI:   http://goodlayers.com
 Template:     infinite
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, right-sidebar, responsive-layout
 Text Domain:  infinite-child

 START YOUR CHILD THEME CSS HERE
*/
/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-italic.woff2') format('woff2');
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2');
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2');
}


:root {
      /* fixe Maße aus deinem Screenshot */
      --box-max-width: 424px;
      --box-padding-vertical: 32px;
      --box-padding-horizontal: 32px;

      /* Farben */
      --box-bg: #972d25; /* dunkleres Rot nach deinem Bild */
      --box-color: #fff;
    }

    .reference-box {
        position: absolute;
        bottom: -40px;
        left:10%;
        z-index: 2;
      background-color: var(--box-bg);
      color: var(--box-color);
      box-sizing: border-box;

      /* Breite und Zentrierung */
      width: 100%;
      max-width: var(--box-max-width);
      margin: 0 auto;

      /* Abstand innen (Padding) */
      padding: var(--box-padding-vertical) var(--box-padding-horizontal);
    }

    .reference-box h2 {
      margin: 0 0 1em;      /* Abstand unter der Überschrift */
      font-size: 1.25rem;   /* je nach Basis-Font-Size anpassen */
      line-height: 1.2;
      color:#ffffff;
    }

    .reference-box p {
      margin: 0;
      font-size: 1rem;
      line-height: 1.5;
    }

    /* Optional: Bei sehr kleinen Bildschirmen das Padding etwas verkleinern */
    @media (max-width: 500px) {
      .reference-box {
        padding: 24px 24px;
        left:0%;
      }
    }


table.footer_table {
    width: 100%;
    text-align: left;
    border: none;
    color:#ffffff;
}
table.footer_table tr:nth-child(odd) {
    background-color: transparent !important;
    color:#f4f4f4;
}
table.footer_table tr:nth-child(even) {
    background-color: transparent !important;
    color:#f4f4f4;
}
table.footer_table tr td {
    padding: 0px;
}
h3.infinite-widget-title {margin-top:20px;}
img.footer_logo { margin-bottom: 8px;}

.gdlr-core-page-builder-body [data-skin="Contact Homepage"] input[type="submit"]:hover {
  background-color: #972D25;
}

.font-white h3.gdlr-core-call-to-action-item-title {color:#ffffff !important;}

.gdlr-core-blog-info-wrapper {display:none !important;}

/* 1) Den äußeren Container (Background‐Wrapper) auf 100% Breite setzen */
.gdlr-core-pbf-background.gdlr-core-parallax {
  width: 100vw !important;        /* volle Viewport‐Breite */
  overflow: hidden;               /* alles, was übersteht, abschneiden */
  position: relative;             /* damit wir das Video absolut darin positionieren */
}

/* 2) Den Video‐Wrapper so anpassen, dass er kein festes Pixelmaß mehr hat */
.gdlr-core-pbf-background-video {
  position: absolute !important;  /* absolut im parent */
  top: 50%;
  left: 50%;
  width: 100vw !important;        /* volle Breite des Viewports */
  height: 100vh !important;       /* volle Höhe des Viewports, oder alternativ 100% der Eltern‐Höhe */
  transform: translate(-50%, -50%); /* exakt zentrieren */
  overflow: hidden;               /* falls Video übersteht */
}

/* 3) Das <video>‐Element so skalieren, dass es den Wrapper komplett füllt */
.gdlr-core-pbf-background-video video {
  position: absolute;             /* absolut innerhalb des Wrappers */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);/* zentriert halten */
  min-width: 100%;
  min-height: 100%;
  width: auto;                    /* Höhe oder Breite passt sich automatisch an */
  height: auto;
  object-fit: cover;              /* skaliert so, dass es den gesamten Container füllt, seitenverh. bleibt */
}

/* Optional: Falls dein übergeordneter Container (z. B. .gdlr-core-pbf-background) noch eine feste Höhe hat,
   kannst du diese auf „auto“ oder 100vh setzen, damit das Video nicht beschnitten wird. */
.gdlr-core-pbf-background {
  height: 100vh !important;       /* Video‐Area immer volle Fensterhöhe; oder eine fixe Bildschirm‐Höhe */
}

#datenschutzbestimmung h4 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0px;
  text-transform: none;
  font-family: "Open Sans", sans-serif;
  line-height: 1.2;
}

.infinite-header-background-transparent .sf-menu > .infinite-normal-menu li, .infinite-header-background-transparent .sf-menu > .infinite-mega-menu > .sf-mega, #infinite-header-background .sf-vertical ul.sub-menu li, .infinite-header-background-transparent ul.sf-menu > .menu-item-language li {
  background-color:rgba(0, 0, 0, 0.4) !important;
}
.infinite-header-background-transparent .sf-menu > li > .sub-menu a:hover, .infinite-header-background-transparent .sf-menu > li > .sub-menu .current-menu-item > a,.infinite-header-background-transparent .sf-menu > li > .sub-menu .current-menu-ancestor > a, .infinite-header-background-transparent .sf-menu > .infinite-mega-menu > .sf-mega a:hover, .infinite-header-background-transparent .sf-menu > .infinite-mega-menu > .sf-mega .current-menu-item > a, .infinite-header-background-transparent .sf-vertical > li > .sub-menu a:hover, .infinite-header-background-transparent .sf-vertical > li > .sub-menu .current-menu-item > a, .infinite-header-background-transparent .sf-vertical > li > .sub-menu .current-menu-ancestor > a {
    background-color:rgba(0, 0, 0, 0.4);
}
.infinite-navigation .sf-menu > .infinite-normal-menu .sub-menu, .infinite-navigation .sf-menu>.infinite-mega-menu .sf-mega-section-inner .sub-menu a {
    text-transform: none !important;
}
.infinite-navigation .sf-menu > .infinite-normal-menu .sub-menu, .infinite-navigation .sf-menu>.infinite-mega-menu .sf-mega-section-inner .sub-menu a {
    font-weight: normal;
}
.infinite-navigation .sf-menu > .infinite-normal-menu .sub-menu {
    font-size: 14px;
}
.infinite-mm-menu-wrap.mm-menu a, .infinite-mm-menu-wrap.mm-menu a:active, .infinite-mm-menu-wrap.mm-menu a:link, .infinite-mm-menu-wrap.mm-menu a:visited
{
    color: #ffffff;
}
ul.vorteile li {margin-bottom:20px;}
.margin-text {max-width:80%;}
@media (max-width: 768px) {
    .margin-text {max-width:100%;}
}

.gdlr-core-blog-modern-inner h3.gdlr-core-blog-title {background-color: #5f181866;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;  
}

.gdlr-core-blog-modern.gdlr-core-with-image .gdlr-core-blog-modern-content {
  padding: 0px 0px 0px 0px;
}

.gdlr-core-title-item-title-wrap h3.gdlr-core-title-item-title, .gdlr-core-text-box-item-content strong, .gdlr-core-text-box-item-content h3, .gdlr-core-text-box-item-content h4 {color:#5f1818 !important;}

.kontaktbox .gdlr-core-text-box-item-content strong, .wpcf7-not-valid-tip, .wpcf7-list-item-label, .kontaktbox p, .kontaktbox .wpcf7-response-output, .whiteme .gdlr-core-title-item-title-wrap h3.gdlr-core-title-item-title{color:#ffffff !important;}

.kontaktbox  input[type="submit"] {
    background-color: #972D25 !important;
}
.kontaktbox  input[type="submit"]:hover {
    background-color: #ab2e25 !important;
}

.headline-white .gdlr-core-text-box-item-content h3,.headline-white .gdlr-core-text-box-item-content h2,.headline-white .gdlr-core-text-box-item-content h1, .headline-white .gdlr-core-text-box-item-content p strong {color:#ffffff !important;}
.headline-white h3 {font-size:28px !important;}
.titel-leistungen {
  margin-top: -100px;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  position: absolute;
  bottom: 35px;
  height: 70px;
  width: 100%;
  padding-top: 10px;
}

.page-id-2039 .infinite-header-background-transparent .infinite-logo-inner {display:none;}
.infinite-header-style-plain.infinite-style-menu-right .infinite-logo {
    float: right !important;
}
.infinite-header-style-plain.infinite-style-menu-right .infinite-navigation {
    float: left !important;
}
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.footer-contact-icon {
  width: 20px;
  flex-shrink: 0;
}

.footer-contact-text {
  flex: 1;
}
.kontakt-footer i {margin-top:5px;}

.infinite-fixed-navigation.infinite-style-slide .infinite-logo-inner img {
  max-height: 65px !important;
}
.infinite-animate-fixed-navigation.infinite-header-style-plain .infinite-logo, .infinite-animate-fixed-navigation.infinite-header-style-boxed .infinite-logo {
  padding-top: 15px;
}

.bildquellen-wrapper {
  display: grid !important;
  gap: 1.5em !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 600px) {
  .bildquellen-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (min-width: 1024px) {
  .bildquellen-wrapper {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

.bildquelle {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 0.5em !important;
  border: 1px solid #ccc !important;
  padding: 1em !important;
  border-radius: 6px !important;
  background-color: #f9f9f9 !important;
}

/* Standard: Desktop & Tablet */
#videogruppe {
    display: block;
}

#videogruppe_mobil {
    display: none;
}

/* Mobil (bis 767px) */
@media (max-width: 1024px) {
    #videogruppe {
        display: none !important;
    }

    #videogruppe_mobil {
        display: block !important;
    }
}
.bild_mobil {width:100%;}