:root {
  --sehrKlein: 8px;
  --farbeTürkis1: rgb(31, 143, 168);
  --farbeTürkis1Opa: rgb(31, 143, 168, 0.5);
  --farbe2: rgb(147,177,187);
  --farbe3: rgb(14,35,53);
  --farbe4: rgb(11,103,137);
  --farbe0: rgb(221,217,214);
  --farbe5: rgb(178,178,178);

}
/*-----------------------*/
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  /*position: relative; */
  height: 100%;
}

a {
  text-decoration: none;
  /*margin-left: 16px;  stört, vielleicht wieder ändern*/
  font-weight: bold;
  color: var(--farbeTürkis1);
}

h3{
  color: darkslategrey;
}

a:hover {
  text-decoration: underline;
}

div {
  /* border: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 5px; */
  
}

/*-------------------*/
/*-------------------*/
/*-------------------*/
/*-------------------*/
/*-------------------*/
.hintergrund {
  /* background-color: rgb(41, 45, 47); */
  /* background-color: rgb(57, 70, 75); */
  /* background:linear-gradient(100deg, grey, turquoise, grey); */
  background: linear-gradient(
    100deg,
    var(--farbeTürkis1),
    rgb(181, 210, 220),
    rgb(90, 121, 125)
  );
  background-size: 800% 800%;
  /* animation: gradient 30s ease infinite; */
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* innerhalb eines Divs, falls mehrere Element angeordnet werden müssen */
.div-container-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}
.div-container-row > * {
  /* flex-basis: ; */
}

.item {
  border-radius: 10px;
  padding: 5px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
  background-color: lightblue;
  height: min-content;
}
.item-mietbedigung{
  width: 100%;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
  background-color: lightblue;
  height: min-content;
}

.item2{
 /* Image Slideshow */
  grid-area: gallerie;
}

.item3{
/* Textblock Einleitung */
  grid-area: einleitung;
  flex-basis: 100%;
  grow: 1;
  width: 100%;
  margin: 5px;
  align-items: center;
  
}
.item3-textBlock{
  max-width: 70%;
  text-align: left;
  order: 2;
  padding: 20px;
}
.bildHaus {
  height: 200px;
  order: 1;
  border-radius: 10px;
  align-self: flex-start;
  margin-top: 20px;
  margin-left: 20px;
}

.item5{ 
  /* Slideshow Grundriß */
 
}

.item6{
  /* youtube */
  grid-area: youtube;
}


.item7{
  flex-basis:  50%;
  grid-area: ausstattung;
}
.ausstattung{
  
  border-radius: 10px;
  border: 1px solid black;
  /* background-color: var(--farbe5); */
  background-color: rgb(172, 212, 214);
  width: min-content;
  white-space: nowrap;
  padding: 3px;
  display: inline-flex;
  margin: 3px;
 
}
.ausstattungGross{
  border-radius: 10px;
  border: 1px solid black;
  /* background-color: var(--farbe5); */
  background-color: rgb(172, 212, 214);
  width: min-content;
  white-space: nowrap;
  padding: 3px;
  display: inline-flex;
  margin: 3px;
  font-size: 30px;
 
}
.ausstattungIcon{
  object-fit: none;
  margin-right: 3px;
}

.item8 {
  /* WebCam */
 /* height: 300px;  */
  /* width: 500px; */
  grid-area: webcam;
}

.item9{
  /* Wetter */
  /* height: min-content; */
  grid-area: wetter;
}
.item10 {
/* openStreetMap */
grid-area: karte;
/* width: 500px; */

/* height: min-content; */
}
/* die komplette Anordnung aller Items */
.grid-container {
  /* display: flex; */
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas: "titelbild titelbild"
                       "einleitung einleitung"
                       "gallerie webcam" 
                       "gallerie karte" 
                       "ausstattung grundriss"
                       "ausstattung wetter"
                       "youtube bewertung"
                       "kalender bewertung"
                       "impressum impressum";
  /* background-color: #2196F3; */
  gap: 1.5rem;
  padding: 10px;
  flex-wrap: wrap;
}

.container-mietbedigungen{
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* .grid-container > * {
  flex: 1 200px;
} */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.item11{
  /* Bewertungen */
  grid-area: bewertung;
  display: flex;
  flex-direction: column;
  /* width: 100%; */
  gap: 20px;
  
  width: min-content;
}
.award{
  width: 280px;
}

.item12{
  /* Buchungskalender */
  /* width: 700px; */
  grid-area: kalender;
}

.item13{
  /* Impressum Fußzeile */
  grid-area: impressum;
  color: var(--farbe4);
  text-align: center;
}

.kopfleiste {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: end;
  /* color: rgb(83, 98, 101); */
  align-items: top;
}
.kopfleiste a {
  color: white;
}
.linkleiste a {
  color: white;
}
.kopfleiste p {
  color: white;
}
.linkleiste{
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.Blocküberschrift {
  /* color: rgb(41, 189, 181); */
  color: rgb(54, 68, 71);
}

.parentTitelBild {
  position: relative;
  margin: 0 auto;
  grid-area: titelbild ;
  width: 100%;
}

.titelBild {
  display: table;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100px;
  height: 400px;
  object-fit: cover;
}

.textZumTitelbild {
  position: absolute;
  bottom: 60px;
  left: 0;
  /*background: rgb(28, 157, 167); */
  background: var(--farbeTürkis1Opa);
  /*schwarzer Hintergrund mit 0,5 Opacity */
  color: #ffffff;
  width: 30%;
  padding: 16px;
  text-align: left;
}
/* .bildBlock {
  width: 400px;
} */



.bildWebCam {
  width: 100%;
  object-fit: cover;
}

.webcam {
  position: relative;
}
.textZurWebCam {
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*background: rgb(28, 157, 167); */
  background: rgba(28, 157, 167, 0.5);
  /*schwarzer Hintergrund mit 0,5 Opacity */
  color: #ffffff;
  width: 150px;
  /* height: 25px; */
  margin: 15px;
  text-align: center;
}
.fontBold {
  font-weight: bold;
}
.sehrKleinerText {
  font-size: var(--sehrKlein);
  writing-mode: vertical-rl;
}
.slideshow-container {
  display: flex;
  flex-direction: row;
}
.logoBild {
  height: 200px;
  transform: rotate(-10deg);
  margin: 10px;
}

.miet-ueberschrift{
  display: flex;
  gap: 10px;
}

.miet-text{
  margin: 10px;
}
.impressum{
  display: flex;
}
.impressum-marina{
  width: 40%;
  padding: 10px;
}
.impressum-max{
  width: 60%
  padding: 10px;
}
.item-kontakt{
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
  background-color: lightblue;
  height: min-content;
}