/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Roboto Slab', sans-serif;
   font-weight:		400;
   font-size:		16px;
   color:			var(--text);
   line-height:		145%;
   letter-spacing:	0.02em;
}


#system-message { margin: 0px; }
/* bootstrap import */

img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ul.unstyled, ol.unstyled { list-style: none;}
.visually-hidden {display: none;}
* {box-sizing: border-box;}
/* ---------------------------------- */


:root {
  --text: #1d1d1b;
  --blau1: #1f3c90;
  --blau2: #d4edfc;
  --grau: #dadada;
  --gruen: #dfe8dd;
}

    #desktop { display: none; }
    #mobile { display: block; }   



header { width: 100%; position: relative; padding: 20px; display: flex; justify-content: space-between; background: white; z-index: 1000;}

#logo { width: 150px; position: relative;}

#kontakticons {margin-right: 49px;}
#kontakticons img {background: var(--blau1); padding: 3px; width: 44px; height: 44px; margin-left: 5px;}
#kontakticons img:hover {background: var(--grau);}



#inhalt { width: auto; margin: 60px 20px;  }



#interesse { width: auto; margin: 60px 20px;  }
#interesse h3 { margin: 0px; padding: 0px; font-size: 18px; line-height: 130%; font-weight: 700; color: var(--blau1); position: relative; padding-left: 40px;}
#interesse h3::before { content: ''; background: var(--blau1); position: absolute; width: 50px; height: 16px; left: -20px; top: 4px;}
#interesse ul {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;}
#interesse ul li {padding: 5px 10px; background: var(--blau2); }
#interesse ul li.current {display: none;}
#interesse ul li:hover {background: var(--blau1); }
#interesse ul li a {color: var(--text); font-weight: 700;}
#interesse ul li:hover a {color: white;}


#showbox  {  width: 100%; height: 150px; overflow: hidden; position: relative; z-index: 1;}
#showbox img {  width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;}

.box {padding: 20px; background: var(--blau2); position: relative;}
.box-small {padding: 20px; background: var(--blau2); position: relative;}
.box h2 { color: var(--blau1); }

.rand-l-hell, .rand-r-1, .rand-r-1-hell, .rand-r-2, .rand-r-2-hell {position: relative;} 

.rand-r-1::after { position: absolute; content: ''; left: 90%; bottom: -10px; right: -10px; top: 50%; border-right: 10px solid var(--blau1); border-bottom: 10px solid var(--blau1); z-index: -1;} 
.rand-r-1-hell::after { position: absolute; content: ''; left: 90%; bottom: -10px; right: -10px; top: 50%; border-right: 10px solid var(--blau2); border-bottom: 10px solid var(--blau2); z-index: -1;} 
.rand-r-2::after { position: absolute; content: ''; left: 30%; bottom: -10px; right: -10px; top: 70%; border-right: 10px solid var(--blau1); border-bottom: 10px solid var(--blau1); z-index: -1;} 
.rand-r-2-hell::after { position: absolute; content: ''; left: 30%; bottom: -10px; right: -10px; top: 70%; border-right: 10px solid var(--blau2); border-bottom: 10px solid var(--blau2); z-index: -1;} 

.rand-l-hell::after { position: absolute; content: ''; right: 30%; bottom: -10px; left: -10px; top: 70%; border-left: 10px solid var(--blau2); border-bottom: 10px solid var(--blau2); z-index: -1;} 

.rand-top::after { position: absolute; content: ''; right: 20px; top: -10px; width: 30%; height: 20px; background: var(--blau1); z-index: -1;} 


.email {padding: 2px; background: var(--blau1);}
.email:hover {padding: 2px; background: var(--grau);}


img.aktuell-gruen {}

.aktuell-g {background: var(--gruen); }


footer {margin-left: 20px; background: var(--blau2); padding: 20px; position: relative;}
footer::before { position: absolute; content: ''; right: 20%; top: -10px; left: -10px; bottom: 70%; border-left: 10px solid var(--blau1); border-top: 10px solid var(--blau1); z-index: -1;} 
footer ul {margin: 0; padding: 0;}
footer ul li {margin: 5px 0; padding: 5px 0; border-bottom: 1px solid var(--blau1);list-style: none;}
footer a {color: var(--text);}
footer a:hover {color: var(--blau1);}

h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 30px; line-height: 130%; font-weight: 700; color: var(--blau1); padding-left: 40px; position: relative;}
h1::before { content: ''; background: var(--blau1); position: absolute; width: 50px; height: 24px; left: -20px; top: 8px;}
h2 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; }
h3 { margin: 0px; padding: 0px; font-size: 1em; line-height: 130%; font-weight: 700; }
h4 { margin: 0 0 10px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; }

img.streifenimg {position: absolute; width: 40px; transform: translate(-13px, -26px); transition: 0.2s ease; animation: fazeUp 2s ease-out;}
@keyframes fazeUp {
    from {margin-top: 10px;}
    to {margin-top: 0px;}
}

ul.streifen {padding-left: 0px; margin: 0;}
ul.streifen li { margin: 10px 0; list-style: none;}

ul.streifen li::before {
  content: "";
  display: inline-block;
  width: 35px;  /* Breite des Balkens */
  height: 7px; /* Höhe des Balkens */
  background-color: var(--grau); /* Farbe des Balkens */
  margin-right: 10px; /* Abstand zum Text */
}


ul.checkmark {
  list-style: none;
  padding: 0; margin: 0;
}

ul.checkmark li { padding-bottom: 10px; border-bottom: 1px solid var(--blau1); margin-bottom: 10px; display: flex;}
ul.checkmark li:last-child {margin-bottom: 0px; }

ul.checkmark li::before {
  content: "";
  display: inline-block;
  width: 20px; min-width: 20px; /* Breite des Icons */
  height: 20px; /* Höhe des Icons */
  background-image: url("/images/icons/Checkmark.svg"); /* Pfad zum Bild */
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px; /* Abstand zum Text */ margin-bottom: -3px;
}




a { text-decoration: none; outline: none; color: var(--blau1);  }
a:hover { text-decoration: none; color: var(--blau2); }
a:focus { text-decoration: none; outline: none; }

p {margin: 0; }

a.button {padding: 7px 15px; background: var(--blau1); color: white; transition: 0.2s; display: inline-block; margin: 5px 5px 5px 0;}
a.button:hover {padding: 7px 18px; background: white; color: var(--blau1); transition: 0.2s;}

a.button2 {padding: 7px 15px; background: var(--blau1); color: white; transition: 0.2s; display: inline-block; margin: 5px 5px 5px 0;}
a.button2:hover {padding: 7px 18px; background: var(--blau2); color: var(--text); transition: 0.2s;}

video {width: 100%; height: auto; }


#webdesign  { margin-top:20px; background: var(--blau1) url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px; z-index: 10;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }


.clear { line-height: 0; }

#scrollup {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--blau1);
    color: white;
    cursor: pointer;
    padding: 7px 2px;
    width: 30px;
}
#scrollup:hover { background-color: var(--blau2);}







/*----------WIDGETKIT-----------*/
.uk-scope {position: relative; z-index: 100;}
.uk-scope .uk-h1, .uk-scope .uk-h2, .uk-scope .uk-h3, .uk-scope .uk-h4, .uk-scope .uk-h5, .uk-scope .uk-h6, .uk-scope .uk-heading-2xlarge, .uk-scope .uk-heading-3xlarge, .uk-scope .uk-heading-large, .uk-scope .uk-heading-medium, .uk-scope .uk-heading-small, .uk-scope .uk-heading-xlarge, .uk-scope h1, .uk-scope h2, .uk-scope h3, .uk-scope h4, .uk-scope h5, .uk-scope h6 {
  margin: 0; padding: 0;
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 700;
  color: var(--blau1);
  text-transform: none;
}
.uk-scope * + address, .uk-scope * + dl, .uk-scope * + fieldset, .uk-scope * + figure, .uk-scope * + ol, .uk-scope * + p, .uk-scope * + pre, .uk-scope * + ul { margin-top: 0px;}
.uk-scope address, .uk-scope dl, .uk-scope fieldset, .uk-scope figure, .uk-scope ol, .uk-scope p, .uk-scope pre, .uk-scope ul { margin: 0;}
.uk-scope .uk-h2, .uk-scope h2 {font-weight: 700; color: var(--blau1); font-size: 20px; margin-bottom: 20px; line-height: 1;}
.uk-scope .uk-h2::before, .uk-scope h2::before {content: none;}

.uk-scope .uk-link-toggle:hover .uk-link, .uk-scope .uk-link:hover, .uk-scope a:hover { text-decoration: none;}


.uk-scope .uk-card-body { padding: 20px; }

.uk-scope .uk-card-default {
  --uk-inverse: dark;
  background-color: var(--blau2);
  color: var(--text);
  box-shadow: none;
}

.uk-card-media-top img {aspect-ratio: 2 / 1; object-fit: cover;}
.team .uk-card-media-top img {aspect-ratio: auto; }

.partnerlogos img {padding: 20px; background: var(--blau2);}

.uk-scope .uk-dotnav > * > * {
  display: block;
  box-sizing: border-box;
  width: 30px;
  height: 5px;
  border-radius: 0%;
  background: var(--grau);
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 0px solid white; 
    margin-bottom: 0px;
}
.uk-scope .uk-dotnav > .uk-active > * {
  background-color: var(--blau1);
}

.uk-article-meta {font-size: 14px;}


.uk-scope .uk-light .uk-dotnav > * > * {background: var(--grau);}
.uk-scope .uk-light .uk-dotnav > .uk-active > * {background: var(--blau1);}

.uk-overlay.uk-position-bottom h5 {width: fit-content; padding: 5px 8px; background: var(--blau1); margin-top: -60px; left: 40px; font-size: 14px;}

.uk-link-reset {pointer-events: none;}


.uk-subnav { margin-bottom: 20px !important;}
.uk-subnav li { margin-bottom: 10px !important;}
.uk-subnav a { padding: 10px; background: var(--blau2); color: var(--text) !important; text-transform: none !important; font-weight: 700; font-size: 14px; min-width: 100px;justify-content: center;}
.uk-subnav .uk-active a {background: var(--blau1); color:white !important;}
.uk-subnav a:hover {background: var(--blau1); color:white !important;}

.uk-overlay {z-index: 100;}


/*----------RS Form Pro -----------*/
.form-select, .form-control {border: 2px solid var(--blau2); border-radius: 0px; font-size: 1em;}
.btn {background: var(--blau1); border-color: var(--blau1); border-radius: 0px; font-size: 1.3em; padding: 10px 40px; transition: 0.2s;}
.btn:hover {background: var(--blau2); color: var(--text); border-color: var(--blau2); padding: 10px 35px;}


#rsform_6_page_0 .col-md-6:first-child {order: 2;}
#rsform_6_page_0 .col-md-6:last-child {order: 1;}


/*------------------*/








@media(min-width:460px){
    
}


@media(min-width:660px){

}


@media(min-width:768px){
#desktop { display: block; }
#mobile { display: none; }
    
    #showbox  { height: 250px;}

    h1::before {  width: 70px; left: -40px; }
   #interesse h3::before {  width: 70px; left: -40px; }
    #interesse ul li {padding: 10px 15px; }

    #inhalt {margin: 80px 40px;}
    .box {padding: 40px;}
    
    footer {margin-left: 36px; background: var(--blau2); padding: 40px; position: relative;}
    footer::before { position: absolute; content: ''; right: 70%; top: -20px; left: -20px; bottom: 70%; border-left: 20px solid var(--blau1); border-top:20px solid var(--blau1);} 
    

    .rand-r-1::after { position: absolute; content: ''; left: 90%; bottom: -20px; right: -20px; top: 50%; border-right: 20px solid var(--blau1); border-bottom: 20px solid var(--blau1);} 
    .rand-r-1-hell::after { position: absolute; content: ''; left: 90%; bottom: -20px; right: -20px; top: 50%; border-right: 20px solid var(--blau2); border-bottom: 20px solid var(--blau2);} 
    .rand-r-2::after { position: absolute; content: ''; left: 30%; bottom: -20px; right: -20px; top: 70%; border-right: 20px solid var(--blau1); border-bottom: 20px solid var(--blau1);} 
    .rand-r-2-hell::after { position: absolute; content: ''; left: 30%; bottom: -20px; right: -20px; top: 70%; border-right: 20px solid var(--blau2); border-bottom: 20px solid var(--blau1);} 
    
    .rand-l-hell::after { position: absolute; content: ''; right: 30%; bottom: -20px; left: -20px; top: 70%; border-left: 20px solid var(--blau2); border-bottom: 20px solid var(--blau2);} 

    
    #webdesign  { margin-top:40px; }
    
    .uk-scope .uk-card-body { padding: 40px; }
    
    ul.streifen li::before { width: 55px; height: 10px; }
    ul.streifen li { margin: 20px 0;}

    img.streifenimg { width: 50px; transform: translate(-28px, -38px);}
  
  
  #rsform_6_page_0 .col-md-6:first-child {order: 1;}
  #rsform_6_page_0 .col-md-6:last-child {order: 2;}


    
}

@media(min-width:1000px){

    body {font-size: 18px;}
    h1 {font-size: 40px;}
    h1::before { height: 31px; top: 11px;}

    h2, .uk-scope .uk-h2, .uk-scope h2 {font-size: 24px;}
    h4 {font-size: 30px;}
    
    #footer .wf-column:last-child {text-align: right;}
    
    #interesse h3 {font-size: 24px;}
    #interesse h3::before { height: 17px; top: 7px;}
    #interesse ul { gap: 20px;}

    #showbox  { height: 350px;}
  
    #logo {width: 200px; transition: 0.3s ease;}
    
    
    
    .uk-scope .uk-dotnav > * > * { width: 60px; height: 10px; margin-bottom: 5px;}
    .uk-overlay.uk-position-bottom h5 {margin-top: -80px; font-size: 16px;}

    img.streifenimg { width: 50px; transform: translate(-28px, -34px);}

    .wf-columns-gap-large {gap: 40px;}
    
}



@media(min-width:1250px){
    header {align-items: end; padding: 40px; transition: 0.3s ease;}
    .scrolled header {position: fixed; top: 0; padding: 20px 40px;border-bottom: 2px solid var(--blau2);}
    .scrolled #logo {width: 160px;}
    .scrolled #showbox  { margin-top: 80px;}

    #kontakticons {position: absolute; top: 20px; right:40px; margin: 0;}
    #kontakticons img {width: 26px; height: 26px;}
    
    
    #inhalt {  margin: 120px;  }
    #interesse {  margin: 120px;  }

    h1::before {  width: 140px; left: -120px; }
    #interesse h3::before {  width: 140px; left: -120px; }

    #showbox  { height: 450px;}
    
    #footer {margin-left: 40px;}
    
    img.streifenimg { width: 70px; transform: translate(-55px, -53px);}

    
}



@media(min-width:1850px){
    #inhalt {  margin: 120px 240px;  }
    #interesse {  margin: 120px 240px;  }
    #footer {margin-left: 160px;}
    
    h1::before {  width: 260px; left: -240px; }
    #interesse h3::before {  width: 260px; left: -240px; }
    #showbox  { height: 600px;}
    
    img.streifenimg { width: 80px; transform: translate(-62px, -62px);}

}