/* ==================================================
   RESET / VARIABLEN
================================================== */

* {
  box-sizing: border-box;
}


:root {

  --page-bg: #f5f5f7;

  --surface: #ffffff;
  --surface-soft: #eceef1;

  --text: #1d1d1f;
  --muted: #77777d;

  --accent: #527fa8;
  --accent-soft: #edf3f8;

  --border: rgba(0, 0, 0, 0.065);

  --fallback-start: #202124;
  --fallback-end: #303236;

  --shadow:
    0 20px 55px rgba(20, 30, 45, 0.08),
    0 3px 12px rgba(20, 30, 45, 0.04);

  --card-radius: 30px;

}


/* ==================================================
   DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  :root {

    --page-bg: #101113;

    --surface: #1c1d20;
    --surface-soft: #27282c;

    --text: #f5f5f7;
    --muted: #9d9fa6;

    --accent: #81a9d0;
    --accent-soft: #202d39;

    --border: rgba(255, 255, 255, 0.075);

    --fallback-start: #242529;
    --fallback-end: #34363b;

    --shadow:
      0 22px 60px rgba(0, 0, 0, 0.24),
      0 3px 12px rgba(0, 0, 0, 0.15);

  }

}


/* ==================================================
   VIEWPORT
================================================== */

html {

  width: 100%;
  height: 100%;

  -webkit-text-size-adjust: 100%;

}


body {

  width: 100%;
  height: 100vh;
  height: 100dvh;

  margin: 0;

  overflow: hidden;

  overscroll-behavior: none;

  background: var(--page-bg);

  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

}


/* ==================================================
   APP
================================================== */

.flashcards-app {

  width: min(100%, 720px);

  height: 100vh;
  height: 100dvh;

  margin: 0 auto;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));

  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;

  gap: clamp(9px, 1.7dvh, 16px);

}


/* ==================================================
   HEADER
================================================== */

.app-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}


.app-title {

  min-width: 0;

}


.app-title h1 {

  margin: 0;

  font-size:
    clamp(1.8rem, 5vw, 2.75rem);

  line-height: .98;

  font-weight: 700;

  letter-spacing: -.055em;

}


.app-title p {

  margin:
    6px
    0
    0;

  color: var(--muted);

  font-size:
    clamp(.78rem, 2vw, .93rem);

}


/* ==================================================
   SPRACHRICHTUNG
================================================== */

button {

  font: inherit;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

}


.direction-button {

  min-width: 112px;
  min-height: 44px;

  padding:
    7px
    12px;

  border:
    1px solid
    var(--border);

  border-radius: 999px;

  background: var(--surface);

  color: var(--text);

  box-shadow:
    0 1px 4px rgba(0, 0, 0, .035);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  cursor: pointer;

}


.direction-button:active {

  transform: scale(.98);

}


.direction-flag {

  font-size: 1.25rem;

  line-height: 1;

}


.direction-arrow {

  min-width: 18px;

  color: var(--muted);

  font-size: 1rem;

  font-weight: 650;

  text-align: center;

}


/* ==================================================
   PROGRESS
================================================== */

.progress {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 13px;

}


.progress-track {

  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background: var(--surface-soft);

}


.progress-fill {

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: var(--accent);

  transition:
    width .24s ease;

}


.progress-label {

  min-width: 55px;

  color: var(--muted);

  font-size: .8rem;

  font-weight: 600;

  text-align: right;

}


/* ==================================================
   STAGE
================================================== */

.study-stage {

  position: relative;

  min-height: 0;

  display: grid;

  place-items: center;

}


/* ==================================================
   STATUS
================================================== */

.status-message {

  color: var(--muted);

  font-size: .92rem;

  text-align: center;

}


.status-message:empty {

  display: none;

}


/* ==================================================
   STAPEL
================================================== */

.card-stack {

  position: relative;

  width: min(100%, 570px);

  height: min(100%, 630px);

  min-height: 0;

  perspective: 1400px;

}


.stack-card {

  position: absolute;

  inset: 0;

  border:
    1px solid
    var(--border);

  border-radius: var(--card-radius);

  background: var(--surface);

  pointer-events: none;

  transition:
    transform .28s ease,
    opacity .28s ease;

}


/* voller Stapel */

.card-stack[data-stack-state="full"]
.stack-card--1 {

  transform:
    translateY(9px)
    scale(.985);

  opacity: .76;

}


.card-stack[data-stack-state="full"]
.stack-card--2 {

  transform:
    translateY(18px)
    scale(.968);

  opacity: .42;

}


/* mittlerer Stapel */

.card-stack[data-stack-state="mid"]
.stack-card--1 {

  transform:
    translateY(7px)
    scale(.989);

  opacity: .62;

}


.card-stack[data-stack-state="mid"]
.stack-card--2 {

  transform:
    translateY(12px)
    scale(.978);

  opacity: .24;

}


/* kleiner Stapel */

.card-stack[data-stack-state="low"]
.stack-card--1 {

  transform:
    translateY(6px)
    scale(.992);

  opacity: .38;

}


.card-stack[data-stack-state="low"]
.stack-card--2 {

  opacity: 0;

}


/* letzte Karte */

.card-stack[data-stack-state="single"]
.stack-card {

  opacity: 0;

}


/* ==================================================
   KARTE
================================================== */

.flashcard {

  position: absolute;

  inset: 0;

  z-index: 3;

  border-radius: var(--card-radius);

  user-select: none;

  -webkit-user-select: none;

  cursor: pointer;

  touch-action:
    pan-y
    pinch-zoom;

  transform:
    translate3d(0, 0, 0);

  opacity: 1;

  will-change:
    transform,
    opacity;

}


.flashcard:focus-visible {

  outline:
    3px solid
    rgba(82, 127, 168, .38);

  outline-offset: 5px;

}


/* ==================================================
   3D FLIP
================================================== */

.flashcard-inner {

  position: relative;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  transform-style: preserve-3d;

  transition:
    transform .34s
    cubic-bezier(.2, .72, .24, 1);

}


.flashcard.is-flipped
.flashcard-inner {

  transform:
    rotateY(180deg);

}


/* ==================================================
   VORDER- / RÜCKSEITE
================================================== */

.flashcard-face {

  position: absolute;

  inset: 0;

  overflow: hidden;

  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  border:
    1px solid
    var(--border);

  border-radius: inherit;

  background: var(--surface);

  box-shadow: var(--shadow);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}


.flashcard-back {

  transform:
    rotateY(180deg);

}


/* ==================================================
   BILD
================================================== */

.card-visual {

  position: relative;

  min-height: 0;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      var(--fallback-start),
      var(--fallback-end)
    );

}


.card-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  pointer-events: none;

  transition: opacity .18s ease;
}

.flashcard.has-image .card-image {
  opacity: 1;
}

.image-fallback {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      145deg,
      var(--fallback-start),
      var(--fallback-end)
    );

  opacity: 1;
  visibility: visible;

  transition:
    opacity .18s ease,
    visibility .18s ease;
}

.flashcard.has-image .image-fallback {
  opacity: 0;
  visibility: hidden;
}

/* ==================================================
   TEXT
================================================== */

.card-copy {

  min-height: 118px;

  padding:
    clamp(17px, 2.8dvh, 30px)
    clamp(18px, 5vw, 38px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.card-term {

  max-width: 100%;

  font-size:
    clamp(1.55rem, 5vw, 2.3rem);

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -.045em;

  overflow-wrap: anywhere;

}


.first-hint {

  margin-top: 11px;

  color: var(--muted);

  font-size: .76rem;

}


.card-example {

  max-width: 470px;

  margin-top: 10px;

  color: var(--muted);

  font-size:
    clamp(.82rem, 2.5vw, .98rem);

  line-height: 1.45;

}


/* ==================================================
   SWIPE FEEDBACK
================================================== */

.swipe-feedback {

  position: absolute;

  top: 16px;

  z-index: 8;

  padding:
    7px
    10px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .88);

  color: #45484d;

  font-size: .76rem;

  font-weight: 650;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .1s linear;

}


.swipe-feedback--again {

  left: 15px;

}


.swipe-feedback--known {

  right: 15px;

}


@media (prefers-color-scheme: dark) {

  .swipe-feedback {

    background:
      rgba(28, 29, 32, .88);

    color: #e3e3e6;

  }

}


/* ==================================================
   BUTTONS
================================================== */

.answer-controls {

  width:
    min(100%, 390px);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 9px;

}


.answer-button {

  min-height: 43px;

  padding:
    8px
    14px;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background: var(--surface);

  color: var(--muted);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  font-size: .85rem;

  font-weight: 600;

  cursor: pointer;

  transition:
    opacity .18s ease,
    transform .18s ease,
    background-color .18s ease;

}


.answer-button--known {

  background: var(--accent-soft);

  color: var(--accent);

}


.answer-button:disabled {

  opacity: .28;

  cursor: default;

}


.answer-button:not(:disabled):active {

  transform: scale(.98);

}


/* ==================================================
   ABSCHLUSS
================================================== */

.finished-card {

  width:
    min(100%, 520px);

  padding:
    clamp(30px, 6vw, 50px);

  border:
    1px solid
    var(--border);

  border-radius: var(--card-radius);

  background: var(--surface);

  box-shadow: var(--shadow);

  text-align: center;

}


.finished-card h2 {

  margin: 0;

  font-size:
    clamp(1.6rem, 5vw, 2.2rem);

  letter-spacing: -.04em;

}


.finished-card p {

  margin:
    8px
    0
    22px;

  color: var(--muted);

}


.restart-button {

  min-height: 42px;

  padding:
    8px
    17px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background: var(--surface-soft);

  color: var(--text);

  font-weight: 600;

  cursor: pointer;

}


/* ==================================================
   KLEINE DISPLAYHÖHEN
================================================== */

@media (max-height: 720px) {

  .flashcards-app {

    padding-top:
      max(10px, env(safe-area-inset-top));

    padding-bottom:
      max(9px, env(safe-area-inset-bottom));

    gap: 8px;

  }


  .app-title h1 {

    font-size: 1.7rem;

  }


  .app-title p {

    margin-top: 3px;

  }


  .card-copy {

    min-height: 98px;

    padding:
      13px
      18px;

  }


  .answer-button {

    min-height: 39px;

  }

}


/* ==================================================
   SEHR KLEINE DISPLAYHÖHEN
================================================== */

@media (max-height: 600px) {

  .app-title p {

    display: none;

  }


  .app-title h1 {

    font-size: 1.45rem;

  }


  .direction-button {

    min-height: 38px;

  }


  .progress-track {

    height: 3px;

  }


  .card-copy {

    min-height: 84px;

    padding:
      10px
      16px;

  }


  .card-term {

    font-size:
      clamp(1.25rem, 4vw, 1.7rem);

  }


  .card-example {

    margin-top: 6px;

    font-size: .78rem;

  }


  .answer-button {

    min-height: 36px;

    padding-block: 5px;

  }

}


/* ==================================================
   QUERFORMAT AUF KLEINEN GERÄTEN
================================================== */

@media
  (orientation: landscape)
  and (max-height: 560px) {

  .flashcard-face {

    grid-template-columns:
      minmax(0, 44%)
      minmax(0, 56%);

    grid-template-rows:
      1fr;

  }


  .card-copy {

    min-height: 0;

    padding:
      12px
      22px;

  }


  .card-term {

    font-size:
      clamp(1.2rem, 3vw, 1.75rem);

  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 420px) {

  .flashcards-app {

    padding-left:
      max(11px, env(safe-area-inset-left));

    padding-right:
      max(11px, env(safe-area-inset-right));

  }


  .direction-button {

    min-width: 102px;

    padding-inline: 10px;

  }


  .direction-flag {

    font-size: 1.15rem;

  }


  .card-copy {

    padding-left: 16px;
    padding-right: 16px;

  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

  }

}

/* ==================================================
   COOKIE-BANNER
================================================== */

#cookie-banner {
  position: fixed;

  left: 50%;
  bottom:
    max(
      14px,
      env(safe-area-inset-bottom)
    );

  z-index: 9999;

  width:
    min(
      calc(100% - 24px),
      560px
    );

  transform: translateX(-50%);

  padding: 16px;

  border:
    1px solid
    rgba(0, 0, 0, 0.08);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 14px 40px
    rgba(20, 25, 35, 0.14);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  color: #1d1d1f;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  display: none;
}


/* ==================================================
   TEXT
================================================== */

#cookie-banner p {
  margin: 0;

  color: #6e6e73;

  font-size: 0.82rem;
  line-height: 1.5;
}


#cookie-banner a {
  color: inherit !important;

  text-decoration: underline;

  text-underline-offset: 2px;
}


/* ==================================================
   BUTTONS
================================================== */

.cookie-buttons {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 13px;
}


.cookie-buttons button {
  min-height: 38px;

  padding:
    7px
    14px;

  border-radius: 12px;

  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


/* ABLEHNEN */

#decline-cookies {
  border:
    1px solid
    rgba(0, 0, 0, 0.08);

  background: #f2f2f4;

  color: #6e6e73;
}


/* ZUSTIMMEN */

#accept-cookies {
  border:
    1px solid
    rgba(65, 116, 165, 0.15);

  background: #edf3f8;

  color: #4f7fae;
}


.cookie-buttons button:active {
  transform: scale(0.98);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 480px) {

  #cookie-banner {
    width:
      calc(100% - 20px);

    padding: 14px;

    border-radius: 16px;
  }


  #cookie-banner p {
    font-size: 0.78rem;
  }


  .cookie-buttons {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 7px;
  }


  .cookie-buttons button {
    width: 100%;

    min-height: 40px;
  }

}


/* ==================================================
   DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  #cookie-banner {
    border-color:
      rgba(255, 255, 255, 0.08);

    background:
      rgba(28, 29, 32, 0.96);

    box-shadow:
      0 16px 45px
      rgba(0, 0, 0, 0.35);

    color: #f5f5f7;
  }


  #cookie-banner p {
    color: #a1a1a6;
  }


  #decline-cookies {
    border-color:
      rgba(255, 255, 255, 0.08);

    background: #28292d;

    color: #a9abb1;
  }


  #accept-cookies {
    border-color:
      rgba(129, 169, 208, 0.16);

    background: #202d39;

    color: #81a9d0;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .cookie-buttons button {
    transition: none;
  }

}

/* ==================================================
   MOBILE + TABLET
   Buttons ausblenden
================================================== */

@media (max-width: 1024px) {

  .answer-controls {
    display: none !important;
  }

}

:root {
  --swipe-again-bg: rgba(190, 65, 65, 0.26);
  --swipe-known-bg: rgba(55, 150, 90, 0.26);
}

@media (prefers-color-scheme: dark) {
  :root {
    --swipe-again-bg: rgba(230, 85, 85, 0.35);
    --swipe-known-bg: rgba(85, 195, 120, 0.35);
  }
}

.flashcard.is-swipe-again .flashcard-face {
  background:
    linear-gradient(
      var(--swipe-again-bg),
      var(--swipe-again-bg)
    ),
    var(--surface);
}

.flashcard.is-swipe-known .flashcard-face {
  background:
    linear-gradient(
      var(--swipe-known-bg),
      var(--swipe-known-bg)
    ),
    var(--surface);
}