/* Grundkonfiguration */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  --d-blue: #001f3f;
  --m-blue: #004080;
  --l-blue: #99ccff;
  --white:  #ffffff;

  --header_bgr:  #ffaa88;
  --header_txt:  #ffffff;
  --main_bgr:    #ffeee6;
  --main_txt:    #666666;
  --footer_bgr:  #ffaa88;
  --footer_txt:  #ffffff;
  --button_bgr:  #ff7733;
  --button_txt:  #ffffff;
  --cookie_bgr:  #ffddcc;
  --cookie_txt:  #666666;
  --version_txt: #d9d9d9;

  --a_unvisited: #ff3300;
  --a_visited:   #cc2900;
  --a_hover:     #991f00;
  --a_active:    #991f00;
  --h_unvisited: #ffffff;
  --h_visited:   #ffffff;
  --h_hover:     #e62e00;
  --h_active:    #ce62e00;
}

html {
  scroll-behavior: smooth; /* Sorgt für das langsame Scrollen */
}

body {
  font-family: 'Calibri', sans-serif;
  line-height: 1.6;
  background-color: var(--main_bgr);
}

a:link {
  color: var(--a_unvisited);
}
a:visited {
  color: var(--a_visited);
}
a:hover {
  color: var(--a_hover);
}
a:active {
  color: var(--a_active);
}

body ul {
  list-style: disc outside none;
  display: inline;
  justify-content: left;
}

body ul li {
  margin: 0 50px;
}

/* Header & Navigation */
header {
  background-color: var(--header_bgr);
  color: var(--header_txt);
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  z-index: 99;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: var(--header_txt);
  text-decoration: none;
  font-weight: bold;
}
nav ul li a:link {
  color: var(--h_unvisited);
}
nav ul li a:visited {
  color: var(--h_visited);
}
nav ul li a:hover {
  color: var(--h_hover);
}
nav ul li a:active {
  color: var(--h_active);
}
.menu-toggle {
  display: none; /* Nur auf Mobilgeräten sichtbar */
  background: var(--button_bgr);
  color: var(--buttin_txt);
  border: 1px solid var(--white);
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Calibri', sans-serif;
}

/* Hauptbereich */
main {
  margin-top: 60px; /* Platz für fixierten Header */
  margin-bottom: 60px; /* Platz für fixierten Footer */
  background-color: var(--main_bgr);
  color: var(--main_txt);
  padding: 20px;
}

section {
  padding: 80px 20px;
  min-height: 60vh;
  //border-bottom: 1px solid #004080;
}

.img_box {
  background: var(--main_bgr);
  height: 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  border: 0px dashed var(--white);
}

/* Footer */
footer {
  background-color: var(--footer_bgr);
  color: var(--footer_txt);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
  z-index: 99;
}

.footer-links a {
  color: var(--footer_txt);
  text-decoration: none;
  margin: 0 10px;
}

/* Cookie Banner */
.cookie-container {
  position: fixed;
  bottom: 70px;
  left: 5%;
  right: 5%;
  background: var(--cookie_bgr);
  color: var(--cookie_text);
  padding: 20px;
  z-index: 2000;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-container button {
  background: var(--button_bgr);
  color: var(--button_txt);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.mytable table, tr, td {
  height: 3em;
  border-bottom: 1px dotted #ff66cc;
  text-align: left;
}

.myVersion {
  color: var(--version_txt);
  font-size: 0.75rem;
}

.myPicture {
  float:            right;
  margin-top:       1%;
  margin-right:     2.5%;
  margin-bottom:    5%;
  margin-left:      7.5%;
  width:            20%;
  //height:           120px;
  z-index: 2;
}

.myPicture_rnd{
  float:                 right;
  margin-top:            1%;
  margin-right:          2.5%;
  margin-bottom:         5%;
  margin-left:           7.5%;
  width:                 25%;
  border-radius:         50%;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
}

.myPicture_rnd_2{
  //float:                 left;
  margin-top:            1%;
  margin-right:          2.5%;
  margin-bottom:         7.5%;
  margin-left:           2.5%;
  width:                 27.5%;
  border-style:          solid;
  border-width:          1px;
  border-color:          #696969;
  border-radius:         50%;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
}

.mySectionPic_000 {
  // margin-right:     2.5%;
  // margin-left:      2.5%;
  // width:            95%;
  display:          block;
  margin-top:       5%;
  margin-right:     auto;
  margin-left:      auto;
  width:            50%;
  height:           auto;
  // height:           600px;
  background-color: #ffffff;
  z-index:          2;
} 

.mySectionPic_000_rnd {
  display:               block;
  margin-top:            -5%;
  margin-right:          auto;
  margin-bottom:         5%;
  margin-left:           auto;
  width:                 50%;
  border-radius:         50%;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
} 


.mySectionPic {
  // margin-right:     2.5%;
  // margin-left:      2.5%;
  // width:            95%;
  display:          block;
  margin-right:     auto;
  margin-left:      auto;
  width:            auto;
  height:           auto;
  // height:           600px;
  background-color: #ffffff;
  z-index:          2;
}

.myPic {
  float:            left;
  margin-top:       1%;
  margin-right:     2%;
  margin-bottom:    5%;
  margin-left:      0%;
  width:            2.5%;
  z-index:          2;
  opacity:          0.75;
}


/* Responsive Design (Tablet & Handy) */
@media (max-width: 992px) {
  .menu-toggle {
    display: block;
  }

  nav ul {
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    background-color: var(--header_bgr);
    color: var(--header_txt);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px 0;
  }

  nav ul.show {
    display: flex; /* Pull-down Effekt */
  }

  nav ul li {
    margin: 10px 20px;
  }

  .img_box {
    width: 80%;
  }

  .mySectionPic_000 {
    width:   85%;
    height:  auto;
    z-index: 2;
  } 

  .myPicture_rnd{
    width:   40%;
  }
  .myPicture_rnd_2{
    width:   50%;
  }

  .mySectionPic_000_rnd {
    margin-top: 1%;
    width:      75%;
  } 



}