/*
 * InselKonzerte alternative homepage styles.
 * Loaded only on the comparison pages.
 */

/* =========================================================
   v0.10 – optional illustrated glass hero for a second homepage
   ========================================================= */

/* The alternative page keeps the current homepage untouched. Its first
   section uses the supplied illustrated Herrenchiemsee background and two
   restrained glass surfaces for text and the dynamic next-concert module. */
.ik-hero-alt {
  position: relative;
  min-height: 100svh !important;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  padding-top: clamp(104px, 11vh, 142px) !important;
  padding-bottom: clamp(54px, 7vh, 88px) !important;
}
.ik-hero-alt .wp-block-cover__image-background {
  object-position: center center;
  filter: saturate(.96) contrast(1.02);
}
.ik-hero-alt .wp-block-cover__background {
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(0,49,82,.50) 0%, rgba(0,63,98,.28) 38%, rgba(0,68,99,.05) 68%, rgba(0,46,66,.08) 100%),
    linear-gradient(180deg, rgba(0,31,55,.18) 0%, transparent 30%, rgba(0,38,65,.14) 100%) !important;
}
.ik-hero-alt .wp-block-cover__inner-container {
  width: 100%;
  color: #fff;
}
.ik-hero-alt-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
  align-items: end !important;
  width: min(calc(100% - (2 * var(--ik-gutter))), 1460px) !important;
  max-width: 1460px !important;
  min-height: calc(100svh - clamp(190px, 20vh, 245px));
  gap: clamp(58px, 7vw, 124px) !important;
}
.ik-hero-alt-copy {
  align-self: center;
  max-width: 690px;
  padding: clamp(26px, 3.1vw, 44px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(2,61,99,.20), rgba(5,95,130,.10));
  box-shadow: 0 24px 80px rgba(0,35,62,.16);
  -webkit-backdrop-filter: blur(15px) saturate(118%);
  backdrop-filter: blur(15px) saturate(118%);
}
.ik-hero-alt .ik-kicker {
  color: rgba(255,255,255,.88);
}
.ik-hero-alt .ik-kicker::before {
  background: rgba(255,255,255,.72);
}
.ik-hero-alt-title {
  max-width: 760px;
  margin: 0 0 24px !important;
  color: #fff;
  font-family: var(--ik-serif);
  font-size: clamp(4rem, 6.4vw, 7.25rem) !important;
  font-weight: 400;
  letter-spacing: -.048em;
  line-height: .84 !important;
}
.ik-hero-alt-title em {
  display: block;
  margin-top: .08em;
  color: #72e3ee;
  font-weight: 400;
}
.ik-hero-alt-copytext {
  max-width: 590px;
  margin-bottom: 29px !important;
  color: rgba(255,255,255,.94);
  font-size: clamp(1.04rem, 1.35vw, 1.28rem) !important;
  line-height: 1.55;
}
.ik-hero-alt .wp-block-buttons {
  align-items: stretch;
  gap: 14px;
}
.ik-hero-alt .ik-button .wp-block-button__link {
  min-height: 52px;
  border-color: rgba(255,255,255,.72);
  background: rgba(8,32,52,.84);
  color: #fff;
}
.ik-hero-alt .ik-button .wp-block-button__link:hover,
.ik-hero-alt .ik-button .wp-block-button__link:focus-visible {
  border-color: #fff !important;
  background: rgba(8,32,52,.98) !important;
  color: #fff !important;
}
.ik-hero-alt .ik-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.08);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ik-hero-alt .ik-button.is-style-outline .wp-block-button__link:hover,
.ik-hero-alt .ik-button.is-style-outline .wp-block-button__link:focus-visible {
  border-color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.ik-hero-alt-next {
  position: relative;
  align-self: end;
  width: min(100%, 530px);
  margin: 0 0 10px auto !important;
}
.ik-hero-alt-next > .wp-block-shortcode { margin: 0 !important; }
.ik-hero-alt-next .ik-next-card,
.ik-hero-alt-next .ik-next-card--dynamic {
  width: 100% !important;
  min-height: 205px;
  margin: 0 !important;
  padding: 30px 150px 28px 32px !important;
  border: 1px solid rgba(255,255,255,.28);
  border-top-width: 1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(4,79,120,.42), rgba(25,117,133,.22)) !important;
  box-shadow: 0 28px 75px rgba(0,34,58,.25), inset 0 1px 0 rgba(255,255,255,.16);
  color: #fff !important;
  -webkit-backdrop-filter: blur(24px) saturate(132%);
  backdrop-filter: blur(24px) saturate(132%);
}
.ik-hero-alt-next .ik-next-card .ik-kicker,
.ik-hero-alt-next .ik-next-card--dynamic .ik-kicker {
  color: #7ce7ee !important;
  font-size: .69rem !important;
  letter-spacing: .13em;
}
.ik-hero-alt-next .ik-next-card h2,
.ik-hero-alt-next .ik-next-card--dynamic h2 {
  margin: 10px 0 12px !important;
  color: #fff !important;
  font-size: clamp(2rem, 3.1vw, 3.2rem) !important;
}
.ik-hero-alt-next .ik-next-card p:last-child,
.ik-hero-alt-next .ik-next-card--dynamic p:last-child {
  color: rgba(255,255,255,.93) !important;
  font-size: .97rem;
  line-height: 1.58;
}
.ik-hero-alt-season {
  position: absolute;
  z-index: 3;
  top: 27px;
  right: 25px;
  display: grid;
  place-content: center;
  width: 105px;
  height: 105px;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(96,226,237,.92), rgba(26,174,197,.86));
  box-shadow: 0 15px 40px rgba(0,48,73,.22), inset 0 1px 0 rgba(255,255,255,.34);
  color: #fff;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
.ik-hero-alt-season strong {
  display: block;
  margin-top: 5px;
  font-family: var(--ik-serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* The top navigation becomes part of the illustrated scene. Once the visitor
   scrolls, the existing light sticky header returns automatically. */
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) {
  background: transparent !important;
  border-color: transparent !important;
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) .ik-main-nav .wp-block-navigation-item__content {
  color: #fff;
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) .ik-main-nav .wp-block-navigation-item__content::after {
  background: rgba(255,255,255,.82);
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) .ik-main-nav .ik-ticket-nav .wp-block-navigation-item__content {
  border-color: rgba(255,255,255,.42);
  background: rgba(0,48,78,.16);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open {
  color: #fff;
}

@media (max-width: 1100px) {
  .ik-hero-alt {
    padding-top: 106px !important;
    padding-bottom: 68px !important;
  }
  .ik-hero-alt-grid {
    grid-template-columns: 1fr;
    align-items: start !important;
    width: min(calc(100% - 44px), 760px) !important;
    min-height: auto;
    gap: 46px !important;
  }
  .ik-hero-alt-copy { max-width: 680px; }
  .ik-hero-alt-next { width: min(100%, 560px); margin-left: auto !important; }
}

@media (max-width: 700px) {
  .ik-hero-alt {
    min-height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 42px !important;
  }
  .ik-hero-alt .wp-block-cover__image-background {
    object-position: 68% center;
  }
  .ik-hero-alt .wp-block-cover__background {
    background:
      linear-gradient(180deg, rgba(0,43,72,.18) 0%, rgba(0,55,88,.36) 42%, rgba(0,44,73,.68) 100%),
      linear-gradient(90deg, rgba(0,54,88,.38), rgba(0,54,88,.04)) !important;
  }
  .ik-hero-alt-grid { width: calc(100% - 28px) !important; gap: 28px !important; }
  .ik-hero-alt-copy {
    margin-top: 92px;
    padding: 24px 21px 25px;
    background: linear-gradient(145deg, rgba(0,55,91,.34), rgba(5,92,124,.17));
    -webkit-backdrop-filter: blur(13px) saturate(115%);
    backdrop-filter: blur(13px) saturate(115%);
  }
  .ik-hero-alt-title {
    font-size: clamp(3.05rem, 15.8vw, 4.65rem) !important;
    line-height: .87 !important;
  }
  .ik-hero-alt-copytext { font-size: .98rem !important; }
  .ik-hero-alt .wp-block-buttons { display: grid; grid-template-columns: 1fr; }
  .ik-hero-alt .wp-block-button,
  .ik-hero-alt .wp-block-button__link { width: 100%; }
  .ik-hero-alt-next .ik-next-card,
  .ik-hero-alt-next .ik-next-card--dynamic {
    min-height: 190px;
    padding: 25px 24px 108px !important;
  }
  .ik-hero-alt-season {
    top: auto;
    right: 22px;
    bottom: 20px;
    width: 78px;
    height: 78px;
    font-size: .54rem;
  }
  .ik-hero-alt-season strong { font-size: 1.42rem; }
  .ik-hero-alt-next .ik-next-card h2,
  .ik-hero-alt-next .ik-next-card--dynamic h2 { font-size: 2.25rem !important; }
}


/* --------------------------------------------------------------
   v0.11 – second illustrated comparison hero
   This variant removes the left glass panel, keeps the header white over the
   image at first and lets the frosted sticky state appear only after scroll.
-------------------------------------------------------------- */
body.ik-has-alt-hero .ik-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
body.admin-bar.ik-has-alt-hero .ik-site-header { top: 32px; }
body.ik-has-alt-hero .wp-site-blocks > .ik-hero-alt:first-child { margin-top: 0 !important; }
.ik-hero-alt.ik-hero-alt-2 {
  padding-top: 0 !important;
}
.ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
  padding-top: clamp(126px, 15vh, 168px);
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-grid {
  min-height: calc(100svh - clamp(160px, 18vh, 210px));
}
.ik-hero-alt-copy.ik-hero-alt-copy--free {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-copytext {
  max-width: 600px;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-title em {
  color: #aee5ef;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next {
  width: min(100%, 560px);
  margin-bottom: 8px !important;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card,
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card--dynamic {
  padding-right: 156px !important;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-season {
  background: linear-gradient(145deg, rgba(182,232,241,.96), rgba(129,202,223,.92));
  color: #f8fdff;
}
body.ik-has-alt-hero .ik-site-header:not(.is-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ik-has-alt-hero .ik-site-header.is-scrolled {
  background: rgba(251,252,250,.88) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
@media (max-width: 1100px) {
  .ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
    padding-top: 118px;
  }
}
@media (max-width: 782px) {
  body.admin-bar.ik-has-alt-hero .ik-site-header { top: 46px; }
}
@media (max-width: 700px) {
  .ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
    padding-top: 92px;
  }
  .ik-hero-alt-copy.ik-hero-alt-copy--free {
    padding: 0 !important;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next {
    width: 100%;
  }
}


/* --------------------------------------------------------------
   v0.12 – refine alternative hero 2
   Removes the white gap above the scene, keeps the background bright, moves
   the free text block inward/upward and tightens the glass concert card.
-------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
body.ik-has-alt-hero,
body.ik-has-alt-hero .wp-site-blocks { margin-top: 0 !important; padding-top: 0 !important; }
.ik-hero-alt.ik-hero-alt-2 {
  margin-top: 0 !important;
}
.ik-hero-alt.ik-hero-alt-2 .wp-block-cover__background {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 10% 92%, rgba(9,35,58,.22) 0%, rgba(9,35,58,.12) 18%, rgba(9,35,58,0) 36%),
    linear-gradient(180deg, rgba(0,20,36,.03) 0%, rgba(0,20,36,0) 22%, rgba(0,20,36,.03) 100%) !important;
}
.ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
  padding-top: clamp(112px, 13vh, 150px);
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-grid {
  grid-template-columns: minmax(0, .94fr) minmax(370px, .72fr);
  gap: clamp(36px, 5vw, 84px) !important;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-copy.ik-hero-alt-copy--free {
  align-self: start;
  margin-top: clamp(-8px, -1vh, -18px);
  margin-left: clamp(34px, 5vw, 96px);
  max-width: 640px;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-title {
  max-width: 640px;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-copytext {
  max-width: 560px;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next {
  align-self: center;
  width: min(100%, 450px);
  margin: 0 clamp(18px, 4vw, 42px) 0 auto !important;
  transform: translateY(-48px);
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card,
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card--dynamic {
  min-height: 0;
  padding: 26px 122px 24px 28px !important;
  border-radius: 16px;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card h2,
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next .ik-next-card--dynamic h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.8rem) !important;
  line-height: .98 !important;
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-season {
  z-index: 7;
  top: 22px;
  right: -18px;
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg, rgba(193,234,241,.98), rgba(144,209,225,.95));
  box-shadow: 0 14px 34px rgba(0,56,84,.20), inset 0 1px 0 rgba(255,255,255,.42);
}
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-season strong {
  font-size: 1.72rem;
}
@media (max-width: 1100px) {
  .ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
    padding-top: 106px;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-copy.ik-hero-alt-copy--free {
    margin-left: 0;
    margin-top: 0;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next {
    width: min(100%, 500px);
    transform: translateY(0);
    margin-right: auto !important;
  }
}
@media (max-width: 700px) {
  .ik-hero-alt.ik-hero-alt-2 .wp-block-cover__inner-container {
    padding-top: 88px;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-grid {
    gap: 32px !important;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-next {
    width: 100%;
    margin: 0 !important;
    transform: none;
  }
  .ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-season {
    right: 18px;
    top: 16px;
    width: 90px;
    height: 90px;
  }
}


/* =========================================================
   v0.18 – continuous cloud loops from outside left to outside right
   ========================================================= */
.ik-hero-alt { isolation: isolate; overflow: hidden; }
.ik-hero-alt .wp-block-cover__inner-container,
.ik-hero-alt .ik-hero-alt-grid,
.ik-hero-alt .ik-hero-alt-copy,
.ik-hero-alt .ik-hero-alt-next {
  position: relative;
  z-index: 2;
}
.ik-hero-alt::before,
.ik-hero-alt::after,
.ik-hero-alt-grid::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform;
}
.ik-hero-alt::before {
  bottom: clamp(3%, 5vw, 10%);
  width: clamp(220px, 20vw, 360px);
  height: clamp(120px, 12vw, 210px);
  background-image: url('../images/cloud-1.svg');
  opacity: .72;
  transform: translate3d(calc(-100% - 10vw),0,0);
  animation: ikCloudAcrossOne 24s linear -8s infinite;
}
.ik-hero-alt::after {
  top: clamp(14%, 16vw, 21%);
  width: clamp(120px, 11vw, 190px);
  height: clamp(60px, 6vw, 100px);
  background-image: url('../images/cloud-2.svg');
  opacity: .50;
  transform: translate3d(calc(-100% - 14vw),0,0);
  animation: ikCloudAcrossTwo 28s linear 8s infinite;
}
.ik-hero-alt-grid::before {
  top: clamp(25%, 18vw, 34%);
  width: clamp(90px, 8vw, 140px);
  height: clamp(48px, 4.2vw, 74px);
  background-image: url('../images/cloud-3.svg');
  opacity: .34;
  transform: translate3d(calc(-100% - 18vw),0,0);
  animation: ikCloudAcrossThree 30s linear 16s infinite;
}
@keyframes ikCloudAcrossOne {
  from { transform: translate3d(calc(-100% - 10vw),0,0); }
  to   { transform: translate3d(calc(100vw + 10vw),-4px,0); }
}
@keyframes ikCloudAcrossTwo {
  from { transform: translate3d(calc(-100% - 14vw),0,0); }
  to   { transform: translate3d(calc(100vw + 14vw),5px,0); }
}
@keyframes ikCloudAcrossThree {
  from { transform: translate3d(calc(-100% - 18vw),0,0); }
  to   { transform: translate3d(calc(100vw + 18vw),-3px,0); }
}
@media (max-width: 700px) {
  .ik-hero-alt::before {
    bottom: 24%;
    width: clamp(160px,44vw,220px);
    height: clamp(84px,22vw,122px);
    opacity: .62;
    animation-duration: 23s;
  }
  .ik-hero-alt::after {
    top: 18%;
    width: clamp(74px,21vw,104px);
    height: clamp(34px,10vw,52px);
    opacity: .38;
    animation-duration: 27s;
  }
  .ik-hero-alt-grid::before {
    top: 31%;
    width: clamp(62px,18vw,90px);
    height: clamp(26px,7vw,42px);
    opacity: .24;
    animation-duration: 29s;
  }
}

/* v0.17: all illustrated season circles use a calmer, slightly darker blue. */
.ik-hero-alt-season,
.ik-hero-alt.ik-hero-alt-2 .ik-hero-alt-season {
  background: linear-gradient(145deg, rgba(86,183,207,.98), rgba(41,139,168,.97)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.38) !important;
}