/* Loaded only on the product home page. */
:root {
  --lot-night: #18101e;
  --lot-paper: #fcf8f3;
  --lot-mint: #a8f3d3;
  --lot-orchid: #debcff;
}
body > header {
  position: relative;
  z-index: 2;
  background: var(--lot-night);
  border-color: #ffffff21;
}
header .ll-bar { min-height: 4.5rem; }
header .ll-brand { color: var(--lot-paper); }
header .ll-brand img { filter: brightness(0) invert(1); }
header nav a, header .account-links > a, header .mobile-menu summary {
  color: #e5dce8;
  font-size: .87rem;
}
header nav a { font-weight: 400; }
header nav a:hover, header .account-links a:hover { color: white; }
header .account-links .btn {
  padding: .53rem 1.08rem;
  border: 1px solid #b8a9be;
  border-radius: 2rem;
  background: transparent;
}
header .account-links .btn:hover { background: #3a2c41; }
header :focus-visible, .auftakt :focus-visible { outline-color: var(--lot-mint); }
header .mobile-menu div { background: #281c30; border-color: #58485f; }
header .mobile-menu a { color: var(--lot-paper); }
header .mobile-menu a:hover { color: var(--lot-mint); }
.auftakt {
  background: var(--lot-night);
  color: var(--lot-paper);
}
.auftakt-buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 83% 52%, #2b1933, transparent 58%);
}
.auftakt-raster {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(35rem, 71svh, 51rem);
  padding-block: clamp(4rem, 7.2vw, 7rem);
}
.auftakt-text { position: relative; z-index: 1; width: 51%; }
.auftakt-rubrik {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.65rem;
  color: var(--lot-mint);
  font: 700 .73rem/1.4 Mulish, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.auftakt-rubrik::before {
  content: "";
  width: 1.65rem;
  height: 1px;
  background: currentColor;
}
.auftakt h1 {
  color: inherit;
  font: 700 clamp(3.8rem, 6.4vw, 6rem)/.99 Mulish, system-ui, sans-serif;
  letter-spacing: -.075em;
  text-wrap: initial;
}
.auftakt h1 em {
  display: block;
  color: var(--lot-orchid);
  font: italic 400 1.02em/1.09 Georgia, serif;
  letter-spacing: -.065em;
}
.auftakt-lead {
  margin-top: 1.75rem;
  max-width: 29rem;
  color: #e1d7e2;
  font-size: clamp(1.04rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.auftakt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; margin-top: 1.85rem; }
.auftakt-aktionen a {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  gap: .55rem;
  font-size: .98rem;
  text-decoration: none;
}
.auftakt-start { padding: .7rem 1.27rem; border-radius: 2rem; background: var(--lot-mint); color: #102f27; }
.auftakt-start:hover { color: #102f27; background: #c8ffe7; }
.auftakt-aktionen a span { font-size: 1.15em; }
.auftakt-konto { color: var(--lot-paper); }
.auftakt-konto:hover { color: var(--lot-mint); text-decoration: underline; }
.auftakt-optik {
  position: absolute;
  pointer-events: none;
  left: 47%;
  top: 0;
  bottom: 0;
  width: min(66vw, 74rem);
  display: grid;
  align-content: center;
  mask-image: linear-gradient(to right, transparent, black 9%, black 96%, transparent);
}
.auftakt-optik img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: radial-gradient(ellipse 68% 57% at 54% 48%, black 44%, transparent 97%);
}
.auftakt-kapitel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: .2rem 1.35rem;
}
.auftakt-kapitel a {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-top: 1px solid #6a576e;
  color: #f4edf4;
  font-size: .92rem;
  text-decoration: none;
}
.auftakt-kapitel a span {
  color: var(--lot-orchid);
  font: .71rem/1 ui-monospace, monospace;
  letter-spacing: .06em;
}
.auftakt-kapitel i { margin-left: auto; font: 400 1.05rem/1 Mulish, sans-serif; color: #c4b2cb; }
.auftakt-kapitel a:is(:hover, :focus-visible) { color: var(--lot-mint); border-color: var(--lot-mint); }
@supports (animation-timeline: view()) {
  @media (min-width: 55rem) and (prefers-reduced-motion: no-preference) {
    .auftakt-buehne { view-timeline-name: --glas; }
    .auftakt-optik {
      animation: lichtlot-vorbei linear both;
      animation-timeline: --glas;
      animation-range: exit 0% exit 100%;
    }
    @keyframes lichtlot-vorbei {
      from { transform: translateY(0) scale(1); }
      to { transform: translateY(4%) scale(1.07); }
    }
  }
}
@media (max-width: 54rem) {
  .auftakt-raster { min-height: auto; padding-block: 3.5rem .5rem; }
  .auftakt-text { width: min(100%, 35rem); }
  .auftakt h1 { font-size: clamp(3.4rem, 9vw, 5.25rem); }
  .auftakt-optik {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: min(100%, 39rem);
    height: clamp(12rem, 43vw, 18rem);
    margin: 1.45rem auto 0;
  }
  .auftakt-optik img { width: min(100%, 35rem); justify-self: center; }
  .auftakt-kapitel { gap: 1rem; padding-bottom: .7rem; }
}
@media (max-width: 38rem) {
  header .ll-bar { min-height: 3.9rem; }
  .auftakt-raster { padding-top: 2.6rem; }
  .auftakt-rubrik { font-size: .64rem; margin-bottom: 1.15rem; }
  .auftakt h1 { font-size: clamp(2.9rem, 12.5vw, 4.15rem); }
  .auftakt-lead { margin-top: 1.2rem; font-size: 1.02rem; }
  .auftakt-aktionen { margin-top: 1.4rem; gap: .4rem 1rem; }
  .auftakt-aktionen a { font-size: .88rem; }
  .auftakt-start { padding-inline: 1.05rem; }
  .auftakt-optik { height: clamp(11rem, 52vw, 17rem); }
  .auftakt-kapitel { gap: .65rem; }
  .auftakt-kapitel a { display: grid; gap: .3rem; padding-block: .7rem; font-size: .78rem; }
  .auftakt-kapitel i { display: none; }
}