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

@font-face {
    font-family: Ubuntu;
    font-weight: bold;
    src: url("fonts/Ubuntu-Bold.ttf") format("truetype");
}

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



html { 
    height: 100%;
    margin-bottom: 1px;
}

form {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0px;
    font-size: 18px;
    color: #333;
    xbackground-color: #f0f2f4;
    xbackground-color: #CCCCCD;
    background-image:url(../images/corporate/bg-body.png);
    background-repeat: repeat;	
    box-sizing: border-box;
} 




#header {
    background-image:url(../images/corporate/bg-head.png);
    background-color: #FFFFFF;
    background-repeat: repeat-x;
}


#wrapper {
    width: 100%;
    max-width: 1200px;
    font-weight: normal;
    z-index: 10;
    margin: auto;
}


#toplinks {
    width: 100%;
    height: 18px;
    display: block;

}

#toplinks a {
    color: #666666;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    border-right: 1px solid #666;
    padding: 0 8px;

}



#toplinks a:hover, #toplinks #active_menu {
    color: #FFF;
}

#toplinks #active_menu {
    text-decoration: underline;
}

#aevlogo {
    border:none;
    width: 340px
}

ul.menu {
    margin: 0; padding: 0 0 0 12px;
    list-style-type: none;
    xline-height: 18px;
}

ul.menu li {
    display: inline-block;
}



/* --------------------------------------------------horizontal  menu */

#menu {
    width: 543px;
    height: 35px;
    margin: auto;
    margin-left: -10px;
    margin-top: 2px;
    background-image:url(../images/corporate/bg-menu.png);
    background-repeat: no-repeat;
}

#menu ul {margin-top: 4px; padding: 5px 0 0 25px}


#menu li {
    border-left: 1px solid #79663d;
    margin: 0;
    padding: 0 12px;
    line-height: 14px;
}

#menu li:first-child {border: none} /* first */

#menu a {
    xfont-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #8b681c;
    text-decoration: none;
}


#current a {text-decoration: underline}

#menu a:hover {	text-decoration: underline;}


#current a:hover {
    color: #fabc35;	
    text-decoration: none;
}




#logo {
    margin-top: 9px;
    height: 73px;
    padding-left: 25px;
    zoom: 1;
}

#titledesc {margin-left: -5000px; margin-top:-5000px; width: 2000px}


#login {
    float: right;
    margin: -20px 20px 0 0 ;
    padding: 7px;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}

.boxLoginInput {
    display: flex;
    align-items: center;
    height: 30px;
}

.boxLoginInput label {
    height: 100%;
    font-size: 1.5rem; /* Adjust as needed to match the height of the input */
    margin-right: 0;
    display: flex;
    align-items: center; /* Centers the icon vertically within label */
    color:  #005c75;
    background-color: silver;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    
}

.boxLoginInput label.icon-lock {
    padding-left: 4px;
    margin-right: -4px
}

.boxLoginInput input {
    height: 100%; /* Make input fill the height of its container */
    padding: 0.5rem; /* Adjust as needed for padding */
    box-sizing: border-box; /* Ensures padding doesn't affect total height */
    font-size: 16px;
    border:none;
    width: 120px
}





#login button {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    float: right;
    margin: -1px 0 0 0 ;
    padding: 6px 12px;
}

#login #btnLogout {margin: 5px auto; display: inline-block}

input.scale2 {
    transform: scale(2);
    zoom: 1!important; 
    height: 16px!important;
    margin-right: 10px;
}


input[type='radio'] , input[type='checkbox'] {zoom: 1.6}
input[type='checkbox'].invalid {outline: 2px solid #f00}




#divLogin div {float: left; margin-right: 5px}

#divLogout {color: #aaa}


#formRegister input, textarea {width: 88%}

article .boxTeaserRegister {margin-top: -40px}


#content {line-height: 1.5em; }


#content div.box1 h1 {
    margin: -27px -30px 20px -31px;
    line-height: 16px;
    color: #444;
    font-size: 24px;	
}

h1.frontpage {float: left; border: none; margin: 0; text-transform: none; font-size: 20px; color: #333; font-weight: normal;}

#content div.box1 h1:first-line {font-size: 24px; color:#444}



article {
    margin-bottom: 18px;
    /*    padding: 10px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);	*/
}

article.fp {display: inline-block; margin: 10px}

article h1 {margin: 8px 0}


img.imgarticle {
    margin: 0px 30px 20px 0px; 
    float: left;
    width: 160px
}

.imgcontainer {
    width: 160px;
    float: left;
    max-height: 200px;
    margin: 0px 40px 15px 0px; 
}

.imgcontainer img.imgRef {
    display: block;
    width: 100%; 
    max-height: 200px;
}




.imgarticle320 {
    margin: 0px 20px 15px 0px; 
    float: left;
    width: 320px
}

.clear:after, .clearfix:after{
    content: "";
    clear: both;
    display: table;
}




.latest {
    background-color: #f9f7f1;
    padding: 20px;
    border: 1px solid #DDD;
    line-height: normal;
}
.latest h4 {margin: 3px 0;}	



.frontpage .boxleft, .frontpage .boxright { 
    width: 49%;
    padding: 0;
}

.padPer {
    padding: 3%
}



.tease {
    background: #f5f6f8;
    padding: 3%;
    border-bottom: 1px dotted #999;
    border-top: 1px dotted #999;
}

.tease img {
    float: left;
    margin: -5px 25px 0 0;
    height: 100px;
}

.teaserAnfrageStarten {
    display: none; /* fadeIn */
}



.boxleft h2 , .boxright h2 {
    margin: 12px 0px 0 0px;
    padding: 10px 3%;
    font-size: 26px;
    font-weight: normal;

    text-align:center;
    text-shadow: 0 -1px 1px rgba(255,255,255, 1)


}

.boxleft h2 a, .boxright h2 a{font-weight: normal; color: #333}


.boxleft p, .boxright p {
    line-height: 19px;
}

.boxleft{
    float: left;	
    background-image:url(/images/template/bg-box-left.jpg);
}

.boxright{
    background-image:url(/images/template/bg-box-right.jpg);
    float: right;		
}




#content.article .boxleft, #content.article .boxright {
    width: 318px;
}
.article .boxleft, .article .boxright, 
.category .boxleft, .category .boxright, 
.section .boxleft, .section .boxright   {
    width: 328px;
    padding: 8px;
    font-size: 11px;

}


#tagleft h3, #tagright h3 {	margin-top: 0;}





/*  T  Y  P  O  */
a, a:visited {
    text-decoration: none;
    font-weight: bold; 
    color: #3B5998;
}


#title {
    padding-top: 10px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 38px;
    font-weight: bold;
    color: #c8ced3;
    text-shadow: 0 1px 0 #EEE, 0 -1px 4px #111133;
}

#title .orange {color: #fabc35;}


h1, h2, h3, h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
    font-family: 'Fjalla One', sans-serif;
    line-height: 1.3;
    font-weight: normal
}


h1 {
    font-size: 32px;
    font-weight: normal;
}



h2.heading {
    font-weight: normal;	
    font-size: 18px; 
    background-color: #FFF;
    padding: 8px 16px;
    margin: -10px 0 18px 0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}



h2#subtitle {
    font-family: 'Arial', Arial, sans-serif;
    font-size: 12px; color: #f7cb6a;
    text-transform: uppercase;
    margin-top: -21px;
    padding-left: 0px
}

h2#subtitle a, h2#subtitle a:visited {
    font-family: 'Arial', Arial, sans-serif;
    font-size: 13px; color: #f7cb6a;
    font-weight: normal;
}

h3.bgcol{
    color: black;
    background: #f7cb6a;
    text-transform: uppercase;
    padding: 4px 10px;
    margin: 0 0 12px 0
}


#content h2.detail {font-size: 20px; color: #999; font-weight: normal; border:none}
.blog h2 a { font-weight: normal}


div.logobox {
    box-sizing: border-box;
    object-fit: contain;
    position: relative;
    float: left; 
    height: 70px;
    width: 24%;  /*196px; 150px; für 5 spaltig */
    min-width: 115px;
    margin: 0.5%; 
    text-align:center;
    vertical-align: middle;
    padding: 5px 11px;
    border: 1px solid #DDD;
    background: #FFF;	
}

div.logobox img {
    display: block;
    max-width: 85%!important;
    max-height: 66px;
    margin: auto;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
}


.btn, a.buttonMedium,
button, input.button, 
button,
.buttonKaufen a, 
a.button,
a.button1,
a.back, a.fwd{
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
    text-transform: uppercase; 
    text-decoration: none;
    font-size: 16px;
    color: white;
    background: #223D51; 
    padding: 8px 20px;
    border: none; 
    border-radius: 3px;
    margin: 10px 0px;
    box-shadow: none;
    cursor: pointer; 
}

button:visited, a.btn:visited {color: white}

button:hover, a.button:hover{
    text-decoration: none; 
    border: 1px solid none
}

input.full {width: 95%}

a.btnRed {font-weight: normal; background: none; color: crimson; border: 1px solid crimson; border-radius: 4px; padding: 3px 20px}
a.btnRed:hover {background: crimson; color: white}

.primary, a.primary, button.primary {    
    font-family: 'Fjalla One', sans-serif;
    font-size: 18px; 
    font-weight: normal;
    text-transform: uppercase; text-decoration: none;
    color: white;
    background: #223d51;
    padding: 7px 25px;
    margin: 10px 5px;
    border: none;
    border-radius: 25px;
}

.btnNext {float: right}
.btnBack {float: left; background: silver!important}

.primary:focus {    outline: none; }

.primary:hover, a.primary:hover, button.primary:hover {
    color: white; font-weight: normal;
    text-shadow: 1px 2px 1px rgba(0,0,0,.5)
}

.btnSmall {
    background: #ddd;
    color: #223D51;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 3px
}

table.anfragen {
    text-align: left!important;
}

table.anfragen td, table.anfragenstart td {
    background-color:#FFC;
    border-collapse: collapse;
    xxxborder: 1px solid #DDD;
    padding: 3px;
    vertical-align: top;
    font-size: 18px;

}

table.anfragenstart td {
    background: #FFF;
}

table.anfragen th {
    padding: 3px;
}

table.anfragenstart td.red {background-color: rgba(200,0,0,.25);}
table.anfragenstart td.green {background-color: rgba(0,200,0,.25);}


#tagList div {
    padding: 2px 0;
    flex: 1 1 200px
}
#tagList a.tag {
    position: relative; 
    display: block; 
    height: 24px;
    padding-right: 40px;
    overflow: hidden; 
    
}

.circle {
  float: left; 
    font-family: monospace;
    display: inline-block;
    font-size: 60%;
    font-weight: normal;
    background: silver;
    color: white; 
    border-radius: 20px;
   height: 20px; 
   width: 20px;
   line-height: 20px;
   text-align: center;
    margin: 4px 6px 0 10px;
}

/* ********************* NEW 2024   */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 20px 0;
}


.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin: 20px 0;
}



.grid-content {
    display: grid;
    grid-template-columns: 70% 30%; /* 75% for left column, 25% for right column */
    gap: 30px; /* Optional: space between columns */
    width: 100%; /* Full width of the container */
}

.grid-content article {
    width: 100%;
    float: none
}

.boxWhite {
    background: white;
    padding: 25px;
    border-left: 1px solid #eee
}

.city {
    padding: 2px 5px
}

.city:nth-child(odd) {
    background: #f9f7f1;
}

.inline {
    display: inline!important
}

.formRow {
    margin-bottom: 8px;
}