/*Grundsatz*/
::selection {
  background-color: #98a633;
  color: white;
}

p{
  font-size: 1.3rem;
  font-family: niveau-grotesk, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #473830;
  line-height: 140%;
}
.headunterseiten{
  background-color: #ffffff;
  opacity: 70%;
  top: 0;
}

body{
  /*background-image: url("../images/elements/aa_hauptplatz.png");*/
  /*background-color: #516B8C50;*/
  background-color: #C8D1DB;
  margin: 0;
  background-repeat:no-repeat;
  max-height: 100%;
  height: 100%;
}

.header{
  width: 100%;
  padding: 0.25rem 0;
  background-color: #ffffff80;
  border: 0;
}
/*Header*/
h1{
    font-size: 4rem;
    line-height: 20%;
    font-weight: 700;
    font-style: normal;
    font-family: magistral, sans-serif;
    color: #667302;
    margin-left: 2.5rem;
}

.titel {
  text-decoration: none;
}

h2{
    font-size: 2.5rem;
    line-height: 50%;
    font-weight: 500;
    font-style: normal;
    font-family: magistral, sans-serif;
    color: #667302;
    margin-left: 2.5rem;
}


/*Hauptinhalte*/
h3{
  font-size: 2.5rem;
  line-height: 50%;
  font-weight: 500;
  font-style: normal;
  font-family: magistral, sans-serif;
  color: #667302;
  width: 58rem;
  margin-left: auto;
  margin-right: auto;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed;; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}

.modal-inhalt {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "a b"
    "a b";
  gap: 0rem 1.25rem;
}
.bildmodal {
  grid-area: a;
}
.textmodal {
  grid-area: b;

}
.titelmodal {
    margin-left: 0;
}
/* The Close Button */
#close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modal-schrift {
  margin-left: 0;
  margin-right: 0;
}

#close:hover,
#close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Video*/
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  margin: auto;
  display: block;
}

div.content {
  position: fixed;
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 24%;
}

.textvideo{
  color: #ffffff;
    font-size: 1.6rem;
}
#myBtn {
  position: fixed;
  font-family: niveau-grotesk, sans-serif;
  width: 200px;
  font-size: 2rem;
  padding: 10px;
  border-width: 0.1em;
  border-color: #fff;
  border-style: solid;
  background: #8b4246;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  margin-top: 5%;
}

#myBtn:hover {
  background: #C8D1DB;
  color: black;
  z-index: 1;
}

/*ufo ansprechen, cursor ändern*/
.map {
  cursor: pointer;
}

#bild {
  margin-bottom: 100%;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.vis_bild{
  width: 80rem;
  height: 30rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
}
.inf_bild{
  width: 80rem;
  height: 30rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
}

.bilderunterseite{
  display: flex;
  justify-content: center;
}
.textunterseiten{
  margin-left: auto;
  margin-right: auto;
  width: 58rem;
  color: #473830;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
}

.textunterseite_vis{
  margin-left: auto;
  margin-right: auto;
  width: 58rem;
  color: #473830;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
}
.spalte{
  width: 85rem;
  background-color: #ffffff80;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

.contactinhalt{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "a e"
    "f b"
    "c g"
    "h d";
  gap: 3rem 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
  width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.item1{
  grid-area: a;
  display: flex;
  justify-content: end;
  align-items: center;
}
.bildanabel {
  width: 15rem;
}
.item2{
  grid-area: b;
  display: flex;
  justify-content: start;
  align-items: center;
}
.bildpaula {
  width: 15rem;
}
.item3{
  grid-area: c;
  display: flex;
  justify-content: end;
  align-items: center;
}
.bildmara {
  width: 15rem;
}
.item4{
  grid-area: d;
  display: flex;
  justify-content: start;
  align-items: center;
}
.bildseraina {
  width: 15rem;
}
.item5{
  grid-area: e;
}
.item6{
  grid-area: f;
}
.item7{
  grid-area: g;
}
.item8{
  grid-area: h;
}
.textpaula{
  text-align: right;
}
.textseraina{
  text-align: right;
}

.titelnamen{
  color: #667302;
  margin-left: 0;
}

.titelnamenp{
  text-align: right;
  color: #667302;
  margin-left: 0;
}
/*Footer*/
footer {
    width: 100%;
    padding: 0.94rem 0;
    text-align: center;
    background-color: #735b4d;
    position: fixed;
    bottom: 0;
    opacity: 90%;
}

.footer_unterseiten{
  position: static;
}

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6em;
}

.ff {
  font-size: 0.88rem;
  font-family: niveau-grotesk, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  text-decoration: none;
}

a.ff {
  font-size: 2rem;
}

a.ff:hover{
  color: #98a633;
}