/* sen-regular - latin */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sen-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/sen-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sen-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sen-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sen-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sen-v7-latin-regular.svg#Sen') format('svg'); /* Legacy iOS */
}


* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  /* font-size: 2.5rem; = 40px */
  font-family: "Sen", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  background: #ffffff;
  color: #333333;
}

/* basic layout ########### */
#wrapper {
  border: 0px solid silver;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-gap: 0px;
  box-sizing: border-box;
}

header {
  grid-area: header;
  border-bottom: 0px solid #666;
  padding: 0;
  margin: 0;
  background-color: silver;
  background: rgb(211, 211, 211); /* Light Gray */
}

nav {
  grid-area: nav;
  padding: 0;
  margin: 0;
}

main {
  grid-area: main;
  min-height: 400px;
}

footer {
  display: flex;
  justify-content: space-between;
  grid-area: footer;
  border-top: 1px solid #666;
  margin-top: 0.8em;
  padding-top: 1em;
  text-align: center;
}

.ein-projekt-von {
  padding: 0.2em 0;
  text-align: left;
}

@media screen and (max-width: 640px) {
  .wrapper {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

/* Angaben aus styleguide entnommen */

h1,
h2,
h3 {
  display: table;
}

h1 {
  background: rgb(226, 0, 120);
  color: #fff;
}

h2 {
  font-size: 22px;
  font-weight: 700;
}

h2,
.h2-pink {
  background: rgb(226, 0, 120);
  color: #fff;
}

.h2-grau {
  background: gray;
  color: #fff;
}

h3 {
  font-size: 22px;
  font-weight: 700;
}

h3 {
  background: gray;
  color: #fff;
}

h4 {
  color: #333;
}

.h1-dunkelrot, .h2-dunkelrot {
	background-color: rgb(233, 0, 50);
	color: #fff;
}
.hr-dunkelrot {
	background-color: rgb(233, 0, 50);
}

.h1-mittelgruen, .h2-mittelgruen {
	background-color: rgb(44, 180, 50);
	color: #fff; 
}
.hr-mittelgruen {
	background-color: rgb(44, 180, 50);
}

.h1-mittelblau, .h2-mittelblau {
	background-color: rgb(35, 100, 255);
	color: #fff; 
}
.hr-mittelblau {
	background-color: rgb(35, 100, 255);
}

body {
  color: #333333;
}
.text-pink {
  color: rgb(226, 0, 120);
}

/* Ende Angaben aus styleguide entnommen */

/* typo ###### */
.logo {
  font-size: 3.3rem;
  font-size: 2rem;
  font-weight: 900;
}

hr {
  background-color: rgb(226, 0, 120);
  height: 2px;
  border: none;
  margin: 1em 0;
}

h1,
h2,
h3,
h4 {
  margin: 1em 0;
}
h1,
h2,
h3,
h4 {
  font-family: "Sen", sans-serif;
  font-size: 1.375em;
  font-weight: 700;
  padding: 0.5em;
}
/* display: inline-block fuer h1 damit ich hintergrundfarbe nicht ueber gesamte breite erstreckt und sie auch gedreht werden koennen */

/* positionen, abstaende ###### */
p,
ul {
  padding: 0.5em 0;
  margin: 0.5em 0;
}

main li {
  margin-left: 1.5em;
}

main a:link {
  color: #333333;
  text-decoration: underline;
}
main a:visited {
  color: #333333;
  text-decoration: underline;
}
main a:hover {
  color: rgb(226, 0, 120);
  text-decoration: none;
}
main a:focus {
  color: #333333;
  text-decoration: underline;
}
main a:active {
  color: rgb(226, 0, 120);
  text-decoration: underline;
}

a.invisible {
  display: none;
}

/* nav ###### */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 1.3em;
}
nav li a {
  display: block;
  text-decoration: none;
  color: white;
  background: hsl(0, 0%, 25%);
  background: rgb(211, 211, 211); /* Light Gray */
  /* padding: 1em 1em; */
}

nav li.active {
  color: #fff;
  background: hsl(0, 0%, 25%);
  background: rgb(169, 169, 169); /* Dark Gray */
  /* padding: 1em 1em; */
}

nav li a:hover,
nav li a:focus,
nav li a:active {
  background: hsl(0, 0%, 25%);
  background: rgb(169, 169, 169); /* Dark Gray */
  color: #fff;
}

#single-nav,
.single-nav,
.dropdown {
  max-width: 960px;
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 30em) {
  .single-nav ul,
  .footer-nav ul {
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .single-nav li {
    flex: 1 0 auto;
  }
  .footer-nav li {
    flex: 1 0 auto;
    text-align: center;
  }
}

/* footer-nav ###### */
nav.footer-nav ul {
  list-style-type: none;
  padding: 0;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}
nav.footer-nav li {
  margin-right: 1rem;
}
nav.footer-nav li a {
  display: block;
  text-decoration: none;
  color: #333;
  background: #ffffff;
}

nav.footer-nav li a:hover {
  background: #ffffff;
  color: silver;
}

nav.footer-nav li.active {
  background: #ffffff;
  color: silver;
  text-decoration: underline;
}

/* foundation nav ##########*/

.dropdown {
  justify-content: space-between;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #fff transparent transparent; /* wichtig fuer farbe der arrows */
  right: 20px; /* wichtig fuer position des arrow */
}

.dropdown.menu li a,
.dropdown.menu li,
.dropdown.menu li span,
.dropdown.menu li .sibling, /* wichtig */
.dropdown.menu li span .active,
.dropdown.menu li .active {
  padding: 0;
  margin: 0 !important;
  line-height: 1.5rem; /* wichtig */
}

.dropdown.menu li,
.dropdown.menu li,
.dropdown.menu li a .sibling,
.dropdown.menu li a {
  padding: 0;
}

.dropdown ul {
  font-size: 1.2rem;
}

#example-menu li.active,
#example-menu li a {
  padding: 1rem;
}

.dropdown li, /* alles wichtig fuer ausbreitung */
.dropdown li a,
.dropdown li a::after {
  display: flex;
  flex: 1;
}
.submenu a,
.submenu a:hover {
  color: #fff !important;
}

.title-bar {
  background-color: gray;
  justify-content: center;
  background-color: white;
  color: black;
}
.menu-icon {
  color: black;
}
.menu-icon:after {
  color: black;
}

.title-bar {
  font-size: 200%; /* wichtig schriftgroesse des hambuger menu */
}

/* vermeidet fouc flash of unstyled content */

.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
}

/* button ############ */
.btn-magenta,
a.btn-magenta {
  background-color: rgb(226, 0, 120);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: #633a0a;
  display: inline-block;
  font-size: 1.4rem;
}
.btn-magenta a,
a.btn-magenta {
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block;
}

.btn-magenta:hover,
a.btn-magenta:hover {
  background-color: rgb(226, 0, 120);
  transition: transform 2s ease-in 2s;
  display: inline-block;
}