.elementor-12078 .elementor-element.elementor-element-1dd78b30{--display:flex;--min-height:15vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-133px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;--z-index:99999;}.elementor-12078 .elementor-element.elementor-element-4a00f543{--display:flex;--z-index:99999999999999;}.elementor-12078 .elementor-element.elementor-element-61ed3bd3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12078 .elementor-element.elementor-element-61ed3bd3{z-index:9999;text-align:left;}.elementor-12078 .elementor-element.elementor-element-61ed3bd3 img{width:63%;max-width:63%;height:79%;}.elementor-12078 .elementor-element.elementor-element-3600126{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:55px;--padding-right:0px;}.elementor-12078 .elementor-element.elementor-element-64bd9e9e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 72px;}.elementor-12078 .elementor-element.elementor-element-6ca61b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12078 .elementor-element.elementor-element-e314567{--display:flex;}.elementor-12078 .elementor-element.elementor-element-d5f4dfb{--display:flex;}.elementor-12078 .elementor-element.elementor-element-872eb42{--display:flex;}.elementor-12078 .elementor-element.elementor-element-daa3061{--display:flex;}.elementor-12078 .elementor-element.elementor-element-fb7bee9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-12078 .elementor-element.elementor-element-61ed3bd3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12078 .elementor-element.elementor-element-6ca61b7{--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-34px;--margin-left:0px;--margin-right:0px;--padding-top:2%;--padding-bottom:2%;--padding-left:5%;--padding-right:2%;--z-index:9999;}.elementor-12078 .elementor-element.elementor-element-e314567{--width:15%;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-12078 .elementor-element.elementor-element-5d57d52 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0% 0% 0% 0%;}.elementor-12078 .elementor-element.elementor-element-5d57d52.elementor-element{--align-self:flex-end;}.elementor-12078 .elementor-element.elementor-element-5d57d52{z-index:99999;}.elementor-12078 .elementor-element.elementor-element-d5f4dfb{--width:30%;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-12078 .elementor-element.elementor-element-d5f4dfb.e-con{--align-self:center;}.elementor-12078 .elementor-element.elementor-element-872eb42{--width:49%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12078 .elementor-element.elementor-element-b2b268c > .elementor-widget-container{margin:0px 0px 0px -18px;padding:0px 0px 0px 0px;}.elementor-12078 .elementor-element.elementor-element-b2b268c.elementor-element{--align-self:flex-start;}.elementor-12078 .elementor-element.elementor-element-b2b268c{z-index:10;text-align:left;}.elementor-12078 .elementor-element.elementor-element-b2b268c img{width:77%;max-width:77%;}}@media(min-width:768px){.elementor-12078 .elementor-element.elementor-element-1dd78b30{--content-width:1446px;}.elementor-12078 .elementor-element.elementor-element-4a00f543{--width:25%;}.elementor-12078 .elementor-element.elementor-element-3600126{--width:80%;}}/* Start custom CSS for html, class: .elementor-element-4292905a *//* ================= PRZYCISK ================= */
.bla3 {
  cursor: pointer;
}

/* ================= ZASŁONKA ================= */
.blik {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1500;
}
.blik.active {
  opacity: 1;
  pointer-events: auto;
}

/* ================= OVERLAY / MENU ================= */
.bla {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;

  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform: translateX(100%);
  opacity: 0;

  transition:
    transform 0.6s cubic-bezier(0.16,1,0.3,1),
    opacity 0.5s ease;

  z-index: 2000;
  overflow: hidden;

  box-shadow: -40px 0 80px rgba(0,0,0,0.45);
}

.bla.active {
  transform: translateX(0);
  opacity: 1;
}

/* ================= MENU ================= */
.bla-menu {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: clamp(32px, 8vw, 120px);
  position: relative;
  z-index: 5;
}

/* ================= LISTA ================= */
.bla-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ================= ELEMENT MENU ================= */
.bla-item {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity 0.7s cubic-bezier(0.16,1,0.3,1),
    transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.bla.active .bla-item {
  opacity: 1;
  transform: translateX(0);
}

/* STAGGER – 9 ELEMENTÓW */
.bla.active .bla-item:nth-child(1) { transition-delay: 0.16s; }
.bla.active .bla-item:nth-child(2) { transition-delay: 0.26s; }
.bla.active .bla-item:nth-child(3) { transition-delay: 0.36s; }
.bla.active .bla-item:nth-child(4) { transition-delay: 0.46s; }
.bla.active .bla-item:nth-child(5) { transition-delay: 0.56s; }
.bla.active .bla-item:nth-child(6) { transition-delay: 0.66s; }
.bla.active .bla-item:nth-child(7) { transition-delay: 0.76s; }
.bla.active .bla-item:nth-child(8) { transition-delay: 0.86s; }
.bla.active .bla-item:nth-child(9) { transition-delay: 0.96s; }

/* ================= LINKI ================= */
.bla-item a {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 200 !important;
  letter-spacing: -0.035em;
  line-height: 1.15;

  color: black !important;
  text-decoration: none;
  display: inline-block;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* ================= HOVER ================= */
.bla-item a:hover {
  opacity: 0.65;
  transform: translateX(6px);
}

/* ================= CLOSE ================= */
.close-btn {
  cursor: pointer;
 
  z-index: 10;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-64bd9e9e *//* ================= MENU ================= */
.main-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  background: transparent;
  z-index: 3000;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ================= LINKI ================= */
.menu-left a {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;       
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  text-decoration: none;
  padding-bottom: 4px;

  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s forwards;
}

/* Opóźnienia animacji dla kolejnych elementów */
.menu-left li:nth-child(1) a { animation-delay: 0.1s; }
.menu-left li:nth-child(2) a { animation-delay: 0.2s; }
.menu-left li:nth-child(3) a { animation-delay: 0.3s; }
.menu-left li:nth-child(4) a { animation-delay: 0.4s; }
.menu-left li:nth-child(5) a { animation-delay: 0.5s; }
.menu-left li:nth-child(6) a { animation-delay: 0.6s; } /* Termin */
.menu-left li:nth-child(7) a { animation-delay: 0.7s; } /* social */

/* Hover i active dla linków */
.menu-left a:hover,
.menu-left a:active {
  color: #f8f7f1;
}

/* ================= TERMIN ================= */
.menu-termin {
  position: relative;
  text-decoration: none;
}

.menu-termin::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;       /* cienka kreska */
  background-color: #fff;
  transition: height 0.25s ease, opacity 0.25s ease;
  opacity: 1;         /* zawsze widoczna */
}

.menu-termin:hover::after {
  height: 2px;        /* pogrubienie przy hover */
  opacity: 1;
}

/* ================= SOCIAL MEDIA ================= */
.menu-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.menu-social a {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s forwards;
}

.menu-social a:nth-child(1) { animation-delay: 0.7s; }
.menu-social a:nth-child(2) { animation-delay: 0.8s; }
.menu-social a:nth-child(3) { animation-delay: 0.9s; }

/* ================= SVG ================= */
.social-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.social-icon:hover svg {
  transform: translateY(-1px);
  opacity: 1;
}

/* ================= ANIMACJA POJAWIANIA ================= */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-dc38631 *//* ================= GTranslate – linki językowe ================= */

/* Podstawowy wygląd linków */
a.glink.gt-current-lang,
a.glink.nturl.notranslate {
    color: #fff !important;             /* biały tekst */
    background: transparent !important;  /* brak tła */
    border: none !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 6px;                   /* minimalny padding */
    position: relative;
    transition: all 0.3s ease;
}

/* Odległość między linkami i miejsce dla kreski */
a.glink.gt-current-lang + a.glink.gt-current-lang,
a.glink.nturl.notranslate + a.glink.nturl.notranslate,
a.glink.nturl.notranslate + a.glink.gt-current-lang,
a.glink.gt-current-lang + a.glink.nturl.notranslate {
    margin-left: 4px;                   /* bardzo blisko siebie */
    padding-left: 12px;                  /* odstęp od kreski do tekstu */
}

/* Pionowa kreska między linkami – krótsza i grubsza */
a.glink.gt-current-lang + a.glink.gt-current-lang::before,
a.glink.nturl.notranslate + a.glink.nturl.notranslate::before,
a.glink.nturl.notranslate + a.glink.gt-current-lang::before,
a.glink.gt-current-lang + a.glink.nturl.notranslate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;               /* start 25% od góry linku */
    height: 50%;             /* tylko połowa wysokości linku */
    width: 2px;              /* grubsza kreska */
    background-color: rgba(255, 255, 255, 0.7); /* lekko jaśniejsza dla kontrastu */
}

/* Hover – lekki efekt podświetlenia */
a.glink.gt-current-lang:hover,
a.glink.nturl.notranslate:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #000 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1dd78b30 */<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">

<style>
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* ================= MOCNIEJSZE CIEMNIENIE GÓRY (SZKŁO) ================= */

.plus {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  transition: box-shadow 0.3s ease;
}

.plus::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      140% 90% at 50% 0%,
      rgba(0, 0, 0, 0.75) 0%,   /* 🔥 bardzo ciemna góra */
      rgba(0, 0, 0, 0.60) 18%,
      rgba(0, 0, 0, 0.42) 38%,
      rgba(0, 0, 0, 0.22) 58%,
      rgba(0, 0, 0, 0.10) 72%,
      rgba(0, 0, 0, 0) 88%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.30) 22%,
      rgba(0, 0, 0, 0.15) 48%,
      rgba(0, 0, 0, 0.05) 65%,
      rgba(0, 0, 0, 0) 100%
    );
}

.plus.scrolled {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

/* ================= FOOTER ================= */

.footer {
  padding: 40px 50px 60px;
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1.2fr 1fr;
  column-gap: 40px;
  row-gap: 30px;
  position: relative;
}

.footer-column p,
.footer-column a {
  margin: 4px 0;
  font-size: 13px;
  color: #1a1a1a;
  text-decoration: none;
}

.footer-column a {
  display: block;
  text-decoration: underline;
}

/* ================= SCROLL TOP ================= */

.scroll-top {
  position: absolute;
  right: 50px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #1a1a1a;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

.scroll-top::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #222;
  border-left: 3px solid #222;
  transform: rotate(45deg);
  margin-top: 2px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.45);
}

.footer-bottom {
  position: absolute;
  bottom: 10px;
  right: 50px;
  font-size: 12px;
  opacity: 0.6;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
  .footer {
    padding: 40px 15px 30px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "right1 right2"
      "left left";
    column-gap: 15px;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .col-left { grid-area: left; }
  .col-right-1 { grid-area: right1; }
  .col-right-2 { grid-area: right2; }

  .footer-column,
  .footer-column p,
  .footer-column a {
    text-align: left;
  }

  .footer-column {
    min-width: 0;
    word-break: break-word;
  }

  .scroll-top {
    right: 15px;
    bottom: 50px;
    font-size: 14px;
  }

  .footer-bottom {
    position: static;
    text-align: center;
    margin-top: 25px;
  }
}
</style>
</head>

<body>

<footer class="footer plus">

  <div class="footer-column col-left">
    <p>Joa Medical Beauty in Zürich steht für individuelle Hautpflege, ganzheitlich und professionell.</p>
    <a href="#">Mehr erfahren</a>
  </div>

  <div class="footer-column col-right-1">
    <p>Follow us</p>
    <a href="#">Instagram</a>
    <a href="#">Facebook</a>
  </div>

  <div class="footer-column col-right-2">
    <p>Rechtliches</p>
    <a href="#">Impressum</a>
    <a href="#">Datenschutzerklärung</a>
    <a href="#">Allgemeine Geschäftsbedingungen</a>
  </div>

  <div class="footer-column">
    <p>Adresse</p>
    <p>Switzerland AG</p>
    <p>Hottingerstrasse 35</p>
    <p>8032 Zürich</p>
  </div>/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a017f7f *//* ================= GTranslate – linki językowe ================= */

/* Podstawowy wygląd linków */
a.glink.gt-current-lang,
a.glink.nturl.notranslate {
    color: #fff !important;             /* biały tekst */
    background: transparent !important;  /* brak tła */
    border: none !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 6px;                   /* minimalny padding */
    position: relative;
    transition: all 0.3s ease;
}

/* Odległość między linkami i miejsce dla kreski */
a.glink.gt-current-lang + a.glink.gt-current-lang,
a.glink.nturl.notranslate + a.glink.nturl.notranslate,
a.glink.nturl.notranslate + a.glink.gt-current-lang,
a.glink.gt-current-lang + a.glink.nturl.notranslate {
    margin-left: 4px;                   /* bardzo blisko siebie */
    padding-left: 12px;                  /* odstęp od kreski do tekstu */
}

/* Pionowa kreska między linkami – krótsza i grubsza */
a.glink.gt-current-lang + a.glink.gt-current-lang::before,
a.glink.nturl.notranslate + a.glink.nturl.notranslate::before,
a.glink.nturl.notranslate + a.glink.gt-current-lang::before,
a.glink.gt-current-lang + a.glink.nturl.notranslate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;               /* start 25% od góry linku */
    height: 50%;             /* tylko połowa wysokości linku */
    width: 2px;              /* grubsza kreska */
    background-color: rgba(255, 255, 255, 0.7); /* lekko jaśniejsza dla kontrastu */
}

/* Hover – lekki efekt podświetlenia */
a.glink.gt-current-lang:hover,
a.glink.nturl.notranslate:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #000 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ca61b7 */<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">

<style>
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* ================= EFEKT SZKŁA NA GÓRZE ================= */
.papa {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  transition: box-shadow 0.3s ease;
}

.papa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      140% 100% at 50% 0%,
      rgba(0, 0, 0, 0.45) 0%,  /* trochę jaśniejsza góra */
      rgba(0, 0, 0, 0.35) 25%,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(0, 0, 0, 0.12) 70%,
      rgba(0, 0, 0, 0) 90%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.08) 60%,
      rgba(0, 0, 0, 0) 100%
    );
}

.papa.scrolled {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
}

/* ================= STOPKA ================= */

.foo/* End custom CSS */