/*
Theme Name: IT & Netsolutions
Text Domain: itn-ol.de
Version: 1.1
Description: Custom theme
Author: IT & Netsolutions
Author URI: https://www.itn-ol.de
*/


/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('_webfont/bebas-neue-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



@font-face {
  font-family: 'Sparkasse Serif';
  src:  url('_webfont/SparkasseSerif_web_Rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Sparkasse Rg';
  src:  url('_webfont/Sparkasse_web_Rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sparkasse IT';
  src:  url('_webfont/Sparkasse_web_It.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


:root {
  --primary-font: 'Sparkasse Serif';
  --secondary-font: 'Sparkasse Rg';
  --third-font: 'Bebas Neue';

--color-background: #fff;
--color-header: #f6b9d3;
--color-footer: #ff0000;
--color-font: #0b0b0b;
--color-headline: #0b0b0b;


  --width-total: 2000px;
  --width-content: 1320px;
  --padding-content: 60px;
  --padding-content-mobil: 30px;
}



div.video_desktop {display: block;}
div.video_mobil {display: none;}

/* Breite Editor */
.wp-block {
  margin: 0 auto;
  max-width: var(--width-total);
}
/* Blöcke mit class .wide */
.wp-block[data-align="wide"] {
  margin: 0 auto;
  max-width: var(--width-total);
}
/* Blöcke mit class .full-width */
.wp-block[data-align="full"] {
  margin: 0 auto;
  max-width: none;
}

/* Container */

html {
  font-family: var(--primary-font);
    font-style: normal;
	height:100%;
  	margin:0;
  	padding:0;
    overflow-x: hidden;
}


body {
  font-family: var(--primary-font);
    font-style: normal;
    font-size: 16px;
	line-height:150%;
 	color: var(--color-font);
	overflow-x: hidden;
  background-color: var(--color-background);
 	margin:0;
 	padding:0;
	
}


/* Bilder */


img.avatar {display: none !important;}

img { border-style:none; width: 100% !important; height: auto; max-width: 100% !important; }

section.slider img { border-style:none; width: 100% !important; height: auto; max-width: 100% !important; }


svg { overflow:hidden;}

figure.distance_1 {padding: 50px 0 50px 0;}


:where(figure) {
  margin: 0 0 -7px 0 !important;
  padding: 0 0 0 0;
}

figure.abgerundet img {border-radius: 20px;}

img.pfeile {     
  width: 100% !important;
  height: auto;
}

img.image_1-1 {     
  width: 100% !important;
  aspect-ratio: 1/1;
  object-fit: cover;
}


img.image_1-1 {     
  width: 100% !important;
  aspect-ratio: 1/1;
  object-fit: cover;
}


img.image_400-400 {     
  width: 100% !important;
  max-width: 400px !important;
  aspect-ratio: 1/1;
  object-fit: cover;
}

img.image_1000-710 {     
  width: 100% !important;
  aspect-ratio: 1000/711;
  object-fit: cover;
}

  img.image_1000-785 {     
    width: 100% !important;
    aspect-ratio: 1000/785;
    object-fit: cover;
   }


  img.image_1000-880 {     
    width: 100% !important;
    aspect-ratio: 1000/880;
    object-fit: cover;
  }

  img.image_2000-710 {     
    width: 100% !important;
    aspect-ratio: 2000/710;
    object-fit: cover;
}

img.stoerer {max-width: 200px !important;}

img.einstieg { width: calc(50% + 18px) !important;}



/* ACF */
.select2-container--default .select2-results > .select2-results__options {
  padding-left: 20px;}

/* The Grid */

img.tg-item-image {      width: 100% !important;
    aspect-ratio: 1000/711;
    object-fit: cover;}

#grid-723 .tg-item-content-holder {
  min-height: 200px;
}

#grid-1403 .tg-item-content-holder {
  min-height: 200px;
}


.tg-search-icon, input[type="text"].tg-search {
  color: #000 !important;
  background-color: #fff !important;

}

div.tg-filters-holder {
  padding: 20px 0 20px 0;;
}


  .tg-filter-name { 
    font-size: 16px;
    font-weight: 500;
    color:#fff !important ; 
    transition: 0.2s; 
    text-decoration: none; 
    border-radius: 40px; 
    border: 2px solid #ff0000;
  background-color:#ff0000; 
    display: inline-grid;
    justify-content: center;
    align-content: center;
    margin-top: 20px;
    margin-right: 10px;
    padding: 4px 20px;
    gap: 10px;
    }

    div.tg-filter-active   .tg-filter-name {
      color:#ff0000 !important ; 
      background-color: #fff; 
      transition: 0.2s;   } 
	
.tg-item .tg-item-title a
{hyphens: none !important;}




/* Accordeon*/

#panel_pt {
  padding: 0px 0 0 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

 .accordion_pt {
  background-color: #fff;
  cursor: pointer;
  padding: 0px 0 0px 0;;
  width: 100%;
  text-align: left;
  font-size: 1em;
  border: none;
  outline: none;
  transition: 0.4s;
  border-bottom: 0px solid #ff0000;
}

div#line_accordion {  display: grid;
  grid-column: 1 / 5; 
  max-width: 308px;
  width:100%; height: 10px;
   margin: 5px 0px 0px 0;
    border-radius: 0 0px 0px 0;}

.accordion_pt.active, .accordion_pt:hover {
  background-color: #fff;
}

.accordion_pt:after {
  content: url(img/zugeklappt.png); 
  float: right;
  margin-left: 5px;
  margin-top: 0px;
}

.accordion_pt.active:after {
  content: url(img/aufgeklappt.png); 
  margin-bottom: 7px;
}



/* Formatierungen*/

hr {color:#00011a; margin-top:20px; margin-bottom:0px; width:100%;}


sub,
sup {
 	position:relative;
 	font-size:75%;
 	line-height:0;
 	vertical-align:baseline;
}
sub { bottom:-.25em;}
sup { top:-.5em;}





/* content */

div#distance_header {margin-top: 90px;}

section {
  display: flex;
  align-items: center;
  justify-content: center;
 }

 section.blank { background: none;}
section.grau {	background-color:#f3f7f9;}
section.blue{background-color:#E0EFFF;}
section.verlauf_1 {background: linear-gradient(132.29deg, rgba(255, 124, 124, 0.2) 23.01%, rgba(255, 255, 255, 1) 91.1%);}

section.slider { 
  display: flex;
  align-items: center;
  justify-content: center;
}

section.slider p {padding: 0; margin: 0;}



div#paragraph_content {
	display: grid; 
  grid-template-columns: repeat(12, 1fr); 
	grid-template-rows: auto; 
  grid-column-gap: 24px;
  grid-row-gap: 0px;
width: calc(100% - (var(--padding-content)*2));
	max-width: var(--width-content);
	padding-right: var(--padding-content);
	padding-left: var(--padding-content);
	}
 

  div#paragraph_rahmen {
 margin: 0px auto;
    width: 100%;
    max-width: 2000px;
    display: grid; 
    grid-template-columns: 60px auto 60px;
    }

    div#paragraph_bild-text {
      margin: 0px auto;
      display: grid; 
      grid-template-columns: repeat(12, 1fr); 
      grid-template-rows: 1fr; 
      grid-column-gap: 24px;
      grid-row-gap: 0px;
    width: 100%;
      max-width: var(--width-content);
      }

div#pic_right { width: calc(44% + 18px) !important;}
div#pic_right_einstieg { width: calc(50% + 18px) !important;}

div#pic_left { width: calc(44% + 18px) !important;}


.div1 {grid-row: 1 / 2 !important;   grid-column: 2 / 3 !important; z-index:3;}
.div2 {grid-row: 1 / 2 !important;   grid-column: 2 / 4 !important; z-index:2;}
.div3 {grid-row: 1 / 2 !important;   grid-column: 1 / 3 !important; z-index:1;}


  div#paragraph_content.big {
    grid-column-gap: 24px;
    grid-row-gap: 0px;
    width: 100%;
    max-width: 2000px;
    padding-right: 0;
    padding-left: 0;
    }

    section {font-family: var(--primary-font);}


section > div#paragraph_content.distance_1 {padding-top: 50px; padding-bottom: 50px;}
section > div#paragraph_content.distance_2 {padding-top: 50px; padding-bottom: 0px;}
section > div#paragraph_content.distance_3 {padding-top: 0px; padding-bottom: 50px;}



/*Site - article */  

article#full {
grid-column: 1 / 13; 
grid-row: auto;
align-content: flex-start;
padding: 0;
margin: 0; 
 }

 article#full.block { display: block;}

 article#full.h_center { 
  display: grid;
  justify-content: center;
}

article#full.v_center { 
  display: grid;
  align-content: center;
}

article#full.bottom { 
  align-content: flex-end;
}

article#full.stoerer { 
  grid-row: 1 / 2 !important;
  padding-top: 170%;
}

article.content_right {
  display: flex;
  justify-content: end;
}
article.content_left {
  display: flex;
  justify-content: start;
}
/*Site -content_block */  




div#content_block.zweispaltig {
column-count: 2;
column-gap: 5%;
padding-top: 0px;}

div#content_block.zweispaltig p {
padding: auto;
margin: 0;
  }

  div#content_block.einruecken_top { margin-top: 2.5%;}
  div#content_block.einruecken_top2 { margin-top: 20px;}
div#content_block.einruecken_left { padding-left: 40px;}
div#content_block.einruecken_right { padding-right: 40px;}

div#content_block.text_zentriert {text-align: center;}
div#content_block.text_right {text-align: right;}


div#content_block.info {
background-color:#ff0000;
color: #fff;
padding: 30px 30px;
border-radius: 20px;
}

div#content_block.biomodul {
  display: grid; 
  grid-template-columns: repeat(10, 1fr); 
	grid-template-rows: auto; 
  grid-column-gap: 24px;
  grid-row-gap: 0px;
  background-color:#fff;
  padding: 24px 24px;
  border-radius: 0px;
  margin: -24px -24px;
  }

  div#content_block.biomodul2 {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: auto; 
    grid-column-gap: 24px;
    grid-row-gap: 0px;
    background-color:#fff;
    padding: 24px 24px;
    border-radius: 0px;
    margin: 0;
    }
  

 




div#copyright { 
  position: absolute;
  padding: 5px 10px;
  margin-top: -26px;
  background-color: rgb(0, 0, 0, 0.3);
 }




 div#autor {padding: 0px 0 0 0;}

div#line_small {  display: grid;
  grid-column: 1 / 13; 
  width:100%; height: 2px;
   margin: 5px 0px 5px 0;
    border-radius: 0 20px 20px 0;}

    div#line_short {  display: grid;
      grid-column: 2 / 5; 
      width:100%; height: 10px;
       margin: 10px 0px 10px 0;
        border-radius: 0 0px 0px 0;}


        div#line_short.distance_linie_einstieg  {margin: 40px 0 0 0;}

 /*Site - teaser_unten  */  

 div#content_block.teaser_unten {
  display: grid; 
  grid-template-columns: 32% 32% 32%; 
	grid-template-rows: auto; 
  grid-column-gap: 2%;
  grid-row-gap: 0px;
  padding: 40px 0 40px 0;

  }   




  div#teaser_unten {
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border: 2px solid #fff;
    transition: 0.2s; 
  }
 
div#teaser_unten img {
  aspect-ratio: 1000/711;
  object-fit: cover;
}

  div#teaser_unten:hover {
    border: 2px solid #ff0000;
    transition: 0.2s; 
    }  



  div.teaser_inhalt {
text-align: center;
font-size: 20px;
font-weight: 700;
line-height: 120%;
padding: 10px 0 10px 0;
  }

  div.teaser_date {
    text-align: right;
    font-size: 14px;
    font-weight: 300;
    line-height: 120%;
    padding: 20px 0 0px 0;
      }

 /*Site - Beitrag  */  

 hr.line_news {color:#00011a; margin-top:30px; margin-bottom:50px; width:100%;}

 div#headline_news {padding: 0 0 50px 0;}


    div#button_news {padding: 20px 0 0px 0; text-align: right;} 


    @media screen and (orientation: portrait) {

div.video_desktop {display: none;}
div.video_mobil {display: block;}
    }   

@media only screen and (max-width: 900px) {
 
  div#line_short {  grid-column: 1 / 6; }
  div#line_accordion {  grid-column: 1 / 6; } 


  div#paragraph_rahmen {
       grid-template-columns: 30px auto 30px;
       }
   
     
   .div1 {grid-row: 2 / 3 !important;   grid-column: 2 / 3 !important;}
   .div2 {grid-row: 1 / 2 !important;   grid-column: 1 / 4 !important;}
   .div3 {grid-row: 1 / 2 !important;   grid-column: 1 / 4 !important;}

  div#paragraph_content {

    width:calc(100% - 60px);
    padding-left: 30px;
    padding-right: 30px;
    }


.mobil_order_1 {order:1;}
.mobil_order_2 {order:2;}

div#pic_right { width: 100% !important;}
div#pic_right_einstieg { width: 100% !important;}

 
div#content_block.einruecken_left { padding-left: 0px;}
div#content_block.einruecken_right { padding-right: 0px;}

div#content_block.mobil_distance_content {padding: 20px 0px 20px 0px;}


img.pfeile {     
width: 50px !important;
transform: rotate(90deg);
margin-bottom: 5px;
}

img.stoerer {max-width: 100px !important;}
article#full.stoerer { 
  grid-row: 1 / 2 !important;
  padding-top: 0;
  margin-top: -50px;
  margin-left: 60%;
}

div#content_block.teaser_unten {
  grid-template-columns: 100%; 
  padding: 40px 0 40px 0;

  }   

  div#teaser_unten {
    margin-bottom: 20px;
  }
}



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


}