.kb-hero-frame {
  width: 100%;
  margin: 0;
  overflow: visible;
}

.kb-hero {
  position: relative;
  width: 100%;
  height: var(--kb-hero-height);
  background: var(--kb-hero-bg);
  overflow: hidden;
}

.kb-hero-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.kb-hero-picture,
.kb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kb-hero-picture {
  display: block;
  pointer-events: none;
  user-select: none;
}

.kb-hero-img {
  object-fit: cover;
  object-position: var(--kb-hero-focus, center 35%);
  transition: opacity 0.6s ease;
}

.kb-hero-img[data-kb-loading] {
  opacity: 0;
  transition: none;
  animation: kb-hero-reveal 0s 4s forwards;
}

@keyframes kb-hero-reveal {
  to {
    opacity: 1;
  }
}

.kb-hero:has(.kb-hero-figure) {
  --kb-hero-bg: var(--kb-surface-stage);
}

.kb-hero {
  --kb-hero-text-shift: -2.5rem;
  --kb-hero-inset: var(--kb-hero-edge);
  --kb-hero-bottom: calc(var(--kb-pagehead-strip) + var(--kb-space-12));
  --kb-hero-text-gap: var(--kb-space-64);
  --kb-hero-text-below: max(var(--kb-hero-bottom) + var(--kb-hero-text-gap), var(--kb-hero-height) * 0.2);
}

.kb-hero-figure {
  display: grid;
  align-content: end;
  padding: calc(var(--kb-header-height) + var(--kb-header-logo-overhang) + var(--kb-space-32)) var(--kb-hero-inset) var(--kb-hero-text-below);
}

.kb-hero[data-kb-hero-stage] .kb-hero-img:not([data-kb-loading]) {
  animation: kb-hero-color var(--kb-hero-color) linear;
}

.kb-hero-frame--message .kb-hero {
  --kb-hero-bg: var(--kb-surface-page);
}

.kb-hero-frame--message .kb-hero-figure {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--kb-space-24);
}

.kb-hero-frame--message .kb-hero-event {
  --kb-hero-event-gap: var(--kb-space-12);
  max-width: 40rem;
  color: var(--kb-text-primary);
  text-shadow: none;
}

.kb-hero-frame--message .kb-hero-event__date {
  margin-bottom: 0;
}

.kb-hero-frame--message .kb-hero-event__title {
  font-size: var(--kb-type-h1);
  letter-spacing: var(--kb-tracking-heading);
  line-height: var(--kb-leading-heading);
}

.kb-hero-frame--message .kb-hero-event__subtitle {
  color: inherit;
  font-size: var(--kb-type-lead);
}

.kb-hero-event__link {
  text-shadow: none;
}

.kb-hero-artwork {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--kb-space-16);
  min-height: 0;
  margin: var(--kb-space-32) calc(-1 * var(--kb-hero-inset)) 0;
}

.kb-hero-artwork__image {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.kb-hero-artwork__caption {
  max-width: 48rem;
  margin-inline-start: var(--kb-hero-inset);
  color: var(--kb-text-secondary);
  font-size: var(--kb-type-meta);
  line-height: var(--kb-leading-lead);
}

.kb-hero-frame--event {
  position: relative;
}

.kb-hero-frame--event .kb-hero-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--kb-surface-stage) 88%, transparent),
    color-mix(in srgb, var(--kb-surface-stage) 50%, transparent) 45%,
    transparent 75%,
    color-mix(in srgb, var(--kb-surface-stage) 30%, transparent));
}

@keyframes kb-hero-color {
  0%,
  33% {
    filter: grayscale(0.8);
    animation-timing-function: ease-in-out;
  }

  100% {
    filter: grayscale(0);
  }
}

.kb-hero[data-kb-hero-stage] .kb-hero-event {
  animation: kb-hero-text-in var(--kb-hero-text-in-duration) ease-out var(--kb-hero-text-in-delay) backwards;
}

@keyframes kb-hero-text-in {
  from {
    opacity: 0;
    translate: var(--kb-hero-text-shift) 0;
  }
}

.kb-hero-caption {
  position: absolute;
  right: var(--kb-hero-edge);
  bottom: var(--kb-hero-rim);
  z-index: 1;
  display: flex;
  max-width: var(--kb-hero-side);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  color: var(--kb-text-on-dark);
  font-size: var(--kb-type-status);
  font-weight: var(--kb-weight-emphasis);
  line-height: var(--kb-leading-snug);
  text-align: right;
  text-shadow: var(--kb-text-halo-dark);
}

.kb-hero-event {
  --kb-hero-event-gap: var(--kb-space-40);
  position: relative;
  z-index: 1;
  justify-self: start;
  display: grid;
  gap: var(--kb-hero-event-gap);
  min-width: 0;
  max-width: min(52rem, 100%);
  color: var(--kb-text-on-dark);
  text-decoration: none;
  text-shadow: 0 0 1.25rem rgba(31, 29, 27, 0.75), 0 0 0.3rem rgba(31, 29, 27, 0.45), 0 1px 3px rgba(31, 29, 27, 0.6);
  transition: color var(--kb-duration) ease;
}

a.kb-hero-event:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--kb-text-on-dark) 78%, var(--kb-surface-frame));
}

.kb-hero-event__eyebrow {
  margin-bottom: calc(var(--kb-space-8) - var(--kb-hero-event-gap));
  color: var(--kb-text-on-structure-highlight);
  font-size: var(--kb-type-label);
  font-weight: var(--kb-weight-label);
  letter-spacing: var(--kb-tracking-label);
  line-height: var(--kb-leading-snug);
  text-transform: uppercase;
}

.kb-hero-event__date {
  display: grid;
  gap: var(--kb-space-16);
  margin-bottom: calc(-1 * var(--kb-hero-event-gap));
  font-size: var(--kb-type-lead);
  font-weight: var(--kb-weight-control);
  line-height: var(--kb-leading-snug);
}

.kb-hero-event__relative {
  color: var(--kb-text-on-structure-highlight);
  font-size: var(--kb-type-h2);
  font-weight: var(--kb-weight-heading);
  line-height: var(--kb-leading-heading);
}

.kb-hero-event__when {
  white-space: nowrap;
}

.kb-hero-event__title {
  --kb-hero-title-measure: 7.2;
  margin: 0;
  color: inherit;
  font-size: min(clamp(3rem, 9vw, 7.5rem), (100vw - 2 * var(--kb-hero-inset) - var(--kb-hero-caption-space, 0px)) / var(--kb-hero-title-measure));
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: var(--kb-weight-label);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.kb-hero-event__subtitle {
  display: -webkit-box;
  max-width: 40rem;
  overflow: hidden;
  color: color-mix(in srgb, var(--kb-text-on-dark) 72%, transparent);
  font-size: var(--kb-type-lead);
  font-weight: var(--kb-weight-body);
  line-height: var(--kb-leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (width <= 64rem) {
  .kb-hero {
    --kb-hero-inset: var(--kb-container-padding-inline);
    --kb-hero-caption-space: calc(var(--kb-type-fine) * var(--kb-leading-snug) + var(--kb-space-8));
    --kb-hero-text-gap: var(--kb-space-24);
  }

  .kb-hero-event {
    --kb-hero-event-gap: var(--kb-space-16);
    margin-inline-end: var(--kb-hero-caption-space);
  }

  .kb-hero-event__subtitle {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .kb-hero-caption {
    right: var(--kb-container-padding-inline);
    bottom: var(--kb-hero-rim);
    justify-content: flex-start;
    max-width: none;
    max-height: calc(100% - var(--kb-space-12) - var(--kb-header-height) - var(--kb-header-logo-overhang) - var(--kb-space-16));
    font-size: var(--kb-type-fine);
    text-align: start;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }
}

@media (width <= 64rem) {
  .kb-hero-frame--event .kb-hero-event {
    max-width: none;
  }

  .kb-hero-frame--event .kb-hero-caption {
    max-height: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-hero[data-kb-hero-stage] :is(.kb-hero-img, .kb-hero-event) {
    animation: none;
  }
}

.kb-hero-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transition: opacity 0.6s ease;
}

.kb-hero-iframe[data-kb-loading] {
  opacity: 0;
  transition: none;
}

.kb-hero:not(.kb-map__stage):has(iframe)::after {
  content: "Ziehen zum Umsehen";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  padding: var(--kb-space-10) var(--kb-space-16) var(--kb-space-10) calc(var(--kb-space-16) + 1.75rem);
  background: color-mix(in srgb, var(--kb-surface-frame) 78%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M2.5 12h5M16.5 12h5M5.5 9l-3 3 3 3M18.5 9l3 3-3 3'/%3E%3C/svg%3E") no-repeat var(--kb-space-12) center / 1.5rem;
  color: var(--kb-text-on-dark);
  font-size: var(--kb-type-control);
  font-weight: var(--kb-weight-label);
  line-height: var(--kb-leading-control);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
  animation: kb-hero-hint 0.6s ease 5s forwards;
  transition: opacity var(--kb-duration-calm) ease;
}

.kb-hero:not(.kb-map__stage):has(iframe):is(:focus-within, [data-kb-hero-touched])::after {
  opacity: 0;
  animation: none;
}

@keyframes kb-hero-hint {
  to { opacity: 0; }
}

.kb-hero--gedaempft .kb-hero-iframe {
  --kb-pano-saturation: 0.86;
  --kb-pano-brightness: 0.98;
  --kb-pano-contrast: 1.02;
  filter: saturate(var(--kb-pano-saturation))
    brightness(var(--kb-pano-brightness))
    contrast(var(--kb-pano-contrast));
}

@media print {
  .kb-hero {
    height: auto;
    background: none;
  }

  .kb-hero-figure {
    position: static;
    padding: 0 0 var(--kb-space-24);
  }

  .kb-hero-picture,
  .kb-hero-caption {
    display: none;
  }

  .kb-hero-event,
  .kb-hero[data-kb-hero-stage] .kb-hero-event {
    color: var(--kb-text-primary);
    text-shadow: none;
    animation: none;
  }

  .kb-hero-event__eyebrow {
    color: var(--kb-text-label);
  }

  .kb-hero-event__subtitle {
    color: var(--kb-text-secondary);
  }

  .kb-hero-event__title {
    font-size: var(--kb-type-display);
  }
}