/* Marischka Lutz Grafikdesign CSS Document */

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ubuntu-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ubuntu-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ubuntu-v15-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}





/* A L L G E M E I N */

body {font-size: 100.01%; margin:0; 
    text-align: center;  /* Zentrierung im Internet Explorer */
}

div {margin:0;}
a, h1, h2, h3, h4, h5, h6, p, ul, li {margin:0; padding:0;} 
img {border:0; display: block;}

.clearing {margin:0; padding:0; font-size:1px; clear: both;} 
/* Schrift in kleinster Groesse, da IE6 Inhalt bei div braucht */



/* T E X T   S T Y L E   p   */

p {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal;
 font-size: 20px; line-height: 32px; color: #fff; padding: 0 0 0;}

@media only screen and (min-width: 600px) {
p {font-size: 22px; line-height: 34px;}
}

.kastenboxtextindex p {font-size: 22px; line-height: 35px; color: #fff;} /* S T A R T S E I T E */
@media only screen and (min-width: 600px) {
.kastenboxtextindex p {font-size: 29px; line-height: 45px; }
}
@media only screen and (min-width: 1500px) {
.kastenboxtextindex p {font-size: 32px; line-height: 47px; }
}

.kastenboxtextinfo p {font-size: 22px; line-height: 35px; color: #fff; padding-bottom: 33px;} /* I N F O S E I T E */
@media only screen and (min-width: 600px) {
.kastenboxtextinfo p {font-size: 30px; line-height: 45px; }
}
@media only screen and (min-width: 1500px) {
.kastenboxtextinfo p {font-size: 33px; line-height: 47px; }
}

/* p auf klein mit class stellen */
.klein {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal;
 font-size: 16px; line-height: 20px; color: #fff; padding: 0 0 0;}


/* T E X T   S T Y L E   Liste   */
ul {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal; font-size: 15px; line-height: 25px;color: #fff; padding: 20px 10% 20px;}

li {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal; font-size: 15px; line-height: 25px; color: #fff;}

@media only screen and (min-width: 700px) {
ul {padding: 30px 20% 0;}
}
@media only screen and (min-width: 1200px) {
ul {padding: 30px 30% 0;}
}
@media only screen and (min-width: 600px) {
ul {font-size: 14px; line-height: 22px;}
}
@media only screen and (min-width: 600px) {
li {font-size: 14px; line-height: 22px;}
}

.kastenboxtextinfo ul {list-style-type: none; margin:0; padding: 0; padding-top:0 ; }
.kastenboxtextinfo ul li {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: 400; font-size: 18px; line-height: 27px; color: #fff; padding: 4px 0 3px 0;}
@media only screen and (min-width: 600px) {
.kastenboxtextinfo ul li  {font-size: 22px; line-height: 30px;}
}

.kastenboxtextdatenschutz ul {list-style-type: disc; margin:0; padding: 0; padding-top:0 ;padding-left: 20px; }
.kastenboxtextdatenschutz ul li {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: 400; font-size: 18px; line-height: 27px; color: #fff; padding: 4px 0 3px 0;}
@media only screen and (min-width: 600px) {
.kastenboxtextdatenschutz ul li  {font-size: 22px; line-height: 30px;}
}

/* T E X T   S T Y L E   Headlines   */
h1 {font-family: 'Ubuntu', sans-serif; font-weight: 700; font-style: normal;
    font-size: 14px; color: #fff; line-height: 22px; padding: 0 0 0; text-transform: uppercase; letter-spacing: 0.1em; word-spacing: 0.1em;}
h2 {font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal;
    font-size: 14px; color: #fff; line-height: 22px; padding: 0 0 0;text-transform: uppercase; letter-spacing: 0.1em; word-spacing: 0.1em;}

h3 {font-family: 'Roboto', sans-serif; font-weight: 900; font-style: normal; font-size: 20px; color: #fff; line-height: 28px; padding: 10px 0 0;}
@media only screen and (min-width: 600px) {
h3 {font-family: 'Roboto', sans-serif; font-weight: 900; font-style: normal; font-size: 22px; color: #fff; line-height: 30px;}
}

.kastenboxtextinfo  h1 {padding: 47px 0 0; font-weight: 400;  }

.kastenboxtextkontakt h1 {padding: 27px 0 0; font-weight: 400; }

.kastenboxtextdatenschutz h1 {padding: 27px 0 0; }
.kastenboxtextdatenschutz h2 {padding: 44px 0 0;  }
.kastenboxtextdatenschutz h3 {font-family: 'Ubuntu', sans-serif; font-weight: 700; font-style: normal;
    font-size: 16px; color: #fff; line-height: 21px; padding: 30px 0 5px;}
.kastenboxtextdatenschutz p {padding: 5px 10% 8px 0; font-size: 16px; line-height: 20px;}
.kastenboxtextdatenschutz ul {padding: 5px 10% 20px 0s;}
.kastenboxtextdatenschutz ul li {padding: 5px 10% 20px 0s; font-size: 16px; line-height: 20px;}



/* L O G O */
#logo {display: block; box-sizing: border-box;
   min-width: 300px; width: 65%; max-width: 470px;
text-align: left;
margin: auto;
margin-top: 0; 
}  
#logo img{display: block; box-sizing: border-box; object-fit: contain; width: 100%; height: auto; padding: 0;}
 
    
    
/* M E N U E */

#kastenmenue {display: block; box-sizing: border-box; width: 100%; height: 88px; 
    padding-top: 17px; padding-left: 22px; padding-right: 27px; padding-bottom: 64px;
    text-align: center;
    position: fixed; z-index: 20; top: 0; left: 0; 
    border-style: solid;
    border-width: 0 0 0 0.7em ; 
} 

@media only screen and (min-width: 550px) {
#kastenmenue {border-style: solid; border-width: 0 0 0 1em ;}
}

#kastenmenue2 {display: block; box-sizing: border-box; width: 100%; height: 50px; max-width: 1450px;  }     
    
#menue {display: block; box-sizing: border-box; 
    margin: auto; float: left;
  position: relative;
  left: 50%;
  transform: translateX(-50%);}


#menue ul {list-style-type: none; margin:0; padding: 0; padding-top:0 ; }
#menue ul li {font-family: 'Ubuntu', sans-serif; font-weight: 900; font-style: 900; font-size: 16px; line-height: 30px; color: #fff; margin-right: 15px; float: left; padding: 4px 0 3px 0;}

/* oben bei den Farben: a a:hover, a:active und in einer neuen Zeile a.current */


/* umbricht in einzeilige Logo-Menüzeile */
    @media only screen and (min-width: 700px) {
#kastenmenue {height: 70px; }
#kastenmenue2 {margin: auto;  
}   
#menue {float: left; margin-left: 4%; 
    left: 0; transform: none;}
#logo {float: left; }
#menue ul {padding-top: 10px; }
.kastenboxbild1 {margin-top: 80px;}  /* erstes Bild wird von Menüzeile verdeckt */
}




/* R A N D */

#rand {display: block; padding: 0; 
    border-style: solid;
    border-width: 0 0 0 0.7em ; 
box-sizing: border-box; 
}

@media only screen and (min-width: 550px) {
#rand {display: block; padding: 0; 
    border-style: solid;
    border-width: 0 0 0 1em ; }
}

@media only screen and (min-width: 1200px) {
#rand {display: block; padding: 0; }
}




/* B O X   S T R E I F E N */

.streifenvorportfolio{display: block; box-sizing: border-box; width: 100%; height: 9px; 
} 

.kastenbox{display: block; box-sizing: border-box; width: 100%; height: 100%;
text-align: left; 
margin: auto;
padding: 0;
border: 1px solid transparent;
} 




/* B O X   S T R E I F E N    oberstes Bild   */
.kastenboxbild1 {display: block; box-sizing: border-box;
position: relative;
text-align: center;
margin: auto;
margin-top: 103px;}  

/* umbricht in einzeilige Logo-Menüzeile */
    @media only screen and (min-width: 700px) {
.kastenboxbild1 {margin-top: 80px;}  /* erstes Bild wird von Menüzeile verdeckt */
}

.kastenboxbild {display: block; box-sizing: border-box;
position: relative;
text-align: center;
margin: auto;
margin-top: 8px;
}  

.kastenboxbild1 img{display: block; box-sizing: border-box; width: 100%; max-width: 1500px;  
    height: auto; margin: auto; 
padding: 0 ;
    }

@media only screen and (min-width: 550px) {
.kastenboxbild1 img{padding: 0 0 0;}
    }

@media only screen and (min-width: 1500px) {
.kastenboxbild1 img{padding: 0 35px 0;}
    }


.kastenboxbild img {display: block; box-sizing: border-box; width: 100%; max-width: 1500px;  
    height: auto; margin: auto; 
padding: 0 9px 0 9px;
    }

@media only screen and (min-width: 550px) {
.kastenboxbild img, .kastenboxbild1 img{padding: 0 25px 0;}
    }
  
.kastenboxtext {display: block; box-sizing: border-box; max-width: 1500px; 
margin: auto; 
padding: 65px 3% 45px 9px;
  } 
@media only screen and (min-width: 550px) {
.kastenboxtext  {padding: 85px 20% 60px 25px;}
}



 /* B O X   S T R E I F E N     geteiltes Bild    */   
.container {margin: 8px 9px 0;}   /* margin-Abstand */   
.container2 {
display: block;
max-width: 1450px;
margin: auto; 
overflow: hidden;
}  



.item1, .item3 {display: block; box-sizing:content-box; height: 250px; width: 100%; }  
.item2, .item4 {display: block; box-sizing:content-box; height: 250px; width: 100%; margin-top: 8px; }  
.item5 {display: block; box-sizing:content-box; height: auto; width: 100%; }  
.item6 {display: block; box-sizing:content-box; height: auto; width: 100%; margin-top: 8px; }  
.item7 {display: block; box-sizing:content-box; height: 400px; width: 100%;  } 
.item8 {display: block; box-sizing:content-box; height: 350px; width: 100%; margin-top: 8px; } 


.item1 img, .item2 img, .item3 img, .item4, .item7 img, .item8 img  {width: 100%; height: 100%; object-fit: cover;}
.item5 img, .item6 img  {width: 100%; height: auto; object-fit: cover;}

@media only screen and (min-width: 550px) {
.container {margin: 8px 25px 0; }
}  
    
@media only screen and (min-width: 900px) {
.container {margin: 8px 25px 0; }

.item1{height: 400px; width: calc(70% - 9px); float: left; margin-right: 9px; }  
.item2{height: 400px; width: 30%; float: left; margin-top:0;}  
    
.item3{height: 400px; width: calc(50% - 4.5px); float: left; margin-right: 9px; }   /* halb halb Bild wird beschnitten   */ 
.item4{height: 400px; width: calc(50% - 4.5px); float: left; margin-top:0;}  
    
.item5{height: auto; width: calc(50% - 4.5px); float: left; margin-right: 9px; }   /* halb halb ganzes Bild, beide Bilder brauchen das selbe Seitenverhaeltnis   */ 
.item6{height: auto; width: calc(50% - 4.5px); float: left; margin-top:0;}  
    
.item7{height: 350px; width: calc(40% - 9px); float: left; margin-right: 9px; }  
.item8{height: 350px; width: 60%; float: left; margin-top:0;}  
    }
    
@media only screen and (min-width: 1100px) {
.item1, .item2, .item3, .item4 {height: 600px;}  
.item7, .item8 {height: 400px;}  
}



 /* B O X   S T R E I F E N   STARTSEITE   */

.kastenboxtextindex {display: block; box-sizing: border-box; 
margin: auto; 
padding: 35px 7% 70px 0;
  } 
@media only screen and (min-width: 550px) {
.kastenboxtextindex  {padding: 35px 0 100px 0;}
}
@media only screen and (min-width: 900px) {
.kastenboxtextindex  {padding: 35px 0 100px 135px;}
}

.containerindex {margin-top: 130px;} 
@media only screen and (min-width: 1200px) {
.containerindexbilder {margin-top: 80px;} 
    }

.container2index {
display: block;
max-width: 1475px;
margin: auto; 
overflow: hidden;
padding: 0 0 0 9px;
}  

@media only screen and (min-width: 550px) {
.container2index  {padding: 0 0 0 25px;}
}

 /* B O X   S T R E I F E N   INFOSEITE + KONTAKTSEITE */

.kastenboxtextinfo, .kastenboxtextkontakt  {display: block; box-sizing: border-box; 
margin: auto; 
padding: 1px 7% 20px 0;
  } 
@media only screen and (min-width: 550px) {
.kastenboxtextinfo, .kastenboxtextkontakt, .kastenboxtextdatenschutz  {padding: 1px 20% 50px 0;}
}
@media only screen and (min-width: 900px) {
.kastenboxtextinfo, .kastenboxtextkontakt {padding: 1px 30% 5px 0;}
.kastenboxtextdatenschutz  {padding: 1px 15% 100px 0;}
}

.containerinfo1 {margin-top: 130px;}  
.containerinfo {margin-top: 30px;}   

.container2info {
display: block;
max-width: 1475px;
margin: auto; 
overflow: hidden;
padding: 0 0 0 9px;
}  

@media only screen and (min-width: 550px) {
.container2info  {padding: 0 0 0 25px;}
}


.containerkontakt, .containerimpressum, .containerdatenschutz {margin-top: 130px;
}  
.containerkontakt .item5{height: auto; width: calc(76% - 4.5px); float: left; margin-right: 9px; }   /* halb halb ganzes Bild, beide Bilder brauchen das selbe Seitenverhaeltnis   */ 
.containerinfo .item5{height: auto; width: calc(76% - 4.5px); float: left; margin-right: 9px; } 
.container2info .item5 img {max-width: 320px; } 
.containerkontakt .item5 img {max-width: 500px; } 
.containerimpressum .item5 img {max-width: 780px; } 
.containerdatenschutz .item5 img {max-width: 1000px; }

/* TEXT STYLES */

a {text-decoration: none; }
a:hover {text-decoration: none;}
a:active {text-decoration: none;background: none;}

.kastenboxtextdatenschutz  a {text-decoration: underline; }

/* F O O T E R   mit Impressum und Datenschutz */
#impressumkasten{
    border-style: solid;
    border-width: 0 0 0 0.7em ; 
} 
    @media only screen and (min-width: 550px) {
#impressumkasten {border-style: solid; border-width: 0 0 0 1em ;}
}    

#impressumkasten2{display: block; width: 100%; margin: auto;
    padding: 15px 0 15px 0; 
} 
    
.impressum {display: block; font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: normal; font-size: 13px; line-height: 12px; color: #fff; padding-top: 0;}


/* P F E I L E */
.arrow {
    position: fixed; /* Fixiert die Position relativ zum Browserfenster */
    top: 100%; /* Positioniert den oberen Rand des Pfeilelements in der Mitte der Viewporthöhe */
    transform: translateY(-100%); /* Verschiebt das Element um die Hälfte seiner eigenen Höhe nach oben, um es vertikal zu zentrieren */
    width: 19px;
    height: 40px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Ändert den Mauszeiger zu einem Hand-Symbol beim Hovern */
    z-index: 1000; /* Stellt sicher, dass die Pfeile über anderem Inhalt liegen */
    font-size: 20px;
}

.left-arrow {
    left: 0; /* Abstand vom linken Rand des Browserfensters */
}

.right-arrow {
    right: 0; /* Abstand vom rechten Rand des Browserfensters */
}

    @media only screen and (min-width: 550px) {
.arrow {
    width: 25px;
    height: 40px;
    font-size: 25px;
}        
.left-arrow {
    left: 16px; /* Abstand vom linken Rand des Browserfensters */
}
}  



/* C O L O R S */



/* DK-PINK GELB KOMBI */
/* REPARATURBONUS */
.tuerkisbackground {background:#0d3538;}
.dkpinkgelbborder {border-left-color: #b5215a;}
.dkpinkgelb1 {color:#d94c76;}
.dkpinkgelb2 {color:#f1d368;}
.dkpinkgelb ul li a  {color: #fff; }
.dkpinkgelb ul li a:hover, a:active {color: #f1d368 }
.dkpinkgelb ul li a.current  {color: #d94c76;}
.dkpinkgelb a  {color: #fff; }
.dkpinkgelb a:hover, a:active {color: #f1d368; }
.dkpinkgelb a.current  {color: #d94c76;}
  

/* PINK GELB KOMBI */
/* INKOTA */
.burgundbackground {background:#49031c ;} 
.pinkgelbborder {border-left-color: #d94c76;}
.pinkgelb1 {color:#d94c76}
.pinkgelb2 {color:#f1d368;}
.pinkgelb ul li a  {color: #fff; }
.pinkgelb ul li a:hover, a:active {color: #f1d368 }
.pinkgelb ul li a.current  {color: #d94c76;}
.pinkgelb a  {color: #fff; }
.pinkgelb a:hover, a:active {color: #f1d368; }
.pinkgelb a.current  {color: #d94c76;}


/* ORANGE GELB KOMBI */
/* Saatgut Broschuere */
.braunbackground {background:#371313;}
.orangegelbborder {border-left-color: #e3730b;}
.orangegelb1 {color:#e3730b}
.orangegelb2 {color:#f1d368;;}
.orangegelb ul li a  {color: #fff; }
.orangegelb ul li a:hover, a:active {color: #f1d368;; }
.orangegelb ul li a.current  {color: #e3730b;}
.orangegelb a  {color: #fff; }
.orangegelb a:hover, a:active {color: #f1d368;; }
.orangegelb a.current  {color: #e3730b;}

/* ORANGE ROSA KOMBI */
/* RLS Broschuere */
.burgundpurplebackground {background:#4d0229;}
.orangerosaborder {border-left-color: #e3730b;}
.orangerosa1 {color:#e3730b}
.orangerosa2 {color:#e18c6f;}
.orangerosa ul li a  {color: #fff; }
.orangerosa ul li a:hover, a:active {color: #e18c6f; }
.orangerosa ul li a.current  {color: #e3730b;}
.orangerosa a  {color: #fff; }
.orangerosa a:hover, a:active {color: #e18c6f; }
.orangerosa a.current  {color: #e3730b;}

/* ROT ROSA KOMBI  */
/* AWO int */
.dkrotbackground {background:#520201;}  
.rotrosabackground {background:#e56f6f;}  
.rotrosaborder {border-left-color: #c2101d;}
.rotrosa1 {color:#c2101d;}
.rotrosa2 {color:#e56f6f;}
.rotrosa ul li a  {color: #fff; }
.rotrosa ul li a:hover, a:active {color: #e56f6f; }
.rotrosa ul li a.current  {color: #c2101d;}
.rotrosa a  {color: #fff; }
.rotrosa a:hover, a:active {color: #e56f6f; }
.rotrosa a.current  {color: #c2101d;}