/**
 * Piadal Startseite / Markenwelt Intro
 * Separate child-theme stylesheet for the new full-screen Elementor start page.
 * Version: 1.0.23
 */

:root {
  --piadal-start-text: #1f2020;
  --piadal-start-muted: #2f3030;
  --piadal-start-soft: rgba(255, 255, 255, 0.36);
  --piadal-start-border: rgba(31, 32, 32, 0.18);
}

.piadal-start-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  color: var(--piadal-start-text);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}

.piadal-start-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 250, 244, 0) 0%,
    rgba(255, 250, 244, 0.08) 34%,
    rgba(255, 250, 244, 0.34) 56%,
    rgba(255, 250, 244, 0.18) 100%
  );
}

.piadal-start-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 46%) minmax(420px, 1fr);
  align-items: center;
  width: min(100%, 1920px);
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(42px, 4.4vw, 84px) clamp(28px, 5vw, 96px);
}

.piadal-start-hero__inner > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(360px, 46%) minmax(420px, 1fr);
  align-items: center;
  width: 100%;
  max-width: none !important;
  min-height: inherit;
  margin: 0 auto;
  padding: 0 !important;
}

.piadal-start-hero__content {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 720px);
  max-width: 45vw;
  margin: 0;
  padding: 0;
  text-align: center;
  transform: translateY(-2.5vh);
}

.piadal-start-hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0 0 clamp(22px, 2vw, 34px) 0 !important;
  padding: 0 !important;
  text-align: center;
}

.piadal-start-hero__logo {
  margin: 0 0 clamp(8px, 0.7vw, 14px) 0 !important;
  padding: 0 !important;
  text-align: center;
}

.piadal-start-hero__logo .elementor-widget-container,
.piadal-start-hero__brand-name .elementor-widget-container,
.piadal-start-hero__headline .elementor-widget-container,
.piadal-start-hero__text .elementor-widget-container,
.piadal-start-hero__cta .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.piadal-start-hero__logo img,
.piadal-start-hero__logo svg {
  display: block;
  width: clamp(58px, 4.6vw, 92px);
  max-width: clamp(58px, 4.6vw, 92px) !important;
  height: auto;
  margin-inline: auto !important;
}

.piadal-start-hero__brand-name,
.piadal-start-hero__brand-name .elementor-heading-title,
.piadal-start-hero__brand-name h1,
.piadal-start-hero__brand-name h2,
.piadal-start-hero__brand-name h3,
.piadal-start-hero__brand-name p {
  margin: 0 !important;
  color: currentColor;
  font-size: clamp(48px, 4.4vw, 84px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.piadal-start-hero__headline,
.piadal-start-hero__headline .elementor-heading-title,
.piadal-start-hero__headline h1,
.piadal-start-hero__headline h2,
.piadal-start-hero__headline h3,
.piadal-start-hero__headline p {
  margin: 0 0 clamp(28px, 2.5vw, 46px) 0 !important;
  color: currentColor;
  font-size: clamp(27px, 2.15vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-align: center;
}

.piadal-start-hero__text,
.piadal-start-hero__text p,
.piadal-start-hero__text .elementor-widget-container {
  margin: 0 !important;
  color: currentColor;
  font-size: clamp(17px, 1.25vw, 25px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: 0.006em;
  text-align: center;
}

.piadal-start-hero__text p + p {
  margin-top: clamp(22px, 2vw, 38px) !important;
}

.piadal-start-hero__cta {
  margin-top: clamp(30px, 2.9vw, 56px) !important;
  text-align: center;
}

.piadal-start-hero__cta .elementor-button-wrapper {
  text-align: center;
}

.piadal-start-hero__cta .elementor-button,
.piadal-start-hero__cta a.elementor-button,
.piadal-start-hero__cta .elementor-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-width: 0;
  min-height: auto;
  padding: 0 0 9px 0;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  color: currentColor;
  background: transparent;
  box-shadow: none;
  font-size: clamp(22px, 1.65vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
}

.piadal-start-hero__cta .elementor-button:hover,
.piadal-start-hero__cta a.elementor-button:hover,
.piadal-start-hero__cta .elementor-button-link:hover,
.piadal-start-hero__cta .elementor-button:focus-visible,
.piadal-start-hero__cta a.elementor-button:focus-visible,
.piadal-start-hero__cta .elementor-button-link:focus-visible {
  color: currentColor;
  background: transparent;
  border-bottom-color: currentColor;
  opacity: 0.72;
}

.piadal-start-hero--content-glass .piadal-start-hero__content {
  padding: clamp(24px, 2.4vw, 44px);
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: clamp(18px, 1.2vw, 26px);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (max-width: 1279px) {
  .piadal-start-hero__inner,
  .piadal-start-hero__inner > .e-con-inner {
    grid-template-columns: minmax(300px, 40%) minmax(360px, 1fr);
  }

  .piadal-start-hero__content {
    max-width: 52vw;
  }
}

@media (max-width: 1024px) {
  .piadal-start-hero {
    background-position: center bottom;
  }

  .piadal-start-hero::before {
    background: linear-gradient(
      180deg,
      rgba(255, 250, 244, 0.42) 0%,
      rgba(255, 250, 244, 0.24) 44%,
      rgba(255, 250, 244, 0.04) 100%
    );
  }

  .piadal-start-hero__inner,
  .piadal-start-hero__inner > .e-con-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }

  .piadal-start-hero__inner {
    padding: clamp(34px, 7vw, 72px) clamp(20px, 5vw, 42px) clamp(36px, 8vw, 70px);
  }

  .piadal-start-hero__content {
    width: min(100%, 620px);
    max-width: 100%;
    margin: 0 auto;
    transform: none;
  }
}

@media (max-width: 767px) {
  .piadal-start-hero {
    min-height: 100vh;
    min-height: 100svh;
    background-size: cover;
    background-position: center bottom;
  }

  .piadal-start-hero::before {
    background: linear-gradient(
      180deg,
      rgba(255, 250, 244, 0.72) 0%,
      rgba(255, 250, 244, 0.44) 38%,
      rgba(255, 250, 244, 0.10) 72%,
      rgba(255, 250, 244, 0) 100%
    );
  }

  .piadal-start-hero__inner {
    align-items: flex-start;
    padding: clamp(28px, 7vh, 72px) 22px 36px;
  }

  .piadal-start-hero__content {
    width: min(100%, 390px);
  }

  .piadal-start-hero__brand {
    margin-bottom: clamp(18px, 4.8vh, 36px) !important;
  }

  .piadal-start-hero__logo {
    margin-bottom: 9px !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(50px, 13vw, 72px);
    max-width: clamp(50px, 13vw, 72px) !important;
  }

  .piadal-start-hero__brand-name,
  .piadal-start-hero__brand-name .elementor-heading-title,
  .piadal-start-hero__brand-name h1,
  .piadal-start-hero__brand-name h2,
  .piadal-start-hero__brand-name h3,
  .piadal-start-hero__brand-name p {
    font-size: clamp(39px, 11vw, 58px);
    letter-spacing: 0.17em;
  }

  .piadal-start-hero__headline,
  .piadal-start-hero__headline .elementor-heading-title,
  .piadal-start-hero__headline h1,
  .piadal-start-hero__headline h2,
  .piadal-start-hero__headline h3,
  .piadal-start-hero__headline p {
    margin-bottom: clamp(22px, 5vh, 34px) !important;
    font-size: clamp(24px, 6.6vw, 34px);
    line-height: 1.18;
  }

  .piadal-start-hero__text,
  .piadal-start-hero__text p,
  .piadal-start-hero__text .elementor-widget-container {
    font-size: clamp(15px, 4.15vw, 19px);
    line-height: 1.45;
  }

  .piadal-start-hero__text p + p {
    margin-top: clamp(18px, 4.6vh, 30px) !important;
  }

  .piadal-start-hero__cta {
    margin-top: clamp(24px, 6vh, 42px) !important;
  }

  .piadal-start-hero__cta .elementor-button,
  .piadal-start-hero__cta a.elementor-button,
  .piadal-start-hero__cta .elementor-button-link {
    padding-bottom: 7px;
    font-size: clamp(20px, 5.7vw, 27px);
  }
}

@media (max-width: 390px) {
  .piadal-start-hero__inner {
    padding-inline: 18px;
  }

  .piadal-start-hero__text,
  .piadal-start-hero__text p,
  .piadal-start-hero__text .elementor-widget-container {
    font-size: 14px;
  }
}


/* Version 1.0.20: desktop alignment refinement for the start hero.
   Mobile remains unchanged. */
@media (min-width: 1025px) {
  .piadal-start-hero {
    min-height: 100vh;
    min-height: 100svh;
    background-position: left center;
  }

  .piadal-start-hero__inner,
  .piadal-start-hero__inner > .e-con-inner {
    grid-template-columns: minmax(520px, 47vw) minmax(620px, 1fr) !important;
    align-items: center;
  }

  .piadal-start-hero__content {
    grid-column: 2;
    justify-self: start;
    width: min(46vw, 880px);
    max-width: 880px;
    transform: translate(clamp(18px, 2.4vw, 54px), -1.2vh);
  }

  .piadal-start-hero__brand {
    margin-bottom: clamp(16px, 1.35vw, 26px) !important;
  }

  .piadal-start-hero__logo {
    margin-bottom: clamp(6px, 0.45vw, 10px) !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(54px, 3.9vw, 78px) !important;
    max-width: clamp(54px, 3.9vw, 78px) !important;
  }

  .piadal-start-hero__brand-name,
  .piadal-start-hero__brand-name .elementor-heading-title,
  .piadal-start-hero__brand-name h1,
  .piadal-start-hero__brand-name h2,
  .piadal-start-hero__brand-name h3,
  .piadal-start-hero__brand-name p {
    font-size: clamp(52px, 4vw, 76px) !important;
    line-height: 0.96 !important;
  }

  .piadal-start-hero__headline,
  .piadal-start-hero__headline .elementor-heading-title,
  .piadal-start-hero__headline h1,
  .piadal-start-hero__headline h2,
  .piadal-start-hero__headline h3,
  .piadal-start-hero__headline p {
    margin-bottom: clamp(24px, 2vw, 38px) !important;
    font-size: clamp(30px, 2vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  .piadal-start-hero__text,
  .piadal-start-hero__text p,
  .piadal-start-hero__text .elementor-widget-container {
    width: 100%;
    max-width: 860px;
    font-size: clamp(18px, 1.12vw, 22px) !important;
    line-height: 1.44 !important;
    text-align: center !important;
  }

  .piadal-start-hero__text p + p {
    margin-top: clamp(18px, 1.55vw, 30px) !important;
  }

  .piadal-start-hero__cta {
    margin-top: clamp(26px, 2.25vw, 44px) !important;
  }

  .piadal-start-hero__cta .elementor-button,
  .piadal-start-hero__cta a.elementor-button,
  .piadal-start-hero__cta .elementor-button-link {
    font-size: clamp(22px, 1.5vw, 29px) !important;
    padding-bottom: 8px;
  }
}

@media (min-width: 1600px) {
  .piadal-start-hero__inner,
  .piadal-start-hero__inner > .e-con-inner {
    grid-template-columns: minmax(660px, 48vw) minmax(720px, 1fr) !important;
  }

  .piadal-start-hero__content {
    width: min(45vw, 900px);
    max-width: 900px;
    transform: translate(clamp(34px, 2.8vw, 70px), -1.2vh);
  }
}

@media (min-width: 1025px) and (max-height: 860px) {
  .piadal-start-hero__content {
    transform: translate(clamp(18px, 2.4vw, 54px), 0);
  }

  .piadal-start-hero__brand {
    margin-bottom: clamp(12px, 1vw, 20px) !important;
  }

  .piadal-start-hero__headline,
  .piadal-start-hero__headline .elementor-heading-title,
  .piadal-start-hero__headline h1,
  .piadal-start-hero__headline h2,
  .piadal-start-hero__headline h3,
  .piadal-start-hero__headline p {
    margin-bottom: clamp(18px, 1.5vw, 30px) !important;
  }

  .piadal-start-hero__text p + p {
    margin-top: clamp(14px, 1.25vw, 24px) !important;
  }

  .piadal-start-hero__cta {
    margin-top: clamp(20px, 1.7vw, 34px) !important;
  }
}


/* Version 1.0.21: start hero uses logo as complete brand mark; brand-name element is no longer required. */
.piadal-start-hero__brand-name {
  display: none !important;
}

@media (min-width: 1025px) {
  .piadal-start-hero__brand {
    margin-bottom: clamp(22px, 1.75vw, 34px) !important;
  }

  .piadal-start-hero__logo {
    margin-bottom: 0 !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(250px, 19vw, 390px) !important;
    max-width: clamp(250px, 19vw, 390px) !important;
    height: auto !important;
  }
}

@media (min-width: 1600px) {
  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(300px, 20vw, 430px) !important;
    max-width: clamp(300px, 20vw, 430px) !important;
  }
}

@media (max-width: 1024px) {
  .piadal-start-hero__logo {
    margin-bottom: 0 !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(210px, 46vw, 330px) !important;
    max-width: clamp(210px, 46vw, 330px) !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(180px, 58vw, 260px) !important;
    max-width: clamp(180px, 58vw, 260px) !important;
  }
}


/* Version 1.0.22: reduce complete start-hero logo slightly so the hero fits into one viewport. */
@media (min-width: 1025px) {
  .piadal-start-hero__brand {
    margin-bottom: clamp(18px, 1.45vw, 28px) !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(220px, 16vw, 330px) !important;
    max-width: clamp(220px, 16vw, 330px) !important;
    height: auto !important;
  }
}

@media (min-width: 1600px) {
  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(250px, 16.5vw, 360px) !important;
    max-width: clamp(250px, 16.5vw, 360px) !important;
  }
}

@media (max-width: 1024px) {
  .piadal-start-hero__brand {
    margin-bottom: clamp(16px, 3.8vh, 30px) !important;
  }

  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(185px, 40vw, 290px) !important;
    max-width: clamp(185px, 40vw, 290px) !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .piadal-start-hero__logo img,
  .piadal-start-hero__logo svg {
    width: clamp(160px, 50vw, 225px) !important;
    max-width: clamp(160px, 50vw, 225px) !important;
  }
}


/* Version 1.0.23: make start hero CTA visually identical to piadal-brand-banner__button. */
.piadal-start-hero__cta .elementor-button-wrapper {
  text-align: center;
}

.piadal-start-hero__cta .elementor-button,
.piadal-start-hero__cta a.elementor-button,
.piadal-start-hero__cta .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: clamp(260px, 18.5vw, 370px) !important;
  min-height: clamp(50px, 3.4vw, 64px) !important;
  padding: 15px 28px !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: rgba(255, 255, 255, 0.34) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 28px rgba(74, 73, 72, 0.08) !important;
  font-size: clamp(14px, 0.94vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease !important;
}

.piadal-start-hero__cta .elementor-button:hover,
.piadal-start-hero__cta a.elementor-button:hover,
.piadal-start-hero__cta .elementor-button-link:hover,
.piadal-start-hero__cta .elementor-button:focus-visible,
.piadal-start-hero__cta a.elementor-button:focus-visible,
.piadal-start-hero__cta .elementor-button-link:focus-visible {
  color: var(--piadal-banner-surface, #f7f4ef) !important;
  background: var(--piadal-banner-text, #4a4948) !important;
  border-color: var(--piadal-banner-text, #4a4948) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.piadal-start-hero--button-clear .piadal-start-hero__cta .elementor-button,
.piadal-start-hero--button-clear .piadal-start-hero__cta a.elementor-button,
.piadal-start-hero--button-clear .piadal-start-hero__cta .elementor-button-link {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .piadal-start-hero__cta .elementor-button,
  .piadal-start-hero__cta a.elementor-button,
  .piadal-start-hero__cta .elementor-button-link {
    width: min(100%, 330px) !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding-inline: 18px !important;
    background: rgba(255, 255, 255, 0.40) !important;
    border-color: rgba(74, 73, 72, 0.58) !important;
    font-size: 14px !important;
    box-shadow: 0 10px 26px rgba(74, 73, 72, 0.08) !important;
  }
}