/*
Theme Name: Spectra One Child
Theme URI: 
Author: Steinkrug
Author URI: 
Description: A child theme of spectra one
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: spectra-one-child
Tags: 
*/

html {
    scroll-behavior: smooth;
    
}
body{
padding-top:0px !important;
}
/*body.home{
padding-top:0px !important;
}*/

body:not(.home) .wp-block-cover img {
  filter: blur(8px);
  transform: scale(1.05);
}

h2{
    font-weight: bold;
}

.website-logo{
  margin-left: -18px !important;
}
.burger-menu{
  margin-right: -18px !important;
}
.wp-block-uagb-buttons .uagb-button__wrapper .uagb-buttons-repeater:hover, .wp-block-button__link:hover{
  background-color: #000 !important;
}
.wp-block-button__link:hover .uagb-button__link{
  color: #fff !important;
}


.info-box{
    padding: 40px 20px 30px 20px;
    border-top: 12px solid var(--wp--preset--color--secondary);
}

.info-box .uagb-ifb-title-wrap {
    display: flex !important;
    flex-direction: column !important;
}
.info-box .uagb-ifb-title-prefix {
  order: 2; /* Nach dem Titel */
}

.info-box .ugb-infobox-title {
  order: 1;
}

.info-boxes .wp-block-uagb-container{
  display: inline-block;
}


.hamburger {
  position: relative;
  width: 65px;
  height: 30px; 
  cursor: pointer;
  border: none;
  background: none;
  z-index: 9999; 
}


.hamburger span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;           
  background-color: var(--wp--preset--color--background);
  transition: all 0.3s ease;
}

.hamburger.active span {
  background-color: #FFFFFF;
}


.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}


.hamburger.active span:nth-child(1) {
  transform: translateY(14px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0; 
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg); 
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9998;
}


.overlay.show {
  display: flex; 
}


.overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.overlay ul li {
  margin: 20px 0;
}

.overlay ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.5rem; 
}

header > div{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)) !important;
}
.swt-sticky-header.swt-sticky-header-active {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: none !important;
}

.wp-block-navigation__responsive-container-close svg, 
.wp-block-navigation__responsive-container-open svg {
    height: 50px;
    width: 50px;
}

.container-padding{
  padding:80px 20px !important;
}
.container-padding.leistungen-home{
  padding: 80px 20px 140px 20px !important;
}
.container-padding-more-info{
  padding-top: -56px;
}


.kundenslider .overflow-container {
  overflow-x: hidden !important;
  width: calc(100% + 40px) !important;
  left: -20px;
  position: relative;
  max-width: none !important;
}
.overflow-container .wp-block-uagb-container {
  left: 0;
}
.kundenslider .wp-block-uagb-image {
  width: 181px !important;
  flex: 0 0 181px;
}




/*Verlauf auf Startseite im Background*/
.home .kundenslider {
    position:relative;
}
.home .kundenslider::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2000px; /* je nach SVG-Höhe anpassen */
  background: url('/wp-content/uploads/2025/07/blue-orange-background.svg') no-repeat bottom center;
  background-size: cover;
  pointer-events: none;
  z-index: -1; /* oder höher, falls überlagert werden soll */
}


/*aktuelles List view loop auf Startseite*/
.aktuelles-list .col-title-date{
  margin-bottom:20px;
}
.aktuelles-list li{
    padding:30px;
    background-color: #fff;
}

/*für button in aktuelles list view*/
.align-right{
    text-align: right;
}
.aktuelles-excerpt-weiterlesen {
    margin-bottom: 0px !important;
}

.aktuelles-list a.wp-block-read-more {
  display: inline-block;
  color: #000;
  white-space:nowrap;     
  background-color: #fff;
  border: 1px solid #000;
  padding: 12px 80px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.aktuelles-list a.wp-block-read-more:hover {
  background-color: #000;
  color: #fff;
}

.kundenslider .wp-block-cb-slide-v2{
  max-width: 200px !important;
}
.kundenslider .wp-block-uagb-advanced-heading{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.ueber-unternehmen .wp-block-media-text__content p{
    margin-top: 0px;
} 

/*Geschäftsführer Background für PNG Bilder*/
.image-grey-bg{
    background-color: #F2F2F2;
}

.kontakt-icons-zeile {
  display: flex;
  gap: 30px;
}

.kontakt-icon-link {
  width: 85px;
  height: 85px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.3s;
}

.kontakt-icon-link:first-child {
  margin-left: 0;
}

.kontakt-icon-link img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

/* ---------- Variablen nur einmal definieren ---------- */
:root{
  --year-w: 100px;   /* Breite Jahresspalte                */
  --gap   : 50px;    /* Abstand Jahr ↔ Dot ↔ Text          */
  --dot   : 50px;    /* Außendurchmesser des Dots          */
}

/* ---------- NamespacED Timeline ---------------------- */
.my-timeline{
  list-style:none;
  margin:60px 0;                         /* Abstand zum Umfeld        */
  padding:0;                             /* Browser-Default reset     */
  padding-inline-start:0;                /* Safari / Edge reset       */
  position:relative;
  width:100%;      
  overflow: visible;                      
}

/* ----------  Vertikale Linie (2 px + Fade)  --------------- */
.my-timeline::before{
  content:"";
  position:absolute;
  top:-30px;   
  left:var(--year-w);
  height:calc(100% + 60px);            /* 30 px Fade unten + 30 px Überstand */
  width:2px;
  background:linear-gradient(
      to bottom,
      transparent 0 -30px,
      #0d2e5c 30px calc(100% - 30px),
      transparent 100%
  );
  z-index:0;
}

.my-timeline li{
  display:grid;
  grid-template-columns: var(--year-w) var(--dot) minmax(0,1fr);
  //*rid-template-columns:var(--year-w) var(--dot) 1fr;*/
  align-items:start;
  margin-bottom:50px;
  width:100%;
}
.my-timeline .t-year, .my-timeline .t-text{
  font-weight: 400;
  padding-top: 5px;
}
.my-timeline .t-year{
  width: var(--year-w);
}

.my-timeline .t-dot{
  left: -25px;
  width:var(--dot);
  height:var(--dot);
  background:#cdd6e3;          /* Aussen hellblau              */
  border-radius:50%;
  position:relative;
}
.my-timeline .t-dot::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:20px; height:20px;
  background:#0d2e5c;          /* Innen dunkelblau            */
  border-radius:50%;
}

.my-timeline .t-text{
  display: block;
  margin:0;
  max-width: 100%;
  position: static;
  hyphens: auto;
}

.history-timeline-container{
  max-height: 421px;
}



.map-wrap{
  position:relative;
  max-width:100%;
}
.map-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* ------------ Hotspot-Button --------------------------------- */
.hotspot{
  /*   Koordinaten im Inline-Style:  style="--x:55%; --y:33%;"   */
  --outer:14px;                          /* Standard-Durchmesser      */

  position:absolute;
  left:calc(var(--x) - var(--outer)/2);  /* zentriert auf X           */
  top:calc(var(--y) - var(--outer)/2);   /* zentriert auf Y           */

  width:var(--outer);
  height:var(--outer);

  /* 2-farbiger Punkt als SVG-Background */
  background:url("/wp-content/uploads/2025/07/map-marker.svg") no-repeat center/contain;

  border:none;
  padding:0;
  cursor:pointer;
  outline:none;                          /* WP-Focus-Ring optional    */
}

/* ------------ Tooltip ----------------------------------------- */
.hotspot .tip{
  position:absolute;
  top:calc(var(--outer) + 10px);         /* 10 px unter dem Punkt     */
  left:50%; transform:translateX(-50%);
  background:#0d2e5c; color:#fff;
  padding:6px 12px;
  font-size:14px;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index: 10;
}
.hotspot:hover .tip,
.hotspot:focus .tip{ opacity:1; }

/* ------------ Mobile (> Touch-Treffer vergroessern) ------------- */
@media (max-width:640px){
  .hotspot{
    --outer:18px;                        /* groesser            */
    background-size:contain;             /* SVG skaliert verlustfrei  */
  }
  .hotspot .tip{
    top:calc(var(--outer) + 12px);
    font-size:15px;
  }
}


.container-eckdaten h5{
  font-size: var(--wp--preset--font-size--small);
  font-weight: 300;
}
.container-eckdaten p{
  font-size: var(--wp--preset--font-size--medium);
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 700;
}


.container-druckpruefung .wp-block-media-text{
  display: block;
}
.container-druckpruefung .wp-block-media-text__media{
  max-width:50%;
  float: left;
  margin-right:50px;
  margin-bottom: 20px;
}
.container-druckpruefung .wp-block-media-text__content{
  padding: 0px;
}


.container-leistungen .wp-block-uagb-advanced-heading h3.uagb-heading-text{
  margin-top: 30px;
}

.wp-block-file {
  background-color: var(--wp--preset--color--tertiary);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom:20px;
}

/* Link zum Dateinamen */
.wp-block-file a:not(.wp-block-file__button) {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: var(--wp--preset--font-size--xx-large);
}

/* PDF-Button */
.wp-block-file__button {
  background-color: var(--wp--preset--color--tertiary);
  color: #000;
  border: 1px solid #000;
  border-radius: unset;
  padding: 0.5rem 2.5rem;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--wp--preset--font-size--x-large);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover-Interaktion */
.wp-block-file__button:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}



.job-item{
  border:1px solid #e5e5e5;
  background:#f3f3f3;
  margin-bottom:20px;
}

.job-item summary{
  list-style:none;        
  cursor:pointer;
  padding:40px 45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.job-item h3{
  margin:0;
  font-size:1.35rem;
  font-weight:700;
}
.container-job-content h4{
  font-weight: 700;
}

.job-item summary::after{
  content:"+";
  font-size:1.8rem;
  transition:transform .25s ease;
}

.job-item[open] summary::after{
  content:"–"; 
  transform:rotate(180deg);
}

.container-job-content{
  padding:0 45px 50px 45px !important; 
}
.container-job-content ul{
  margin-top: 0px;
  padding-left: 24px;
}




.uagb-icon-list__source-wrap{
  /*padding-top: 10px !important;*/
}
.uagb-icon-list__label{
  margin-bottom: 40px;
}



/*globale Informationenbox oberhalb Footer*/
.informationenbox{
    background-color: var(--wp--preset--color--primary);
    padding: 30px 0px;
    min-width: 205px !important;
}
.informationenbox h4{
    font-weight: 300;
    margin-top: 25px;
    margin-bottom: 0px;
}
.informationenbox:hover{
  background-color: #000;;
}

footer .wp-block-navigation-item a.wp-block-navigation-item__content:hover{
  color: var(--wp--preset--color--secondary) !important;
} 


body.privacy-policy p{
	margin-top:0px !important;
	margin-bottom: 0px !important;
}
body.privacy-policy .wp-block-uagb-advanced-heading{
	margin-top:30px !important;
}


.wpforms-submit{
  background-color: var(--wp--preset--color--secondary) !important;
  color: #fff !important;
  border-radius: 0 !important;
  width:100% !important;
  padding-top: 13px;
  padding-bottom: 13px;
}

.wpforms-required-label{
   color: var(--wp--preset--color--secondary) !important;
}
.wpforms-confirmation-container-full{
   background-color: var(--wp--preset--color--secondary) !important;
   border:none !important;
}
.wpforms-confirmation-container-full p{
  color: #fff !important;
}




@media only screen and (max-width: 1023px) {
    .aktuelles-list a.wp-block-read-more {
      padding:12px 24px;
    }
    .container-padding.leistungen-home{
      padding: 80px 20px 80px 20px !important;
    }
    
}


@media only screen and (max-width: 600px) {
    .ueber-unternehmen .wp-block-media-text__content{
        margin-top: 30px;
        padding: 0px;
    } 
}


.uagb-slider-container .swiper-pagination {
    bottom: -60px !important;
}

.uagb-slider-container .swiper-pagination-bullet {
    margin:0 10px !important;
    width: 50px !important;
    height: 8px !important;
    border-radius: 0px;
    background-color: var(--wp--preset--color--primary) !important;
    opacity: 0.5;
    transition: background 0.3s;
}

.uagb-slider-container .swiper-pagination-bullet-active {
    background-color: var(--wp--preset--color--primary) !important;
    opacity: 1;
}

.uagb-slider-container h3 {
    padding-top: 30px;
}



@media only screen and (max-width: 976px) {
    .slider-button-above .uagb-buttons__wrap{
        justify-content: right !important;
    }
}


@media (max-width: 781px) {
    .reverse-mobile {
        flex-direction: column-reverse;
    }
    .alignfull .uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{
      width: 100% !important;
    }
    .aktuelles-list a.wp-block-read-more{
      width: 100% !important;
      text-align: center !important;
    }
    .wp-block-button{
      width: 100% !important;
    }
    footer p.has-text-align-right, footer p.has-text-align-center{
        text-align: left;
    }
    .uagb-slider-container .swiper-pagination {
        bottom: -60px !important;
    }
    .uagb-slider-container .swiper-pagination-bullet {
        margin:0 5px !important;
        width: 30px !important;
    }
    .slider-button-mobile{
        margin-top: 60px !important;
    }
	.col-margin-bottom{
        margin-bottom:60px !important;
    }
    .container-eckdaten .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 45% !important;
    }
    .container-druckpruefung .wp-block-media-text__media{
        max-width:100%;
        margin-right:0px;
        margin-bottom: 40px;
    }

    .wp-block-media-text {
      display: flex !important;
      flex-direction: column !important;
    }

    .wp-block-media-text .wp-block-media-text__media,
    .wp-block-media-text .wp-block-media-text__content {
      width: 100% !important;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
      order: 1 !important;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
      order: 2 !important;
    }
    .container-job-content{
      padding: 0px 25px 50px 20px !important;
    }
    .job-item summary{
      padding:40px 20px;
    }
    .benefits-cols{
      gap: unset !important;
    }
    .cover-home-columns{
      position: relative;
      /*top: -70px;*/
    }
    .aktuelles-list .has-text-align-right {
      text-align: left !important;
    }
    .history-timeline-container {
      padding:0px 30px !important;
      font-size: var(--wp--preset--font-size--medium);
    }
    .wp-block-file {
      flex-direction: column;
      align-items: flex-start;
    }

    .wp-block-file__button {
      margin-left: 0px !important;
      margin-top: 0.5em;
      width: 100%;
      text-align: center;
    }
}

@media only screen and (max-width: 1260px) {
  .website-logo{
    margin-left: 0px !important;
  }
  .burger-menu{
    margin-right: 0px !important;
  }
}