/*
Theme Name: Neukölln
Author: Corinna Smidt
Author URI: https://corinnsmidt.de/
Description: Schönes Design
rersion: 1.0
*/


/* ****

CSS INDEX
===================

1. Theme Default CSS / Allgemein
2. Fonts
3. Seitenaufbau Allgemein
4. Header-Area // Logo, Sticky Menue
5. Navigation / Mainmenue-Area  / Footermenue-Area
6. Navigation für responsive Hauptmenue
7. article
8. Über uns
8. Kontakt / Formular
8. Cookie-Info
2. Google font
3. Header-Area
4. Navigation / Mainmenue-Area  / Footermenue-Area
5. Navigation für responsive Hauptmenue
6. Footer-Area
x3. Helper-Class
Button-Style
6. 
7. Vdieo-Box
8. Tabs-list
9. Feature-Box
10.Easy Pie Chart
11. Filter-Controls
12. FIlter-Box
13. Team-Area
14. Price-box
15. Blog-Area
16. Count-Box
17. Footer-Area
18. Preloader
19. Accordion-style
20. Service-Box-Style
21. process-area
22. Testimonials
23. Contact-Area

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


/* 1. Theme Default CSS / Allgemein  **************************** */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */

/* ************************************************ */
/* ************************************************ */
/* ***  1. ALLGEMEIN  ***************************** */
/* ************************************************ */
/* ************************************************ */

*{
    -webkit-box-sizing: border-box;
	  -moz-box-sizing:    border-box;
	  box-sizing:         border-box;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body {
    color: #243863;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: 'work_sans_extralightregular', sans-serif;
    font-weight:normal;
    font-size: 100%;
    margin-bottom: 0.25%;
    line-height: 1.5;
    }

body {
    background-color:#D2E3FB;
}

div, article, lable, details, section, header, main, footer, aside, wrapper, nav, li, ul, form, input, table, span, tr, td, p, figure {
  
  font-family: 'work_sans_extralightregular', sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color:#243863;
  text-decoration: none;
  hyphens:auto;	
  font-style: normal;
  font-weight: normal;
  list-style-type:none;
  outline: none;
  padding: 0;
  margin: 0; 
  }

hr, .hr {
   width: 100%;
   margin-bottom:1em;
   margin-top:1em;
   color: transparent;
   border-bottom:dotted;
   border-bottom-color: rgb(78,65,59,50%) ;
   background-color: transparent;
   height: 1px;
   }

summary:focus {
	outline: none;
}

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

[hidden] {
	display: none;
    }

logo, li, img, .button, .summary, a {
   transition: all 300ms; -webkit-transition: all 300ms;
   }

.sprungmarke {
    height: 5em;
    width: 100%;
    overflow: hidden;
    background-color:transparent; 
    }


/* MOBILE  *********** */
/* ******************* */

@media screen and (max-width:712px) {
       
.sprungmarke{
    height: 3em;
    }

}


/* ***************************************** */
/* **  1a. ALLGEMEIN LINKS UND SCHRIFTEN  ** */
/* ***************************************** */

strong { 
    font-family: 'work_sans_mediumregular', sans-serif;
    }

a { 
    font-family: 'work_sans_extralightregular', sans-serif;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1.5;
    hyphens:auto;  
    color:#243863;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
    }

a:hover {
    color:#aeddd7;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
    }

a:visited {
  color:#aeddd7;
  outline:none;
  }

a:active {
  outline:#aeddd7;
  }

a:focus {
  color:#aeddd7;
  text-decoration: none;
  }

a.kommentar {
  color:#aeddd7;
  text-decoration: none;
  }

a.text-link-rot { 
    color:#aeddd7;
    font-family: 'work_sans_extralightregular', sans-serif;
    }

p {
  font-family: 'work_sans_extralightregular', sans-serif;
  hyphens:auto;
  text-decoration: none;
    font-size: 1.4rem;
    line-height: 1.5;
    hyphens:auto;  
    text-decoration: none;
    outline: none;
  }

h1,             
.h1 {
 font-size: 1.8rem;
 line-height: 1.2;
 font-family: 'work_sans_extralightregular', sans-serif;
 text-decoration: none;
 hyphens:auto;
  }
            
.h1-zentriert {
 font-size: 1.8rem;
 line-height: 1.2;
 font-family: 'work_sans_extralightregular', sans-serif;
 text-decoration: none;
 hyphens:auto;
text-align: center;
  }

  p.ueberschrift {
    font-size: 2.2rem;
    line-height: 1.2;
    font-family: 'work_sans_extralightregular', sans-serif;
    text-decoration: none;
    hyphens:auto;
    text-align:left;
    }

  p.untertitel a {
    color:#ae4f0b;
    }

  p.untertitel a:hover {
    color:#FF9E57
    }

  h1.untertitel {
    font-size: 1.8rem;
    line-height: 1.2;
    font-family: 'work_sans_extralightregular', sans-serif;
    text-decoration: none;
    hyphens:auto;
    text-align:left;
    }

h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  font-family: 'work_sans_extralightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  text-align:center;
}

h3,          
.h3 {
  font-size: 1.8rem;
  line-height: 1.2;
  font-family:'work_sans_extralightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  text-align:left;
  margin-top:0rem;
  }

h4,
.h4 {
  font-size: 1.8rem;  
  line-height: 1.2;
  font-family: 'work_sans_extralightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  margin-bottom:0;
  margin-top:0rem;
  text-align:left;
  }

h5, .h5{
  font-family: 'work_sans_extralightregular', sans-serif;
  text-decoration: none;
  }

h6, .h6 {
  font-size: 1.7rem;
  line-height: 1.2;
  font-family: 'work_sans_extralightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  text-align:center;
  }


/* TABLETS *********** */
/* ******************* */


@media screen and (max-width:970px) {
      
h1,.h1 {
 font-size: 1.8rem;
  line-height: 1.2;
  }
    
.h1-zentriert {
 font-size: 1.8rem;
  line-height: 1.2;
text-align: center;
  }
}

/* MOBILE  *********** */
/* ******************* */

@media screen and (max-width:712px) {
    
h1,
.h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom:0.25em;
  }
  
h2,.h2, h3,.h3 {
  font-size: 1.8rem;
  line-height: 1.2;
  hyphens:auto;
  }
}


/* ****************************** */
/* **  1b. ALLGEMEIN BILDER  **** */
/* ****************************** */

img {
  height: auto; /* Make sure images are scaled correctly. */
  max-width: 100%; /* Adhere to container width. */
  vertical-align:bottom;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
  }


/* ****************************** */
/* **  1c. ALLGEMEIN BUTTONS  *** */
/* ****************************** */

.button-standart {           /* ** button standart  ** */
  background-color:#FF9E57;
  background-repeat: no-repeat;
  display: inline-block;
  min-height:1em;
  height: auto;
  min-width: 100%;
  width: auto;
  border-radius: 25px;
  border:none;
  color: white;
  font-family: 'work_sans_mediumregular', sans-serif;
  text-align: center;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  outline:none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  text-align-last: center;
  margin-top:1em;
  }
  
  .button-standart:hover {     /* ** button standart  ** */
  background-color:#f58c42;
  font-family: 'work_sans_mediumregular', sans-serif;
  }
  
  a.button-standart {      /* ** button standart  ** */
  color: white;
  }
  


/* ****************************** */
/* **  1d. ALLGEMEIN KLASSEN  *** */
/* ****************************** */

.flex-cont{ /********** container nebeneinander ************/
  display: flex;
  flex-direction: row;
  flex-basis: 98%;
  max-width: 100%;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0 0 0 0;
  margin: 0 auto;
  height: auto;
  overflow:hidden;
  }




/* ***  2. FONTS  *********************************************** */
/* ************************************************************** */
/* ************************************************************** */

/* ***  1. WORK SANS  ******** */
/* *************************** */

@font-face {
    font-family: 'work_sans_thinregular';
    src: url('fonts/webfont-worksans/work-sans-v3-latin-100-webfont.woff2') format('woff2'),
         url('fonts/webfont-worksans/work-sans-v3-latin-100-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_extralightregular';
    src: url('fonts/webfont-worksans/work-sans-v3-latin-200-webfont.woff2') format('woff2'),
         url('fonts/webfont-worksans/webfont-ws/work-sans-v3-latin-200-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_lightregular';
    src: url('fonts/webfont-worksans/work-sans-v3-latin-300-webfont.woff2') format('woff2'),
         url('fonts/webfont-worksans/work-sans-v3-latin-300-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_mediumregular';
    src: url('fonts/webfont-worksans/work-sans-v3-latin-500-webfont.woff2') format('woff2'),
         url('fonts/webfont-worksans/work-sans-v3-latin-500-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }


/* ***  3. Font Aweosome  **** */
/* *************************** */

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("fonts/fontawesome-free-6.1.1-web/fa-solid-900.woff2") format("woff2"), url("fonts/fontawesome-free-6.1.1-web/fa-solid-900.ttf") format("truetype");
}

.fas,
.fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }

.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400; }



/* ***  3. Wildrock ********************* */
/* ************************************** */

@font-face {
    font-family: 'Wildrock';
    font-style: normal;
    font-weight: normal;
    src: local('Wildrock'), 
    url('fonts/webfont-Wildrock/Wildrock.woff') format('woff');
    }

/* ***  3. inter ****±±±********** */
/* ************************************** */

@font-face {
    font-family: 'inter';
    src: url('fonts/webfont-inter/inter-v12-latin-regular.woff2') format('woff2'),
         url('fonts/webfont-inter/inter-v12-latin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ***  3. Seitenaufbau  Allgemein  ***************************** */
/* ************************************************************** */
/* ************************************************************** */


.container-aussen { 
  max-width: 1950px;
  width: 100%;
  min-height: 2em;
  height: auto;
  margin: 0 auto;
  }

.container-innen { 
  max-width: 1950px;
  margin: 0 auto;
  width: 100%;
  min-height: 2em;
  height: auto;
  padding-left: 8em;
  padding-right: 8em;
  }

@media screen and (max-width:1200px) {
    
.container-innen { 
padding-left:4em;
padding-right:4em;
}
}

@media screen and (max-width:970px) {
    
.container-innen { 
padding-left:2.5em;
padding-right:2.5em;
}
}

@media screen and (max-width:712px) {
  
.container-innen { 
padding-left:1.5em;
padding-right:1.5em;
}
 
}


/* ***  3. Header-Area  ***************************************** */
/* ************************************************************** */
/* ************************************************************** */

header {
  background-color:#D2E3FB;
  width: 100%;
  min-height: 2em;
  height: auto;
  padding-bottom:1.5em;
  padding-top:2.5em;
}

#head-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 970px) {
#head-flex {
    flex-direction: column;
    justify-content: space-between;
}

}






/* ***  3. Inhalt-Area  ***************************************** */
/* ************************************************************** */
/* ************************************************************** */


main {
position: relative;
max-width: 1950px;
width:100%;
min-height: 20vh;
height: auto;
background-color:#D2E3FB;
}


/* ****************   Willkommen   ********************* */

#illu {
   position: relative;
    width: 100%;
    min-height: 10vh;
    height: auto;
    overflow: hidden;
    border: 2px solid white;
  }

/* Bild */

.illu-img {
    position: relative;
    min-height: 50vh;
    height: auto;
}

.illu-img img {
    width: 100%;
    min-height: 50vh;
    height: auto;
    object-fit: cover;
    object-position: center; 
}

#willkommen {
  max-width: 1950px;
  width:100%;
  min-height: 20vh;
  height: auto;
  background-color:#D2E3FB;
  }

  #willk-ueberschr {
    margin-top:2em;
    }

  #willk-links {
   width: 100%;
    }

  #willk-rechts {
  width: 100%;
    }



/* 6. Navigation für responsive Footermenue  ******************** */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */

footer {
  background-color:transparent;
  min-height: 5.5em;
  height: auto;
}



footer nav.footermenue {
  min-height: 5.5em;
  height: auto;
  background-color:#243863;
  width: 100%;
    padding-bottom:1em;
  padding-top:1em;
}
    
.footermenue ul {
  list-style: none;
  overflow: hidden;
  background-color:#243863;
  color:#DEEAFF;
}
    
.footermenue li a {
  display: block;
  padding: 20px 20px;
  border-right: none;
  text-decoration: none;
  color:#DEEAFF;
  }
    
.footermenue li a:hover {
  background-color: #3e578c;
  color:#BCD6FB;
}
    
   
/* menu */
    
.footermenue .fmenu .copyright {
  clear: both;
  transition: max-height .2s ease-out;
  color:#DEEAFF;
}

/* TABLETS ************************* */
/* ********************************* */

/* 60em = 960px */
    
@media (min-width: 90em) {

  footer {
  min-height: 3.5em;
}

footer nav.footermenue {
  min-height: 3.5em;
  padding-top:0em;
}

  .footermenue li {
     float: left;
  }
  .footermenue li a {
    padding: 20px 30px;
    border-right: 1px solid #3e578c;
  }
  .footermenue .fmenu {
    clear: none;
    float: right;
  }

  .footermenue .copyright {
    clear: none;
    float: left;
  }
}