/*
 * Öffentliche Webseite katria.app (früher triapp-web.sifa-web.com) (Spec docs/superpowers/specs/2026-10-14-website-design.md).
 *
 * Token-Block: Kopie der Tokens der App aus frontend/src/index.css (ADR 0015), geprüft von
 * frontend/src/test/website.test.ts. Ändert sich ein Token in der App, hier nachziehen. Außerhalb dieses Blocks keine
 * Hex-Farben (einzige Ausnahme: #111214, Rahmen des Logos wie FRAME in logoLegs.ts).
 */
:root {
  --triapp-color-bg: #000000;
  --triapp-color-surface: #1c1c1e;
  --triapp-color-surface-2: #2c2c2e;
  --triapp-color-surface-3: #3a3a3c;
  --triapp-color-separator: rgb(255 255 255 / 0.1);
  --triapp-color-label: #ffffff;
  --triapp-color-secondary: rgb(235 235 245 / 0.6);
  --triapp-color-tertiary: rgb(235 235 245 / 0.3);

  --triapp-color-accent: #0a84ff;
  --triapp-color-accent-fill: #0066d6;
  --triapp-color-accent-text: #64b5ff;
  --triapp-color-success: #30d158;
  --triapp-color-warning: #ff9f0a;
  --triapp-color-caution: #ffd60a;
  --triapp-color-danger: #ff453a;
  --triapp-color-danger-text: #ff6961;

  --triapp-color-swim: #64d2ff;
  --triapp-color-bike: #30d158;
  --triapp-color-run: #ff9f0a;
  --triapp-color-strength: #bf5af2;
  --triapp-color-rest: #8e8e93;
  --triapp-color-sleep: #7d7aff;

  --triapp-color-success-text: #5be07f;
  --triapp-color-warning-text: #ffb340;
  --triapp-color-caution-text: #ffe066;
  --triapp-color-swim-text: #8fddff;
  --triapp-color-bike-text: #5be07f;
  --triapp-color-run-text: #ffb340;
  --triapp-color-strength-text: #d69cff;
  --triapp-color-sleep-text: #b4b2ff;

  --triapp-radius-card: 20px;
  --triapp-radius-group: 18px;
  --triapp-radius-field: 12px;

  --triapp-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  /* Wortmarke Katria (Rebranding-Spec §2.2): Phasenfarben ohne Grün, waagerecht. */
  --triapp-brand-gradient: linear-gradient(90deg, #64d2ff, #7d7aff, #ff9f0a, #ff375f);
  --triapp-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

/* --- Grundlagen ------------------------------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--triapp-color-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--triapp-color-bg);
  color: var(--triapp-color-label);
  font: 17px/1.5 var(--triapp-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Lichtscheine ragen über den Rand; clip statt hidden, damit die senkrechte Richtung frei bleibt. Am body wirkt
   overflow nicht (es geht an den Viewport), darum an main. */
main {
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--triapp-color-accent-text);
}

img,
svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--triapp-color-accent);
  outline-offset: 2px;
}

[id] {
  scroll-margin-top: 96px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--triapp-color-accent-fill);
  color: var(--triapp-color-label);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 16px;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: min(100% - 32px, 1100px);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .container {
    width: min(100% - 48px, 1100px);
  }
}

/* --- Zeichen und Wortmarke ---------------------------------------------------------------------------------------- */

/* Zeichen „Plan zum Ziel“ inline (Hero, Aufruf am Ende): Farben stehen als fill im SVG, Maße aus
   brand/katria-mark.svg. Im Hero wachsen die Balken nacheinander von unten, dann erscheint der Zielpunkt (rund 1 s).
   Nur mit Skript (Klasse js) und ohne reduzierte Bewegung; sonst ist das Zeichen sofort fertig. */
.js .katria--rise rect {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: katria-rise 0.4s ease-out forwards;
}

.js .katria--rise rect:nth-child(2) {
  animation-delay: 0.12s;
}

.js .katria--rise rect:nth-child(3) {
  animation-delay: 0.24s;
}

.js .katria--rise rect:nth-child(4) {
  animation-delay: 0.36s;
}

.js .katria--rise rect:nth-child(5) {
  animation-delay: 0.48s;
}

.js .katria--rise circle {
  opacity: 0;
  animation: katria-goal 0.3s ease-out 0.85s forwards;
}

@keyframes katria-rise {
  to {
    transform: scaleY(1);
  }
}

@keyframes katria-goal {
  to {
    opacity: 1;
  }
}

/* Wortmarke „Katria“: SF Rounded fett mit dem Verlauf der Phasenfarben, immer neben dem Zeichen. */
.wordmark {
  font-family: var(--triapp-font-rounded);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: transparent;
  background-image: var(--triapp-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 10px;
}

.brand__logo {
  border-radius: 7px;
}

/* --- Navigation: schwebende Glas-Kapsel wie die Tab-Leiste der App -------------------------------------------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 12px 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin-inline: auto;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: 999px;
  background: color-mix(in srgb, var(--triapp-color-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav {
    background: var(--triapp-color-surface);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--triapp-color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.nav__links {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.nav__links a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--triapp-color-secondary);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.nav__links a:hover {
  color: var(--triapp-color-label);
  background: var(--triapp-color-surface-2);
}

.nav > .btn {
  margin-left: auto;
}

@media (min-width: 760px) {
  .nav__links {
    display: flex;
  }

  .nav > .btn {
    margin-left: 0;
  }
}

/* --- Knöpfe, Store-Knöpfe, Kapseln ------------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.btn--small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.btn--primary {
  background: var(--triapp-color-accent-fill);
  color: var(--triapp-color-label);
}

.btn--primary:hover {
  filter: brightness(1.12);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bis es Store-Links gibt: neutrale Knöpfe ohne Marken-Badges (Spec §3.6). */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: 14px;
  background: var(--triapp-color-surface-2);
  color: var(--triapp-color-label);
  font-weight: 600;
}

.store .icon {
  width: 24px;
  height: 24px;
  color: var(--triapp-color-secondary);
}

.store__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store__text small {
  color: var(--triapp-color-secondary);
  font-size: 12px;
  font-weight: 500;
}

.capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--triapp-color-surface-2);
  color: var(--triapp-color-label);
  font-size: 13px;
  font-weight: 500;
}

.capsule .icon {
  color: var(--capsule-color, var(--triapp-color-secondary));
}

.capsule--swim {
  --capsule-color: var(--triapp-color-swim);
}

.capsule--bike {
  --capsule-color: var(--triapp-color-bike);
}

.capsule--run {
  --capsule-color: var(--triapp-color-run);
}

.capsule--strength {
  --capsule-color: var(--triapp-color-strength);
}

.capsule--sleep {
  --capsule-color: var(--triapp-color-sleep);
}

/* --- Lichtscheine (wie AmbientGlow der App) ---------------------------------------------------------------------- */

.glow {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 320px;
  border-radius: 50%;
  background: var(--glow-color, var(--triapp-color-accent));
  opacity: 0.18;
  filter: blur(100px);
  pointer-events: none;
}

.glow--swim {
  --glow-color: var(--triapp-color-swim);
}

.glow--bike {
  --glow-color: var(--triapp-color-bike);
}

.glow--run {
  --glow-color: var(--triapp-color-run);
}

.glow--strength {
  --glow-color: var(--triapp-color-strength);
}

.glow--sleep {
  --glow-color: var(--triapp-color-sleep);
}

.glow--accent {
  --glow-color: var(--triapp-color-accent);
}

/* --- Abschnitte ------------------------------------------------------------------------------------------------- */

.section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 10vw, 128px);
  --section-color: var(--triapp-color-accent);
  --section-text: var(--triapp-color-accent-text);
}

.section--swim {
  --section-color: var(--triapp-color-swim);
  --section-text: var(--triapp-color-swim-text);
}

.section--bike {
  --section-color: var(--triapp-color-bike);
  --section-text: var(--triapp-color-bike-text);
}

.section--run {
  --section-color: var(--triapp-color-run);
  --section-text: var(--triapp-color-run-text);
}

.section--strength {
  --section-color: var(--triapp-color-strength);
  --section-text: var(--triapp-color-strength-text);
}

.section--sleep {
  --section-color: var(--triapp-color-sleep);
  --section-text: var(--triapp-color-sleep-text);
}

.eyebrow,
.section__label {
  margin-bottom: 14px;
  color: var(--section-text, var(--triapp-color-accent-text));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section__title {
  font-family: var(--triapp-font-rounded);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section__lead {
  max-width: 34em;
  margin-top: 16px;
  color: var(--triapp-color-secondary);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  text-wrap: pretty;
}

.section__head {
  max-width: 720px;
  margin-bottom: 48px;
}

.split {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .split--flip .split__media {
    order: -1;
  }
}

.split__media {
  display: flex;
  justify-content: center;
}

.dots {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.dots li {
  position: relative;
  padding-left: 22px;
  color: var(--triapp-color-secondary);
}

.dots li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--section-color);
}

.dots strong {
  color: var(--triapp-color-label);
  font-weight: 600;
}

/* --- Karten ----------------------------------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 16px;
}

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  padding: 24px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: var(--triapp-radius-card);
  background: var(--triapp-color-surface);
}

.card h3 {
  margin: 16px 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.card p {
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--icon-color, var(--triapp-color-accent));
  color: var(--triapp-color-bg);
}

.card__icon .icon {
  width: 20px;
  height: 20px;
}

.card__icon--swim {
  --icon-color: var(--triapp-color-swim);
}

.card__icon--bike {
  --icon-color: var(--triapp-color-bike);
}

.card__icon--run {
  --icon-color: var(--triapp-color-run);
}

.card__icon--strength {
  --icon-color: var(--triapp-color-strength);
}

.card__icon--sleep {
  --icon-color: var(--triapp-color-sleep);
}

/* --- Hero ------------------------------------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 8vw, 96px) clamp(48px, 8vw, 80px);
}

.hero__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero__text {
  display: grid;
  justify-items: start;
}

.hero__logo {
  width: 88px;
  height: 88px;
  margin: -12px 0 12px -12px;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--triapp-color-swim) 35%, transparent));
}

.hero__title {
  font-family: var(--triapp-font-rounded);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__title-accent {
  background: linear-gradient(
    90deg,
    var(--triapp-color-swim),
    var(--triapp-color-bike) 55%,
    var(--triapp-color-run)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 30em;
  margin: 24px 0 32px;
  color: var(--triapp-color-secondary);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  text-wrap: pretty;
}

.hero .capsules {
  margin-top: 28px;
}

.glow--hero-1 {
  top: -80px;
  left: -120px;
}

.glow--hero-2 {
  top: 120px;
  right: -140px;
}

.glow--hero-3 {
  bottom: -120px;
  left: 30%;
}

/* --- Schlussaufruf ---------------------------------------------------------------------------------------------- */

.cta__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.cta__inner .section__lead {
  margin-bottom: 32px;
}

.cta .stores {
  justify-content: center;
}

.cta__logo {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 32px color-mix(in srgb, var(--triapp-color-bike) 30%, transparent));
}

.glow--cta-1 {
  top: 10%;
  left: 10%;
}

.glow--cta-2 {
  bottom: 0;
  right: 10%;
}

/* --- Fußzeile --------------------------------------------------------------------------------------------------- */

.footer {
  padding: 32px 0 calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--triapp-color-separator);
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.footer__links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.footer__links a {
  color: var(--triapp-color-secondary);
}

.footer__links a:hover {
  color: var(--triapp-color-label);
}

/* --- Unterseiten (Impressum, 404) ------------------------------------------------------------------------------- */

.page {
  padding-block: clamp(48px, 8vw, 96px);
  min-height: 60vh;
}

.page__inner {
  max-width: 720px;
}

.page--center .page__inner {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.page--center .btn {
  margin-top: 24px;
}

.page__logo {
  margin-bottom: 16px;
}

.page__title {
  font-family: var(--triapp-font-rounded);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.facts {
  display: grid;
  margin-top: 24px;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--triapp-radius-group);
  background: var(--triapp-color-separator);
}

.facts > div {
  padding: 14px 18px;
  background: var(--triapp-color-surface);
}

.facts dt {
  color: var(--triapp-color-secondary);
  font-size: 13px;
}

/* Fließtext einer Unterseite (Datenschutzerklärung): Überschriften, Absätze und Listen mit Abstand. */
.prose h2 {
  margin: 40px 0 8px;
  font-family: var(--triapp-font-rounded);
  font-size: 1.25rem;
}

.prose h3 {
  margin: 24px 0 4px;
  font-size: 1rem;
}

.prose p,
.prose ul {
  margin: 0 0 12px;
  color: var(--triapp-color-secondary);
  line-height: 1.6;
}

.prose ul {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 6px;
}

.prose strong {
  color: var(--triapp-color-label);
}

.prose a {
  color: var(--triapp-color-accent-text);
}

.prose .stand {
  margin-top: 40px;
  font-size: 13px;
}

/* --- Einblenden beim Scrollen ----------------------------------------------------------------------------------- */

/* Versteckt nur, wenn main.js lief (Klasse js); ohne Skript ist alles sofort sichtbar. */
.js .reveal {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .js .katria--rise rect,
  .js .katria--rise circle {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* --- Geräte: nachgebaute Bildschirme der App (Spec §3.3) -------------------------------------------------------
   Maße relativ zur Gerätebreite: 1em im Bildschirm = 13 px bei 300 px Breite (Container-Einheiten), so schrumpft
   das Gerät auf schmalen Bildschirmen als Ganzes. Beispieldaten sind erfunden. */

.device {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 300 / 620;
  flex: none;
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(150deg, var(--triapp-color-surface-3), var(--triapp-color-surface) 45%);
  box-shadow:
    0 0 0 1px var(--triapp-color-separator),
    0 40px 80px -30px color-mix(in srgb, var(--triapp-color-bg) 90%, transparent);
  container-type: inline-size;
}

.device__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 3.6em 1.1em 0;
  border-radius: 38px;
  background: var(--triapp-color-bg);
  color: var(--triapp-color-label);
  font-size: 4.6cqw;
  line-height: 1.3;
  isolation: isolate;
}

/* Lichtschein oben im Bildschirm, Farbe aus der Ansicht (wie AmbientGlow der App). */
.device__screen::before {
  content: "";
  position: absolute;
  top: -4em;
  left: 10%;
  z-index: -1;
  width: 80%;
  height: 12em;
  border-radius: 50%;
  background: var(--screen-glow, var(--triapp-color-run));
  opacity: 0.22;
  filter: blur(3em);
}

.device__status {
  position: absolute;
  top: 1.05em;
  left: 2em;
  font-size: 0.95em;
  font-weight: 600;
}

.device__island {
  position: absolute;
  top: 0.8em;
  left: 50%;
  width: 7.2em;
  height: 2.1em;
  border-radius: 999px;
  background: var(--triapp-color-bg);
  transform: translateX(-50%);
}

.device__avatar {
  position: absolute;
  top: 3.4em;
  right: 1.1em;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--triapp-color-surface-2);
  font-size: 0.8em;
  font-weight: 600;
}

.device__title {
  font-family: var(--triapp-font-rounded);
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.device__sub {
  margin-bottom: 0.9em;
  color: var(--triapp-color-secondary);
  font-size: 0.85em;
}

.device__stack {
  display: grid;
  gap: 0.6em;
}

.device__tabbar {
  position: absolute;
  right: 1em;
  bottom: 1em;
  left: 1em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2em;
  padding: 0.3em;
  border: 1px solid var(--triapp-color-separator);
  border-radius: 999px;
  background: color-mix(in srgb, var(--triapp-color-surface-2) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.device__tab {
  display: grid;
  justify-items: center;
  gap: 0.1em;
  padding: 0.35em 0;
  border-radius: 999px;
  color: var(--triapp-color-secondary);
  font-size: 0.65em;
  font-weight: 500;
}

.device__tab .icon {
  width: 1.9em;
  height: 1.9em;
}

.device__tab--active {
  background: var(--triapp-color-surface-3);
  color: var(--triapp-color-label);
}

.screen--today {
  --screen-glow: var(--triapp-color-run);
}

.screen--plan {
  --screen-glow: var(--triapp-color-sleep);
}

.screen--session {
  --screen-glow: var(--triapp-color-bike);
}

.screen--stats {
  --screen-glow: var(--triapp-color-swim);
}

.screen--food {
  --screen-glow: var(--triapp-color-bike);
}

/* Bausteine im Gerät */

.d-card {
  padding: 0.85em;
  border-radius: 1.35em;
  background: var(--triapp-color-surface);
}

.d-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.d-muted {
  color: var(--triapp-color-secondary);
  font-size: 0.8em;
}

.d-small {
  font-size: 0.75em;
}

.d-label {
  color: var(--triapp-color-secondary);
  font-size: 0.75em;
}

.d-value {
  font-family: var(--triapp-font-rounded);
  font-size: 1.25em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.d-value small {
  margin-left: 0.15em;
  color: var(--triapp-color-secondary);
  font-family: var(--triapp-font-sans);
  font-size: 0.6em;
  font-weight: 500;
}

.d-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--triapp-color-separator);
}

.d-foot {
  margin-top: 0.6em;
  color: var(--triapp-color-secondary);
  font-size: 0.7em;
}

.d-good {
  color: var(--triapp-color-success-text);
  font-weight: 600;
}

.d-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--triapp-color-surface-2);
  color: var(--triapp-color-secondary);
  font-size: 0.7em;
  font-weight: 500;
}

.d-capsule .icon {
  width: 1.2em;
  height: 1.2em;
}

.d-capsule--sleep {
  background: color-mix(in srgb, var(--triapp-color-sleep) 20%, transparent);
  color: var(--triapp-color-sleep-text);
}

.d-capsule--done {
  background: none;
  color: var(--triapp-color-success-text);
}

/* Ring: SVG mit Umfang 100 (r = 15.9155), Füllstand als stroke-dasharray im Markup. */
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.4em;
  height: 4.4em;
  flex: none;
}

.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.ring__track {
  stroke: color-mix(in srgb, var(--ring-color) 22%, transparent);
}

.ring__value {
  stroke: var(--ring-color);
}

.ring__label {
  font-family: var(--triapp-font-rounded);
  font-size: 1.35em;
  font-weight: 700;
}

.ring--small {
  width: 2.9em;
  height: 2.9em;
}

.ring--small .ring__label {
  font-size: 0.85em;
}

.ring--bike {
  --ring-color: var(--triapp-color-bike);
}

.ring--sleep {
  --ring-color: var(--triapp-color-sleep);
}

.ring--run {
  --ring-color: var(--triapp-color-run);
}

.ring--swim {
  --ring-color: var(--triapp-color-swim);
}

.ring--strength {
  --ring-color: var(--triapp-color-strength);
}

/* Sportkreis mit Symbol (SportBadge, solid: Symbol schwarz) */
.badge {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  border-radius: 50%;
  background: var(--sport-color, var(--triapp-color-rest));
  color: var(--triapp-color-bg);
}

.badge .icon {
  width: 1.25em;
  height: 1.25em;
}

.badge--rest {
  background: none;
  color: var(--triapp-color-secondary);
}

.sport--swim {
  --sport-color: var(--triapp-color-swim);
  --sport-text: var(--triapp-color-swim-text);
}

.sport--bike {
  --sport-color: var(--triapp-color-bike);
  --sport-text: var(--triapp-color-bike-text);
}

.sport--run {
  --sport-color: var(--triapp-color-run);
  --sport-text: var(--triapp-color-run-text);
}

.sport--strength {
  --sport-color: var(--triapp-color-strength);
  --sport-text: var(--triapp-color-strength-text);
}

/* Einheitskarte (SessionCard, groß) */
.session__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6em;
}

.session__label {
  color: var(--triapp-color-secondary);
  font-size: 0.75em;
}

.session__title {
  font-size: 1.05em;
  font-weight: 600;
}

.session__duration {
  margin-top: 0.3em;
  color: var(--sport-text);
  font-family: var(--triapp-font-rounded);
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.1;
}

.session__duration small {
  margin-left: 0.2em;
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Hinweis der Readiness (getönt Orange) */
.d-hint {
  padding: 0.75em 0.85em;
  border: 1px solid color-mix(in srgb, var(--triapp-color-warning) 35%, transparent);
  border-radius: 1.35em;
  background: color-mix(in srgb, var(--triapp-color-warning) 14%, transparent);
  color: var(--triapp-color-warning-text);
  font-size: 0.8em;
}

.d-hint strong {
  display: block;
  color: var(--triapp-color-label);
}

/* Segmentierte Auswahl (Woche | Monat) */
.d-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.8em;
  padding: 0.2em;
  border-radius: 0.75em;
  background: var(--triapp-color-surface);
  font-size: 0.8em;
  text-align: center;
}

.d-segmented span {
  padding: 0.3em;
  border-radius: 0.6em;
  color: var(--triapp-color-secondary);
}

.d-segmented .is-active {
  background: var(--triapp-color-surface-3);
  color: var(--triapp-color-label);
  font-weight: 600;
}

/* Reihe von Balken (Segments: Sportmix, Phasen, Fortschritt) */
.segments {
  display: flex;
  gap: 0.25em;
  margin: 0.55em 0 0.45em;
}

.segments__item {
  height: 0.3em;
  flex: var(--weight, 1);
  border-radius: 999px;
  background: var(--sport-color, var(--triapp-color-surface-3));
}

.w1 {
  --weight: 1;
}

.w2 {
  --weight: 2;
}

.w3 {
  --weight: 3;
}

.w4 {
  --weight: 4;
}

/* Tagesliste in der Woche */
.d-days {
  display: grid;
  gap: 0.2em;
}

.d-day {
  display: grid;
  grid-template-columns: 2.1em 2.2em 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.4em;
  border-radius: 1em;
}

.d-day--today {
  background: var(--triapp-color-surface);
}

.d-day__date {
  color: var(--triapp-color-secondary);
  font-size: 0.7em;
  line-height: 1.1;
  text-align: center;
}

.d-day__date b {
  display: block;
  color: var(--triapp-color-label);
  font-family: var(--triapp-font-rounded);
  font-size: 1.6em;
}

.d-day__title {
  font-size: 0.9em;
  font-weight: 600;
}

.d-day__meta {
  color: var(--triapp-color-secondary);
  font-size: 0.75em;
}

.d-day__meta em {
  color: var(--triapp-color-success-text);
  font-style: normal;
}

.d-day__check {
  color: var(--triapp-color-success-text);
}

.d-center {
  text-align: center;
}

/* --- Geräte im Hero ---------------------------------------------------------------------------------------------- */

.hero__devices {
  display: grid;
  justify-items: center;
}

.hero__devices .device {
  grid-area: 1 / 1;
}

.hero__devices .device--back {
  display: none;
}

@media (min-width: 600px) {
  .hero__devices .device--front {
    transform: translateX(-16%);
  }

  .hero__devices .device--back {
    display: block;
    z-index: -1;
    opacity: 0.85;
    transform: translate(30%, -5%) rotate(5deg) scale(0.9);
  }
}

.d-row > .ring--small {
  margin-left: auto;
}

/* --- Geräte in den Abschnitten ---------------------------------------------------------------------------------- */

.ring--danger {
  --ring-color: var(--triapp-color-danger);
}

.d-bad {
  color: var(--triapp-color-danger-text);
  font-weight: 600;
}

.d-heading {
  margin: 0.9em 0 0.4em;
  font-size: 0.85em;
  font-weight: 600;
}

/* Intensitätsprofil: Balken je Schritt, Höhe nach Zone, Breite nach Dauer */
.profile {
  display: flex;
  align-items: flex-end;
  gap: 0.15em;
  height: 4.6em;
  margin: 0.6em 0 0.2em;
}

.profile__bar {
  flex: var(--weight, 1);
  height: 20%;
  border-radius: 0.3em 0.3em 0.1em 0.1em;
  background: color-mix(in srgb, var(--sport-color) 45%, transparent);
}

.profile__bar.z2 {
  height: 38%;
}

.profile__bar.z3 {
  height: 58%;
}

.profile__bar.z4 {
  height: 82%;
  background: var(--sport-color);
}

.profile__bar.z5 {
  height: 100%;
  background: var(--sport-color);
}

/* Blöcke einer Einheit als Zeitleiste */
.d-steps {
  display: grid;
  gap: 0.5em;
  margin-top: 0.4em;
}

.d-step {
  display: grid;
  grid-template-columns: 0.25em 1fr auto;
  gap: 0.6em;
  align-items: center;
  font-size: 0.8em;
}

.d-step::before {
  content: "";
  align-self: stretch;
  border-radius: 999px;
  background: var(--sport-color);
}

.d-step__meta {
  color: var(--triapp-color-secondary);
}

/* Anpassen: Eingabe als Blase, Antwort des Coaches als Karte */
.d-bubble {
  justify-self: end;
  max-width: 85%;
  padding: 0.6em 0.85em;
  border-radius: 1.2em 1.2em 0.3em 1.2em;
  background: var(--triapp-color-accent-fill);
  font-size: 0.85em;
}

.d-coach {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.5em;
  color: var(--triapp-color-sleep-text);
  font-size: 0.75em;
  font-weight: 600;
}

.d-change {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 0.6em;
  align-items: center;
  padding: 0.45em 0;
  border-top: 1px solid var(--triapp-color-separator);
  font-size: 0.85em;
}

.d-change .badge {
  font-size: 0.85em;
}

.d-change__meta {
  color: var(--triapp-color-secondary);
  font-size: 0.85em;
}

.d-change__meta del {
  color: var(--triapp-color-danger-text);
}

.d-change__meta ins {
  color: var(--triapp-color-warning-text);
  text-decoration: none;
}

.d-button {
  display: block;
  margin-top: 0.7em;
  padding: 0.6em;
  border-radius: 999px;
  background: var(--triapp-color-accent-fill);
  font-size: 0.85em;
  font-weight: 600;
  text-align: center;
}

/* Säulen (Umfang je Woche) */
.d-columns {
  display: flex;
  align-items: flex-end;
  gap: 0.4em;
  height: 5em;
  margin-top: 0.6em;
}

.d-columns span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--triapp-color-swim) 45%, transparent);
}

.d-columns span:last-child {
  background: var(--triapp-color-swim);
}

.h40 {
  --h: 40%;
}

.h55 {
  --h: 55%;
}

.h65 {
  --h: 65%;
}

.h70 {
  --h: 70%;
}

.h80 {
  --h: 80%;
}

.h90 {
  --h: 90%;
}

.d-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}

.d-tile__name {
  font-size: 0.75em;
  font-weight: 600;
}

.d-tile__name--swim {
  color: var(--triapp-color-swim-text);
}

.d-tile__name--bike {
  color: var(--triapp-color-bike-text);
}

.d-tile__name--run {
  color: var(--triapp-color-run-text);
}

.d-tile__name--success {
  color: var(--triapp-color-success-text);
}

.sparkline {
  width: 100%;
  height: 2.2em;
  margin-top: 0.3em;
  overflow: visible;
}

.sparkline polyline {
  fill: none;
  stroke: var(--triapp-color-bike);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sparkline circle {
  fill: var(--triapp-color-bike);
}

/* Essen: Makro-Ringe und Mahlzeiten */
.d-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  margin-top: 0.7em;
  text-align: center;
}

.d-macros .ring {
  margin: 0 auto 0.2em;
}

.d-meal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.5em 0;
  border-top: 1px solid var(--triapp-color-separator);
  font-size: 0.85em;
}

.d-meal:first-of-type {
  border-top: 0;
}

/* --- Verbindungen ----------------------------------------------------------------------------------------------- */

.connections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 760px) {
  .connections--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .connections--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.connections__group {
  margin: 0 0 14px;
  color: var(--triapp-color-secondary);
  font-size: 15px;
  font-weight: 600;
}

.connections + .connections__group {
  margin-top: 36px;
}

.connection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Quelle noch nicht gebaut (Nachtrag 2026-10-14): Kapsel "Bald", fällt beim Livegang der Quelle weg. */
.soon {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--triapp-color-caution) 16%, transparent);
  color: var(--triapp-color-caution-text);
  font-size: 12px;
  font-weight: 600;
}

.connection {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: var(--triapp-radius-group);
  background: var(--triapp-color-surface);
}

.connection__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--triapp-color-surface-3);
  color: var(--triapp-color-label);
}

.connection h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.connection p {
  color: var(--triapp-color-secondary);
  font-size: 14px;
}

/* Lichtscheine seitlich an Abschnitten */
.glow--side-l {
  top: 15%;
  left: -180px;
}

.glow--side-r {
  top: 15%;
  right: -180px;
}

/* --- Preise ----------------------------------------------------------------------------------------------------- */

.prices {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .prices {
    grid-template-columns: 1fr 1fr;
  }
}

.price {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: var(--triapp-radius-card);
  background: var(--triapp-color-surface);
}

.price--pro {
  border-color: color-mix(in srgb, var(--triapp-color-accent) 35%, transparent);
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--triapp-color-accent) 16%, transparent),
      transparent 60%
    ),
    var(--triapp-color-surface);
}

.price__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price h3 {
  font-family: var(--triapp-font-rounded);
  font-size: 24px;
  font-weight: 700;
}

.price__tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--triapp-color-accent) 20%, transparent);
  color: var(--triapp-color-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.price__amount {
  font-family: var(--triapp-font-rounded);
  font-size: 32px;
  font-weight: 700;
}

.price__amount small {
  display: block;
  color: var(--triapp-color-secondary);
  font-family: var(--triapp-font-sans);
  font-size: 15px;
  font-weight: 400;
}

.checks {
  display: grid;
  gap: 10px;
}

.checks li {
  display: flex;
  gap: 10px;
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

.checks .icon {
  margin-top: 0.15em;
  color: var(--triapp-color-success-text);
}

.price--pro .checks .icon {
  color: var(--triapp-color-accent-text);
}

.price__text {
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

.prices__note {
  margin-top: 20px;
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

/* --- Einrichtung ------------------------------------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: 16px;
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  padding: 24px;
  border: 1px solid var(--triapp-color-separator);
  border-radius: var(--triapp-radius-card);
  background: var(--triapp-color-surface);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--triapp-color-surface-2);
  color: var(--triapp-color-label);
  font-family: var(--triapp-font-rounded);
  font-size: 20px;
  font-weight: 700;
}

.step h3 {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 600;
}

.step p {
  color: var(--triapp-color-secondary);
  font-size: 15px;
}

/* --- Datenschutz ------------------------------------------------------------------------------------------------ */

.privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-weight: 600;
  text-decoration: none;
}

.privacy-link:hover {
  text-decoration: underline;
}

.card__big {
  margin-top: 8px;
  color: var(--triapp-color-label);
  font-family: var(--triapp-font-rounded);
  font-size: 28px;
  font-weight: 700;
}