@import "tangerine.css";
@import "josefin-sans.css";


*{
  box-sizing: border-box;
  padding: 0px;
}

.port {
  display: none;
}

:root {
  --darkterracotta: #CC4E5C;
  --paleterracotta: #F2B6A6;
}

html, body {
  height: 100%;
  width: 100svw;
  margin: 0px;
  padding: 0px;
  font-size: clamp(7px, 2vw, 24px);
  overflow-x: hidden;
  font-family: 'josefin_sanslight';
}

.groundzero {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'nav'
    'main';
}

.groundzero > nav {
  grid-area: nav;
}

.groundzero > main {
  grid-area: main;
}


/* ------------------------------ */

body {
  margin-bottom: 15vh;
}



/* navigation */

.dropdown {
  display: none;
}

.nav-item {
  display: none;
}


.menubar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  position: fixed;
  width: 100svw;
  height: auto;
  justify-self: center;
  z-index: 1;
  background-color: transparent;
  z-index: 99;
}

.menubar a {
  font-size: 100%;
  float: right;
}

.menubar > .menu-item {
  display: inline-block;
  font-weight: normal;
  font-size: clamp(16px, 4vmin, 24px);
  margin: 2vh 2vw;
  padding: 8px 12px;
  color: white;
  background-color: var(--darkterracotta);
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
}

/* Main */

.luebeck {
  width: 100svw;
  margin: auto;
  position: relative;
  height: 100vh;
  display: grid;
}



/* generic styling */

* h1 {
  font-size: 350%;
  font-family: 'tangerineregular', serif;
  font-weight: normal;
  color: var(--darkterracotta);
  text-align: center;
}

* h2 {
  font-size: 175%;
}

* h3 {
  font-size: 125%;
}

* p, ul {
  text-align: left;
  font-size: 100%;
}

.footer-txt, .footer-links a {
  font-size: 80%;
}

.hamburger {
  display: none;
}

* ul {
  padding-left: 1.5rem;
  list-style-position: outside;
}

* ul ul {
  padding-left: 2.5rem;
  list-style-position: outside;
}

.la {
  list-style-type: lower-alpha;
}

.link-list {
  line-height: 2.5;
}

a:link {
  color: inherit;
}

a:link {
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: white;
}

a:active {
  color: white;
}

.link-list {
  line-height: 2.5;
}

.text ul {
  padding-left: 2vw;
  color: black;
}

  table {
   border-collapse: collapse;"
}

  tr:nth-child(1), tr:nth-child(3), tr:nth-child(7), tr:nth-child(11) {
  border-bottom: solid 2px black;
}

a:link {
  color:inherit;
}

.tcard {
  text-align: left;
  color: black;
  background-color: var(--paleterracotta);
  border-radius: 3vh;
  padding: 1vh 1vw;
}

.tcard p {
  margin: auto;
}


.icard {
  padding: 1vh 1vw;
}

.icard img {
  border-radius: 3vh;
}


/* hl1 home */

.hl1 {
  grid-template-columns: 20svw 20svw 20svw 20svw 20svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  "img1          img1          txt1          txt1          txt1"
  ".             txt2          txt2          txt2          ."
  "img2          img2          txt3          img3          img3"
  "foot          foot          foot          foot          foot";

  top: 7svh;
}

.hl1 > footer {
  grid-area: foot;
  margin-top: 5vh;
}

.hl1 > .image1 {
  grid-area: img1;
  justify-self: right;
  position: relative;
}

.hl1 > .image1 img {
  display: block;
  max-width: 100%;
  height: 90svh;
  padding-bottom: 2svh;
  position: relative;
}  

.hl1 > .slogan {
  grid-area: txt1;
  position: relative;
  justify-self: center;
  align-self: center;
  text-align: center;
}

.hl1 > .image2 {
  grid-area: img2;
  justify-self: center;
  align-self: center;
  position: relative;
}

.hl1 > .image2 img {
  display: block;
  max-height: 70svh;
}

.hl1 > .text2 {
  grid-area: txt2;
  position: relative;
  margin-bottom: 2vh;
  margin-left: 2vw;
  margin-right: 2vw;
  justify-self: center;
  align-self: center;
}

.hl1 > .text3 {
  grid-area: txt3;
  align-self: center;
  position: relative;
  margin: 2vh 1vw;
}

.hl1 > .image3 {
  grid-area: img3;
  justify-self: center;
  align-self: center;
  position: relative;
}

.hl1 > .image3 img {
  display: block;
  max-height: 70svh;
  align-self: start;
  position: relative;
}

.slo1 {
  display: inline-block;
  animation-name: slide-in1;
  animation-duration: 7s;
}

.slo2 {
  display: inline-block;
  animation-name: slide-in2;
  animation-duration: 7s;
}

.slo3 {
  display: inline-block;
  animation-name: slide-in3;
  animation-duration: 7s;
}

@keyframes slide-in1 {
  0% {
    translate: 0 45vw;
    scale: 150% 1;
  }

  15%, 75% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in2 {
  0%, 25% {
    translate: 0 45vw;
    scale: 150% 1;
  }

  25%, 85% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in3 {
  0%, 40% {
    translate: 0 45vw;
    scale: 150% 1;
  }

  40%, 100% {
    translate: 0 0;
    scale: 100% 1;
  }
}

/* philosophie */

.hl2 {
  grid-template-columns: 2.5svw 20svw 20svw 15svw 20svw 20svw 2.5svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  ".      txt1      txt1          txt1         img1         img1   ."
  ".      .         .             .            img1         img1   ."
  ".      txt2      txt2          .            img1         img1   ."
  ".      img2      img2          img2         txt3         txt3   ."
  ".      img2      img2          img2         img3         img3   ."
  ".      txt4      txt4          txt4         img3         img3   ."
  "foot   foot      foot          foot         foot         foot   foot ";

  top: 7svh;
}

.hl2 > footer {
  grid-area: foot;
  margin-top: 5vh;
}

.hl2 > .slogan {
  grid-area: txt1;
  align-self: center;
  position: relative;
  margin: 15vh 2vw 0vh;
}

.hl2 > .text2 {
  grid-area: txt2;
  align-self: center;
  justify-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl2 > .text3 {
  grid-area: txt3;
  align-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl2 > .text4 {
  grid-area: txt4;
  align-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl2 > .image1 {
  grid-area: img1;
  justify-self: center;
  align-self: center;
  max-height: 90svh;
  position: relative;
}

.hl2 > .image1 img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  margin: 5vh 5vw 5vh;
  position: relative;
}

.hl2 > .image2 {
  grid-area: img2;
  justify-self: center;
  align-self: center;
  position: relative;
}

.hl2 > .image2 img {
  display: block;
  max-height: 90%;
  max-width: 100%;
  margin: 2vh 2vw 2vh;
  align-self: start;
  position: relative;
}

.hl2 > .image3 {
  grid-area: img3;
  justify-self: center;
  align-self: center;
  position: relative;
  top: 60px;
}

.hl2 > .image3 img {
  display: block;
  max-height: 90svh;
  max-width: 100%;
  margin: 2vh 2vw 20vh;
  align-self: start;
  position: relative;
}

.slo4 {
  display: inline-block;
  animation-name: slide-in4;
  animation-duration: 7s;
}

.slo5 {
  display: inline-block;
  animation-name: slide-in5;
  animation-duration: 7s;
}

@keyframes slide-in4 {
  0% {
    translate: 0 -45vw;
    scale: 150% 1;
  }

  15%, 75% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in5 {
  0% {
    translate: 0 45vw;
    scale: 150% 1;
  }

  45%, 100% {
    translate: 0 0;
    scale: 100% 1;
  }
}

/* hl3 location */

.hl3 {
  grid-template-columns: 2.5svw 20svw 25svw 5svw 25svw 20svw 2.5svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  ".      txt1       txt1       txt1          txt1          txt1   ."
  ".      img1       img1       img1          img1          img1   ."
  ".      .          txt2       txt2          txt2          .      ."
  ".      img2       img2       img2          txt3          txt3   ."
  ".      img2       img2       img2          img3          img3   ."
  ".      txt5       txt5       .             img3          img3   ."
  ".      img4       img4       img4          img3          img3   ."
  ".      img4       img4       img4          txt4          txt4   ."
  ".      .          img5       img5          img5          .      ."
  "foot   foot       foot       foot          foot          foot   foot";

  top: 10svh;
}

.hl3 > footer {
  grid-area: foot;
  margin-top: 5vh;
}

.slogan {
  grid-area: txt1;
  position: relative;
  margin: 0vh 2vw 0vh;
}

.hl3 > .text2 {
  grid-area: txt2;
  align-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl3 > .text3 {
  grid-area: txt3;
  align-self: center;
  position: relative;
  margin: 10vh 5vw 2vh;
}

.hl3 > .text4 {
  grid-area: txt4;
  align-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl3 > .text5 {
  grid-area: txt5;
  align-self: center;
  position: relative;
  margin: 2vh 2vw;
}

.hl3 > .image1 {
  grid-area: img1;
  justify-self: center;
  align-self: center;
  position: relative;
}

.hl3 > .image1 img {
  display: block;
  max-height: 90svh;
  width: 100%;
  margin: 2vh 2vw 20vh;
  align-self: start;
  position: relative;
}

.hl3 > .image2 {
  grid-area: img2;
  justify-self: start;
  align-self: center;
  position: relative;
  z-index: 2;
}

.hl3 > .image2 img {
  display: block;
  max-height: 90svh;
  max-width: 100%;
  margin: 2vh 0vw 2vh;
  align-self: start;
  position: relative;
}

.hl3 > .image3 {
  grid-area: img3;
  justify-self: start;
  align-self: center;
  position: relative;
}

.hl3 > .image3 img {
  display: block;
  max-height: 80svh;
  max-width: 100%;
  margin: 0vh 0vw 2vw 0vh;
  align-self: start;
  position: relative;
}

.hl3 > .image4 {
  grid-area: img4;
  justify-self: start;
  align-self: end;
  position: relative;
  margin: 20vh 0vw 2vh;
  z-index: -1;
}

.hl3 > .image4 img {
  display: block;
  max-height: 90svh;
  max-width: 100%;
  align-self: start;
  position: relative;
}

.hl3 > .image6 {
  grid-area: img6;
  justify-self: center;
  align-self: center;
  position: relative;
  top: 60px;
}

.hl3 > .image6 img {
  display: block;
  max-height: 50svh;
  max-width: 100%;
  margin: 2vh 2vw 20vh;
  align-self: start;
  position: relative;
}

.hl3 > .image7 {
  grid-area: img5;
  justify-self: center;
  align-self: center;
  position: relative;
  top: 60px;
}

.hl3 > .image7 img {
  display: block;
  max-height: 50svh;
  max-width: 100%;
  margin: 2vh 0vw 2vw 0vh;
  align-self: start;
  position: relative;
}

.hl3 > .image8 {
  grid-area: img8;
  justify-self: center;
  align-self: center;
  position: relative;
  top: 60px;
}

.hl3 > .image8 img {
  display: block;
  max-height: 50svh;
  max-width: 100%;
  margin: 2vh 2vw 20vh;
  align-self: start;
  position: relative;
}

.slo6 {
  display: inline-block;
  animation-name: slide-in6;
  animation-duration: 7s;
}

.slo7 {
  display: inline-block;
  animation-name: slide-in7;
  animation-duration: 7s;
}

.slo8 {
  display: inline-block;
  animation-name: slide-in8;
  animation-duration: 7s;
}

@keyframes slide-in6 {
  0% {
    translate: 100vw 0;
    scale: 150% 1;
  }

  15%, 75% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in7 {
  0%, 25% {
    translate: 100vw 0;
    scale: 150% 1;
  }

  25%, 85% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in8 {
  0%, 40% {
    translate: 100vw 0;
    scale: 150% 1;
  }

  40%, 100% {
    translate: 0 0;
    scale: 100% 1;
  }
}



/* hl4 dienstleister */

.hl4 {
  grid-template-columns: 5svw 30svw 30svw 30svw 5svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  ".       txts           txts           txts          ."
  ".       txti           txti           txti          ."
  ".       img1           img2           img3          ."
  ".       txt1           txt2           txt3          ."
  ".       img4           img5           img6          ."
  ".       txt4           txt5           txt6          ."
  ".       img7           img8           img9          ."
  ".       txt7           txt8           txt9          ."
  ".       img10          img10          img10         ."
  ".       txt10          txt10          txt10         ."
  "foot    foot           foot           foot          foot";

  top: 10svh;
}

.hl4 > footer {
  grid-area: foot;
  margin-top: 5vh;
}


.tcard.dl {
  width: 25vw;
}

.tcard.dl p {
  text-align: left;
}

.tcard.dl h2 {
  text-align: center;
}

.hl4 > .slogan {
  grid-area: txts;
  align-self: center;
  position: relative;
  margin: 0vh 0vw 0vh;
}

.hl4 > .intro-text {
  grid-area: txti;
  position: relative;
  justify-self: center;
  max-width: 40em;
  margin: 1vh 2vw 2vh;
}

.hl4 > .dekor-image {
  grid-area: img4;
  position: relative;
  justify-self: center;
}

.hl4 > .dekor-image img {
  position: relative;
}

.hl4 > .dekor-text {
  grid-area: txt4;
  position: relative;
  justify-self: center;
}

.hl4 > .foto-image {
  grid-area: img8;
  position: relative;
  justify-self: center;
}

.hl4 > .foto-image img {
  position: relative;
}

.hl4 > .foto-text {
  grid-area: txt8;
  position: relative;
  justify-self: center;
}

.hl4 > .einladungen-image {
  grid-area: img1;
  position: relative;
  justify-self: center;
}

.hl4 > .einladungen-image img {
  position: relative;
}

.hl4 > .einladungen-text {
  grid-area: txt1;
  position: relative;
  justify-self: center;
}

.hl4 > .catering-image {
  grid-area: img7;
  position: relative;
  justify-self: center;
}

.hl4 > .catering-image img {
  position: relative;
}

.hl4 > .catering-text {
  grid-area: txt7;
  position: relative;
  justify-self: center;
}

.hl4 > .unterhaltung-image {
  grid-area: img9;
  position: relative;
  justify-self: center;
}

.hl4 > .unterhaltung-image img {
  position: relative;
}

.hl4 > .unterhaltung-text {
  grid-area: txt9;
  position: relative;
  justify-self: center;
}

.hl4 > .floristik-image {
  grid-area: img2;
  position: relative;
  justify-self: center;
}

.hl4 > .floristik-image img {
  position: relative;
}

.hl4 > .floristik-text {
  grid-area: txt2;
  position: relative;
  justify-self: center;
}

.hl4 > .transport-image {
  grid-area: img5;
  position: relative;
  justify-self: center;
}

.hl4 > .transport-image img {
  position: relative;
}

.hl4 > .transport-text {
  grid-area: txt5;
  position: relative;
  justify-self: center;
}

.hl4 > .styling-image {
  grid-area: img3;
  position: relative;
  justify-self: center;
}

.hl4 > .styling-image img {
  position: relative;
}

.hl4 > .styling-text {
  grid-area: txt3;
  position: relative;
  justify-self: center;
}

.hl4 > .traurede-image {
  grid-area: img6;
  position: relative;
  justify-self: center;
}

.hl4 > .traurede-image img {
  position: relative;
}

.hl4 > .traurede-text {
  grid-area: txt6;
  justify-self: end;
  position: relative;
  justify-self: center;
}

.hl4 > .datum-image {
  grid-area: img10;
  position: relative;
  justify-self: center;
  margin-top: 5vh;
}

.hl4 > .datum-image img {
  position: relative;
}

.hl4 > .datum-text {
  grid-area: txt10;
  justify-self: center;
  align-self: center;
  position: relative;
}

.slo9 {
  display: inline-block;
  animation-name: slide-in9;
  animation-duration: 4s;
}

.slo10 {
  display: inline-block;
  animation-name: slide-in10;
  animation-duration: 4s;
}

@keyframes slide-in9 {
  0% {
    translate: 100vw 0;
    scale: 150% 1;
  }

  15%, 75% {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes slide-in10 {
  0% {
    translate: -100vw 0;
    scale: 150% 1;
  }

  45%, 100% {
    translate: 0 0;
    scale: 100% 1;
  }
}

/* hl5 kontakt */

.hl5 {
  grid-template-columns: 2.5svw 1fr 1fr 2.5svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  ".      txt1          txt1              ."
  ".      txt2          txt2              ."
  ".      img1          img1              ."
  "foot   foot          foot              foot";

}

.bdh {
  text-align: center;
}

.hl5 > footer {
  grid-area: foot;
  margin-top: 5vh;
}

.hl5 > .image1 {
  grid-area: img1;
  display: block;
  justify-self: center;
  position: relative;
  max-width: 45em;
}

.hl5 > .image1 img {

  max-width: 512px;
  height: auto;
  padding-bottom: 2svh;
  position: relative;
}

.hl5 > .text1 {
  grid-area: txt1;
  position: relative;
  justify-self: center;
  align-self: center;
}

.hl5 > .text1 h1 {
  text-align: center;
  font-size: 800%;
}

.hl5 > .text2 {
  grid-area: txt2;
  position: relative;
  padding-bottom: 2vh;
  margin-bottom: 2vh;
  margin-left: 2vw;
  margin-right: 2vw;
  justify-self: center;
  align-self: center;
  max-width: 40em;
}

.slo11 {
  display: block;
  animation-name: slide-in11;
  animation-duration: 7s;
}

@keyframes slide-in11 {
  0% {
    translate: 100vw 0;
    scale: 150% 1;
	letter-spacing: 5vw;
  }

  15%, 75% {
    translate: 0 0;
    scale: 100% 1;
	letter-spacing: normal;
  }
}

/* hl6 rechtliches */

.hl6 {
  grid-template-columns: 2.5svw 1fr 1fr 2.5svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  ".      txt1          txt1              ."
  ".      txt2          txt2              ."
  ".      img1          img1              ."
  ".      txt3          txt3              ."
  "foot   foot          foot              foot";

  top: 10vh;
}

.hl6 > footer {
  grid-area: foot;
  margin-top: 5vh;
}

.hl6 > .text1 {
  grid-area: txt1;
  position: relative;
  justify-self: center;
  align-self: center;
}

.hl6 > .text1 h1 {
  text-align: center;
  font-family: 'josefin_sanslight';
  color: black;
  font-size: 350%;
}

.hl6 > .image1 {
  grid-area: img1;
  justify-self: center;
  position: relative;
}

.hl6 > .image1 img {
  display: block;
  max-width: 512px;
  height: auto;
  padding-bottom: 2svh;
  position: relative;
}

.hl6 > .text2 {
  grid-area: txt2;
  position: relative;
  justify-self: center;
}

.hl6 > .text3 {
  grid-area: txt3;
  position: relative;
  padding-bottom: 20vh;
  margin-bottom: 2vh;
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  justify-self: center;
  align-self: center;
}

.hl6 > .text3 h2, p {
  text-align: left;
}


/* footer hlf */

.hlf {
  grid-template-columns: 50svw 50svw;
  grid-template-rows: auto(repeat);
  grid-template-areas:
  "footer-txt     footer-links";
  top: 5vh;
}

.myfoot {
  display: grid;
  left: 0;
  bottom: 0;
  width: 100vw;
  color: white;
  background-color: var(--darkterracotta);
  text-align: center;
  padding-top: 0vh;
}

.footer-txt {
  grid-area: footer-txt;
  justify-self: end;
  align-self: center;
  padding-top: 1vh;
}

.footer-links, .footer-txt p {
  color: white;
  font-weight: normal;
  text-align: center;
}

.footer-links {
  grid-area: footer-links;
  justify-self: start;
  align-self: center;
  text-align: center;
  padding-bottom: 1vh;
  padding-left: 5vw;
}

.footer-links a {
  padding-left: 1vw;
  padding-right: 1vw;
  text-decoration: none;
}