/* Fonts */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat/Caveat-VariableFont_wght.ttf ");
}

:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Montserrat", sans-serif;
}

.Schreibschrift {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3.0rem;
  color:yellow;
}

/* Global Colors */
:root {
  --gelb: #FFFCC7;
  --rot: #6B2324;
  --headline: #DA251D;
  --main-blau: #002F97;
  --Schrift-dunkel:#32353a;
  --background-color: #ffffff;
  --background-color-rgb: 255, 255, 255;
  --default-color: #212529;
  --default-color-rgb: 33, 37, 41;
  --accent-color: #e84545;
  --accent-color-rgb: 232, 69, 69;
  --heading-color: #32353a;
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  --nav-color: #3a3939;
  --nav-hover-color: #e84545;
  --nav-dropdown-color: #3a3939;
  --nav-dropdown-hover-color: #e84545;
  --nav-dropdown-background-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}


/* Allgemein */
body {
  color: var(--default-color);
  background-color: var(--rot);
  font-family: var(--default-font);
}

.bg-gelb {
  background-color: var(--gelb);
} 
.box-start {
  background-color: var(--gelb);
  color: var(--gelb);
  padding: 20px;
  border-radius: 26px;
  text-align: center;
  min-height: 150px;
}

a {
  color: var(--rot);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--main-blau);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color:var(--rot);
  font-family: var(--heading-font);
  font-size: 2.0rem;
}





/* Scroll Top Button */
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--rot);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #ffffff;
  line-height: 0;
}

.scroll-top:hover {
  background-color: rgba(var(--accent-color-rgb), 0.8);
  color: #ffffff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}