/* ============================================================================
   Selbst-Checks: Aufbau beim Scrollen, Tiefe und weiche Bedienung
   08.08.2026 (Dirk)

   Bis hierher standen die Check-Seiten still da: alles war sofort sichtbar,
   nichts hob sich ab, und beim Zeigen auf Knoepfe passierte kaum etwas. Die
   Startseite kann das laengst. Dieser Baustein zieht die acht Check-Seiten auf
   denselben Stand, ohne acht Dateien einzeln anzufassen.

   Aufbau: wie auf der Startseite in beide Richtungen. Wer zurueckscrollt, sieht
   die Bausteine erneut kommen.
   Tiefe: Karten liegen als eigene Ebene ueber der Flaeche und heben sich beim
   Zeigen leicht an.
   Bedienung: Uebergaenge laufen weicher aus statt hart umzuspringen.

   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt alles
   sofort und ohne Bewegung. Das ist kein Zusatz, sondern Pflicht.
   ============================================================================ */

:root {
  --sc-weich: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  --sc-schnell: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 0 Sicherheitsnetz --------------------------------------------
   Die Kacheln der Uebersicht tragen aus der Vergangenheit die Klasse reveal,
   deren Skript nur auf der Startseite laeuft. Ohne diese Regel blieben sie
   unsichtbar, wenn hier etwas schiefgeht. Sichtbarkeit hat Vorrang. */
.tool.reveal, .tool.reveal-left, .tool.reveal-right, .tool.reveal-scale {
  opacity: 1;
  transform: none;
}

/* ---------- 1 Aufbau beim Scrollen ---------------------------------------
   Der Ausgangszustand wird erst gesetzt, wenn das Skript laeuft (Klasse
   sc-bereit am html-Element). Ohne Javascript bleibt alles sichtbar. */
.sc-bereit [data-sc-auf] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity var(--sc-weich), transform var(--sc-weich);
  will-change: opacity, transform;
}
.sc-bereit [data-sc-auf].ist-da {
  opacity: 1;
  transform: none;
}
/* Gestaffelt, damit Gruppen nicht auf einen Schlag erscheinen. */
.sc-bereit [data-sc-auf][data-sc-takt="1"] { transition-delay: 0.06s; }
.sc-bereit [data-sc-auf][data-sc-takt="2"] { transition-delay: 0.12s; }
.sc-bereit [data-sc-auf][data-sc-takt="3"] { transition-delay: 0.18s; }
.sc-bereit [data-sc-auf][data-sc-takt="4"] { transition-delay: 0.24s; }

/* ---------- 2 Tiefe -------------------------------------------------------
   Karten bekommen einen zweistufigen Schatten: ein enger, dunkler Kern fuer
   die Kante und ein weiter, weicher Schein fuer den Abstand zur Flaeche. */
.card,
.mess-card,
.hinweis-card,
.einstufung-card,
.chart-card,
.notfall-card,
.tab-card,
.wert-box,
.bd-legende {
  box-shadow:
    0 1px 2px rgba(28, 49, 37, 0.06),
    0 10px 26px rgba(28, 49, 37, 0.07);
  transition: transform var(--sc-weich), box-shadow var(--sc-weich);
}
.card:hover,
.mess-card:hover,
.hinweis-card:hover,
.einstufung-card:hover,
.chart-card:hover,
.notfall-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(28, 49, 37, 0.07),
    0 22px 46px rgba(28, 49, 37, 0.13);
}

/* Die Kacheln der Check-Auswahl heben sich deutlicher an, sie sind Knoepfe. */
.tab-card {
  transition: transform var(--sc-weich), box-shadow var(--sc-weich), border-color var(--sc-weich);
}
.tab-card:hover,
.tab-card:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 2px 5px rgba(28, 49, 37, 0.08),
    0 26px 54px rgba(28, 49, 37, 0.16);
}
.tab-card:hover .tab-arrow { transform: translateX(4px); }
.tab-card .tab-arrow { transition: transform var(--sc-weich); }

/* ---------- 3 Weiche Bedienung -------------------------------------------
   Vorher sprangen Farben hart um. Jetzt laufen sie aus, wie auf der
   Startseite bei den Leistungen. */
button,
.cta,
.cta-druck,
.q-opt,
.wert-input,
a.btn,
a.cta {
  transition:
    background-color var(--sc-weich),
    border-color var(--sc-weich),
    color var(--sc-weich),
    box-shadow var(--sc-weich),
    transform var(--sc-schnell);
}
.cta:hover,
.cta-druck:hover,
a.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(42, 74, 56, 0.22);
}
.cta:active,
.cta-druck:active,
a.cta:active { transform: translateY(0); }

/* Antwortknoepfe der Fragebogen: ruhiges Anheben statt hartem Umschlagen. */
.q-opt:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 49, 37, 0.10); }
.q-opt:active { transform: translateY(0); }

/* Eingabefelder bekommen beim Tippen einen weichen Rahmen statt eines Sprungs. */
.wert-input:focus {
  box-shadow: 0 0 0 4px rgba(42, 74, 56, 0.12);
}

/* ---------- 4 Ruhe fuer empfindliche Augen -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sc-bereit [data-sc-auf] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card, .mess-card, .hinweis-card, .einstufung-card, .chart-card,
  .notfall-card, .tab-card, button, .cta, .cta-druck, .q-opt, a.cta {
    transition: none !important;
  }
  .card:hover, .mess-card:hover, .hinweis-card:hover, .einstufung-card:hover,
  .chart-card:hover, .notfall-card:hover, .tab-card:hover,
  .cta:hover, .cta-druck:hover, a.cta:hover, .q-opt:hover {
    transform: none !important;
  }
}

/* ---------- 5 Druck -------------------------------------------------------
   Auf Papier gibt es keine Bewegung und keine Schatten. */
@media print {
  .sc-bereit [data-sc-auf] { opacity: 1 !important; transform: none !important; }
  .card, .mess-card, .hinweis-card, .einstufung-card, .chart-card,
  .notfall-card, .tab-card, .wert-box, .bd-legende { box-shadow: none !important; }
}


/* ---------- 6 Einheit hinter der grossen Zahl ----------------------------
   Jahre, cm und kg standen bisher winzig und ineinandergeschoben hinter der
   Zahl. Grund war der enge Buchstabenabstand der grossen Ziffern, der als
   fertige Pixelangabe an das kleine Element weitergereicht wird.

   Die Groesse wird relativ zur Zahl gesetzt. So bleibt das Verhaeltnis
   stimmig, egal wie gross die Zahl auf dem jeweiligen Geraet steht. */
.age-display sub,
.big-num sub,
.mid-num sub {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.30em;
  font-weight: 500;
  letter-spacing: 0.01em;      /* der geerbte enge Wert wird aufgehoben */
  word-spacing: normal;
  vertical-align: baseline;
  color: var(--muted, #676E68);
  margin-left: 0.30em;
  line-height: 1;
  white-space: nowrap;
}
/* Die mittelgrossen Zahlen tragen die Einheit etwas kraeftiger, sie stehen
   in kleineren Kaesten und wuerden sonst verschwinden. */
.mid-num sub { font-size: 0.34em; }

@media (max-width: 520px) {
  .age-display sub, .big-num sub, .mid-num sub { font-size: 0.32em; }
}


/* ===== Bedienelemente aller Checks (09.08.2026, Dirk) ======================
   Derselbe Effekt wie bei den Leistungen auf der Startseite: der Untergrund
   laeuft weich ins Praxisgruen, die Schrift wird hell, das Element hebt sich
   an. Vorher war alles flach.

   Die Klassen sind je Check verschieden, deshalb die lange Liste. Sie wurde
   im Browser ausgelesen, nicht geraten. */
.ziel-btn, .opt-btn, .opt, .g-opt, .ort-opt, .gender-opt, .smoker-opt,
.vac-opt, .extra-opt, .mode-btn, .time-btn, .preset, .step-btn, .wert-step,
.chip, .reg-toggle, .quiet-toggle {
  transition:
    background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color     0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color            0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow       0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform        0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  html body .ziel-btn:hover,
  html body .opt-btn:hover,
  html body .opt:hover,
  html body .g-opt:hover,
  html body .ort-opt:hover,
  html body .gender-opt:hover,
  html body .smoker-opt:hover,
  html body .vac-opt:hover,
  html body .extra-opt:hover,
  html body .mode-btn:hover,
  html body .time-btn:hover,
  html body .preset:hover,
  html body .chip:hover {
    background-color: var(--forest, #2A4A38);
    border-color: var(--forest, #2A4A38);
    color: var(--cream, #F8F5EE);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(42, 74, 56, 0.24);
  }
  /* Auch die Beschriftung innerhalb wird hell, sonst bleibt sie dunkel
     auf gruenem Grund stehen. */
  html body .ziel-btn:hover *,
  html body .opt-btn:hover *,
  html body .opt:hover *,
  html body .vac-opt:hover *,
  html body .extra-opt:hover *,
  html body .chip:hover * {
    color: var(--cream, #F8F5EE);
    border-color: rgba(248, 245, 238, 0.5);
  }

  /* Kleine Schrittknoepfe heben sich nur an, ohne Farbwechsel. Sie stehen
     dicht beieinander, ein Farbsprung waere dort unruhig. */
  html body .wert-step:hover,
  html body .step-btn:hover,
  html body .reg-toggle:hover,
  html body .quiet-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(28, 49, 37, 0.14);
    border-color: var(--forest, #2A4A38);
  }

  html body .ziel-btn:active, html body .opt-btn:active, html body .opt:active,
  html body .chip:active, html body .wert-step:active, html body .step-btn:active {
    transform: translateY(0);
  }
}

/* Eine getroffene Wahl bleibt sichtbar, auch wenn der Zeiger darauf steht.
   Sonst waere nicht mehr zu erkennen, was gewaehlt ist. */
html body .opt.ist-aktiv, html body .opt[aria-pressed="true"], html body .opt.aktiv,
html body .opt-btn[aria-pressed="true"], html body .ziel-btn[aria-pressed="true"],
html body .chip[aria-pressed="true"] {
  background-color: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
}

@media (prefers-reduced-motion: reduce) {
  .ziel-btn, .opt-btn, .opt, .g-opt, .ort-opt, .gender-opt, .smoker-opt,
  .vac-opt, .extra-opt, .mode-btn, .time-btn, .preset, .step-btn, .wert-step,
  .chip, .reg-toggle, .quiet-toggle { transition: none !important; }
  html body .ziel-btn:hover, html body .opt-btn:hover, html body .opt:hover,
  html body .chip:hover, html body .wert-step:hover, html body .step-btn:hover {
    transform: none !important;
  }
}