/* ################################################################# */
/* #####                                                       ##### */
/* #################  wwd-elegant  ################################# */
/* #####                                                       ##### */
/* ################################################################# */

/* ausblenden was nicht benötigt wird */

#backgroung-mobil {
  display: none;
}
#backgroung-tablet {
  display: none;
}
#backgroung-desktop {
  display: none;
}
#backgroung-4k {
  display: none;
}

#nav-mobil {
  display: none;
}
#nav-desktop {
  display: none;
}
#nav-4k {
  display: none;
}
 

/* -------------------------- body und main ------------------------ */

body {
  position: relative;
  margin: 0;
  font-family: 'Baskerville', 'Palatino Linotype','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 2em;
  background-color: rgb(253, 253, 253);

}

/* -------------------------- slider ------------------------------- */

#seite5 .slides, 
#seite6 .slides, 
#seite7 .slides, 
#seite8 .slides {
  display: none;
}

/* slide-wrap = Wrapper für "in-page-slideshows" */
/* max-height ist für Smartphones */

/* Wrapper für "background-slideshows" */
#slide-wrap {
  position: relative;
  /* height muss sein, sonst ist keine Höhe da */
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  }

  /* width und height beziehen sich auf das Elternelement "slide-wrap */
  /* "slides bezieht sich auf die ungeordnete List - hier kann also auch ul stehen */
  /* Änderungen bei top, right usw. schieben das Bild aus dem slide-wrap */
  /* ul { */
  .slides {
    list-style:none;
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow:hidden; /* verhindert das das Bild übersteht durch li -> background-size: cover */
  }

  /* Listenelemente */
  .slides li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: transparent;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;     /* horizontal, vertikal */
    background-size: cover; /* contain ist passt nicht */
    }

    /* slides mit Leben füllen */
    .slides li:nth-child(1)  {background-image: url(bilder/img1.jpeg);}
    .slides li:nth-child(2)  {background-image: url(bilder/img2.jpeg);}
    .slides li:nth-child(3)  {background-image: url(bilder/img3.jpeg);}
    .slides li:nth-child(4)  {background-image: url(bilder/img4.jpeg);}
    .slides li:nth-child(5)  {background-image: url(bilder/img5.jpeg);}
    .slides li:nth-child(6)  {background-image: url(bilder/img6.jpeg);}
    .slides li:nth-child(7)  {background-image: url(bilder/img7.jpeg);}
    .slides li:nth-child(8)  {background-image: url(bilder/img8.jpeg);}
    .slides li:nth-child(9)  {background-image: url(bilder/img9.jpeg);}

    /* Animation - funktioniert erst mal nur mit shorthand */
    .slides li {
      animation: slides 72s linear infinite;
      opacity: 0; 
    }

/* Überblenden - Laufzeit durch Anzahl der Bilder */
  @keyframes slides {
    0% {
      opacity: 1.0;
      transform: translateX(100%);
    }

    /* 2% {
      opacity: 0.95;
    }

    3% {
        opacity: 1.0;
    } */

    5.5% {
        transform: translateX(0%);   
    }
    
    11% {
      opacity:1.0;
      transform: scale(1.0);
      /* transform: rotate(0deg); */
    }

    15% {
        opacity: 0;
        transform: scale(0.1);
    }

   }
  
  /* Verzögerung der slides für die Bilder - hier 1-9 */
  .slides li:nth-child(1)  { animation-delay: 0s;}
  .slides li:nth-child(2)  { animation-delay: 8s;}
  .slides li:nth-child(3)  { animation-delay: 16s;}
  .slides li:nth-child(4)  { animation-delay: 24s;}
  .slides li:nth-child(5)  { animation-delay: 32s;}
  .slides li:nth-child(6)  { animation-delay: 40s;}
  .slides li:nth-child(7)  { animation-delay: 48s;}
  .slides li:nth-child(8)  { animation-delay: 56s;}
  .slides li:nth-child(9)  { animation-delay: 64s;}

/* ******************************* Ende Slider ************************************ */

/* ----------------- navigation ----------------------------- */

/* ----------- Navigation nav-linecross in Header -------------------------------- */

#nav-linecross {
  position: absolute;
  top: 1em;
  left: 25vw;
  z-index: 50;
}

#nav-linecross ul {
  position: absolute;
}
#nav-linecross ul li {
  list-style-type: none;
}

#nav-linecross ul li ul {
  left: 0px;
}

/* --- erstes und letztes Element mit Radius versehen ------- */
#nav-linecross .erstes {
  border-top: 1px solid rgb(235, 235, 235);
  border-top-right-radius: 1em;
}

#nav-linecross .letztes {
  border-bottom: 1px solid rgb(235, 235, 235);
  border-radius: 0em 0em 1em 1em;
}

/* --- durch pos:absolut wird content nicht verschoben */
/* --- ul zentriert über left ------------*/
/* #nav-linecross ul li ul {
  width: 10em;
} */

/* --- li zentriert über right ---------- */
/* --- z-index - über content anzeigen -- */
#nav-linecross ul li ul li {
  width: 9em;
  padding: 0.25em;
  background-color: lightgrey;
  border-left: 1px solid rgb(235, 235, 235);
  border-right: 1px solid rgb(235, 235, 235);
  border-bottom: 1px solid white;
  text-align: center;
}

/* --- a(nachor) für Hyperlink stylen */
#nav-linecross a {
  color: black;
  text-decoration: none;
}

#nav-linecross input {
  cursor: none;
}

/* --- hamburger erzeugen --------------- */
label.hamburger { 
  position: relative;
  display: block;
  background: lightgrey;
  width: 75px; 
  height: 75px;
}

/* ---------- die checkbox wird nicht angezeigt -- */
input#hamburger {display:none}

/* ---------- hier werden die Linien erzeugt und als nth-child zum Kreuz*/
.line { 
  position: absolute; 
  left: 12.5px;
  /* top: 2em; */
  height: 3px; 
  width: 50px; 
  background: black; /* Farbe der Linien */
  display: block; 
  transition: 1s; 
  transform-origin: center; 
}

/* ---------- die Linien werden positioniert ----- */
.line:nth-child(1) { top: 15.5px; }
.line:nth-child(2) { top: 37.5px; }
.line:nth-child(3) { top: 58.5px; }


/* --------- die folgenden 3 Einträge machen aus den Linien ein Kreuz - */
/* --------- die erste Linie wird verschoben und um 45 Grad gedreht   - */
#hamburger:checked + .hamburger .line:nth-child(1){
  transform: translateY(21px) rotate(-45deg);
  height: 4px;
  background: red;
}

/* ---------- die zweite Linie wird durchsichtig gemacht  */
#hamburger:checked + .hamburger .line:nth-child(2){
  opacity:0;
}    

/* --------- die dritte Linie wird verschoben und um 45 Grad gedreht */
#hamburger:checked + .hamburger .line:nth-child(3){
  transform: translateY(-21px) rotate(45deg);
  height: 4px;
  background: red;
}

/* --- Untermenue verstecken --------------- */
#nav-linecross ul li ul {
  display: none;
}

/* --- Untermenue anzeigen ----------------- */
#nav-linecross .hackbox:checked ~ul {
  display: block;
}

/* ------ die Einträge von line-cross werden gehovert --- */
#nav-linecross ul li ul li:hover {
  background-color: white;
  /* border: 1px solid red; */
}


/* -------------------- ende nav-linecross ---------------------- */

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {  
  position: relative;
  height: 100vh;
  margin-bottom: 3em;
}



#seite5 header,
#seite6 header,
#seite7 header,
#seite8 header {
  height: 12vh;
  background-image: url(bilder/wwd_logo.png);
  background-position: right center;
  background-size: 40% auto;
  background-repeat: no-repeat;
}

main {
  flex: 1;
  width: 90vw;
  margin: 0 auto;
  border: 1px solid lightgrey;
  border-radius: 1em;
  box-shadow: 10px 10px 10px 10px lightgrey;
}

h1 {
  text-align: center;
}


/* --------------------- content ----------------------- */

.leitsatz {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  justify-content: space-evenly;

  margin: 1em;
  padding: 0.5em;
  color: green;
  text-align: center;
  font-size: 2em;
  border: 1px solid lightgrey;
}

#index .leitsatz {
  box-shadow: 5px 3px 5px 8px lightgrey;  
}

#example-pages .leitsatz {
  width: 92%;
  margin: 1em auto;
}

/* ----------------- #welcome stylen ---------------- */

/* ------------------ Bild ausblenden ---------------- */

#welcome img{
  display: none;
  }

/* ----------- flexbox auf .text anwenden ------------- */

#welcome .text{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  
  margin: 2em;
  background-color: white;
  border: 2px solid lightgrey;
  box-shadow: 5px 5px 10px 10px lightgrey;
}

#welcome h1 {
  flex-basis: 100%;
  text-align: center;
  color: green;
  font-size: 1.25em;  
  }

  #welcome .links,
  #welcome .rechts {
  flex-basis: 40%;
  margin-bottom: 2em;
}

  #welcome h2 {
    text-align: center;
    color: green;
    font-size: 1.1em;
  }
 
/* -------------- #inhalt stylen ----------------------- */

#inhalt section {
  /* flex-container */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;

  /* flex-item  */
  flex-basis: 35%;

  /* styling */
  margin: 2em;
  background-color: white;
  border: 2px solid lightgrey;
  box-shadow: 5px 5px 10px 10px lightgrey;
}  

#index section:nth-of-type(2),
#index section:nth-of-type(4),
#index section:nth-of-type(6),
#index section:nth-of-type(8) {
flex-direction: row-reverse;
}

#inhalt .text {
  flex-basis: 40%;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}


#inhalt section img {
  width: 45%;
  margin: 2.5%;
  height: auto;
  border: 0px solid white;
}

.leer {
  height: 2em;
}

/* ---------------- top-link ----------------------  */
/* ---------------- down-link ---------------------  */

#down-link {
  position: absolute;
  top: 80vh;
  left: 50vw;
}

#top-link {
position: fixed;
top: 80vh;
left: 90vw;
}


#top-link,
#down-link {
  width: 5vh;
  height: 5vh;  
  opacity: 0.70;
  z-index: 10;
  }
  
  #top-link img,
  #down-link img {
    width: 5vh;
    height: 5vh;  
  }

#top-link {
  animation: toplink 11s;
}

@keyframes toplink {
  0% {
      opacity: 0;
  }

  90% {
      opacity: 0;
  }

  100% {
      opacity: 0.75;
  }
}


/* ------------------ footer --------------------------- */

footer {
  /* flex-container */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  
  
  /* styling */
  /* bottom: 0vh; */
  width: 90vw;
  height: auto;
  margin: 2em auto 1em auto;
  border: 1px solid lightgrey;
  border-radius: 1em;
  box-shadow: 10px 10px 10px 10px lightgrey;
  color: black;
}

footer p {
  flex-basis: 25%;

  height: 3vh;
  margin: 0.5em auto;
  text-align: center;
  bottom: 1em;
}

footer a:hover {
  color: red;
  font-size: 1.1em;
}

/* --------------------- Anpassung der Unterseiten --------------------------- */


/* --------------------------------------------------------------------------- */
/* --------------------- WebDesign - #webdesign ------------------------------ */
/* --------------------- Leistungen - #services ------------------------------ */
/* --------------------------------------------------------------------------- */


#webdesign article,
#services article {
  display:flex;
  flex-direction: row;
  flex-basis: 100%;
  flex-wrap: wrap;
  border: 1px solid lightgrey;
  margin: 2em;
  padding: 1em;
}

#webdesign section,
#services section {
  justify-content: space-evenly;  
  flex-basis: 45%;
  margin: 1em auto;
  padding: 0.5em;
  border: 1px solid lightgray;
} 


#webdesign figure {
  flex-basis: 95%;
  margin: 2em auto;
  padding: 0.5em;
  border: 1px solid lightgray;
}

#webdesign section:last-of-type,
#services section:last-of-type {
flex-basis: 95%;
margin-bottom: 0em auto 3em;
}

#webdesign img {
  width: 90%;
}

#webdesign figurecaption {
  padding: 1em;
}

/* ----- WebDesign - #variationen  ----- */

#variationen p{
  height: 1.6em;
}

#variationen a:hover {
  color: red;
  font-size: 1.25em;
}


/* ---------------- Beispielseiten ------------------------ */
/* -------------------------------------------------------- */

#example-pages article {
  /* flex-container */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#example-pages section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  
  /* styling */
  width: 43%;
  margin: 1em auto;
  padding: 0.5em;
  border: 1px solid lightgray;
  /* box-shadow: 5px 5px 10px 10px lightgrey; */
}

#example-pages h2 {
  color: green;
}

#example-pages .leer {
  height: 2em;
}

/* ----- Bild anpassen ----- */
.examples {
  position: relative;
  width: 75%;
  left: 12.5%;
  border: 1px solid lightgray;
  box-shadow: 5px 5px lightgray;
}

/* ****** neues Fenster wird mit display:none ausgeblendet und mit :target eingeblendet ****** */
.newwindow {
  display: none;
 
  /* styling */
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0vw;
  top: 0vh;
  text-align: center;
  background-color: white;
  z-index: 100;
}

.big {
  position: absolute;
  width: 60vw;
  height: auto;
  left: 20vw;
  margin-top: 2em;

  top: 50%;
  transform: translateY(-50%);
  
  border: 2px solid lightgray;
  box-shadow: 5px 10px lightgray;
  background-color: white;
}

:target {
  display: block;
}

/* ----- Tabelle anpassen ----- */
/* ----- display:none unterdrückt th ;-) ----- */
.dot {
  visibility: hidden;
}

#example-pages th {
  text-align: left;
  font-weight: inherit;
}

/* ----- ungerade ----- */
#example-pages th:nth-of-type(odd) {
  border-bottom: 1px solid lightgrey;
}

/* ----- gerade ----- */
#example-pages th:nth-of-type(even) {
  padding-left: 1em;
  border-bottom: 1px solid lightgrey;
}



/* ---- Link zum Schliessen - wählt den Link von :target ab */
.close {
  position: absolute;
  top: 5vh;
  left: 90vw;
}

.close img {
  width: 3vh;
  height: 3vh;
  }



/* ---------------- kontaktformularformular --------------- */

#kontakt  {
  flex-direction: column;
  justify-content: space-around;
}

#kontakt h1{
  text-align: center;
  color: green;
  border: none;
}

#kontakt h2{
  text-align: center;
  color: green;
}

#kontakt h3 {
  color: red;
}

#kontakt article {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  padding: 1em;
  border: 1px solid lightgrey;
  border-radius: 1em;
  /* box-shadow: 3px 5px 10px 10px lightgrey; */
}


/* styling des Kontaktformulars */

/* Hinweis zum email Programm */
.breit {
  flex-basis: 100%;
  font-size: 1.25em;
  text-align: center;
  padding: 1em;
  background-color: antiquewhite;
  border-radius: 1em;
}

/* Überschrift über die Eingabefelder */
.darueber {
  flex-basis: 100%;
}

.kontaktform {
  margin-top:  1em;
}

.kontaktform ul {
  padding: 0;
}

.kontaktform li {
  list-style-type: none;
  margin-top: 1em;
}

.kontaktform label {
  float: left;
  width: 10em;
  margin-right: 1em;
  padding: 0.25em;
}

.kontaktform input {
  width: 20em;
  background-color: lightgray;
  padding: 0.25em;
}

.kontaktform button {
  position: relative;
  left: 35%;
  margin: 2em;
}

.kontaktform span {
  color: red;
}




/* ----- dsgvo - impressum - cookies ----- */

.inhalt-impressum,
.inhalt-dsgvo,
.inhalt-cookies {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

#dsgvo .leitsatz,
#impressum .leitsatz {
  border: none;
  font-size: 2.5em;
}


#dsgvo h1,
#impressum h1 {
  color: green;
  text-align: left;
  font-size: 1.5em;
  /* padding: 1em; */
}

#dsgvo h2,
#impressum h2 {
  color: green;
  padding: 1em 0em;
}

/* ----- cookies ----- */
#Cookies {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  justify-content: space-evenly;
  text-align: center;
}

#Cookies .leitsatz {
  border: none;
  font-size: 2.5em;
  margin: 0;
}

#Cookies div h1 {
  display: none;
}

#Cookies .leer {
  display: none;
}

/* ----- Anpassung an unterschiedliche viewports */

@media all and (max-width: 2500px) {
  
  body {
    font-size: 1.5em;
  }

  header {
    /* border-bottom: 1px solid lightgrey; */
    z-index: 5;
  }
  
  #webdesign section:last-of-type,
  #services section:last-of-type {
    width: 70vw;
  }

  #webdesign figure {
    width: 68vw;
  }
  
  #kontakt article {
    width: 60%;
  }

  /* ----- wwd_logo in header  */
  #seite5 header,
  #seite6 header,
  #seite7 header,
  #seite8 header {
    height: 15vh;
  }

  #nav-linecross {
    left: 10vw;
  }

}


@media all and (max-width: 1600px) {

  body {
    font-size: 1.25em;
  }

  #kontakt article {
    width: 70%;
  }

  #impressum .leitsatz,
  #dsgvo .leitsatz,
  #Cookies .leitsatz {
    font-size: 2em;
  }    

  .inhalt-impressum,
  .inhalt-dsgvo {
  width: 75%;
}

.inhalt-cookies {
  width: 90%;
}

}
  
  @media all and (max-width: 999px) {
    
    body {
      font-size: 1em;
    }

    /* ---------------- nav-linecross ------------------------------------ */
    #nav-linecross {
      top: 1rem;
      left: 1rem;
    }
    
    /* --- hamburger erzeugen --------------- */
    label.hamburger { 
      width: 50px; 
      height: 50px;
    }
    
    /* ------- hier werden die Linien erzeugt und al nth-child zum Kreuz*/
    .line { 
      position: absolute; 
      left: 7px;
      height: 3px; 
      width: 36px;
    }
    
    /* ---------- die Linien werden positioniert ----- */
    .line:nth-child(1) { top: 12.5px; }
    .line:nth-child(2) { top: 25px; }
    .line:nth-child(3) { top: 37.5px; }
    
    
    /* --------- die folgenden 3 Einträge machen aus den Linien ein Kreuz - */
    /* --------- die erste Linie wird verschoben und um 45 Grad gedreht   - */
    #hamburger:checked + .hamburger .line:nth-child(1){
      transform: translateY(12.5px) rotate(-45deg);
    }
    
    /* ---------- die zweite Linie wird durchsichtig gemacht  */
    #hamburger:checked + .hamburger .line:nth-child(2){
      opacity:0;
    }    
    
    /* --------- die dritte Linie wird verschoben und um 45 Grad gedreht */
    #hamburger:checked + .hamburger .line:nth-child(3){
      transform: translateY(-12.5px) rotate(45deg);
    }

    /* ------------------- Content --------------------------------------- */


  #seite5 header,
  #seite6 header,
  #seite7 header,
  #seite8 header {
    margin-bottom: 0;
    background-size: 50% auto;
}

  #index,
  #webdesign,
  #services,
  #example-pages {
    width: 90vw;
    border-radius: 0;
    box-shadow: 5px 5px lightgrey;
  }


  #index .leitsatz,
  .leitsatz {
    margin: 0.25em;
    padding: 1em 0em;
    font-size: 1.25em;
    border: 1px solid lightgray;
    border-radius: 1em;
    box-shadow: none;
  }
  
  
  #welcome .text {
    flex-direction: column;
    flex-wrap: nowrap;

    margin: 1em 0.25em;
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 1em;
    box-shadow: none;
  }
  
  #welcome .links,
  #welcome .rechts {
    flex-basis: 90%;
  }

  #inhalt section {
    flex-direction: column;

    margin: 1em 0.25em;
    border: 1px solid lightgray;
    border-radius: 1em;
    box-shadow: none;
  }
  
  #inhalt section img {
    width: 80%;
    margin-top: 2rem;
    border: 1px solid lightgray;
    border-radius: 50%;
  }

  #inhalt .text {
    padding: 0.5em;
  }


  
  /* aufheben das das img in der 2ten Spalte ist */
  #index section:nth-of-type(2),
  #index section:nth-of-type(4),
  #index section:nth-of-type(6),
  #index section:nth-of-type(8) {
    flex-direction: column;
  } 

  .leer {
    height: 1em;
  }

  #top-link {
    left: 80vw;
    top: 80vh;
  }
  
    /* -------------------- Footer -------------------------- */
    footer {
      flex-direction: column;
      flex-wrap: nowrap;
      width: 90vw;
      margin-top: 2em;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid lightgrey;
      border-radius: 0;
      box-shadow: 5px 5px lightgrey;
    }
  
    footer p,
    footer a {
      height: 1.5em;      font-size: 1em;
      text-align: center;
    }

  /* ----------------------- #WebDesign = main ---------------- */
  /* ----------------------- Leistungen #services ------------- */
 
  #webdesign,
  #services {
    border-radius: 0;
    box-shadow: 5px 5px lightgrey;
  }

  #webdesign article,
  #services article {
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0.25em;
    padding: 1em 0em;
    border: 0px solid lightgray;
    border-radius: 0em;
    box-shadow: none;
  }

  #webdesign section,
  #webdesign section:last-of-type,
  #services section,
  #services section:last-of-type {

    width: auto;
    margin: 1em 0.25em;
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 1em;
    box-shadow: none;
  }

  #webdesign section h1 {
    text-align: center;
  }

  #webdesign figure {
    width: auto;
    margin: 1em 0.25em;
    border-radius: 1em;
    box-shadow: none;
  }
  
  /* -------------------- Beispielwebsites #example-pages - */

  #example-pages section {
    width: 85vw;
    margin: 1em auto;
    padding: 1em 0;
    box-shadow: none;
    border-radius: 1em;
  }

  #example-pages h2 {
    text-align: center;
  }

  #example-pages p {
    text-align: center;
    margin-block-start: 0em;
    margin-block-end: 0em;
  }
  
  .big {
    width: 80vw;
    left: 10vw;
    height: auto;
  }
  
  :target {
    display: block;
  }
  
  .close {
    left:80vw;
    top: 10vh;
  }

  .close img {
    width: 35px;
    height: 35px;
  }

  /* -------------------- Kontakt ------------------------- */

  #kontakt {
    width: 95vw;
    margin: 0em auto;
    border: none;
    box-shadow: none;
  }

  #kontakt article {
    width: 80vw;
    border-radius: 0;
    box-shadow: 5px 5px lightgray;
  }

  #kontakt textarea {
    width: 75vw;
  }

  /* ------------------- impressum - dsgvo - Cookies ---------- */

  #dsgvo,
  #impressum,
  #Cookies {
    width: 90vw;
    margin-top: 1em;
    border-radius: 0;
    box-shadow: 5px 5px lightgray;
  }

  #dsgvo .leitsatz,
  #impressum .leitsatz,
  #Cookies .leitsatz {
    text-align: center;
    padding: 0.5em 0em;
  }

  .inhalt-dsgvo,
  .inhalt-impressum,
  .inhalt-cookies {
    width: 85%;
  }

}

  @media all and (max-width: 999px) and (orientation:landscape) {

      /* ----- wwd_logo in header  */
  #seite5 header,
  #seite6 header,
  #seite7 header,
  #seite8 header {
    height: 30vh;
    margin-bottom: 0;
  }

    main {
      width: 90vw;
    }

    #top-link img,
    #down-link img {
      width: 10vh;
      height: 10vh;
    }

    #inhalt section img {
      width: 50%;
      margin-top: 2rem;
      border: 0px solid lightgray;
      border-radius: 50%;
    }

    #webdesign {
      flex-basis: 100%;
    }

    .newwindow {
      height: 100vh;
      width: 100vw;
    }

    .big {
      position: relative;
      height: auto;
      width: 50vw;
      left: 0vw;
      top: 20vh;
      margin: 2em 0em 0em 0em;
    }
      
    .close {
      left: 90vw;
      top: 5vh;
    }
    footer {
      width: 90vw;
    }
  }