.aufgabe {
  padding: calc(84px + env(safe-area-inset-top)) 1rem calc(1.25rem + env(safe-area-inset-bottom));
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2.5vh, 1.75rem);
  display: flex;
  position: absolute;
  inset: 0;
}

.aufgabe__frage {
  color: var(--farbe-haupt-text);
  font-family: var(--schrift-titel);
  text-align: center;
  max-width: none;
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
}

.aufgabe__satz {
  color: var(--farbe-haupt-text);
  font-family: var(--schrift-titel);
  text-align: center;
  text-wrap: balance;
  max-width: none;
  margin: 0;
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  display: none;
}

.aufgabe__satz--sichtbar {
  display: block;
}

.karte {
  width: var(--karte);
  aspect-ratio: 1;
  background: #fff;
  border: 0;
  border-radius: 18px;
  flex: none;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 4px #00000040, 0 12px 24px -10px #0000008c;
}

.karte img {
  box-sizing: border-box;
  object-fit: contain;
  pointer-events: none;
  width: 100%;
  height: 100%;
  padding: 4%;
  display: block;
}

button.karte {
  cursor: pointer;
  transition: transform .2s var(--uebergang), box-shadow .2s var(--uebergang);
}

button.karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px #00000040, 0 22px 36px -12px #0009;
}

button.karte:focus-visible {
  outline: 6px solid var(--farbe-honig);
  outline-offset: 4px;
}

.oben {
  --karte: min(34vh, 60vw, 22rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  display: flex;
}

.oben--paar {
  --karte: min(34vh, 42vw, 20rem);
}

.auswahl {
  justify-content: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  display: flex;
}

.auswahl--2 {
  --karte: min(26vh, 40vw, 18rem);
}

.auswahl--3 {
  --karte: min(24vh, 28vw, 16rem);
}

.weiter {
  background: var(--farbe-honig);
  min-height: clamp(72px, 11vh, 96px);
  color: var(--farbe-text);
  animation: weiter-erscheint .6s var(--uebergang);
  padding-inline: 2.4em;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
}

.weiter:hover {
  color: var(--farbe-text);
  background: #ecc46e;
}

.weiter:disabled {
  opacity: 1;
  cursor: default;
}

@keyframes weiter-erscheint {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (any-pointer: fine) {
  .mit-maus-hilfe .aufgabe {
    padding-bottom: calc(10rem + env(safe-area-inset-bottom));
  }
}

@media (any-pointer: fine) and (width >= 48rem) {
  .mit-maus-hilfe .aufgabe {
    padding-inline: 11.5rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .weiter {
    animation: none;
  }

  button.karte {
    transition: none;
  }
}