html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%;
  font-size: medium;
  line-height: 1.3rem;
}

body {
  background-color: rgba(194, 194, 214, 1);
  color: rgba(80, 80, 80, 1);
  padding: 0;
  margin: 0;
}

body h1 {
  font-size: 1.2rem;
  line-height: 1.2rem;
}
body h2 {
  font-size: 1rem;

}

body h3 {
  padding-top: 30px;
}

body ul {
  margin-left: -0.5em;
}

body ol {
  margin-left: -1em;
}

body li {
  margin-bottom: 0.3em;
}

p {
  font-size: 1rem;
}

a,
a:visited {
  color: rgba(52,93,116,1);
  text-decoration: underline;
}
  a:active,
  a:focus,
  a:hover {
    color: rgba(52,93,116,0.85);
    text-decoration: none;
  }

.bqstart {
  float: left;
  font-size: 600%;
}
.bqend {
  float: right;
  font-size: 600%;
  line-height: 4rem;
}

.anspruch {
  list-style-type: none;
  font-style: italic;
  padding: 15px;
}

.complete {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.75);
}

.hamburger-menu {
  display: block; /* Auf Handy sichtbar */
  border: 2px solid white;
  background-color: #000000;
  color: white;
  font-size: 1.2rem;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 5px;
}

.hamburger-menu:hover {
  background-color: white;
  color: #000000;
}

header {
  justify-content: center;
  text-align: center;
}
  header a,
  header a:visited,
  header a:active,
  header a:focus,
  header a:hover  {
    color: rgba(255,255,255,1);
    text-decoration: none;
  }

/* Das Hero-Bild (Strand) */
.hero-section {
  width: 100%;
  padding: 0;
  margin: 0;
}

.hero-image {
  width: 100%;
  height: 250px; /* Handy-Höhe */
  object-fit: cover; /* Schneidet Bild zu, keine Verzerrung */
  object-position: center; /* Fokus  Mitte */
  display: block;
}

.intro-text {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
  padding: 0 15px;
  font-family: sans-serif; /* Genau wie im Menü */
}

nav {
  color: rgba(255,255,255,1);
  padding: .3rem;
  margin: .7rem;
  font-weight: 450;
  font-family: sans-serif;
}
  nav ul {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    padding: 0.25rem .5rem;
    margin: 0rem;
  }

  nav ul li a,
  nav ul li a:visited {
    color: rgba(255,255,255,1);
    text-decoration: none;
  }

  nav ul li a:active,
  nav ul li a:focus,
  nav ul li a:hover {
    color: rgba(255,255,255,1);
    font-weight: 650;
  }

/* Das Menü (Liste der Links) */
.nav-links {
  display: none; /* Erstmal versteckt */
  flex-direction: column;
  background-color: transparent; /* rgba(59, 0, 179, 0.95); /* Lila Hintergrund für Menü */
  width: 100%;
}

/* Klasse, die per Klick hinzugefügt wird, um Menü zu zeigen */
.nav-links.open {
  display: flex;
}

/* Die einzelnen Links im Menü */
.nav-links a {
  color: white;
  text-decoration: none;
  padding: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  display: block;
}

.impressum {
  font-size: 0.8rem;
  line-height: 0.5rem;
}

@media (min-width:768px) {
  .complete {
    width: 80%;
    margin-top: 1.5rem;
  }
}

@media (min-width:1024px) {
  .complete {
    width: 70%;
  }

  /* Leiste wird schmaler und zentriert */
  .top {
    width: 85%;
    max-width: 1200px;
    padding: 0; /* Rand regelt width */
    background-color: transparent; /* Oder Lila lassen, je nach Geschmack */
    color: black; /* Falls Hintergrund hell wird */
  }

  /* Button verstecken */
  .hamburger-menu {
    display: none;
  }

  /* Menü immer anzeigen und nebeneinander */
  .nav-links {
    display: flex; 
    flex-direction: row; 
    justify-content: center;
    background: transparent;
    margin: 0;
  }

  .nav-links a {
    color: white; /* Dunkle Schrift am PC */
    border-bottom: none;
    padding: 10px 20px;
  }

  /* Bild am PC höher */
  .hero-image {
    height: 450px;
  }
}

@media (min-width:1150px) {
  .complete {
    width: 85%;
    max-width: 1200px;
  }
}

/* Das Logo in der Leiste */
.logo-img {
  height: 40px; /* Passt perfekt in die 60px Leiste */
  width: auto;
}

.logo2 {
  margin-top: 3px;
  margin-bottom: .5rem;
/*    margin-left: 2px; */
  font-size: 19px;
  line-height: 1.7rem;
  font-weight: bold;
}
.logo1 {
  margin-top: 4px;
  margin-bottom: 1px;
/*    margin-left: 2px; */
  font-size: 23px;
  line-height: 1rem;
  font-weight: bold;
}

.main {
  background-color: rgba(240,240,245,1);
  padding: 5%;
  width: 90%;
  margin: 0rem;
}

.index {
  display: grid;
  background-color: rgba(240,240,245,1);
  /* width: 100%; */
}

.nachricht {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-style: solid;
  margin: auto;
  padding: .7rem;
  border-width: thin;
  box-shadow: 3px 3px 3px grey;
  height: 27rem;
}

.nachricht p {margin-top: 0rem;}

.aNachricht {
  text-decoration-line: none;
  color: inherit;
  width: 100%;
  padding-bottom: 5%;
  height: 100%;
}

.nachricht:hover {box-shadow: 3px 3px 3px black;}

@media (min-width : 450px) {
  .index {
  justify-content:center;
  grid-template-columns: repeat(auto-fill, 21rem)
  }

  .nachricht {
    width: 85%;
  }
}

.nachricht img {
  max-width: 100%;
  max-height: 50%;
}

.content {
  padding: 1rem;
  max-width: 100%;
}

.right {
  width: 90%;
  margin: 1rem auto;
  padding-top: 0%;
  display: block;
}

.left {
  width: 90%;
  margin: 1rem auto;
  display: block;
}

.videoRight {width: 90%;}
.videoRightVertikal {width: 90%}

.titel {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  font-family: Papyrus, fantasy;
}

.titImg {
  margin: .5rem;
  height: 12rem;
}

.top {
  display: flex;
  flex-flow: row nowrap;        /* Immer nebeneinander */
  justify-content: space-between; /* Logo links, Rest rechts */
  align-items: center;          /* Vertikal mittig */
  margin: 0 auto;               /* Zentriert den Container */
  padding: 0 15px;              /* Sicherheitsabstand zum Rand */
  height: 60px;                 /* Schlanke feste Höhe */
  width: 100%;                  /* Handy: Volle Breite */
  background-color: rgb(77, 0, 231); /* Oder weiß, je nach Wunsch */
  box-sizing: border-box;       /* Wichtig, damit Padding nicht die 60px sprengt */
  color: white;
}

/*.top {
  display: flex;
  flex-flow: nowrap;
  flex-direction: row;
  align-items: center;
  margin: 0 auto;
  font-weight: bolder;
  padding-top: 20px;
  padding-bottom: 8px;
}*/

.topIMG {
  height: 200px;
  /*box-shadow: 3px 3px 3px black;*/
}

aside {
  background-color: rgba(230,230,230,1);
  padding: 1rem;
}

figure {
  margin: 0px;
  margin-bottom: 0rem;
  padding: 0rem;
  padding-bottom: 0rem;
}

@media (min-width: 600px) {
  /* Bild rechts -> Text fließt links */
  .right {
    float: right;
    width: 21rem;      /* Oder 40-50% je nach Geschmack */
    
    /* HIER IST DIE KORREKTUR: */
    margin-left: 30px; /* Abstand zum Text (links vom Bild) */
    margin-bottom: 1rem; /* Abstand nach unten */
    margin-top: 0;
    padding-top: 0;
  }

  /* Bild links -> Text fließt rechts */
  .left {
    float: left;
    width: 21rem;
    
    /* Auch hier für Symmetrie sorgen: */
    margin-right: 30px; /* Abstand zum Text (rechts vom Bild) */
    margin-bottom: 1rem;
    margin-top: 0;
    margin-left: 0;
  }

  /* Deine Video-Klassen (unverändert, nur der Ordnung halber hier) */
  .videoRight {
    float: right;
    margin-left: 15px;
    width: 50%;
  }
  .videoRightVertikal {
    float: right;
    margin-left: 15px;
    width: 30%;
  }
  .videoLeft {
    float: left;
    margin-right: 15px;
    width: 50%;
  }
}

@media (max-width: 450px) {
    .topIMG {width: 0px}
    .main {
      display: flex;
      flex-direction: column;
    }
}

figure img {
  width: inherit;
  box-shadow: 3px 3px 3px grey;
}
figcaption br {padding: 0;}


figcaption {
  font-size: 70%;
  line-height: 1.2em;
  padding: 5px;
  text-align: center;
}

footer {
  background-color: rgba(200,200,200,1);
/*  font-size: 0.75rem;*/
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3em;
  margin: 0 auto;
}

  .quellen {
    align-items:flex-start;
    padding: 2em;
  }


@media (min-width:400px) {
  	footer {
      padding:2em;
    }
}

em {
  font-variant: caps;
  font-style: normal;
  font-size: 1.1em;
  font-weight: bold;
}

/*table {
  border-collapse: collapse;
  border-spacing: 1px;
  padding: 8px;
  border-style: solid;
  border-width: thin;
  border-color: grey;
}*/

#myBtn {
 display: none; /* Hidden by default */
 position: fixed; /* Fixed/sticky position */
 bottom: 20px; /* Place the button at the bottom of the page */
 right: 30px; /* Place the button 30px from the right */
 z-index: 99; /* Make sure it does not overlap */
 border: none; /* Remove borders */
 outline: none; /* Remove outline */
 background-color: rgb(77, 0, 231); /* Set a background color */
 color: white; /* Text color */
 cursor: pointer; /* Add a mouse pointer on hover */
 padding: 15px; /* Some padding */
 border-radius: 10px; /* Rounded corners */
 font-size: 18px; /* Increase font size */
}

#myBtn:hover {
 background-color: #555; /* Add a dark-grey background on hover */
}