:root {
  --buehne-top: clamp(1rem, 3.5svh, 2.5rem);
  --buehne-unten: max(0.75rem, env(safe-area-inset-bottom));
  --steuer-h: 4.25rem;
  --wende: 1s;
}

.kuvert__card {
  padding: 0;
  background: var(--ink);
  box-shadow: 0 -0.5rem 1.5rem -0.75rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(217, 188, 132, 0.3);
  view-transition-name: motiv;
}

.kuvert__card::before {
  z-index: 1;
  inset: 0.375rem;
  border-color: rgba(217, 188, 132, 0.32);
}

.kuvert__card-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 33%;
}

.umschlag.is-opening .kuvert__card {
  animation: karte-hoch 0.7s var(--rise) 0.65s both;
}

::view-transition-group(motiv) {
  animation-duration: 0.8s;
  animation-timing-function: var(--ease);
}

::view-transition-old(motiv),
::view-transition-new(motiv) {
  height: 100%;
  object-fit: cover;
  animation-duration: 0.35s;
}

.brief {
  padding-top: var(--buehne-top);
}

.brief > .shell {
  position: relative;
  container-type: inline-size;
}

.wende__motiv {
  display: none;
  margin: 0;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(217, 188, 132, 0.32), 0 2.5rem 4.5rem -2rem rgba(0, 0, 0, 0.85), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.wende__motiv::after {
  content: "";
  position: absolute;
  inset: 0.625rem;
  border: 1px solid rgba(217, 188, 132, 0.3);
  pointer-events: none;
}

.wende__motiv:focus {
  outline: none;
}

.wende__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brief__motiv {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin-top: 0.125rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 2px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  text-decoration: underline;
  text-decoration-color: rgba(122, 92, 34, 0.4);
  text-underline-offset: 0.4em;
  cursor: pointer;
  transition: text-decoration-color 0.2s var(--ease);
}

.brief__motiv::before {
  content: "";
  flex: none;
  width: 0.5625rem;
  height: 0.9375rem;
  border: 1px solid currentColor;
  box-shadow: 2px -2px 0 -1px var(--ivory), 2px -2px 0 0 currentColor;
}

.brief__motiv:hover {
  text-decoration-color: currentColor;
}

.brief__motiv:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.brief__motiv[hidden],
.wende__steuer[hidden] {
  display: none;
}

.wende__steuer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--steuer-h);
  transition: opacity 0.3s ease;
}

.wende__lesen {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 2px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bronze-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wende__lesen::before,
.wende__lesen::after {
  content: "";
  width: 1rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transition: width 0.3s var(--ease);
}

.wende__lesen:hover::before,
.wende__lesen:hover::after {
  width: 1.5rem;
}

.wende__lesen:focus-visible {
  outline: 2px solid var(--bronze-light);
  outline-offset: 4px;
}

.wende__zeit {
  position: absolute;
  right: 2.125rem;
  bottom: 0.5rem;
  left: 2.125rem;
  height: 1px;
  background: var(--bronze-line);
}

.wende__zeit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.is-zeit .wende__zeit::after {
  animation: zeit 2s linear both;
}

.is-pausiert .wende__zeit::after {
  animation-play-state: paused;
}

@keyframes zeit {
  to {
    transform: scaleX(1);
  }
}

.brief.is-buehne {
  min-height: 100vh;
  min-height: 100lvh;
  padding-bottom: var(--buehne-unten);
}

.brief.is-buehne > .shell {
  --motiv-h: min(calc(100vh - var(--buehne-top) - var(--steuer-h) - var(--buehne-unten)), calc(100cqi * 1536 / 1024), 64rem);
  --motiv-h: min(calc(100svh - var(--buehne-top) - var(--steuer-h) - var(--buehne-unten)), calc(100cqi * 1536 / 1024), 64rem);
}

.is-buehne .wende {
  height: var(--motiv-h);
  perspective: 1800px;
}

.is-buehne .wende__karte {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--wende) var(--ease);
}

.is-buehne.is-gewendet .wende__karte {
  transform: rotateY(-180deg);
}

.is-buehne .wende__motiv,
.is-buehne .wende__brief {
  position: absolute;
  top: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.is-buehne .wende__motiv {
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(var(--motiv-h) * 1024 / 1536);
  margin-inline: auto;
  cursor: pointer;
}

.is-buehne .wende__brief {
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--buehne-top));
  max-height: calc(100lvh - var(--buehne-top));
  overflow: hidden;
  transform: rotateY(180deg);
}

.is-buehne :is(.wende__motiv, .wende__brief) {
  transition: visibility 0s linear calc(var(--wende) * 0.144);
}

.is-buehne .wende__brief,
.is-buehne.is-gewendet .wende__motiv {
  visibility: hidden;
}

.is-buehne.is-gewendet .wende__brief {
  visibility: visible;
}

.brief.is-buehne + .eckdaten .stempel {
  visibility: hidden;
}

.is-buehne:not(.is-gewendet) .wende__brief,
.is-gewendet .wende__motiv,
.is-gewendet .wende__steuer {
  pointer-events: none;
}

.is-gewendet .wende__steuer {
  opacity: 0;
}

.is-sofort :is(.wende__karte, .wende__motiv, .wende__brief, .wende__steuer) {
  transition: none !important;
}

@media (orientation: landscape) and (max-height: 34rem) {
  :root {
    --buehne-top: 0.75rem;
    --steuer-h: 0rem;
  }

  .wende__steuer {
    position: absolute;
    top: calc(var(--motiv-h) - 3.5rem);
    left: calc(50% + var(--motiv-h) * 1024 / 3072 + 1rem);
    height: 3.5rem;
  }
}

@media (scripting: none) {
  .wende__motiv {
    display: block;
    position: relative;
    width: min(100%, calc((100svh - 2 * var(--buehne-top)) * 1024 / 1536));
    margin: 0 auto clamp(2.5rem, 7vw, 4.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(motiv),
  ::view-transition-old(motiv),
  ::view-transition-new(motiv) {
    animation-duration: 0s;
  }

  .brief.is-buehne .wende__karte {
    transform: none !important;
    transition: none !important;
  }

  .brief.is-buehne .wende__brief {
    transform: none;
    opacity: 0;
  }

  .brief.is-buehne :is(.wende__motiv, .wende__brief) {
    visibility: visible;
    transition: opacity 0.2s ease !important;
  }

  .brief.is-buehne.is-gewendet .wende__motiv {
    opacity: 0;
  }

  .brief.is-buehne.is-gewendet .wende__brief {
    opacity: 1;
  }

  .brief.is-zeit .wende__zeit::after {
    animation: zeit 2s linear both !important;
  }

  .brief.is-sofort :is(.wende__motiv, .wende__brief) {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .wende__lesen,
  .brief__motiv {
    border: 1px solid ButtonText;
  }

  .wende__zeit::after {
    background: Highlight;
  }
}