:root {
    --colorAkzent: #ff7235;
  }


/********************
* Allgemein Definition
*********************/
body {
    margin: 0;
}

a {
    color: var(--colorAkzent);
    text-decoration: none;
}

/* alle ul mit der class "list-horizontal" */
ul.list-horizontal {
    display: flex; /* nebeneinander ausrichten */
    list-style: none; /* keine Disc anzeigen */
    padding-left: 0; /* Kein Abstand links*/
}

/* alle li in der ul mit der class "list-horizontal"*/
ul.list-horizontal li {
    margin-left: 1rem;
}

/********************
* Header
*********************/
header {
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.nav-main {
    justify-content: space-between;
}


/********************
* Hero
*********************/
.hero {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/hero.jpg");

  /* Set a specific height */
  height: 90vh;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  /* Inhalt des hero ausrichten: horizontal + vertical */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero h1 {
    font-size: 5rem;
}

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


/********************
* Intro
*********************/


/********************
* Blog Section
*********************/