@font-face {
font-family: "Jochen";
src: url("../ttf/Jochen-Gallenkamp.ttf") format("truetype");
}

body {
font-family: Jochen, Hevetica, Arial, sans-serif;
}


h1 {
   font-weight: bold;
}

p {
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.7em, 1.4vw, 2.1em);
  font-weight: normal;
  background-color: transparent;
}

a:link {
 text-decoration: none;
 color: black;
}
a:visited {
 text-decoration: none;
 color: black;
}

a:focus, a:hover, a:active  {
 text-decoration: none;
 color: #CDAA7D90;
}

ul {
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  font-weight: normal;
  background-color: transparent;
}

li {
  margin: 0vh 22vw 0vh 0vw;
}

.header {
  position: fixed;
  width:100%;
  height: 29vh;
  left: 0;
  top: 0;
  text-align: center;
  background-image: url("../bilder/hintergrund.jpg");
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: center;
  z-index: 2;
}

.menu {
  position: fixed;
  left: 7.8vw;
  top: 34.3%;
  z-index: 1;
}

.popup {
  background-color: #CDAA7D40;
  position: fixed;
  left: 71.0vw;
  top: 36.5%;
  border: 2px solid #CDAA7D50;
  border-radius: .4em;
  box-shadow: 10px 10px 15px #00000030;
  /*opacity: 0.7;*/ 
  z-index: 1;
  margin: 0vh 10.8vw 0vh 0vw;
}

.notfall {
  background-color: #CDAA7D40;
  position: fixed;
  left: 71.0vw;
  top: 87.0%;
  border: 2px solid #CDAA7D50;
  border-radius: .4em;
  z-index: 1;
  margin: 0vh 12.5vw 0vh 0vw;
}

.content {
  position: relative;
  width:100%;
  height:150%;
  left: 0px;
  top: -10px;
  background-image: url("../bilder/hintergrund.jpg");
  background-repeat: no-repeat;
  background-size: 86.0%;
  background-position: center;
  /*background-attachment: fixed;*/
  /*margin: 29.0vh 0vw 0vh 0vw;*/
  padding: 29.0vh 0vw 0vh 0vw;
  z-index: 0;
}

.content_writable {
  /*margin: 0vh 8.0vw 4vh 20vw;*/
  padding:0vh 8.0vw 4.5vh 20vw;
}

.text1 {
  line-height:1.2;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.8em, 1.5vw, 2.2em);
  font-weight: bold;
  text-align: left;
  margin: 10px 19vw 0px 0px;
  padding-bottom:5px;
  padding-top:10px;
}

.text1a {
  line-height:1.2;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.8em, 1.5vw, 2.2em);
  font-weight: bold;
  text-align: left;
  margin: 10px 19vw 0px 0px;
  padding-bottom:8px;
  padding-top:10px;
}


.text2 {
  line-height:1.1;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  font-weight: bold;
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding-bottom:4px;
  padding-top:0px;
}

.text2a {
  line-height:1.0;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:8px;
  padding-top:8px;
}

.text2b {
  line-height:1.1;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  font-weight: bold;
  color: #8B3A3A;
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding-bottom:4px;
  padding-top:0px;
}

.text2c {
  line-height:1.1;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  font-weight: bold;
  /*color: #2F4F4F;*/
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding-bottom:0px;
  padding-top:0px;
}

.text2d {
  line-height:1.1;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  text-align: justify;
  margin: 0px 22vw 0px 0px;
  padding-bottom:7px;
  padding-top:5px;
}

.text3 {
  line-height:1.0%;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.4em, 1.0vw, 1.6em);
  font-weight: bold;
  font-weight: bold;
  text-align: left;
  margin: 0px 10px 0px 0px;
  padding-bottom:2px;
  padding-top:0px;
}

.text3a {
  line-height: 125%;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
  text-align: left;
  margin: 0px 10px 10px 0px;
  padding-bottom:2px;
  padding-top:0px;
}

.footer {
  position: fixed;
  width: 100%;
  height: 6vh;
  left: 0px;
  bottom: 0px;
  text-align: center;
  background-image: url("../bilder/hintergrund.jpg");
  background-repeat: no-repeat;
  background-size: 85.0%;
  background-position: center;
  z-index: 2;
}

.image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

.item1 {
  grid-area: header;
  margin: 0px 0px 0px 0px;
  padding-bottom:15px;
  padding-top:0px; 
}

.item2 {
  grid-area: main1;
  line-height: 125%; 
}

.item3 {
  grid-area: main2; 
  line-height: 125%;
}

.item4 {
  grid-area: main3;
  line-height: 125%;
}

.item5 {
  grid-area: main4;
  line-height: 125%;
}

.item6 {
  grid-area: footer; 
}

.grid-vierspaltig {
  display: grid;
  background-color: transparent;
  grid-template-areas:
    'header header header header haeder'
    'main1 main2 main3 main4 main4'
    'footer footer footer footer footer';
  margin: 0vh 19vw 0vh 0vw;
}

.grid-vierspaltig > div {
  background-color: transparent;
  text-align: left;
  font-family: Jochen,  Arial, Helvetica, sans-serif;
  font-size: clamp(0.6em, 1.2vw, 1.8em);
}

nav ul {
    list-style: none; 	
    width: 8.8vw;
    border: none;
    background-color: transparent;

  }
  nav li {
    margin: 0.1em; 
    border: none;
    background-color: transparent;
  }
  nav a {
    font-family: Jochen,  Arial, Helvetica, sans-serif;
    font-size: clamp(0.55em, 1.0vw, 1.5em);
    text-decoration: none; 
    font-weight: normal;
    text-align: left;
    color: var(--text-color); 
    background-color: var(--background-color);
  }
[aria-current=page]{
	background: var(--accent2-color);
}

  nav a:focus,
  nav a:hover,
  nav a:active {    
    font-weight: bold;
  }

:root {
	--background-color: #CDAA7D40;
	--accent1-color: white;
	--accent2-color: #CDAA7D20;	
	--accent3-color: #00000090;
	--accent4-color: #CDAA7D50;
	--text-color: black;
 }
nav a {
      display: block;
      padding: 0.5em;
      text-decoration: none; 
      font-weight: normal;
      border: thin solid var(--accent4-color);
      border-radius: .4em;
      color: var(--text-color); 
      background-color: var(--background-color);
      transition: all .25s ease-in;
      box-shadow: 10px 10px 15px #00000030;
    }

  nav li[aria-current] a {
	background-color: var(--accent2-color); 
  }
	
    nav a:focus,
    nav a:hover,
    nav li[aria-current] a:focus,
    nav li[aria-current] a:hover {    
      color: var(--accent3-color); 
      background-color: var(--accent1-color); 
    }