:root {
    --petrol: #315b60;
    --teal: #038e92;
    --hellblau: #c3e4eb;
    --gelb: #f3e063;
}

/* FONTS */
/* lora-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/lora-v37-latin-500.woff2') format('woff2'); 
}

/* lora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/lora-v37-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/fira-sans-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/fira-sans-v18-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fira-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/fira-sans-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/fira-sans-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/fira-sans-v18-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Body */
body {
  display: flex;
  overflow-x: hidden;
  max-width: 100%;
  /*flex-direction: ;*/
  flex-wrap: wrap;
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--petrol);
}
*, *::before, *::after {
  box-sizing: border-box;
}

#placeholder {
  width: 100%;
}

#bildcontainer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: var(--petrol);
  margin-bottom: 0;
}

#bildcontainer img {
  max-height: 26vh;
  max-width: 100%;
  width: auto;
  height: auto;
  padding: 3vh;
}


#textblock {
  box-sizing: border-box;
  text-align: center;
  font-size: 1.5rem;
  padding: 0.5em;
}
@media (min-width: 768px) {
  #textblock {
    max-width: 1000px;
    margin: 0 auto;
  }
}

h2 {
  color: teal;
  font-family: 'Lora', Georgia, 'Times New Roman', Times, serif;
  font-weight: 600;
  margin-top: 25px;
  margin-bottom: 15px;
}

h3 {
  color: teal;
  font-size: 2rem;
  font-family: 'Lora', Georgia, 'Times New Roman', Times, serif;
  padding-bottom: 0;
  margin-bottom: 10px;
  margin-top: 0;
}

p {
  font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--petrol);
  line-height: 1.5em;
  margin-top: 0;
}

#kontakt {
  background-color: var(--hellblau);
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

#kontakt p {
  font-size: 1.9em;
  font-weight: 600;
  margin: 0;
  box-sizing: border-box;
  text-align: center;

}