@charset "utf-8";

/**
2 Theme Name: itn
3 Theme URL: https://www.itn-ol.de
6 Author URL: https://www.itn-ol.de
7 **/



/* eb-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/eb-garamond-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/eb-garamond-v27-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


 /* menu header */

#sfm-sidebar .sfm-icon-facebook a::after {background: #d9e0e4 !important;}
#sfm-sidebar .sfm-icon-instagram a::after {background: #d9e0e4 !important;}
#sfm-sidebar .sfm-icon-youtube a::after {background: #d9e0e4 !important;}

 /* accordeon */
.accordion {
	
		display: grid; 
  grid-template-columns: 1fr 70px; 
	grid-template-rows: auto; 
	grid-row-gap: 0px; 
	width:: 100%;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  transition: 0.4s;
		
}


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

.panel_termine {
  padding: 0;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
margin-bottom: 10px;
	padding-left: 0px;
}


div#beitrag_termin .accordion:after { 
    display: grid;
    justify-content: center;
    align-content: center;
    font-family: 'Material Symbols Outlined';
  content: "\f1e3";
  top: 0px;
  margin-right: 0em;
  color: #d18e00;
    font-size: 35px;
  position: relative;
border: 2px solid #d18e00;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: -11px;

}


div#beitrag_termin .active:after {
        display: grid;
    justify-content: center;
    align-content: center;
    font-family: 'Material Symbols Outlined';
  content: "\f1e0";
  top: 0px;
  margin-right: 0em;
  color: #d18e00;
    font-size: 35px;
  position: relative;
border: 2px solid #d18e00;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: -11px;

}




div#beitrag_termin {border-bottom: 3px solid #d9e0e4; margin-bottom: 20px;}

div#beitrag_klangkuenstler {border-bottom: 4px solid #000; margin-bottom: 20px;}



figure.acc_bild img {padding-top: 20px !important; width: 60px !important; height: auto;}

figure.acc_bild_right  { margin: 0;}

figure.acc_bild_right img {width: 40%; height: auto; border: 0; float: right; margin: 30px 0px 10px 30px;}


div#beitrag_termin a { 
    color: #d18e00 !important; 
    transition: 0.2s !important; 
    text-decoration: none !important; 
    background-color:#fff !important; 
    border-radius: 30px !important; 
    padding: 6px 20px 10px 20px !important; 
    border: 2px solid #d18e00;
}
div#beitrag_termin a:hover { 
    color: #fff !important; 
     background-color:#d18e00 !important; 
    transition: 0.2s !important;
    border: 2px solid #d18e00;} 


div#beitrag_termin a::before {   
    font-family: 'Material Symbols Outlined' !important; 
  content: "\e5da" !important; 
  top: 4px !important; 
  margin-right: .1em !important; 
  position: relative !important; 
color: #d18e00 !important; }


div#beitrag_termin a:hover::before {color: #fff !important; }

hr.acc {color:#d9e0e4; border: 0; background-color:#d9e0e4;  margin-top:60px; margin-bottom:23px; width:100%; height: 4px;}

/* Formatierungen */


hr {color:#d9e0e4; border: 0; background-color:#d9e0e4;  margin-top:60px; margin-bottom:30px; width:100%; height: 4px;}

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

img { border-style:none; border:0; max-width: 100%; }
svg { overflow:hidden;}



/* Listen Formatierungen */

div#main_center > div#main_grid > article#main_content ul {padding: 0px 0px 0px 25px;}
div#main_center > div#main_grid > article#main_content ul li {list-style-type: disc; line-height: 1.5em; }
div#main_center > div#main_grid > article#main_content  li::marker  { color:#d43916; font-size:1em;}






/* Überschriften*/

h1,
h2,
h3,
h4,
h5,
h6 {
 	margin-top:0;
 	margin-bottom:.5rem;
}

 h1 {
font-weight: 400;
font-style: normal;
font-size:80px; 
line-height:96px;
	color: #040404;
 }

 h1.rechtliches {

margin-bottom: 50px;
 }

 h2 {
font-weight: 400;
font-style: normal;
font-size:30px; 
line-height:36px;
	color: #d18e00;
 }

h3 {
font-weight: 400;
font-style: normal;
font-size:30px; 
line-height:36px;
	color: #d18e00;
 }

 h3.rechtliches {
margin-top: 50px;
 }

 h4 {
font-weight: 600;
font-style: normal;
font-size:30px; 
line-height:36px;
	color: #d18e00;
 }




	
/* Container */

html {

overflow-x: hidden;
height:100%;
 margin:0;
 padding:0;
background-color: #fff;
}


body {
margin:0;
overflow-x: hidden;
font-family: 'EB Garamond';
font-weight: 300;
font-size: 24px;
line-height:30px;
	background-color: #fff;
color: #000;
}

#framework {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: 
    'header'
    'main'
    'footer';
background-color: #fff;
}


/* header */





 #framework >header {
grid-area: header;
display: grid;
grid-template-columns: 100%;
width: 100%;
height: 100px;
position: fixed;
justify-content: center;
top: 0;	
z-index: 999;
 background-color: rgba(112, 122, 126, .5);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
border-bottom: 3px solid #d18e00;
}



#framework >header.full { background-color: rgba(112, 122, 126, 1); transition: 0.2s; }
#framework >header.half {  background-color: rgba(112, 122, 126, .5); transition: 0.2s; } 

#framework > header > div#header_center {
	display: grid; 
    grid-template-columns: 1fr; 
	grid-template-rows: auto; 
	grid-row-gap: 0px; 
	width:calc(100% - 80px);
	max-width:1300px;
	padding: 0px 40px 0 40px;
	margin: 0px auto 0px auto;
}




#framework > header > div#header_center > section.header_content {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	max-height: 100px;
	height:100px;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	}

section.header_content > div#logo_header { display: grid; align-content: center; justify-content: flex-start; margin-top: 0px; height: 100px; font-size: clamp(25px, 3vw, 40px); color:#d18e00; }

section.header_content > div#logo_header p {padding: 0; margin: 0;}

section.header_content > div#logo_header a {color:#d18e00; text-decoration: none;}
section.header_content > div#logo_header a:hover {color:#d18e00; text-decoration: none;}

section.header_content p {padding: o; margin: 0;}
section.header_content a {color: #000; text-decoration: none;}
section.header_content a.hover {color: #000; text-decoration: none;}


/* content */


#framework > main  {
grid-area: main;
display: grid;
background-color: #ffffff;
grid-template-columns: 100%;
justify-content: center;
	}


#framework > main > div#main_bg_color { }
.white {background-color: #ffffff;}
.hellgrau {background-color: #d9e0e4;}

.grau_white {background-image:linear-gradient(180deg, #d9e0e4 70%, #ffffff 44%)}


#framework > main > div#main_bg_color.white a { color: #d18e00; transition: 0.2s; text-decoration: none;  }
#framework > main > div#main_bg_color.white a:hover { color: #707a7e; transition: 0.2s;  } 

#framework > main > div#main_bg_color.white a::before {   
    font-family: 'Material Symbols Outlined';
  content: "\e5da";
  top: 4px;
  margin-right: .1em;
  position: relative; }


#framework > main > div#main_bg_color.white a.button { 
    color: #fff; 
    transition: 0.2s; 
    text-decoration: none; 
    background-color:#d18e00;
    border-radius: 30px;
    padding: 6px 20px 10px 20px;
}
#framework > main > div#main_bg_color.white a.button:hover { 
    color: #fff;
     background-color:#eac586;
    transition: 0.2s;  } 

#framework > main > div#main_bg_color.white a.button::before {   
    font-family: 'Material Symbols Outlined';
  content: "\f72d";
  top: 4px;
  margin-right: .1em;
  position: relative;
color: #fff;}




#framework > main > div#main_bg_color.hellgrau a { color: #040404; transition: 0.2s; text-decoration: none;  }
#framework > main > div#main_bg_color.hellgrau a:hover { color: #d18e00; transition: 0.2s;  }   

article#telefon a::before {   
    font-family: 'Material Symbols Outlined';
  content: "\e04e";
  top: 10px;
  margin-right: 0em;
  color: #d18e00;
    font-size: 1.4em;
  position: relative; }

article#mail a::before {   
    font-family: 'Material Symbols Outlined';
  content: "\e0e6";
  top: 4px;
  margin-right: .1em;
  color: #d18e00;
  position: relative; }



article#content_right a { 
    color: #d18e00 !important; 
    transition: 0.2s !important; 
    text-decoration: none !important; 
    background-color:#fff !important; 
    border-radius: 30px !important; 
    padding: 6px 20px 10px 20px !important; 
    border: 2px solid #d18e00;
}
article#content_right a:hover { 
    color: #fff !important; 
     background-color:#d18e00 !important; 
    transition: 0.2s !important;
    border: 2px solid #d18e00;} 


article#content_right a::before {   
    font-family: 'Material Symbols Outlined' !important; 
  content: "\f1f0" !important; 
  top: 4px !important; 
  margin-right: .1em !important; 
  position: relative !important; 
color: #d18e00 !important; }


article#content_right a:hover::before {color: #fff !important; }







article#content_right a.link { 
    color: #d18e00 !important; 
    transition: 0.2s !important; 
    text-decoration: none !important; 
    background-color:#fff !important; 
    border-radius: 0px !important; 
    padding:0 !important; 
    border: 0px solid #d18e00;
}
article#content_right a.link:hover { 
   color: #707a7e !important; 
     background-color: transparent!important; 
    transition: 0.2s !important;
    border: 0px solid #d18e00;} 


article#content_right a.link::before {   
    font-family: 'Material Symbols Outlined';
   content: "\e5da" !important;
  top: 4px;
  margin-right: .1em;
  position: relative;}


article#content_right a.link:hover::before { color: #707a7e !important;  }














div.nav-previous a::before {  
        display: grid;
    justify-content: center;
    align-content: center;
    font-family: 'Material Symbols Outlined' !important;
        font-size: 35px;
  content: "\f1e6" !important; 
    transition: 0.2s; 
color: #d18e00 !important;
border: 2px solid #d18e00;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: -30px;
}

div.nav-previous a:hover::before {
    color: #707a7e !important;border: 2px solid #707a7e;
  }







div.nav-next a::before {   
           display: grid;
    justify-content: center;
    align-content: center;
    font-family: 'Material Symbols Outlined' !important;
        font-size: 35px;
  content: "\f1df" !important; 
    transition: 0.2s; 
color: #d18e00 !important;
border: 2px solid #d18e00;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: -30px; }

div.nav-next  a:hover::before {
    color: #707a7e !important;border: 2px solid #707a7e;
  }



#framework > main > div#main_bg_color > div#main_center {
	width:calc(100% - 80px);
	max-width:1300px;
	padding: 80px 0px 50px 0px;
	margin: 0px auto 0px auto;
	}


#framework > main > div#main_bg_color > div#main_center.nav_post {
	padding: 20px 0px 20px 0px;
	
	}



#framework > main > div#main_bg_color > div#main_center.vita_top {
	width:calc(100% - 80px);
	max-width:1100px;
	padding: 150px 0px 50px 0px;
	}

#framework > main > div#main_bg_color > div#main_center.vita {
	width:calc(100% - 80px);
	max-width:1100px;
    padding: 0px 0px 30px 0px;
	}



#framework > main > div#main_bg_color > div#main_center.slider {
	width:100%;
    max-width: 100%;
	padding: 0px 0px 0px 0px;
	}


#framework > main > div#main_bg_color > div#main_center.slider p {margin: 0; padding: 0;}



#framework > main > div#main_bg_color > div#main_center.slider { width: 100%; max-width: 100%; padding: 0; margin: 0; }

#framework > main > div#main_bg_color > div#main_center > div#main_grid {
	display: grid; 
    grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto; 
	grid-row-gap: 20px; 
	grid-column-gap: 20px;
	}

#framework > main > div#main_bg_color > div#main_center > div#main_grid.nav_post {
	display: grid; 
    grid-template-columns: 70px 1fr 70px;
	grid-template-rows: 100px; 
	grid-row-gap: 20px; 
	grid-column-gap: 20px;
	}

article#main_content {
	grid-column: 1 / 13;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
    }




article#start_content {
	grid-column: 1 / 9;
	display: grid;
	padding: 0px 30px 0px 0px;
	margin:0px 0px 0px 0px;
    justify-content: flex-start;
    align-content: flex-start;
    order:1;
	}

article#start_pic {
	grid-column: 9 / 13;
	display: grid;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
    justify-content: center;
    align-content: center;
    order:2;
	}


article#telefon {
	grid-column: 1 / 7;
	display: grid;
	padding: 30px 0px 20px 0px;
	margin:0px 0px 0px 0px;
    justify-content: center;
    align-content: center;
    order:1;
	}

article#mail {
	grid-column: 7 / 13;
	display: grid;
	padding: 30px 0px 20px 0px;
	margin:0px 0px 0px 0px;
    justify-content: center;
    align-content: center;
    order:2;
	}

article#mail p, article#telefon p {margin: 0; padding: 0;}

article#content_left {
	grid-column: 1 / 5;
	display: grid;
	padding: 30px 0px 20px 0px;
	margin:0px 0px 0px 0px;
    justify-content:  flex-start;
    align-content:  flex-start;
    order:1;
	}

article#content_right {
	grid-column: 5 / 13;
	display: grid;
	padding: 30px 0px 20px 40px;
	margin:0px 0px 0px 0px;
    justify-content: flex-start;
    align-content:  flex-start;
    order:2;
	}


div#prev_post { display: grid; justify-content: center;    align-content:  center;  padding-top: 30px;}
div#next_post { display: grid; justify-content: center;    align-content:  center;  padding-top: 30px;}
div#middle_post { display: grid; justify-content: center;    align-content:  center;  font-weight: 600px; font-size: 30px;}


nav.beitrag_nav_left > div.nav-links > div.nav-next {display: none;} 
nav.beitrag_nav_right > div.nav-links >  div.nav-previous {display: none;} 



/* footer */
	
#framework >footer {
grid-area: footer;
display: grid;
grid-template-columns: 100%;
justify-content: center;
background-color:#707a7e;
border-top: 3px solid #d18e00;}


#framework > footer > div#footer_center {
	display: grid; 
    grid-template-columns: 1fr; 
	grid-template-rows: auto; 
	grid-row-gap: 0px; 
	width:100%;
	max-width:1300px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
}

#framework > footer > div#footer_center section.footer_content {
	display: grid;
    grid-template-columns: 45% 55%;
	grid-template-rows: auto;
	grid-row-gap: 5px; 
	grid-column-gap: 5px;
	width: 100%;
	padding: 30px 0px 30px 0px;
	margin: 0px 0 0px 0;
	color: #040404;
	
	}

	



div#footer_center > section.footer_content div.footer_copyright { display: grid; justify-content: flex-end; align-content: center; font-size: 22px; line-height: 28px;   }	

div#footer_center > section.footer_content div.footer_copyright p {margin: 0; padding: 0;}


div#footer_center > section.footer_content div.footer_block_2 { display: grid; justify-content: flex-start; align-content: center; font-size: 22px; line-height: 28px;   }	




nav#footer {padding-top: 0px;   }
 


div#footer_center a { color: #000; transition: 0.2s; text-decoration: none;  }
div#footer_center a:hover { color: #666; transition: 0.2s;  }    


  /*Site - NAV footer */  
  
nav#footer ul  {
margin:0px;
padding: 0px 0 0px 0;
margin-top:0px;
margin-left:0;
}


nav#footer ul li{
list-style-type: none;
width: auto;
padding: 0px;
text-align: left;
font-size:22px;
line-height:28px;
display: inline;
}


nav#footer li a {
color: #040404;
text-decoration: none;
height:auto;
padding: 0;
}

nav#footer li a:before {
 
 content: " / " ;
color:#d18e00;
}

nav#footer li a:hover {color:#d18e00; }


ul#menu-footer li.current-menu-item a, ul#menu-footer li.current-post-ancestor a, ul#menu-footer li.current-page-ancestor  a { color:#d18e00; }


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



	
	
}

	
	
@media only screen and (max-width: 900px) {
    
 #framework > header > div#header_center {
	width:calc(100% - 40px);
	padding: 0px 20px 0 20px;
}   
    
    

  
#framework > main > div#main_bg_color > div#main_center.vita_top {
	width:calc(100% - 40px);
	padding: 150px 20px 0 20px;
	}

#framework > main > div#main_bg_color > div#main_center.vita {
	width:calc(100% - 40px);
	padding: 0px 20px 0 20px;
	}  

    
#framework > main > div#main_bg_color > div#main_center {
	width:calc(100% - 40px);
	padding: 50px 20px 50px 20px;
	} 
    


     
article#start_content {
	grid-column: 1 / 13;
	display: grid;
	padding: 0px 0px 0px 0px;
    order:2;
	}

article#start_pic {
	grid-column: 1 / 13;
	display: grid;
	padding: 0px 0px 0px 0px;
    order:1;
	}	

    article#start_pic img {max-width: 500px;}   

 #framework > footer > div#footer_center section.footer_content {
	display: grid;
  	grid-template-columns: 100%;
    } 
   
div#footer_center > section.footer_content div.footer_copyright { justify-content: center;  }	

div#footer_center > section.footer_content div.footer_block_2{ justify-content: center;  }	
    
    
}

@media only screen and (max-width: 700px) {
  body {
font-size: 20px;
line-height:26px;  }
    
    

article#telefon {
	grid-column: 1 / 13;
	padding: 25px 0px 0px 0px;
    margin: 0;
	justify-content: center;
    align-content: center;
    order:1;
	}

article#mail {
	grid-column: 1 / 13;
	padding: 0px 0px 30px 0px;
    margin: 0;
	justify-content: center;
    align-content: center;
    order:2;
	}

    
    
    
article#content_left {
	grid-column: 1 / 13;
	display: grid;
	padding: 30px 0px 20px 0px;
	margin:0px 0px 0px 0px;
    justify-content:  flex-start;
    align-content:  flex-start;
    order:1;
	}

article#content_right {
	grid-column: 1 / 13;
	display: grid;
	padding: 30px 0px 20px 0px;
	margin:0px 0px 0px 0px;
    justify-content: flex-start;
    align-content:  flex-start;
    order:2;
	}    
    
    
figure.acc_bild_right img {width: 100%;  height: auto; border: 0; float: left; margin: 30px 0px 20px 0px;}   
    
    
}



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

    
 h1 {
font-weight: 400;
font-style: normal;
font-size:35px; 
line-height:54px;
	color: #040404;
 }	

    
section.header_content > div#logo_header { font-size: 18px; }    
    

}