/*
Theme Name: DHG Teilhabe - WordPress Theme
Theme URI: http://flex-on.net
Description: WordPress Template
Author: Ingo Weimann
Author URI: http://flex-on.net
*/

:root {
  --prim1: #312782;  
  --prim2: #8679b6;
  --prim3:#ee7d00;  
  --prim4:#ffbc87;  
  --schwarz: #000000;
  --weiss: #ffffff;
  
}

.arrow {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;

    width: 0;
    height: 0;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #312782;

    transition: transform .2s ease;
  }

a[data-toggle="collapse"]:not(.collapsed) .arrow {
    transform: rotate(90deg);
    }

a {
  color:var(--prim1);
  text-decoration:underline
}
a:hover,
a:focus {
  color:var(--prim1);
  }

.logolink {
  border-bottom:0!important;
}

.weiss{
  background-color:white;
}

.lila{
  background-color:var(--prim1);
}
.textlila a{
  color:var(--prim1);
  text-decoration: none;
}

.flieder{
  background-color:var(--prim2);
}
.textflieder a{
  color:var(--prim2);
  text-decoration: none;
}
.orange{
  background-color:var(--prim3);
  }
.textorange a{
  color:var(--prim3);
  text-decoration: none;
  }
.orangehell{
  background-color:var(--prim4);
  }  
.textweiss a{
  color:white;
  text-decoration: none;
}  

@font-face {
font-family: 'Aptos';
src: url('fonts/Aptos.ttf')
format("truetype");
}

.nodisplay{
  display:none;
}

#cb{
  display:inline;
  width:auto;
  padding: 0;
}

.logo{
  width:100%;
  height:auto;
}

.um {
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	color: #666;
	font-size: 15px;
	margin-bottom: 30px !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	opacity: 1!important; 
}


.um-field-radio-option{
  font-size: 15px !important;
	font-weight: bold;
	font-weight: 600;
  padding-left:10px;
}

.um-field-label label{
  position:relative;
  padding:0;
  bottom:-10px
}

.um-field {
	position: relative;
	padding: 0!important;
}

.um-s1,
.um-s2 {
  display: block!important;
  font-size:16px;
  padding:13px;
  border: solid #ddd 1px!important;
}


.um-row-heading {
	padding: 5px 0;
	font-size: 18px!important;
	font-weight:600!important;
  color:#004489!important;
  font-family:Calibri,Arial,sans-serif
}

.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active {
    background: #004489!important;
}

.um *,
.um *:before,
.um *:after {
	/*! box-sizing: content-box; */
}

textarea{
  resize: none;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.boxgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 0;
  line-height: 22px;
  font-size:17px;
}

.box{
  aspect-ratio: 1;
  width:100%;
  }

.boxweiss{
position: relative;
background-color: white;

}  

.boxtriangellila{
  position: relative;
  aspect-ratio: 1;
  width:100%;
  background: linear-gradient( 135deg, white 50%, #312782 50%);
}
.boxtriangellilatop{
  position: relative;
  aspect-ratio: 1;
  width:100%;
  background: linear-gradient( 135deg, #312782 50%, white 50%);
}

.boxcircleorange{
  background-color:var(--prim3);
  border-radius: 50%;
}
.boxcircleflieder{
  background-color:var(--prim2);
  border-radius: 50%;
}

.rightbottom{
 position: absolute;
  bottom: 15px;
  right: 15px;
}

.leftbottom{
 position: absolute;
 bottom: 15px;
 left: 15px;
}

.lefttop{
 position: relative;
  top: 15px;
  left: 15px;
}

.leftmiddle{
 display:block;
 height:50%;
 position: relative;
 left: 15px;
 top:45%;
 }

 .pfeil{
 font-size: 14px;
 }

body{font-family:Aptos,Arial,sans-serif;font-size:18px;color:var(--prim1)}
strong{color:--var(prim3);font-size:18px}
h1{color:var(--prim3);font-size:30px;font-weight:700;margin-top:0;margin-bottom:10px;padding-top:0}
h2{color:var(--prim3);font-size:21px;font-weight:bold;margin:30px 0 15px 0}
h3{color:var(--prim1);font-size:21px;font-weight:bold;margin-top:0px;}
h4{color:var(--prim1);font-size:21px;font-weight:bold;margin:-10px 0 10px 0 ;padding-top:0}
h5{color:var(--prim1);font-size:21px;font-weight:bold;margin:-10px 0 0 0 ;padding-top:0}
em{font-style:normal;font-weight:700}
.col-md-12, .navbar-default{padding:0;margin:0}
.content li{list-style-type:square}
.content ul{margin-bottom:24px;}
.content img{float:right;margin-left:20px;margin-top:10px;}
ul strong{font-size:21px;font-weight:bold;margin:30px 0 0 0 ;}

.headboxleft{padding: 0 80px 30px 0}
.headboxright{background-color:#E5ECF2;padding:0}
.headboxright img{height:158px;width:100%}
.navigation{padding:0;margin:0}
.content{padding:75px 0 38px 38px;min-height:750px;}
.contentstart{padding:25px 0 38px 38px;min-height:750px;}
.clearfix{margin-bottom:30px;}
.footer{height:31px;padding-top:0;text-align: center; color:white;padding:3px 0;font-size:17px}
.footer a{color:white;text-decoration:none}

.mainnav{
margin:0;padding:25px 0 0 0 ;
background-color:white;
}

.mainnav li{
width:100%;
margin:3px 0 0 0; 
}

.mainnav a{
color:var(--prim1);
background-color:white;
padding:0;
margin-bottom:-2px;
border-bottom: 2px solid var(--prim1)
}

.nav>li>a:hover{
  background-color:white
}

.mainnav  .active a{
color:var(--prim3);   
border-bottom: 2px solid var(--prim3);
padding-left:12px;
background-image: url('/wp-content/themes/dhg-teilhabe/img/arrow.gif');

}

.nav > li > a {
    padding: 5px 0 0 0;
    text-decoration:none
    
}

.mainnav .active a:hover,
.mainnav .active a:focus {
  text-decoration: none;
  background-color:white;
  color:var(--prim3);
  }

.navbar{padding:20px 83px 0 0 ; border: 0px solid #dddddd;}

.contentleft, .contentright{
padding:0;
margin:0;
}


.date{
  text-align:right;
}



@media (min-width: 1200px) {
  .container {
    max-width: 1240px;
  }
}

@media only screen and (max-width : 992px) {
  .mainnav{padding:0;width:250px}
  .headboxleft{padding: 20px 0 20px 0}
  .headboxright img{height:auto;width:100%}
  .content{padding: 0 20px 60px 20px;}
  .contentright img{float:left;margin:0}
  .navbar{padding-right:0}
  .contentstart{padding:25px 20px 0 20px}
  .mainnav{padding:0 20px 0 20px}
 .navbar{padding-bottom:20px}
  }  

@media only screen and (max-width : 768px) {
  .footer{height:28px; font-size:14px}
  .content{padding: 0 10px 60px 10px;}
  .content img{display: block;max-width: 100%;height: auto;}
  .contentstart{padding:25px 15px 50px 15px}
  .mainnav{padding:0 10px 0 10px}
.boxgrid {
  grid-template-columns: repeat(3, 1fr); 
  }

}

@media only screen and (max-width : 640px) {
  .boxgrid {
  grid-template-columns: repeat(2, 1fr); 
  }

  .navbar{padding-top:0;padding-bottom:20px}

}
   
.collapsebox{
background-color: var(--prim4);padding:15px;
}