header {
  height: var(--head-h);
  /* TODO change url */
  background-image: url("https://physiotherapie-paschwitz.de/images/index/logo_invertiert_nobg.png"), linear-gradient(to bottom, var(--prim-col), var(--prim-col-d-20)); /*var(--prim-col), var(--prim-col-d-20)); */
  /* background-image: url("https://0.0.0.0:8001/images/index/paschwitz_logo.jpg"), linear-gradient(to bottom, var(--prim-col), var(--prim-col-d-20)); */
  background-repeat: no-repeat, no-repeat;
  background-size: var(--head-spine-size), auto;
  background-position: var(--head-spine-pos);
  padding-top: var(--head-pt);
  padding-bottom: var(--head-pb);
  font-size: var(--head-fs);
}
header .hl-wrapper {
  width: var(--hlwr-w);
}
header .hl-wrapper h1 {
  font-size: var(--head-h1-fs);
  font-weight: 500; 
}
header .hl-wrapper h1 span {
  transition: all 1s ease;
  opacity: 0;
  background: linear-gradient(to bottom, var(--loc-text-light), var(--loc-text-light-d-40));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translate(-30px, 0) rotateY(90deg);
  -webkit-text-stroke: 1px black;
}
header .hl-wrapper h1 span::selection {
  all: unset;
}
header .hl-wrapper h1:last-child {
  /* margin-top: var(--hl2-mt); */
}
header .contact-wrapper {
  padding: 0 var(--con-wr-px);
}
header .contact-wrapper a {
  width: var(--con-wr-a-w);
  padding: var(--con-wr-a-p);
  border: min(1.5vmin, 3px) solid var(--sec-col);
  border-radius: var(--con-wr-a-br);
  transition: opacity 1s ease;
  opacity: 0;
}
header .contact-wrapper i, header .contact-wrapper button {
  color: var(--sec-col);
  font-size: var(--con-wr-a-fs);
  cursor: pointer;
}
header .contact-wrapper button {
  background: none;
  border: none;
}
header .line-break {
  display: block;
  height: 20px;
  width: 2%;
}

main#index {
  background-image: linear-gradient(to bottom, var(--prim-col-d-20), var(--prim-col)); /*var(--prim-col-d-20), var(--prim-col)); */
  padding: 0 var(--glob-px) var(--main-pb);
}
main#index h1 {
  text-shadow: none;
}
main#index .text-holder-border {
  max-width: var(--thol-mw);
  margin-top: var(--thol-mt);
}
main#index .info-bubble {
  width: var(--bhol-w);
  margin-top: var(--bhol-mt);
  background-image: linear-gradient(to bottom, var(--green-col-l-5), var(--green-col), var(--green-col), var(--green-col-l-5));
  border-radius: 30px 30px 0 30px;
  box-shadow: 2px 2px 5px 1px black;
}
main#index .info-bubble i {
  text-align: center;
  font-size: var(--whats-fs);
  color: var(--green-col-d-10);
  line-height: 1.5;
}
main#index .info-bubble p {
  color: var(--green-col-d-20);
  line-height: 1.5;
}
main#index .img-holder {
  margin-top: var(--imhol-mt);
}
main#index .img-holder img {
  opacity: 0.5;
}

@media screen and (min-width: 0px) {
  body {
    --head-h: 100vh;
    --head-pb: 10vmax;
    --head-pt: 25vmax;
    --head-fs: 10vmin;
    --head-spine-size: 25%;
    --head-spine-pos: center 10%;
    --head-h1-fs: .8em;
    --hlwr-w: 100%;
    --hl2-mt: 5vmax;
    --con-wr-a-w: 30%;
    --con-wr-px: 5vmin;
    --con-wr-a-p: 3vmin 4vmin;
    --con-wr-a-fs: 3vmin;
    --con-wr-a-br: 50px;
    --main-pb: 8vmin;
    --thol-mt: 5vmin;
    --imhol-mt: 5vmin;
    --thol-mw: unset;
    --bhol-mt: 5vmin;
    --bhol-w: 80%;
    --whats-fs: 10vmin;
  }
}
@media screen and (min-width: 0px) and (min-aspect-ratio: 1) {
  body {
    --head-pb: 5%;
    --head-pt: 15vmin;
    --hl2-mt: 5vmin;
    --head-spine-size: 15%;
    --thol-mt: 10vmin;
    --imhol-mt: 10vmin;
    --bhol-mt: 10vmin;
    --bhol-w: 60%;
  }
}
@media screen and (min-width: 576px) {
  body {
    --con-wr-a-fs: min(3.5vmin, 22px);
  }
}
@media screen and (min-width: 576px) and (min-aspect-ratio: 1) {
  body {
    --con-wr-px: 20vmin;
  }
}
@media screen and (min-width: 768px) {
  body {
    --con-wr-a-fs: min(2.5vmin, 24px);
    --bhol-w: min(80%, 500px);
  }
}
@media screen and (min-width: 768px) and (min-aspect-ratio: 1) {
  body {
    --con-wr-px: 10vmin;
  }
}
@media screen and (min-width: 992px) {
  body {
    --con-wr-a-br: 100px;
    --con-wr-a-fs: min(3.2vmin, 26px);
    --thol-mt: 5vmin;
    --bhol-mt: 5vmin;
    --bhol-w: min(60%, 600px);
    --imhol-mt: 5vmin;
  }
}
@media screen and (min-width: 992px) and (min-aspect-ratio: 1) {
  body {
    --con-wr-a-w: min(25%, 250px);
    --con-wr-a-fs: min(3.5vmin, 28px);
  }
}
@media screen and (min-width: 992px) {
  body {
    --con-wr-a-fs: min(3.5vmin, 30px);
    --whats-fs: min(6vmin, 80px);
  }
  body .info-bubble p {
    font-size: 18px;
  }
}
@media screen and (min-width: 992px) and (min-aspect-ratio: 1) {
  body {
    --con-wr-a-w: min(25%, 250px);
    --con-wr-a-fs: min(3.5vmin, 32px);
  }
}

/*# sourceMappingURL=index.css.map */