:root {
  --vk-bg: #151529;
  --vk-surface: #252642;
  --vk-ink: #f6f3ff;
  --vk-muted: #c0bedc;
  --vk-orange: #f3afc2;
  --vk-purple: #beb6ff;
  --logistik-home-background:
    radial-gradient(ellipse at 101% 23%, #785cb352, transparent 48%),
    radial-gradient(ellipse at -3% 87%, #9e587039, transparent 43%),
    linear-gradient(155deg, #16162b 12%, #1b1935 58%, var(--vk-bg));
}

html, body { background-color: var(--vk-bg) !important; }
.site-header, .header-shell { background-color: #1b1d33 !important; }
.hero h1 span { color: #e5bcf3 !important; }
.volt-home-atmosphere svg { stroke: #d7cdfa !important; }
.auth-panel::after { content: "L" !important; }

html body .volt-learning-backdrop--home { background-color: var(--vk-bg) !important; }
html body .volt-learning-backdrop--home .volt-learning-backdrop__light {
  background: var(--logistik-home-background) !important;
}

/* The page paints a horizontal wash so the color stays constant while
   scrolling. Only the artwork needs a fixed layer across the viewport. */
@media (max-width: 1100px), (any-pointer: coarse) {
  html:has(.kk-home-refined > .volt-learning-backdrop--home) {
    --logistik-mobile-wash: linear-gradient(90deg, #221b35, var(--vk-bg) 48%, #1b1935) var(--vk-bg);
    overscroll-behavior-y: none;
  }

  html:has(.kk-home-refined > .volt-learning-backdrop--home),
  body:has(.kk-home-refined > .volt-learning-backdrop--home),
  html:root body .kk-release.kk-home-refined:has(> .volt-learning-backdrop--home) {
    background: var(--logistik-mobile-wash) !important;
  }

  html body .kk-home-refined > .volt-learning-backdrop--home {
    position: fixed !important;
    background: transparent !important;
  }

  html body .kk-home-refined > .volt-learning-backdrop--home > .volt-learning-backdrop__art {
    height: 100vh;
    height: 100lvh;
    background-size: 410px auto, 300px auto;
    background-position: right -170px top 20px, left -42px bottom 30px;
    opacity: .9;
  }
}
html body .kk-storefront .button.primary {
  background: linear-gradient(120deg, #f5bdcc, #eea7c2) !important;
  color: #2c1731 !important;
  border-color: #f3afc2 !important;
  box-shadow: 0 8px 26px #e99db725 !important;
}
html body .kk-storefront .button.primary:hover {
  background: linear-gradient(120deg, #ffd0db, #f4b6d0) !important;
}
html:root body .kk-release .hero .quiz-disclosure {
  border-radius: 26px;
}
html:root body .kk-release .hero .quiz-disclosure[open] {
  background: transparent !important;
}
html:root body .kk-release .hero .quiz-disclosure > summary.quiz-disclosure__toggle {
  border-radius: 26px !important;
}
html:root body .kk-release .hero .quiz-card {
  background: linear-gradient(145deg, #322748, #232541 75%) !important;
  border-color: #8272ae88 !important;
  border-radius: 26px;
  box-shadow: 0 24px 70px #0f0d2480 !important;
}
@media (max-width: 760px) {
  html:root body .kk-release .hero .quiz-disclosure[open] > summary.quiz-disclosure__toggle {
    border-radius: 26px 26px 0 0 !important;
  }
  html:root body .kk-release .hero .quiz-disclosure[open] > .quiz-card {
    border-radius: 0 0 26px 26px;
  }
}
html body .kk-storefront .facts {
  background: linear-gradient(115deg, #302744, #222941) !important;
  border-color: #504966 !important;
  box-shadow: none !important;
}

html body .kk-release #lernwerkzeuge .tool {
  min-width: 0;
  border: 1px solid #7b74a15c;
  border-radius: 26px;
  background: linear-gradient(150deg, #2e2846, #201e35 68%);
  box-shadow: 0 18px 44px #10102052;
}
html body .kk-release #lernwerkzeuge .tool-large {
  background:
    url('/logistik-warehouse-scene.svg') no-repeat right -58px bottom -95px / 270px auto,
    linear-gradient(145deg, #333052, #23233b 70%);
}
html body .kk-release #lernwerkzeuge .tool-formula {
  background: linear-gradient(145deg, #312744, #222239 72%);
}
html body .kk-release #lernwerkzeuge .tool-exam {
  background:
    url('/logistik-loading-dock.svg') no-repeat right -54px top -33px / 185px auto,
    linear-gradient(160deg, #302942, #222138 73%);
}
html body .kk-release #lernwerkzeuge :is(.learning-map, .formula-visual, .exam-visual) {
  margin: 24px 0;
  border: 1px solid #8b80b044;
  border-radius: 18px;
  background: linear-gradient(150deg, #202139, #17182c);
  box-shadow: inset 0 1px #ded2ff0b;
}
html body .kk-release #lernwerkzeuge .formula-equation {
  align-items: center;
  gap: .24em;
  margin-block: 8px;
  font-size: clamp(26px, 11cqi, 46px);
}
html body .kk-release #lernwerkzeuge .formula-legend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html body .kk-release #lernwerkzeuge .formula-legend dd {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.kk-release #lernwerkzeuge .logistik-formula-fraction {
  display: inline-grid;
  min-width: 1.3em;
  line-height: 1.1;
  text-align: center;
  font-size: .67em;
}
.kk-release #lernwerkzeuge .logistik-formula-fraction > span:first-child {
  padding-bottom: .12em;
  border-bottom: 1px solid #c9bdf0a6;
}
.kk-release #lernwerkzeuge .logistik-formula-fraction > span:last-child {
  padding-top: .12em;
}
html body .kk-release #lernwerkzeuge .exam-visual {
  justify-content: center;
  padding-inline: 14px;
}
html body .kk-release #lernwerkzeuge .exam-ring {
  background: conic-gradient(#c4b5f5 0 70%, #75669055 70% 100%);
  color: #d5c7fa;
}
.kk-release #lernwerkzeuge .exam-ring svg {
  position: relative;
}
html body .kk-release .other-app .logistik-footer-brand {
  display: block;
}
html body .kk-release .other-app .logistik-footer-brand img {
  display: block;
  width: 196px;
  max-width: 100%;
  height: auto;
}
html body .kk-release .other-app .text-link {
  color: #c1eea5;
}
@media (max-width: 760px) {
  html body .kk-storefront .facts {
    background: transparent !important;
    border-color: transparent !important;
  }

  html body .kk-storefront .facts > div::before,
  html:root body .kk-home-refined .hero .quiz-card::before {
    content: none;
  }

  html:root body .kk-home-refined :is(
    .facts > div, .hero .quiz-card, #lernwerkzeuge .tool,
    #lernwerkzeuge .learning-map, #lernwerkzeuge .formula-visual, #lernwerkzeuge .exam-visual,
    .volt-learning-fields__surface, .kk-exam__card, .volt-simulation-launch, .access-summary
  ) {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body .kk-release .other-app > .text-link {
    margin-left: 0;
  }
}

@supports (background-clip: text) {
  .hero h1 span {
    background: linear-gradient(105deg, #c5b6ff, #f5bbd2 80%);
    background-clip: text;
    color: transparent !important;
  }
}