* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  font-style: normal;
  overflow-x: hidden;
  position: relative;
  font-size: 17px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  color: var(--black);
  background-color: var(--bg);
  line-height:1.2;
}

:root {
  /* Voreingestellte Farben, diese sind von Projekt zu Projekt unterschiedlich. Also anpassen!
    Hauptfarben: */
    --lightgreen:#E9FE71;
    --green:#566501;

  /* Farben für Schriften */
  /* Schriftfarbe für Fließtexte, reines Schwarz vermeiden -> Kann zu einer Überanstrengung der Augen führen, wenn Nutzer den Text über einen längeren Zeitraum lesen. */
  --black: #222222;

  --gray:#222222;

  --white:#FDFDFD;

  /* Hintergrundfarbe, Abwandlung von weiß, reines Weiß vermeiden -> starke Helligkeit von reinem Weiß kann einen hohen Kontrast zu den umgebenden Elementen erzeugen => "White Glare-Effect" */
  --bg: #f2f2f2;
  --bg-black:#161616;

  /* Abstandswerte */
  /* Sehr kleiner Abstand */
  --g-xs: 8px;
  /* Kleiner Abstand */
  --g-m1: 16px;
  /* Mittlerer Abstand */
  --g-m2: 24px;
  /* Großer Abstand */
  --g-m3: 32px;
  /* Sehr großer Abstand */
  --g-l1: 40px;
  --g-l2: 48px;
  --g-xl: 56px;
  --g-xxl: 64px;

  /* Abstand zwischen Paragraphen */
  --p-gap: var(--g-xs);

  /* Abstand von Ãœberschriften zur Section */
  --h-gap: var(--g-m3);

  /*Farben für Swiper*/
  --swiper-theme-color: var(--black);

  --bs-gutter-x: 1.5rem;
}

.lightgreen-color{
    color:var(--lightgreen) !important;
}

h1, h2, h3{
    color:var(--black) !important;
}

footer a, footer p, footer h3{
    color:var(--white) !important;
}

footer a:hover{
    color:var(--lightgreen) !important;
}

footer p{
    margin-bottom:0.45rem;
}

footer h3{
    margin-bottom:0.4rem;
}

header{
    border-bottom:solid 2px var(--gray);
    z-index:2;
    position:relative;
    background-color:var(--white);
}

.hero{
    background-image:url('../media/hero_website.jpg');
    min-height:66vh;
    height:66vh;
    background-size:cover;
    background-position:bottom;
    backdrop-filter:blur(5px);
}

.hero::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    backdrop-filter:blur(5px);
    background-color:#00000066;
    z-index:-1;
}

@media screen and (min-width:768px){
    .hero{
        height:80vh;
    }
}

aside{
    display:none !important;
}

@media screen and (min-width:955px){
    aside{
        display:block !important;
    }
}

aside{
    height:100vh;
    background-color:var(--white);
    width:60px;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    border-bottom:solid 2px var(--gray);
}

aside .aside-item img{
    width:24px;
    height:24px;
}

.hero p, h1{
    color:var(--white)
}

.hero h1{
    font-size:2.18rem;
    margin-bottom:18px;
    color:var(--white)!important;
}

@media screen and (min-width:768px){
    .hero h1{
    font-size:3.4rem;
    margin-bottom:6px;
    color:var(--white) !important;
}
}

.hero p{
    font-size:1.2rem;
}

@media screen and (min-width:768px){
    .hero p{
    
    font-size:1.7rem;
}
}

.hero .subheading{
    font-size:2rem;
    margin-bottom:6px;
}



.btn-prim{
    background-color:var(--green);
    padding: 13px 22px 15px 22px;
    font-family:"Poppins";
    color:var(--white);
    font-size:18px;
    text-transform:uppercase;
    width:fit-content;
    border:none;
    cursor:pointer;
    font-weight:600;
}

.btn-prim:hover{
    background-color:var(--lightgreen);
    color:var(--black);
}

.full{
    height:100%;
}

footer{
    background-color:var(--green);
}

footer img{
    max-width:160px;
}

hr{
    opacity:0.2;
}

li {
    list-style-position: inside;
}