/* Tierfreunde retten die Welt — shared resets, fonts, keyframes */

@font-face {
  font-family: 'Cherry Bomb One';
  src: url('/assets/Fonts/CherryBombOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Patrick Hand';
  src: url('/assets/Fonts/PatrickHand-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #D0FFA1;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Patrick Hand', cursive;
  color: #1c2b18;
  /* long unbroken German compound words (e.g. "Erziehungsberechtigte")
     otherwise overflow their card at narrow widths and get visually cut
     off by the card's overflow:hidden — this makes every text element
     wrap gracefully instead, inherited site-wide from one place */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* headings/titles wrap onto a new line as whole words, never hyphenated -
   overflow-wrap stays as a last-resort safety net so a single very long
   unbroken compound word (e.g. "Datenschutzerklärung") still can't overflow
   its container, but without ever inserting a visible hyphen mark */
h1, h2, h3, h4, h5, h6, .tf-heading-wrap {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

a {
  color: #006118;
}

a:hover {
  color: #EB8B87;
}

button {
  font-family: 'Patrick Hand', cursive;
}

/* ---------- keyframes ---------- */

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes typeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes eyebrowSubIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes eyebrowIn {
  from { opacity: 0; letter-spacing: .5em; }
  to { opacity: .999; letter-spacing: .22em; }
}

@keyframes ruleIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes subIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes rotateHintTilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

/* ---------- interactive hover / focus states ---------- */
/* (kept separate from inline styles only because plain CSS/JS has no per-node
   style-hover mechanism; everything else stays inline per the design spec) */

.tf-nav-link {
  background: rgba(255, 255, 255, .6);
  color: #006118;
}
.tf-nav-link:hover {
  background: #FFFFFF;
  color: #EB8B87;
}
.tf-nav-link.is-active {
  background: #FFFFFF;
  color: #EB8B87;
}

.tf-footer-link:hover {
  color: #EB8B87;
}

.tf-btn-primary:hover {
  background: #EB8B87 !important;
  color: #FFFFFF !important;
}

.tf-btn-outline:hover {
  background: #D0FFA1 !important;
}

.tf-underline-link {
  text-decoration: none;
  border-bottom: 3px dashed rgba(0, 97, 24, .5);
}

.tf-animal-btn:hover .tf-animal-img {
  transform: scale(1.06) rotate(-1.5deg);
}

.tf-close-btn:hover {
  background: #EB8B87 !important;
  color: #FFFFFF !important;
}

.tf-speaker-btn:hover {
  background: #004912 !important;
}

.tf-confirm-cancel:hover {
  background: #F1FFE0 !important;
}

.tf-confirm-yes:hover {
  background: #d97671 !important;
}

.tf-result-btn:hover {
  background: #D0FFA1 !important;
}

.tf-answer-btn:not(.is-chosen):hover {
  transform: translateY(-2px);
}

.tf-form-input:focus,
.tf-form-textarea:focus {
  outline: none;
  border-color: #006118 !important;
}

.tf-dropdown-option:hover {
  background: #006118 !important;
  color: #FFFFFF !important;
}

.tf-scroll-hint svg {
  animation: floaty 2.6s ease-in-out infinite;
}

#finalFalseBtn:hover {
  background: #EB8B87 !important;
  color: #FFFFFF !important;
}

#finalTrueBtn:hover {
  background: #006118 !important;
  color: #FFFFFF !important;
}

/* ---------- mobile nav (hamburger) ---------- */

.tf-nav-burger {
  display: none;
}

@media (max-width: 680px) {
  .tf-nav-links {
    display: none !important;
  }
  .tf-nav-burger {
    display: flex !important;
  }

  #quizOverlay,
  #finalQuizOverlay {
    padding: calc(var(--quiz-scale, 1) * 3.6cqh) 2.4cqw calc(var(--quiz-scale, 1) * 2.4cqh) !important;
    align-items: stretch !important;
  }
  .tf-quiz-card {
    display: flex !important;
    flex-direction: column !important;
    max-width: 99cqw !important;
    max-height: 100%;
    padding: calc(var(--quiz-scale, 1) * 3.2cqh) calc(var(--quiz-scale, 1) * 2.8cqh) calc(var(--quiz-scale, 1) * 2.6cqh) !important;
  }
  .tf-quiz-card > div:nth-child(2) {
    margin-bottom: calc(var(--quiz-scale, 1) * 1.3cqh) !important;
  }
  #replayAudioBtn,
  #finalReplayBtn {
    width: calc(var(--quiz-scale, 1) * 5.6cqh) !important;
    height: calc(var(--quiz-scale, 1) * 5.6cqh) !important;
  }
  #quizQuestion,
  #finalQuestionText {
    font-size: calc(var(--quiz-scale, 1) * 4cqh) !important;
    line-height: 1.1 !important;
  }
  #answerList {
    flex: 1;
    min-height: 0;
    gap: calc(var(--quiz-scale, 1) * 1cqh) !important;
    overflow-y: auto;
  }
  .tf-answer-btn {
    padding: calc(var(--quiz-scale, 1) * 1.7cqh) calc(var(--quiz-scale, 1) * 2.2cqh) !important;
    min-height: calc(var(--quiz-scale, 1) * 8cqh) !important;
    font-size: calc(var(--quiz-scale, 1) * 3.6cqh) !important;
    border-radius: calc(var(--quiz-scale, 1) * 2.4cqh) !important;
    gap: calc(var(--quiz-scale, 1) * 1.8cqh) !important;
  }
  .tf-answer-btn > span:first-child {
    width: calc(var(--quiz-scale, 1) * 5.4cqh) !important;
    height: calc(var(--quiz-scale, 1) * 5.4cqh) !important;
    font-size: calc(var(--quiz-scale, 1) * 3cqh) !important;
  }
  .tf-quiz-choice-btn {
    padding: calc(var(--quiz-scale, 1) * 2.8cqh) calc(var(--quiz-scale, 1) * 2cqh) !important;
  }
  .tf-quiz-choice-btn svg {
    width: calc(var(--quiz-scale, 1) * 7.4cqh) !important;
    height: calc(var(--quiz-scale, 1) * 7.4cqh) !important;
  }
  .tf-quiz-choice-btn span {
    font-size: calc(var(--quiz-scale, 1) * 3.4cqh) !important;
  }
}

/* short-height rotated/fullscreen phones: cqh shrinks with the container's
   height, so the mobile bump above isn't enough once the phone is on its side */
@media (orientation: landscape) and (max-height: 500px) {
  #subtitleBtn {
    font-size: 3.4cqh !important;
  }
  .tf-close-btn {
    padding: 1.6cqh 3cqw !important;
    font-size: 3.6cqh !important;
  }
  .tf-close-btn svg {
    width: 4cqh !important;
    height: 4cqh !important;
  }
  .tf-story-meta {
    font-size: 3.2cqh !important;
  }
  .tf-quiz-card {
    max-width: min(150cqh, 90cqw) !important;
    padding: calc(var(--quiz-scale, 1) * 3.6cqh) calc(var(--quiz-scale, 1) * 3.2cqh) calc(var(--quiz-scale, 1) * 3cqh) !important;
  }
  #quizBadge,
  #finalBadge {
    font-size: calc(var(--quiz-scale, 1) * 3.2cqh) !important;
  }
  .tf-quiz-card > div:nth-child(2) {
    align-items: center !important;
  }
  #replayAudioBtn,
  #finalReplayBtn {
    width: calc(var(--quiz-scale, 1) * 13cqh) !important;
    height: calc(var(--quiz-scale, 1) * 13cqh) !important;
  }
  #quizQuestion,
  #finalQuestionText {
    font-size: calc(var(--quiz-scale, 1) * 8.8cqh) !important;
  }
  .tf-answer-btn {
    padding: calc(var(--quiz-scale, 1) * 2.6cqh) calc(var(--quiz-scale, 1) * 2.8cqh) !important;
    min-height: calc(var(--quiz-scale, 1) * 16cqh) !important;
    font-size: calc(var(--quiz-scale, 1) * 6.4cqh) !important;
    border-radius: calc(var(--quiz-scale, 1) * 2.6cqh) !important;
    gap: calc(var(--quiz-scale, 1) * 2.2cqh) !important;
  }
  .tf-answer-btn > span:first-child {
    width: calc(var(--quiz-scale, 1) * 10cqh) !important;
    height: calc(var(--quiz-scale, 1) * 10cqh) !important;
    font-size: calc(var(--quiz-scale, 1) * 5.4cqh) !important;
  }
  .tf-quiz-choice-btn {
    padding: calc(var(--quiz-scale, 1) * 3cqh) calc(var(--quiz-scale, 1) * 2.2cqh) !important;
  }
  .tf-quiz-choice-btn svg {
    width: calc(var(--quiz-scale, 1) * 11cqh) !important;
    height: calc(var(--quiz-scale, 1) * 11cqh) !important;
  }
  .tf-quiz-choice-btn span {
    font-size: calc(var(--quiz-scale, 1) * 4.8cqh) !important;
  }

  .tf-player-ctrl-btn {
    width: 10.5cqh !important;
    height: 10.5cqh !important;
  }
  #playPauseBtn.tf-player-ctrl-btn {
    width: 12.5cqh !important;
    height: 12.5cqh !important;
  }
  .tf-player-volume-slider {
    width: 13cqw !important;
  }
}

/* bigger, more legible captions on desktop and rotated/landscape phones —
   mobile portrait keeps its own (already-tuned) size from the inline style */
@media (orientation: landscape), (min-width: 821px) {
  .tf-subtitle-text {
    font-size: 4.4cqh !important;
  }
}

.tf-nav-mobile-menu a:hover {
  background: #006118 !important;
  color: #FFFFFF !important;
}

.tf-nav-mobile-menu a.is-active {
  background: #F1FFE0;
  color: #EB8B87;
}

/* story video always uses object-fit: contain (set inline) so it fits
   fully within the frame at any viewport without ever cropping.
   #rotateHint's visibility is timed via JS (home.js), not CSS, since it
   should only flash briefly rather than stay pinned on screen. */