:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --app-header-height: 96px;

  --color-bg: #141414;
  --color-surface: #1f1f1f;
  --color-surface-dark: #0f0f0f;
  --color-border: #2f2f2f;

  --color-text: #ffffff;
  --color-text-muted: #c7c7c7;
  --color-text-soft: #b8b8b8;

  --color-primary: #0cbae6;
  --color-secondary: #444444;
  --color-disabled-text: #999999;

  --status-idle-bg: #bec3ca;
  --status-idle-border: #919397;
  --status-idle-text: #344054;

  --status-waiting-bg: #fff4e5;
  --status-waiting-border: #fdb022;
  --status-waiting-text: #b54708;

  --status-playing-bg: #8eeeb6;
  --status-playing-border: #85f0b7;
  --status-playing-text: #027a48;

  --status-paused-manual-bg: #eef4ff;
  --status-paused-manual-border: #a4bcfd;
  --status-paused-manual-text: #3538cd;

  --status-paused-rule-bg: #fef3f2;
  --status-paused-rule-border: #fda29b;
  --status-paused-rule-text: #b42318;

  --status-finished-bg: #f8f9fc;
  --status-finished-border: #d0d5dd;
  --status-finished-text: #101828;

  --zone-0: #9ca3af;
  --zone-1: #3b82f6;
  --zone-2: #22c55e;
  --zone-3: #eab308;
  --zone-4: #f97316;
  --zone-5: #ef4444;
}

/* Share-Zentrale in der Trainingshistorie: kompakt, klar und checkPulse-typisch. */
.training-history-social-actions .training-history-share-menu {
  position: relative;
  border: 1px solid rgba(44, 211, 224, .48) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0 0, rgba(41, 213, 224, .16), transparent 44%),
    linear-gradient(145deg, rgba(7, 35, 42, .98), rgba(6, 19, 24, .98)) !important;
  box-shadow: inset 3px 0 0 #28d7e2, 0 10px 24px rgba(0, 0, 0, .2) !important;
}

.training-history-social-actions .training-history-share-menu > summary {
  justify-content: flex-start !important;
  min-height: 62px !important;
  padding: 10px 14px 10px 13px !important;
  text-align: left;
}

.training-history-share-mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(59, 224, 232, .48);
  border-radius: 50%;
  color: #5cf2e4;
  background: rgba(13, 72, 80, .54);
  box-shadow: 0 0 18px rgba(34, 211, 222, .18);
  font-size: 1.2rem;
  font-weight: 950;
}

.training-history-share-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.training-history-share-heading small {
  color: #49dce6;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .13em;
  line-height: 1.1;
}

.training-history-share-heading strong {
  color: #f2fbfc;
  font-size: 1rem;
  line-height: 1.15;
}

.training-history-share-chevron {
  margin-left: auto;
  color: #55e6e9;
  font-size: 1rem;
}

.training-history-share-menu[open] .training-history-share-chevron { transform: rotate(180deg); }

.training-history-social-actions .training-history-share-options {
  gap: 8px !important;
  padding: 2px 10px 11px !important;
}

.training-history-social-actions .training-history-share-options button {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 58px !important;
  padding: 8px 9px !important;
  align-items: center;
  text-align: left;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(15, 54, 62, .96), rgba(8, 30, 36, .96)) !important;
}

.training-history-social-actions .training-history-share-options button > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: #58eced;
  background: rgba(37, 190, 204, .14);
  font-size: 1rem;
}

.training-history-social-actions .training-history-share-options button > strong {
  color: #dff9f9;
  font-size: .75rem;
  line-height: 1.15;
}

.training-history-social-actions .training-history-poster-button {
  border-color: rgba(155, 105, 255, .42) !important;
}

.training-history-social-actions .training-history-poster-button > span {
  color: #c194ff;
  background: rgba(137, 84, 238, .16);
}

.training-history-social-actions .training-history-feed-share-button > span {
  color: #67e7aa;
  background: rgba(61, 207, 133, .14);
}

@media (max-width: 560px) {
  .training-history-social-actions .training-history-share-options button {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 52px !important;
  }
  .training-history-social-actions .training-history-share-options button > strong { font-size: .82rem; }
}

/* Aktivierungsablauf: drei ruhige, gleichwertige Schritte mit klarer Aktion. */
@media (min-width: 801px) {
  .activation-step-grid {
    gap: 16px;
  }

  .activation-step-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    min-height: 244px;
    padding: 24px;
    overflow: visible;
    border-color: rgba(41, 211, 234, .28);
    background:
      radial-gradient(circle at 100% 0, rgba(35, 216, 238, .08), transparent 42%),
      linear-gradient(155deg, #0b1c20, #071518);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 16px 36px rgba(0, 0, 0, .2);
  }

  .activation-step-grid article:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -25px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(44, 218, 237, .3);
    border-radius: 50%;
    color: #62e7f3;
    background: #07171a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    content: "›";
    font-size: 1.35rem;
    transform: translateY(-50%);
  }
}

.activation-step-grid article > b {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #16414a, #0c2a31);
  box-shadow: inset 0 0 0 1px rgba(65, 225, 241, .12);
  font-size: 1rem;
}

.activation-step-grid article > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
}

.activation-step-grid article div > span {
  line-height: 1.2;
}

.activation-step-grid h3 {
  margin: 7px 0 10px;
  color: #f7fcfd;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.18;
}

.activation-step-grid p {
  margin: 0 0 20px;
  color: #a9bec2;
  line-height: 1.5;
}

.activation-step-grid article > div > button {
  width: 100%;
  margin-top: auto;
}

.activation-goals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: auto;
}

.activation-goals button {
  position: relative;
  width: 100%;
  min-height: 38px;
  padding: 7px 38px 7px 14px;
  border-color: rgba(42, 210, 230, .24);
  border-radius: 12px;
  color: #cde1e4;
  background: rgba(3, 17, 21, .66);
  text-align: left;
  line-height: 1.15;
}

.activation-goals button::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(109, 225, 237, .48);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.activation-goals button.is-active {
  border-color: #45deed;
  color: #fff;
  background: linear-gradient(135deg, rgba(24, 91, 101, .92), rgba(12, 55, 63, .94));
  box-shadow: inset 3px 0 #4be5f2, 0 8px 18px rgba(17, 174, 195, .12);
}

.activation-goals button.is-active::after {
  border-color: #72f3ff;
  background: #50e5f2;
  box-shadow: 0 0 0 4px rgba(80, 229, 242, .12);
}

@media (max-width: 800px) {
  .activation-step-grid article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 0;
    padding: 20px;
  }

  .activation-step-grid article > div > button,
  .activation-goals {
    margin-top: 14px;
  }
}

/* Freigegebene Anpassung: Portrait-Fullscreen ohne Video.
   Nur Steuerungscluster und optischer Zoom der HF-Kurve. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    position: absolute !important;
    z-index: 10000001 !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn {
    right: 112px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn {
    right: 62px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    right: 12px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle {
    bottom: max(62px, calc(env(safe-area-inset-bottom) + 50px)) !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    width: 200% !important;
    height: 200% !important;
    transform: translate(-25%, -25%) !important;
    transform-origin: center !important;
  }
}

/* ===== USP: PULSBASIERTES PERSOENLICHKEITS-COACHING ===== */
.activation-coach-usp {
  display: grid;
  gap: 22px;
  margin: 18px 0;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(61, 221, 233, .34);
  border-radius: 26px;
  background: radial-gradient(circle at 50% 0, rgba(41, 207, 228, .16), transparent 40%), linear-gradient(145deg, #071a20, #061014 70%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
.activation-coach-usp > header { max-width: 850px; }
.activation-coach-usp > header > span { color: #4de1ed; font-size: .7rem; font-weight: 950; letter-spacing: .17em; }
.activation-coach-usp h2 { margin: 8px 0 10px; font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.07; text-wrap: balance; }
.activation-coach-usp > header p { margin: 0; color: #b6cbce; line-height: 1.58; }
.activation-coach-usp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.activation-coach-usp-grid article { position: relative; min-width: 0; padding: 14px 12px 15px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--usp-coach) 42%, transparent); border-radius: 17px; background: linear-gradient(155deg, color-mix(in srgb, var(--usp-coach) 10%, #07151a), #071217 66%); }
.activation-coach-usp-grid article::before { position: absolute; inset: 0 0 auto; height: 3px; background: var(--usp-coach); content: ""; }
.activation-coach-usp-grid img { display: block; width: 68px; height: 68px; margin: 0 0 10px; border: 2px solid var(--usp-coach); border-radius: 50%; object-fit: cover; object-position: center top; background: #061015; box-shadow: 0 0 20px color-mix(in srgb, var(--usp-coach) 25%, transparent); }
.activation-coach-usp-grid strong, .activation-coach-usp-grid small { display: block; }
.activation-coach-usp-grid strong { color: #f5ffff; font-size: 1rem; }
.activation-coach-usp-grid small { margin-top: 2px; color: var(--usp-coach); font-size: .67rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.activation-coach-usp-grid p { margin: 8px 0 0; color: #9fb5b8; font-size: .73rem; line-height: 1.43; }
.activation-coach-usp-safety { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid rgba(79, 226, 163, .28); border-radius: 13px; color: #bcd1d1; background: rgba(29, 116, 82, .12); font-size: .79rem; line-height: 1.4; }
.activation-coach-usp-safety span { color: #55e6a4; font-size: 1.1rem; }
.activation-coach-usp-safety strong { color: #72edb5; }

.coaching-usp-bridge { padding: clamp(19px, 4vw, 30px); border: 1px solid rgba(44, 219, 236, .45); border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(37, 211, 232, .18), transparent 38%), linear-gradient(145deg, rgba(7, 37, 44, .96), rgba(4, 17, 22, .98)); box-shadow: inset 4px 0 #2dd7e8; }
.coaching-usp-toggle { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.coaching-usp-toggle-copy { display: grid; min-width: 0; }
.coaching-usp-toggle-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(76, 220, 239, .46); border-radius: 50%; color: #67e8f9; background: rgba(31, 190, 232, .08); font-size: 1.55rem; font-weight: 400; line-height: 1; transition: transform .18s ease, color .18s ease, background .18s ease; }
.coaching-usp-toggle[aria-expanded="true"] .coaching-usp-toggle-icon { transform: rotate(45deg); color: #f2ffff; background: rgba(31, 190, 232, .18); }
.coaching-usp-content { padding-top: 15px; border-top: 1px solid rgba(76, 220, 239, .16); margin-top: 14px; }
.coaching-usp-content[hidden] { display: none; }
.coaching-usp-current-coach { display: inline-grid !important; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px !important; width: fit-content; margin: 10px 0 2px !important; padding: 8px 13px 8px 8px; border: 1px solid color-mix(in srgb, var(--usp-selected-coach, #67e8f9) 52%, transparent); border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--usp-selected-coach, #67e8f9) 13%, #07171c), rgba(3, 14, 18, .96)); box-shadow: 0 0 22px color-mix(in srgb, var(--usp-selected-coach, #67e8f9) 14%, transparent); }
.coaching-usp-current-coach img { display: block; width: 58px; height: 58px; border: 2px solid var(--usp-selected-coach, #67e8f9); border-radius: 50%; object-fit: cover; object-position: center top; background: #071116; box-shadow: 0 0 16px color-mix(in srgb, var(--usp-selected-coach, #67e8f9) 27%, transparent); }
.coaching-usp-current-coach > span { display: grid !important; gap: 2px !important; min-width: 0; padding: 0 !important; background: none !important; }
.coaching-usp-current-coach small { color: var(--usp-selected-coach, #67e8f9); font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.coaching-usp-current-coach strong { color: #f5ffff; font-size: 1.03rem; line-height: 1.1; }
.coaching-usp-content h2 { max-width: 800px; margin: 7px 0 9px; font-size: clamp(1.45rem, 4vw, 2.25rem); line-height: 1.08; text-wrap: balance; }
.coaching-usp-content > p { max-width: 820px; margin: 0; color: #b5cccf; line-height: 1.55; }
.coaching-usp-steps { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.coaching-usp-steps span { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 11px; border-radius: 999px; color: #eaffff; background: rgba(255, 255, 255, .055); font-size: .72rem; font-weight: 850; }
.coaching-usp-steps b { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; color: #041518; background: #37dbea; }
.coaching-usp-steps i { color: #4bdfe9; font-style: normal; }
.coaching-progress-info { width: 100%; min-width: 0; margin: 14px 0 0; }
.coaching-progress-info > summary { width: 38px; height: 38px; }
.coaching-progress-info > div { position: static; right: auto; left: auto; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.coaching-progress-info > div > strong { display: block; margin: 7px 0 8px; color: #f4fbfc; font-size: 1.05rem; line-height: 1.25; }
.coaching-progress-info > div > p { margin: 0; color: #b8cccf; line-height: 1.5; }
.coaching-usp-content { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; }
.coaching-usp-content > h2,
.coaching-usp-content > p,
.coaching-usp-content > .coaching-usp-steps { grid-column: 1 / -1; }
.coaching-usp-content > .coaching-progress-info { grid-column: 1; align-self: start; }
.coaching-usp-content > .coaching-progress-info[open] { grid-column: 1 / -1; }
.coaching-usp-content > .gamification-guide { grid-column: 2; align-self: start; margin-top: 14px; }
.coaching-usp-content > .coaching-progress-info[open] + .gamification-guide { grid-column: 1 / -1; }
.haven-premium-boundary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid rgba(241, 197, 80, .32); border-radius: 16px; background: linear-gradient(125deg, rgba(241, 197, 80, .1), rgba(7, 21, 26, .9)); }
.haven-premium-boundary[role="button"] { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.haven-premium-boundary[role="button"]:is(:hover, :focus-visible) { border-color: rgba(241, 197, 80, .72); box-shadow: 0 0 0 2px rgba(241, 197, 80, .12), 0 12px 28px rgba(0, 0, 0, .22); transform: translateY(-1px); outline: none; }
.haven-premium-boundary[role="button"]:active { transform: translateY(0); }
.haven-premium-boundary > span { padding: 7px 9px; border-radius: 999px; color: #161204; background: #e6bd4e; font-size: .58rem; font-weight: 950; letter-spacing: .08em; text-align: center; }
.haven-premium-boundary strong { color: #f3d476; }
.haven-premium-boundary p { margin: 3px 0 0; color: #aebfc1; font-size: .74rem; line-height: 1.4; }

.virtual-coach-reason { display: block; margin: 1px 0 3px; color: var(--coach-accent, #67e8f9); font-size: .52rem; font-style: normal; font-weight: 950; letter-spacing: .09em; line-height: 1.15; text-transform: uppercase; }
.virtual-coach-reason:empty { display: none; }
.coach-behavior-facts { display: grid; gap: 6px; margin: 10px 0 14px; padding: 0; list-style: none; }
.coach-behavior-facts li { position: relative; padding-left: 18px; color: #b7cbcd; font-size: .73rem; line-height: 1.4; }
.coach-behavior-facts li::before { position: absolute; left: 0; color: var(--coach-accent, #53dce9); font-weight: 950; content: "✓"; }
.startup-coach-impact { margin: 6px 0 10px !important; padding: 8px 10px; border-left: 3px solid var(--startup-coach-accent, #45dce9); border-radius: 0 9px 9px 0; color: #c5d9db !important; background: rgba(255, 255, 255, .045); font-size: .7rem !important; line-height: 1.4; }

@media (max-width: 900px) {
  .activation-coach-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activation-coach-usp-grid article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .activation-coach-usp { padding: 18px; border-radius: 20px; }
  .activation-coach-usp-grid { grid-template-columns: 1fr; }
  .activation-coach-usp-grid article, .activation-coach-usp-grid article:last-child { display: grid; grid-column: auto; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 12px; }
  .activation-coach-usp-grid img { width: 56px; height: 56px; margin: 0; }
  .activation-coach-usp-grid p { margin-top: 5px; }
  .coaching-usp-steps { display: grid; grid-template-columns: 1fr; }
  .coaching-usp-steps i { display: none; }
  .coaching-usp-current-coach { grid-template-columns: 50px minmax(0, 1fr) !important; width: 100%; box-sizing: border-box; border-radius: 16px; }
  .coaching-usp-current-coach img { width: 50px; height: 50px; }
  .haven-premium-boundary { grid-template-columns: 1fr; }
  .haven-premium-boundary > span { justify-self: start; }
}

/* Coaching-Erklärung: auch auf schmalen Tablets und Phones vollständig im Viewport. */
@media (max-width: 760px) {
  .challenges-view {
    padding: clamp(9px, 3vw, 14px);
    overflow-x: clip;
  }

  .coaching-usp-bridge {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: clamp(15px, 4vw, 21px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .coaching-usp-content,
  .coaching-usp-content h2,
  .coaching-usp-content > p {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .coaching-usp-content h2 {
    font-size: clamp(1.3rem, 6vw, 1.85rem);
    line-height: 1.12;
  }

  .coaching-usp-steps {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .coaching-usp-steps span {
    width: 100%;
    box-sizing: border-box;
  }

  .coaching-usp-steps i {
    display: none;
  }

  .coaching-progress-info {
    width: 100%;
    min-width: 0;
    margin: 14px 0 0;
  }

  .coaching-progress-info > div {
    position: static;
    right: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 420px) {
  .coaching-usp-toggle {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
  }

  .coaching-usp-toggle-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 560px) {
  .coaching-usp-content { grid-template-columns: 1fr; }
  .coaching-usp-content > .coaching-progress-info,
  .coaching-usp-content > .gamification-guide {
    grid-column: 1;
    width: 100%;
  }
}

/* Story-Item-Fund liegt bewusst über Coach, Mission und Fullscreen-HUD.
   Die fachliche Erfassung bleibt unverändert; nur der kurzzeitige Fundhinweis
   erhält die höchste Informationspriorität. */
.player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen)
  .mission-loot-toast:not([hidden]) {
  z-index: 11000000 !important;
  display: grid !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen)
  .mission-loot-toast.is-visible:not([hidden]) {
  animation: mission-loot-arrival 4.2s ease both !important;
}



/* OHNE VIDEO / PORTRAIT: feste vertikale Bänder ohne Flächenüberschneidung. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    position:absolute !important;z-index:500 !important;top:74px !important;bottom:auto !important;height:62px !important;min-height:62px !important;max-height:62px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:300 !important;top:148px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:92px !important;min-height:92px !important;max-height:92px !important;margin:0 !important;padding:8px !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position:absolute !important;z-index:310 !important;top:252px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-template-rows:42px 46px 46px !important;gap:6px 8px !important;
    width:auto !important;height:146px !important;min-height:146px !important;max-height:146px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position:absolute !important;z-index:400 !important;top:410px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:126px !important;min-height:126px !important;max-height:126px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position:absolute !important;z-index:7000000 !important;top:148px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:92px !important;min-height:92px !important;max-height:92px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
}

/* Hochformat-Fullscreen OHNE Video: stabile, kollisionsfreie Endgeometrie.
   Bewusst nach allen historischen Regeln und strikt auf diesen Modus begrenzt. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --no-video-edge: max(12px, env(safe-area-inset-left));
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    z-index: 300 !important;
    top: 124px !important;
    right: var(--no-video-edge) !important;
    bottom: auto !important;
    left: var(--no-video-edge) !important;
    width: auto !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position: absolute !important;
    z-index: 310 !important;
    top: 230px !important;
    right: var(--no-video-edge) !important;
    bottom: auto !important;
    left: var(--no-video-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 42px 46px 46px !important;
    gap: 6px 8px !important;
    width: auto !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel article {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid {
    display: contents !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid article {
    grid-row: 2 !important;
    height: 46px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    height: 46px !important;
  }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    z-index: 400 !important;
    top: 386px !important;
    right: var(--no-video-edge) !important;
    bottom: auto !important;
    left: var(--no-video-edge) !important;
    width: auto !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position: absolute !important;
    z-index: 10000000 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 66px)) !important;
    left: var(--no-video-edge) !important;
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
    height: 48px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    position: absolute !important;
    z-index: 10000000 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: var(--no-video-edge) !important;
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
    height: 48px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    z-index: 7000000 !important;
    top: 124px !important;
    right: var(--no-video-edge) !important;
    bottom: auto !important;
    left: var(--no-video-edge) !important;
    width: auto !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

/* ABSCHLIESSENDE OHNE-VIDEO-GEOMETRIE — muss am Dateiende bleiben. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --no-video-final-edge: max(12px, env(safe-area-inset-left));
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:300 !important;top:124px !important;
    right:var(--no-video-final-edge) !important;bottom:auto !important;left:var(--no-video-final-edge) !important;
    width:auto !important;height:96px !important;min-height:96px !important;max-height:96px !important;
    margin:0 !important;padding:8px !important;box-sizing:border-box !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position:absolute !important;z-index:310 !important;top:230px !important;
    right:var(--no-video-final-edge) !important;bottom:auto !important;left:var(--no-video-final-edge) !important;
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:42px 46px 46px !important;gap:6px 8px !important;
    width:auto !important;height:146px !important;min-height:146px !important;max-height:146px !important;
    margin:0 !important;padding:0 !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel article {
    position:static !important;inset:auto !important;margin:0 !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale {
    grid-column:1/-1 !important;grid-row:1 !important;width:100% !important;height:42px !important;min-height:42px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid {display:contents !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid article {grid-row:2 !important;height:46px !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target {
    grid-column:1/-1 !important;grid-row:3 !important;height:46px !important;
  }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position:absolute !important;z-index:400 !important;top:386px !important;
    right:var(--no-video-final-edge) !important;bottom:auto !important;left:var(--no-video-final-edge) !important;
    width:auto !important;height:126px !important;min-height:126px !important;max-height:126px !important;
    margin:0 !important;box-sizing:border-box !important;overflow:hidden !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position:absolute !important;z-index:10000000 !important;top:auto !important;right:auto !important;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 66px)) !important;left:var(--no-video-final-edge) !important;
    width:166px !important;min-width:166px !important;max-width:166px !important;height:48px !important;margin:0 !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    position:absolute !important;z-index:10000000 !important;top:auto !important;right:auto !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;left:var(--no-video-final-edge) !important;
    width:166px !important;min-width:166px !important;max-width:166px !important;height:48px !important;margin:0 !important;transform:none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position:absolute !important;z-index:7000000 !important;top:124px !important;
    right:var(--no-video-final-edge) !important;bottom:auto !important;left:var(--no-video-final-edge) !important;
    width:auto !important;height:96px !important;min-height:96px !important;max-height:96px !important;
    margin:0 !important;box-sizing:border-box !important;overflow:hidden !important;transform:none !important;
  }
}

/* Trainingssteuerung bleibt in jeder Fullscreen-Variante das oberste
   bedienbare Element. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn {
  z-index: 10000000 !important;
  pointer-events: auto !important;
}

/* FINAL: Portrait-Fullscreen ohne Video. Keine dieser Regeln trifft die
   eingefrorene Videoansicht. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --portrait-edge: max(12px, env(safe-area-inset-left));
    overflow: hidden !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #player,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .local-cast-poster { display:none !important; }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-banner {
    position:absolute !important;top:12px !important;right:auto !important;left:var(--portrait-edge) !important;
    width:174px !important;max-width:174px !important;height:38px !important;min-height:38px !important;
    padding:5px 8px !important;box-sizing:border-box !important;overflow:hidden !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle {
    position:absolute !important;top:12px !important;width:42px !important;height:42px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn{right:12px !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status{right:62px !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle{right:112px !important}

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position:absolute !important;top:62px !important;bottom:auto !important;width:calc((100% - 42px)/4) !important;
    min-width:0 !important;max-width:none !important;height:52px !important;padding:6px !important;
    box-sizing:border-box !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric{left:var(--portrait-edge) !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric{display:flex !important;left:calc(var(--portrait-edge) + ((100% - 42px)/4) + 6px) !important;margin:0 !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric{left:calc(var(--portrait-edge) + (((100% - 42px)/4)*2) + 12px) !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button{
    z-index:10000000 !important;top:auto !important;right:auto !important;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 66px)) !important;
    left:max(12px,env(safe-area-inset-left)) !important;width:166px !important;
    min-width:166px !important;max-width:166px !important;height:48px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;top:124px !important;right:var(--portrait-edge) !important;bottom:auto !important;left:var(--portrait-edge) !important;
    width:auto !important;max-width:none !important;height:100px !important;min-height:100px !important;max-height:100px !important;
    padding:10px !important;box-sizing:border-box !important;grid-template-rows:minmax(0,1fr) !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown{display:none !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line{width:100% !important;height:100% !important;min-height:0 !important}

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position:absolute !important;z-index:6000003 !important;top:auto !important;right:var(--portrait-edge) !important;
    bottom:calc(51% + 8px) !important;left:var(--portrait-edge) !important;width:auto !important;
    height:126px !important;min-height:126px !important;max-height:126px !important;
    padding:10px 40px 8px 12px !important;box-sizing:border-box !important;overflow:hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector {
    position:fixed !important;z-index:6000004 !important;top:auto !important;right:auto !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;left:max(12px,env(safe-area-inset-left)) !important;
    display:flex !important;align-items:center !important;gap:7px !important;width:150px !important;min-width:150px !important;max-width:150px !important;
    height:62px !important;min-height:62px !important;max-height:62px !important;padding:8px 53px !important;
    box-sizing:border-box !important;overflow-x:auto !important;overflow-y:hidden !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector::before{content:none !important;display:none !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector .zone-legend-label{flex:0 0 38px !important;width:38px !important;min-width:38px !important;height:38px !important;min-height:38px !important}

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    z-index:10000000 !important;right:var(--portrait-edge) !important;bottom:max(82px,calc(env(safe-area-inset-bottom) + 76px)) !important;
    left:auto !important;width:166px !important;min-width:166px !important;max-width:166px !important;height:48px !important;transform:none !important;
  }
}

/* Portrait-Fullscreen OHNE Video: übernimmt die Geometrie der eingefrorenen
   Videoansicht. Sämtliche Selektoren verlangen ausdrücklich
   .is-no-video-training und können die Videoansicht daher nicht verändern. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --portrait-edge: max(12px, env(safe-area-inset-left));
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    display: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #player,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .local-cast-poster {
    display: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-banner {
    position: absolute !important;
    top: 12px !important;
    right: auto !important;
    left: var(--portrait-edge) !important;
    width: 174px !important;
    max-width: 174px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle {
    position: absolute !important;
    top: 12px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn { right: 12px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status { right: 62px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle { right: 112px !important; }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position: absolute !important;
    top: 62px !important;
    bottom: auto !important;
    width: calc((100% - 42px) / 4) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric { left: var(--portrait-edge) !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {
    display: flex !important;
    left: calc(var(--portrait-edge) + ((100% - 42px) / 4) + 6px) !important;
    margin: 0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    left: calc(var(--portrait-edge) + (((100% - 42px) / 4) * 2) + 12px) !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    right: var(--portrait-edge) !important;
    left: auto !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: 234px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    max-width: none !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown {
    display: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    z-index: 6000003 !important;
    top: auto !important;
    right: var(--portrait-edge) !important;
    bottom: calc(51% + 8px) !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 10px 40px 8px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector {
    position: fixed !important;
    z-index: 6000004 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    /* Die Reihe beginnt direkt links mit Z0. Seitliches Center-Padding hatte
       vor der ersten Kachel eine scheinbar leere Zone erzeugt. */
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector::before {
    content: none !important;
    display: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector .zone-legend-label {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    z-index: 10000000 !important;
    right: var(--portrait-edge) !important;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px)) !important;
    left: auto !important;
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
    height: 48px !important;
    transform: none !important;
  }
}

/* Ohne-Video-Fullscreen: Elternkoordinatensystem und Kopfzeile endgültig
   normalisieren. Muss ganz am Dateiende stehen. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position: absolute !important;
    top: 62px !important;
    bottom: auto !important;
    width: calc((100% - 42px) / 4) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {
    right: auto !important;
    left: var(--portrait-edge) !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {
    right: auto !important;
    left: calc(var(--portrait-edge) + ((100% - 42px) / 4) + 6px) !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    right: auto !important;
    left: calc(var(--portrait-edge) + (((100% - 42px) / 4) * 2) + 12px) !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    right: var(--portrait-edge) !important;
    left: auto !important;
  }
}

/* Ohne Video, Portrait: feste vertikale Reihenfolge ohne Zustands-Sprünge.
   HF -> Zonenwahl/Trainingswerte -> Mission -> freie Fläche -> Steuerung. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: 124px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position: absolute !important;
    top: 234px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    top: 390px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position: absolute !important;
    z-index: 10000000 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 66px)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
    height: 48px !important;
    transform: none !important;
  }
}

.activation-promise-highlight {
  color: #23d8ee;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(35, 216, 238, 0.2);
}

.activation-journey span .activation-promise-highlight {
  display: inline;
  color: #23d8ee;
}

.activation-steps h2 strong {
  color: #23d8ee;
  font-weight: 950;
  text-shadow: 0 0 18px rgba(35, 216, 238, 0.22);
}

.activation-detail-accordion {
  max-width: 920px;
  margin: 0 auto 34px;
  overflow: hidden;
  border: 1px solid rgba(38, 206, 230, 0.25);
  border-radius: 17px;
  background: #091619;
}

.activation-detail-accordion > summary {
  padding: 18px 21px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.activation-detail-accordion-content {
  padding: 0 18px 20px;
}

.activation-detail-accordion-content > .activation-primary {
  display: block;
  margin: 18px auto 0;
}

.activation-network-privacy {
  display: block;
  margin-top: 10px;
  color: #78949a;
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: center;
}

#activationNetworkCta:disabled {
  opacity: 0.65;
  cursor: wait;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  padding-top: calc(var(--app-header-height) + env(safe-area-inset-top));
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% 15%, rgba(31, 191, 232, 0.22), transparent 34%),
    radial-gradient(circle at 20% 90%, rgba(61, 214, 123, 0.14), transparent 30%),
    linear-gradient(160deg, #03090d 0%, #07151c 55%, #020608 100%);
  background-attachment: fixed;
  color: var(--color-text);
}

.app-launch-splash {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: start center;
  width: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #05090d;
  isolation: isolate;
}

.app-launch-splash.is-auth-visible { animation: app-launch-splash-out 420ms ease 10000ms forwards; }

.app-launch-splash[hidden] { display: none; }

.google-signin-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 210000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 12, .88);
  backdrop-filter: blur(12px);
}

.google-signin-progress-overlay section {
  display: grid;
  justify-items: center;
  width: min(430px, 100%);
  padding: 30px 24px;
  border: 1px solid rgba(47, 221, 239, .42);
  border-radius: 22px;
  background: linear-gradient(145deg, #0b2026, #061216);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
  color: #f4fdff;
  text-align: center;
}

.google-signin-progress-spinner {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 4px solid rgba(52, 222, 239, .2);
  border-top-color: #34deef;
  border-radius: 50%;
  animation: google-signin-progress-spin .75s linear infinite;
}

.google-signin-progress-overlay strong { font-size: 1.25rem; }
.google-signin-progress-overlay p { margin: 12px 0 8px; color: #b9d1d5; line-height: 1.5; }
.google-signin-progress-overlay small { color: #55dfec; font-weight: 800; }

@keyframes google-signin-progress-spin { to { transform: rotate(360deg); } }

.live-training-sharing-settings p { margin: 10px 0 0; color: var(--color-text-muted); font-size: .76rem; line-height: 1.45; }
.live-training-sharing-toggle { display:flex; align-items:center; gap:10px; margin-top:12px; font-weight:800; }
.live-training-sharing-toggle input { width:20px; height:20px; accent-color:var(--color-primary); }
.friend-live-row { display:grid; gap:7px; }
.friend-live-row .friend-row { width:100%; }
.friend-live-row.is-training-live { padding:7px; border:1px solid rgba(42,224,242,.32); border-radius:15px; background:rgba(26,190,211,.07); }
.friend-live-row.is-training-live small { color:#45e3ee; }
.friend-live-cheer-button { min-height:38px; border:1px solid rgba(245,196,66,.45); border-radius:999px; color:#ffe38b; background:rgba(245,196,66,.1); font:inherit; font-size:.74rem; font-weight:900; cursor:pointer; }
.friend-live-cheer-button:disabled { opacity:.55; cursor:wait; }
.live-friend-cheer-overlay { position:fixed; z-index:220000; left:50%; top:max(22px,calc(env(safe-area-inset-top) + 12px)); display:flex; align-items:center; gap:14px; width:min(460px,calc(100% - 24px)); padding:16px 18px; transform:translate(-50%,-24px); opacity:0; border:1px solid rgba(245,196,66,.65); border-radius:20px; background:linear-gradient(135deg,#10262b,#11170e); box-shadow:0 22px 70px rgba(0,0,0,.65),0 0 35px rgba(245,196,66,.18); color:#fff; pointer-events:none; transition:opacity .3s ease,transform .3s ease; }
.live-friend-cheer-overlay.is-visible { opacity:1; transform:translate(-50%,0); }
.live-friend-cheer-overlay .friend-list-avatar { flex:0 0 62px; width:62px; height:62px; }
.live-friend-cheer-overlay div { display:grid; gap:3px; }
.live-friend-cheer-overlay small { color:#f5c442; font-size:.62rem; font-weight:950; letter-spacing:.12em; }
.live-friend-cheer-overlay strong { font-size:1rem; }
.live-friend-cheer-overlay p { margin:2px 0 0; color:#e9f7f8; font-size:.88rem; line-height:1.35; }

@media (prefers-reduced-motion: reduce) {
  .google-signin-progress-spinner { animation-duration: 1.5s; }
}

.app-launch-splash-wallpaper,
.app-launch-splash-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.app-launch-splash-wallpaper {
  z-index: -2;
  object-fit: cover;
  object-position: center center;
  animation: app-launch-wallpaper-in 1900ms cubic-bezier(.2, .75, .25, 1) both;
}

.app-launch-splash-shade {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 12, .42) 0%, rgba(2, 7, 12, .05) 42%, rgba(2, 7, 12, .28) 100%),
    radial-gradient(circle at 50% 15%, rgba(12, 186, 230, .12), transparent 38%);
}

.app-launch-splash-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: max(7vh, calc(env(safe-area-inset-top) + 26px));
  color: #fff;
  filter: drop-shadow(0 5px 18px rgba(0, 0, 0, .8));
  animation: app-launch-brand-in 520ms ease-out 180ms both;
}

.app-launch-splash-brand img {
  width: clamp(70px, 20vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.8),
    0 0 30px rgba(12,186,230,.48);
}

.app-launch-splash-brand strong {
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.app-launch-splash-brand span {
  display: none;
}

.app-launch-splash-brand span::after {
  content: "";
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0cbae6, #f5c442);
  box-shadow: 0 0 12px rgba(12,186,230,.7);
  animation: app-launch-progress 1250ms ease-in-out 250ms both;
}

.welcome-language-picker{position:absolute;z-index:20;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));display:grid;justify-items:center;gap:10px;transform:translateX(-50%);padding:13px 15px;border:1px solid rgba(65,225,241,.42);border-radius:18px;background:rgba(2,12,16,.78);box-shadow:0 18px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px);color:#fff;pointer-events:auto;touch-action:manipulation}.welcome-language-picker>span{font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#b9f5fa}.welcome-language-picker>div{display:flex;gap:7px}.welcome-language-picker button{min-width:43px;min-height:38px;padding:0 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(13,29,34,.9);color:#fff;font:inherit;font-size:.76rem;font-weight:900;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.welcome-language-picker button.is-active{border-color:#36ddef;background:#1abfd8;color:#031316;box-shadow:0 0 20px rgba(34,205,229,.3)}.welcome-language-picker .welcome-continue-button{min-width:150px;border:0;background:transparent;color:#d8fafd;text-decoration:underline;text-underline-offset:3px}.app-launch-splash.is-language-interacting{animation-play-state:paused}.app-launch-splash.is-dismissed{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease}
.welcome-language-picker .welcome-continue-button:disabled{opacity:.42;cursor:default;text-decoration-color:transparent}
@media(max-height:560px){.welcome-language-picker{left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:9px 11px;gap:6px}.welcome-language-picker .welcome-continue-button{display:none}}

/* Hauptmenü zwischen Ladescreen und Cockpit: bewusst wie ein ruhiges Game-Menü,
   ohne Dashboard-Karten oder vorgezogene Formulare. */
.launch-main-menu{position:fixed;z-index:190000;inset:0;display:grid;min-height:100dvh;overflow:auto;isolation:isolate;background:#02080b;color:#f4fdff}
.is-launch-main-menu-open{overflow:hidden}
.launch-main-menu[hidden]{display:none}
.launch-main-menu-backdrop{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(1,7,10,.98) 0%,rgba(2,10,14,.88) 42%,rgba(2,8,12,.3) 74%,rgba(2,8,12,.64) 100%),url("assets/wallpapers/checkpulse-value-launch-v1.png?v=20260810-001") center/cover no-repeat;transform:scale(1.01)}
.launch-main-menu:not([hidden]) .launch-main-menu-backdrop{animation:launch-backdrop-drift 16s ease-in-out infinite alternate}
.launch-main-menu-backdrop::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 45%,rgba(0,0,0,.55)),repeating-linear-gradient(0deg,transparent 0 5px,rgba(116,232,241,.018) 6px);content:""}
.launch-main-menu-shell{display:grid;align-content:center;width:min(680px,100%);min-height:100dvh;padding:max(32px,env(safe-area-inset-top)) clamp(24px,7vw,92px) max(32px,env(safe-area-inset-bottom));box-sizing:border-box}
.launch-main-menu-brand{position:absolute;top:max(24px,calc(env(safe-area-inset-top) + 12px));left:clamp(24px,7vw,92px);display:flex;align-items:center;gap:12px;filter:drop-shadow(0 5px 16px rgba(0,0,0,.65))}
.launch-main-menu-brand img{width:46px;height:46px;border:1px solid rgba(174,245,250,.7);border-radius:50%;box-shadow:0 0 24px rgba(27,202,222,.24)}
.launch-main-menu-brand div{display:grid;gap:3px}.launch-main-menu-brand span{font-size:1.15rem;font-weight:900;letter-spacing:-.03em}.launch-main-menu-brand small{color:#7ee9f2;font-size:.53rem;font-weight:900;letter-spacing:.19em}
.launch-menu-level{display:grid;gap:20px;width:min(500px,100%);animation:launch-menu-enter .3s cubic-bezier(.2,.8,.2,1) both}
.launch-menu-level[hidden]{display:none}
.launch-menu-list{display:grid;gap:2px;border-left:1px solid rgba(116,231,241,.22)}
.launch-menu-list button{position:relative;display:flex;width:100%;min-height:62px;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px 12px 22px;border:0;border-radius:0;background:transparent;color:rgba(229,244,246,.66);font:inherit;font-size:clamp(.88rem,2.2vw,1.08rem);font-weight:850;letter-spacing:.075em;text-align:left;cursor:pointer;transition:color .16s ease,background .16s ease,padding .16s ease}
.launch-menu-list button::before{position:absolute;top:0;bottom:0;left:-2px;width:3px;background:#6be4ee;box-shadow:0 0 16px rgba(74,222,235,.76);content:"";opacity:0;transform:scaleY(.4);transition:opacity .16s ease,transform .16s ease}
.launch-menu-list button:hover,.launch-menu-list button:focus-visible{padding-left:30px;outline:0;background:linear-gradient(90deg,rgba(32,192,211,.19),transparent 84%);color:#fff}
.launch-menu-list button:hover::before,.launch-menu-list button:focus-visible::before,.launch-menu-list button.is-focused::before{opacity:1;transform:scaleY(1)}
.launch-menu-list button.is-focused{padding-left:30px;background:linear-gradient(90deg,rgba(32,192,211,.19),transparent 84%);color:#fff;text-shadow:0 0 18px rgba(114,228,237,.26)}
.launch-menu-list button i{color:#73e3ed;font-size:1.55rem;font-style:normal;font-weight:400;opacity:.6}
.launch-menu-eyebrow{color:#71e3ec;font-size:.65rem;font-weight:950;letter-spacing:.2em}
.launch-menu-back{justify-self:start;padding:9px 4px;border:0;background:transparent;color:rgba(226,244,246,.7);font:inherit;font-size:.7rem;font-weight:900;letter-spacing:.13em;cursor:pointer}.launch-menu-back:hover,.launch-menu-back:focus-visible{outline:0;color:#fff}.launch-menu-back>span:first-child{margin-right:8px;color:#72e3ed;font-size:1.2rem}
.launch-menu-context{display:grid;gap:18px;margin-left:22px;padding-top:3px;border-top:1px solid rgba(113,225,235,.12)}
#launchMainMenuHint{min-height:2.9em;margin:14px 0 0;color:rgba(218,239,241,.7);font-size:.74rem;line-height:1.5;letter-spacing:.035em;transition:opacity .14s ease,transform .14s ease}
#launchMainMenuHint.is-changing{opacity:0;transform:translateY(5px)}
.launch-menu-status{display:flex;flex-wrap:wrap;gap:12px 24px}.launch-menu-status span{display:grid;gap:4px}.launch-menu-status small{color:rgba(196,225,228,.42);font-size:.48rem;font-weight:900;letter-spacing:.16em}.launch-menu-status strong{position:relative;padding-left:10px;color:#76e5ed;font-size:.56rem;letter-spacing:.1em}.launch-menu-status strong::before{position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:#6fe1eb;box-shadow:0 0 9px rgba(88,225,236,.7);content:"";transform:translateY(-50%)}.launch-menu-status strong[data-state="offline"]{color:rgba(218,236,238,.62)}.launch-menu-status strong[data-state="offline"]::before{background:#738287;box-shadow:none}
@keyframes launch-menu-enter{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes launch-backdrop-drift{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.055) translate3d(-.7%,.4%,0)}}
@media(max-width:600px){.launch-main-menu-backdrop{background:linear-gradient(180deg,rgba(1,8,11,.56),rgba(1,8,11,.9) 44%,#02080b 100%),url("assets/wallpapers/checkpulse-value-launch-v1.png?v=20260810-001") center 28%/cover no-repeat}.launch-main-menu-shell{align-content:end;padding-inline:20px;padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px))}.launch-main-menu-brand{left:20px}.launch-menu-level{gap:14px}.launch-menu-list button{min-height:54px;padding-left:16px;font-size:.82rem}.launch-menu-list button:hover,.launch-menu-list button:focus-visible{padding-left:22px}#launchMainMenuHint{margin-left:16px}}
@media(prefers-reduced-motion:reduce){.launch-menu-level{animation:none}.launch-menu-list button{transition:none}}

.header-main-menu-button{position:absolute;z-index:10000;top:calc(var(--space-md) + env(safe-area-inset-top));right:calc(var(--space-md) + 60px);display:grid;width:42px;height:50px;align-content:center;justify-items:center;gap:5px;padding:0;border:0;background:transparent;cursor:pointer}.header-main-menu-button span{display:block;width:20px;height:2px;border-radius:2px;background:rgba(224,247,249,.76);box-shadow:0 0 8px rgba(62,212,226,.12);transition:width .16s ease,transform .16s ease,background .16s ease}.header-main-menu-button span:nth-child(2){width:14px}.header-main-menu-button:hover span,.header-main-menu-button:focus-visible span{width:23px;background:#72e4ed}.header-main-menu-button:focus-visible{outline:2px solid #72e4ed;outline-offset:2px;border-radius:8px}.header-main-menu-button:active span:first-child{transform:translateY(2px)}.header-main-menu-button:active span:last-child{transform:translateY(-2px)}
@media(min-width:901px){.header-main-menu-button{right:calc(max(24px,env(safe-area-inset-right)) + 62px)}}
@media(orientation:landscape) and (max-height:700px){.header-main-menu-button{top:calc(3px + env(safe-area-inset-top));right:calc(max(18px,env(safe-area-inset-right)) + 52px);height:48px}}
.is-launch-destination{animation:launch-destination-pulse 1.45s ease both}
@keyframes launch-destination-pulse{0%,100%{box-shadow:inherit}18%,62%{border-color:rgba(93,226,237,.82);box-shadow:0 0 0 2px rgba(75,219,231,.2),0 0 30px rgba(48,205,221,.18)}}

@keyframes app-launch-wallpaper-in {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes app-launch-brand-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes app-launch-progress {
  from { transform: translateX(-115%); }
  to { transform: translateX(215%); }
}

@keyframes app-launch-splash-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .app-launch-splash-wallpaper {
    object-position: center 64%;
  }
  .app-launch-splash-brand {
    margin-top: max(4vh, calc(env(safe-area-inset-top) + 10px));
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
  }
  .app-launch-splash-brand img { width: 58px; }
  .app-launch-splash-brand strong { font-size: 2rem; }
  .app-launch-splash-brand span { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-launch-splash,
  .app-launch-splash-wallpaper,
  .app-launch-splash-brand,
  .app-launch-splash-brand span::after {
    animation-duration: 1ms;
  }
}

/* Portrait-Fullscreen: CTA und darunterliegende Iconbox teilen exakt dieselbe Außenbreite. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) {
    --portrait-action-stack-width: 166px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)::after {
    width: var(--portrait-action-stack-width) !important;
    min-width: var(--portrait-action-stack-width) !important;
    max-width: var(--portrait-action-stack-width) !important;
    box-sizing: border-box !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}


/* Finale Landscape-Anordnung: Systembuttons, Trainingsende und Missions-HUD. */
.mission-training-overview-reopen {
  display: none;
}

.mission-training-overview-reopen[hidden] {
  display: none !important;
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    top: 76px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    height: 44px !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    font-size: clamp(.62rem, 1.05vw, .78rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere;
    transform: none !important;
  }

  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top: 130px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview-reopen:not([hidden]) {
    position: absolute;
    z-index: 165;
    top: 130px;
    right: max(14px, env(safe-area-inset-right));
    display: inline-flex;
    width: 106px;
    height: 38px;
    padding: 0 11px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--mission-accent) 52%, transparent);
    border-radius: 999px;
    background: rgba(4, 15, 19, .92);
    color: #effcff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
    backdrop-filter: blur(12px);
    font: inherit;
    font-size: .7rem;
    cursor: pointer;
  }

  .mission-training-overview-reopen span {
    color: var(--mission-accent);
  }

  .mission-training-overview-reopen b {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .mission-training-overview-reopen:hover,
  .mission-training-overview-reopen:focus-visible {
    border-color: var(--mission-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mission-accent) 16%, transparent), 0 12px 28px rgba(0, 0, 0, .36);
  }
}

.app-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-md);
}

.app {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-md);
  box-sizing: border-box;
}

.app > *,
.card,
.card > *,
details > summary > *,
.cockpit-card-heading > *,
.training-history-heading > * {
  min-width: 0;
  max-width: 100%;
}

.card h2,
.card h3,
.card strong,
.card p {
  overflow-wrap: anywhere;
}

h1 {
  margin: var(--space-md);
  font-size: 2.2rem;
}

h2 {
  margin: var(--space-sm);
  font-size: clamp(1.45rem, 4.8vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.flex-end {
  display: flex;
  align-items: start;
  justify-content: flex-end;
  gap: 12px;
}

.app-header {
  position: fixed;
  z-index: 85;
  top: 0;
  left: 50%;
  width: min(100%, 700px);
  min-height: calc(var(--app-header-height) + env(safe-area-inset-top));
  max-width: 700px;
  margin: 0 auto;
  padding: calc(var(--space-md) + env(safe-area-inset-top)) var(--space-md)
    var(--space-md);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: #0f1216;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  transform: translateX(-50%);
  overflow: hidden;
}

/* Desktop: Der App-Header ist eine echte, durchgehende Kopfleiste. */
@media (min-width: 901px) {
  .app-header {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
    transform: none;
  }

  .app-header .settings-button.account-avatar-trigger {
    right: max(24px, env(safe-area-inset-right));
  }
}

.settings-button {
  position: absolute;
  z-index: 10000;
  top: calc(var(--space-md) + env(safe-area-inset-top));
  right: var(--space-md);

  font-size: 28px;
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;

  color: var(--color-text);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.settings-button:hover {
  opacity: 0.7;
  transform: rotate(30deg);
}

.settings-button:active {
  transform: scale(0.92);
}

.settings-button svg {
  display: block;
}

.settings-panel {
  position: fixed;

  top: 12px;
  right: 12px;
  left: auto;

  width: min(380px, calc(100vw - 24px));
  box-sizing: border-box;

  min-height: 240px;
  max-height: calc(100vh - 96px);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  z-index: 100000;

  padding: 22px 18px 18px;

  background: linear-gradient(180deg, #191b1f 0%, #111317 100%);

  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);

  opacity: 0;

  transform: translateY(-10px);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.modal-close-btn {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;

  color: var(--color-text);
  font-size: 18px;

  cursor: pointer;
}

.settings-close-btn:hover {
  opacity: 0.7;
}

.settings-panel.is-open {
  opacity: 1;
  transform: translateY(0);

  pointer-events: auto;
}

.settings-panel h2 {
  margin: 2px 0 0;
}

.app-header h1 {
  margin-bottom: 2px;
}

.cockpit-header-username {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.account-avatar-trigger {
  position: absolute;
  width: 46px;
  height: 46px;
  overflow: visible;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: linear-gradient(145deg, #26313b, #11161b);
  color: #fff;
  font-weight: 900;
  max-width: 46px;
}

.settings-button.account-avatar-trigger:hover {
  opacity: 1;
  transform: scale(1.05);
}

.settings-button.account-avatar-trigger:active {
  transform: scale(0.94);
}

.account-avatar-trigger img,
.athlete-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.account-avatar-trigger.uses-checkpulse-avatar,
.athlete-avatar.uses-checkpulse-avatar,
.avatar-skin-preview {
  z-index: 2;
  background-color: #111820;
  background-clip: padding-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

.guest-avatar-account-hint {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(0, 194, 238, 0.35);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(0, 194, 238, 0.11), rgba(35, 26, 58, 0.46));
}

.guest-avatar-account-hint[hidden] {
  display: none !important;
}

.guest-avatar-account-hint > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(0, 194, 238, 0.14);
  color: var(--color-primary);
  font-size: 1.25rem;
  box-shadow: 0 0 18px rgba(0, 194, 238, 0.13);
}

.guest-avatar-account-hint strong,
.guest-avatar-account-hint p {
  display: block;
  margin: 0;
}

.guest-avatar-account-hint strong {
  color: #f7fbff;
  font-size: 0.84rem;
}

.guest-avatar-account-hint p {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

[data-avatar-gender="female"][data-avatar-skin="tortuga-core"] {
  background-image: url("assets/avatar/skins/female-tortuga-core-logo-v2.png");
}
[data-avatar-gender="female"][data-avatar-skin="cyan-pulse"] {
  background-image: url("assets/avatar/skins/female-cyan-pulse-logo-v2.png");
}
[data-avatar-gender="female"][data-avatar-skin="solar-pulse"] {
  background-image: url("assets/avatar/skins/female-solar-pulse-logo-v2.png");
}
[data-avatar-gender="female"][data-avatar-skin="neon-surge"] {
  background-image: url("assets/avatar/skins/female-neon-surge-logo-v2.png");
}
[data-avatar-gender="female"][data-avatar-skin="threshold-fire"] {
  background-image: url("assets/avatar/skins/female-threshold-fire-logo-v2.png");
}
[data-avatar-gender="male"][data-avatar-skin="tortuga-core"] {
  background-image: url("assets/avatar/skins/male-tortuga-core.webp");
}
[data-avatar-gender="male"][data-avatar-skin="cyan-pulse"] {
  background-image: url("assets/avatar/skins/male-cyan-pulse.webp");
}
[data-avatar-gender="male"][data-avatar-skin="solar-pulse"] {
  background-image: url("assets/avatar/skins/male-solar-pulse-v1.webp");
}
[data-avatar-gender="male"][data-avatar-skin="neon-surge"] {
  background-image: url("assets/avatar/skins/male-neon-surge-v1.webp");
}
[data-avatar-gender="male"][data-avatar-skin="threshold-fire"] {
  background-image: url("assets/avatar/skins/male-threshold-fire.webp");
}
[data-avatar-gender="unspecified"][data-avatar-skin="tortuga-core"] {
  background-image: url("assets/avatar/skins/neutral-tortuga-core-v2.webp");
}
[data-avatar-gender="unspecified"][data-avatar-skin="cyan-pulse"] {
  background-image: url("assets/avatar/skins/neutral-cyan-pulse-v2.webp");
}
[data-avatar-gender="unspecified"][data-avatar-skin="solar-pulse"] {
  background-image: url("assets/avatar/skins/neutral-solar-pulse-v1.webp");
}
[data-avatar-gender="unspecified"][data-avatar-skin="neon-surge"] {
  background-image: url("assets/avatar/skins/neutral-neon-surge-v1.webp");
}
[data-avatar-gender="unspecified"][data-avatar-skin="threshold-fire"] {
  background-image: url("assets/avatar/skins/neutral-threshold-fire-v2.webp");
}

.uses-checkpulse-avatar > #headerAccountAvatarFallback,
.uses-checkpulse-avatar > #athleteAvatarFallback {
  color: transparent;
  user-select: none;
}

.avatar-sport-badge {
  position: absolute;
  z-index: 3;
  right: -5px;
  bottom: -3px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid #111317;
  border-radius: 50%;
  background: #f7f9fb;
  color: #0b1015;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.account-avatar-trigger .avatar-sport-badge {
  right: -4px;
  bottom: -3px;
  left: auto;
  width: 19px;
  height: 19px;
  border: 2px solid var(--color-bg);
  background: var(--color-primary);
  font-size: 10px;
}

.account-avatar-trigger > #headerAccountAvatarFallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.account-avatar-settings-mark {
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-primary);
  color: #071116;
  font-size: 10px;
}

.account-avatar-trigger .account-avatar-settings-mark {
  display: none;
}

.account-notification-badge {
  position: absolute;
  z-index: 5;
  top: -3px;
  right: -4px;
  display: grid;
  width: 19px;
  height: 19px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: #f5c442;
  color: #111317;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}

.account-notification-badge[hidden] {
  display: none;
}

.settings-group {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018)
  );
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-panel-title {
  margin-bottom: 18px;
  padding: 0 42px 0 2px;
}

.settings-panel[data-panel-mode="settings"] #publicAthleteProfile,
.settings-panel[data-panel-mode="settings"] #friendsSettingsCard {
  display: none;
}

.settings-panel[data-panel-mode="profile"] #privateAccountControls,
.settings-panel[data-panel-mode="profile"] #pulseSourceSettingsGroup,
.settings-panel[data-panel-mode="profile"] #heartRateZonesSettingsGroup,
.settings-panel[data-panel-mode="profile"] #mediaPlayerSettingsGroup,
.settings-panel[data-panel-mode="profile"] #languageSettingsGroup,
.settings-panel[data-panel-mode="profile"] #privateSystemAccount {
  display: none;
}

.settings-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-group h3 {
  margin: 0 0 12px;
}

.auth-settings-group {
  display: grid;
  gap: 10px;
}

.public-athlete-profile {
  border-color: rgba(31, 190, 232, 0.18);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(31, 190, 232, 0.08),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
}

.private-account-controls {
  display: block;
  margin-top: 14px;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.022);
}

.private-account-heading {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.private-account-heading strong {
  font-size: 0.96rem;
}

.private-account-controls-content {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.private-account-controls-content[hidden] {
  display: none;
}

.weekly-report-setting {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(56, 220, 204, .18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(56, 220, 204, .07), rgba(255,255,255,.02));
}
.weekly-report-setting > div { display: grid; gap: 3px; }
.weekly-report-setting > div strong { font-size: .92rem; }
.weekly-report-setting > div small,
.weekly-report-setting > p { color: #8ea6a2; font-size: .68rem; }
.weekly-report-setting > p { margin: 0; }
.weekly-report-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.weekly-report-switch input { position: absolute; opacity: 0; pointer-events: none; }
.weekly-report-switch > span { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #243438; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .2s ease; }
.weekly-report-switch > span::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #a6b2b0; content: ""; transition: transform .2s ease, background .2s ease; }
.weekly-report-switch input:checked + span { background: rgba(56,220,204,.28); box-shadow: inset 0 0 0 1px rgba(56,220,204,.65), 0 0 16px rgba(56,220,204,.12); }
.weekly-report-switch input:checked + span::after { background: #43e4d5; transform: translateX(19px); }
.weekly-report-switch input:focus-visible + span { outline: 2px solid #43e4d5; outline-offset: 3px; }
.weekly-report-switch input:disabled + span { opacity: .48; }
.weekly-report-switch em { color: #c5d2cf; font-size: .7rem; font-style: normal; font-weight: 750; }

.private-system-account {
  margin-top: 22px;
  border-color: rgba(34, 197, 94, 0.16);
  background: linear-gradient(
    145deg,
    rgba(34, 197, 94, 0.045),
    rgba(255, 255, 255, 0.018)
  );
}

.private-system-account h3 {
  margin: 0;
}

.athlete-account-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(31, 190, 232, 0.14),
      transparent 40%
    ),
    rgba(255, 255, 255, 0.025);
}

.athlete-avatar {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: linear-gradient(145deg, #2c3540, #11161b);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  color: transparent;
}

.avatar-presence-dot {
  position: absolute;
  z-index: 4;
  right: -4px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 3px solid #111317;
  border-radius: 50%;
  background: #7d8790;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.account-avatar-trigger .avatar-presence-dot {
  width: 15px;
  height: 15px;
  border-color: var(--color-bg);
}

.avatar-presence-dot[data-presence="online"] {
  background: #35d07f;
  box-shadow: 0 0 0 1px rgba(53, 208, 127, 0.22), 0 0 9px rgba(53, 208, 127, 0.5);
}

.avatar-presence-dot[data-presence="recent"] {
  background: #f2c94c;
  box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.22), 0 0 8px rgba(242, 201, 76, 0.4);
}

.avatar-presence-dot[data-presence="offline"] {
  background: #7d8790;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

#athleteAvatar[role="button"] { cursor: pointer; }
#athleteAvatar[role="button"]:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.athlete-account-identity {
  min-width: 0;
  padding-right: 4px;
}

.athlete-account-identity h3 {
  overflow: hidden;
  margin: 0 0 3px;
  font-size: 1.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athlete-account-email {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athlete-account-mode {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.athlete-account-mode[data-mode="cloud"] {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.athlete-username-edit-button {
  width: fit-content;
  margin: -2px 2px 0 auto;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.athlete-username-form {
  padding: 12px;
  border: 1px solid rgba(31, 190, 232, 0.2);
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.055);
}

.athlete-username-form[hidden] {
  display: none;
}

.athlete-username-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.76rem;
}

.athlete-username-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.athlete-username-form input {
  min-width: 0;
  height: 42px;
}

.athlete-username-form button {
  min-height: 42px;
  padding: 8px 12px;
}

.athlete-username-form p {
  min-height: 1em;
  margin: 7px 0 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.7rem;
}

.athlete-progression-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.athlete-progression-tile {
  overflow: hidden;
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  font: inherit;
  text-align: center;
}

button.athlete-progression-tile {
  cursor: pointer;
}
button.athlete-progression-tile:hover,
button.athlete-progression-tile:focus-visible {
  border-color: rgba(31, 190, 232, 0.32);
  background: rgba(31, 190, 232, 0.09);
}

.athlete-progression-card span,
.athlete-progression-card strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.athlete-progression-card small {
  display: block;
  min-height: 0;
  margin-top: 4px;
  color: var(--text-secondary, #94a3b8);
  font-size: clamp(0.48rem, 1.8vw, 0.58rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pulse-coin-heap {
  --coin-count-scale: 1;
  position: relative;
  display: block;
  width: min(48px, 72%);
  height: clamp(13px, calc(10px + var(--coin-count-scale) * 10px), 30px);
  margin: 4px auto 2px;
}

.pulse-coin {
  position: absolute;
  left: calc(var(--coin-x) * 1%);
  bottom: calc(var(--coin-y) * 1px);
  width: clamp(9px, calc(8px + var(--coin-count-scale) * 3px), 14px);
  aspect-ratio: 1;
  border: 1px solid #fff2a8;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f5c442 42%, #a66b08 76%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), 0 0 7px rgba(245, 196, 66, .22);
  transform: translateX(-50%) rotate(var(--coin-rotation));
  animation: coinSettle 420ms cubic-bezier(.2, .9, .25, 1.2) both;
  animation-delay: calc(var(--coin-index) * 22ms);
}

.pulse-coin::after {
  content: "P";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #674000;
  font-size: 6px;
  font-weight: 950;
}

@keyframes coinSettle {
  from { opacity: 0; transform: translate(-50%, -10px) scale(.7) rotate(var(--coin-rotation)); }
}

.coins-tile {
  background: radial-gradient(
    circle at 50% 15%,
    rgba(245, 196, 66, 0.14),
    rgba(255, 255, 255, 0.035)
  );
}

.coins-tile strong {
  color: #f5c442;
  text-shadow: 0 0 14px rgba(245, 196, 66, 0.22);
}

.xp-tile {
  background: radial-gradient(
    circle at 50% 15%,
    rgba(167, 139, 250, 0.14),
    rgba(255, 255, 255, 0.035)
  );
}

.xp-tile strong {
  color: #a78bfa;
  text-shadow: 0 0 14px rgba(167, 139, 250, 0.2);
}

.level-progress-panel {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(31, 190, 232, 0.22);
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(31, 190, 232, 0.09),
    rgba(255, 255, 255, 0.025)
  );
}

.level-progress-panel[hidden] {
  display: none;
}
.level-progress-panel > div:first-child > strong {
  font-size: 0.95rem;
}

.level-progress-track {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.level-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), #a78bfa);
  box-shadow: 0 0 14px rgba(31, 190, 232, 0.35);
  transition: width 350ms ease;
}

.level-progress-panel p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 0.72rem;
}

.level-progress-panel p span {
  color: var(--text-secondary, #94a3b8);
}

.trophy-collection-card {
  overflow: hidden;
  border: 1px solid rgba(245, 196, 66, 0.2);
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(245, 196, 66, 0.07),
    rgba(255, 255, 255, 0.025)
  );
}

.trophy-collection-card > button {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.trophy-collection-card > button .settings-eyebrow {
  color: #f5c442;
}
.trophy-collection-card > button strong {
  font-size: 0.82rem;
}

.accordion-chevron {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.accordion-chevron::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

button[aria-expanded="true"] > .accordion-chevron::before {
  transform: rotate(90deg);
}

.trophy-collection {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}

.trophy-collection[hidden] {
  display: none;
}

.trophy-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
}

.trophy-icon {
  display: grid;
  width: 36px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 196, 66, 0.14);
  font-size: 1.15rem;
}

.trophy-item strong,
.trophy-item small {
  display: block;
}
.trophy-item strong {
  font-size: 0.78rem;
}
.trophy-item small {
  margin-top: 2px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.66rem;
  line-height: 1.3;
}
.trophy-item.is-locked {
  opacity: 0.5;
}
.trophy-item.is-unlocked {
  box-shadow: inset 0 0 0 1px rgba(245, 196, 66, 0.18);
}
.trophy-item.is-new {
  border-color: #f5c84b;
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.2), rgba(31, 190, 232, 0.08));
  box-shadow: 0 0 22px rgba(245, 200, 75, 0.24);
  animation: trophyNewPulse 3s ease-in-out infinite;
}
@keyframes trophyNewPulse {
  0%, 72%, 80%, 88%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 22px rgba(245, 200, 75, 0.24); }
  76% { transform: translateY(-1px) scale(1.014); box-shadow: 0 0 11px rgba(245, 200, 75, 0.14); }
  84% { transform: translateY(-2px) scale(1.026); box-shadow: 0 0 15px rgba(245, 200, 75, 0.18); }
}

.athlete-progression-card span {
  margin-bottom: 3px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.58rem;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: keep-all;
}

.athlete-progression-card strong {
  color: var(--color-primary);
  font-size: clamp(.74rem, 3vw, .9rem);
  line-height: 1.15;
}

.avatar-studio {
  padding-top: 4px;
}

.avatar-studio[hidden] {
  display: none;
}

.avatar-studio-heading {
  margin-bottom: 10px;
}

.avatar-studio-toggle {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(31, 190, 232, 0.18);
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.055);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.avatar-studio-toggle strong {
  font-size: 0.9rem;
}

.avatar-studio-section {
  margin-bottom: 13px;
}

.avatar-studio-section > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 0.78rem;
}

.avatar-option-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.avatar-gender-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avatar-option-grid button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 3px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.64rem;
  cursor: pointer;
}

.avatar-option-grid button span {
  font-size: 1.15rem;
}

.avatar-option-grid button.is-selected {
  border-color: var(--color-primary);
  background: rgba(31, 190, 232, 0.13);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 190, 232, 0.28);
}

.avatar-fullbody-showcase {
  margin-bottom: 16px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 190, 232, 0.28);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(31, 190, 232, 0.11), rgba(9, 13, 18, 0.96) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.avatar-fullbody-showcase > header { display: grid; gap: 1px; }
.avatar-fullbody-showcase > header strong { color: #fff; font-size: 1rem; }
.avatar-fullbody-stage {
  position: relative;
  width: min(100%, 320px);
  margin: 8px auto 4px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  /* Die PNG-Figur bleibt freigestellt; die Look-Vorschau hat skinunabhängig Schwarz. */
  background: #000;
}
#avatarStudioFullBody {
  --avatar-column: 100%;
  --avatar-row: 0%;
  width: 100%;
  height: 100%;
  background-image: url("assets/avatar/checkpulse-fullbody-sprite-v4.webp");
  background-position: center;
  background-repeat: no-repeat;
  /*
   * 343 % statt exakt 300 % verdoppelt den Sicherheitsabstand innerhalb
   * jeder 3x3-Spritezelle. Dadurch bleiben benachbarte Köpfe und Füße
   * zuverlässig außerhalb der sichtbaren Avatarfläche.
   */
  background-size: contain;
  clip-path: none;
  filter: none !important;
  transition: filter 180ms ease, transform 180ms ease;
}
#avatarStudioFullBody[data-avatar-sport="cycling"] { background-image: url("assets/avatar/checkpulse-fullbody-sprite-v4.webp"); }
#avatarStudioFullBody[data-avatar-sport="running"] { background-image: url("assets/avatar/checkpulse-fullbody-running-v1-gapped-v1.webp"); }
#avatarStudioFullBody[data-avatar-sport="strength"] { background-image: url("assets/avatar/checkpulse-fullbody-strength-v1-gapped-v1.webp"); }
#avatarStudioFullBody[data-avatar-sport="inline-skating"] { background-image: url("assets/avatar/checkpulse-fullbody-inline-v2.webp"); }
#avatarStudioFullBody[data-avatar-gender="female"] { --avatar-column: 0%; }
#avatarStudioFullBody[data-avatar-gender="male"] { --avatar-column: 50%; }
#avatarStudioFullBody[data-avatar-gender="unspecified"] { --avatar-column: 100%; }
#avatarStudioFullBody[data-avatar-skin="tortuga-core"] { --avatar-row: 0%; }
#avatarStudioFullBody[data-avatar-skin="solar-pulse"] {
  --avatar-row: 50%;
  filter: none;
}
#avatarStudioFullBody[data-avatar-skin="solar-pulse"][data-avatar-sport="cycling"] {
  background-image: url("assets/avatar/checkpulse-fullbody-sprite-v4.webp");
}
#avatarStudioFullBody[data-avatar-skin="solar-pulse"][data-avatar-sport="running"] {
  background-image: url("assets/avatar/checkpulse-fullbody-running-solar-v1-gapped-v1.webp");
  /* Eigenständige Lauf-Assets enthalten die Safe Area bereits im Bild. */
  background-size: contain;
  background-position: center;
}

.uses-checkpulse-avatar.avatar-image-unavailable > #headerAccountAvatarFallback,
.uses-checkpulse-avatar.avatar-image-unavailable > #athleteAvatarFallback,
.friend-list-avatar.avatar-image-unavailable > .friend-avatar-fallback {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
#avatarStudioFullBody[data-avatar-skin="solar-pulse"][data-avatar-sport="strength"] {
  background-image: url("assets/avatar/checkpulse-fullbody-strength-solar-v1-gapped-v1.webp");
}
#avatarStudioFullBody[data-avatar-skin="solar-pulse"][data-avatar-sport="inline-skating"] {
  background-image: url("assets/avatar/checkpulse-fullbody-inline-solar-v1-gapped-v1.webp");
}
#avatarStudioFullBody[data-avatar-skin="cyan-pulse"] { --avatar-row: 50%; filter: none; }
#avatarStudioFullBody[data-avatar-skin="neon-surge"] {
  --avatar-row: 0%;
  filter: none;
}
#avatarStudioFullBody[data-avatar-skin="threshold-fire"] { --avatar-row: 100%; filter: none; }
.avatar-studio-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.avatar-studio-3d-canvas:active { cursor: grabbing; }
.avatar-studio-3d-canvas[hidden],
.avatar-studio-2d-fallback[hidden] { display: none; }
.avatar-studio-3d-canvas[hidden] ~ .avatar-3d-interaction-hint { display: none; }
.avatar-3d-interaction-hint {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(5, 9, 13, 0.72);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.avatar-fullbody-showcase > footer { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 2px 1px; }
.avatar-fullbody-showcase > footer strong { overflow: hidden; color: #fff; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.avatar-fullbody-showcase > footer span { flex: 0 0 auto; color: var(--color-primary); font-size: 0.68rem; font-weight: 750; }
.avatar-checkpulse-brand {
  display: none !important;
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 2%;
  width: 25%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.42);
}

.skin-solar-pulse {
  border-color: #facc15;
  box-shadow:
    0 0 0 3px rgba(250, 204, 21, 0.16),
    0 0 20px rgba(250, 204, 21, 0.4);
}

.skin-tortuga-core {
  border-color: #d7e3ea;
  box-shadow:
    0 0 0 3px rgba(215, 227, 234, .15),
    0 0 18px rgba(31, 191, 232, .22);
}

.avatar-skin-option.skin-solar-pulse {
  background: linear-gradient(
    105deg,
    rgba(250, 204, 21, 0.16),
    rgba(255, 255, 255, 0.035)
  );
}

.avatar-skin-option.skin-neon-surge {
  background: linear-gradient(
    105deg,
    rgba(57, 255, 20, 0.16),
    rgba(255, 255, 255, 0.035)
  );
}
.is-guest-athlete-avatar {
  background: #111820 url("assets/avatar/guest-robot-athlete.svg") center / cover no-repeat !important;
}

.is-admin-avatar > #athleteAvatarFallback,
.is-admin-avatar > #headerAccountAvatarFallback,
.is-admin-avatar > .friend-avatar-fallback,
.is-admin-avatar > .avatar-sport-badge {
  display: none !important;
}

.is-admin-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.is-guest-athlete-avatar #athleteAvatarFallback,
.is-guest-athlete-avatar #headerAccountAvatarFallback {
  color: transparent;
}
.is-guest-athlete-avatar #athleteAvatarFallback::before,
.is-guest-athlete-avatar #headerAccountAvatarFallback::before {
  content: "";
}
.avatar-identity-customization { display: grid; gap: 13px; margin-bottom: 16px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.avatar-identity-customization[hidden] { display: none; }
.avatar-identity-customization > header { display: grid; gap: 2px; }
.avatar-identity-customization > header small { color: var(--color-text-muted); font-size: 0.68rem; line-height: 1.4; }
.avatar-feature-control { display: grid; gap: 7px; }
.avatar-feature-control > strong { font-size: 0.76rem; }
.avatar-feature-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.avatar-feature-options button { min-height: 36px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 10px; background: rgba(255, 255, 255, 0.045); color: var(--color-text); font: inherit; font-size: 0.68rem; cursor: pointer; }
.avatar-feature-options button.is-selected { border-color: var(--color-primary); background: rgba(31, 190, 232, 0.13); box-shadow: inset 0 0 0 1px rgba(31, 190, 232, 0.2); }
.avatar-color-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.avatar-color-options button { display: grid; gap: 4px; place-items: center; min-width: 0; padding-inline: 3px; font-size: 0.59rem; }
.avatar-color-options button span { width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.72); border-radius: 50%; background: var(--swatch); }
.avatar-skin-tone-options { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.avatar-skin-tone-options button { min-height: 34px; padding-inline: 1px; }
.avatar-muscle-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.skin-shop-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.skin-shop-header > span:first-child { display: grid; gap: 2px; }
.skin-shop-header small { color: var(--color-primary); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; }
#skinShopWallet { padding: 6px 9px; border-radius: 999px; background: rgba(31, 190, 232, 0.12); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; }
.skin-shop-principle { margin: 0 0 12px; color: var(--color-text-muted); font-size: 0.68rem; line-height: 1.4; }
.skin-shop-product { cursor: default; }
.skin-shop-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 7px; width: 100%; }
.skin-shop-actions button { min-height: 34px; padding: 6px 8px; border: 1px solid rgba(31, 190, 232, 0.24); border-radius: 10px; background: rgba(31, 190, 232, 0.09); color: var(--color-primary); font: inherit; font-size: 0.68rem; font-weight: 800; cursor: pointer; }
.skin-shop-actions button[data-purchase-method="money"] { border-color: rgba(245, 196, 66, 0.25); background: rgba(245, 196, 66, 0.08); color: #f5c442; }
.skin-shop-actions button:disabled { opacity: 0.58; cursor: default; }
.skin-shop-product.is-level-locked { border-color: rgba(255, 255, 255, 0.08); filter: saturate(0.62); }
.skin-level-requirement { grid-column: 1 / -1; color: #f5c442; font-size: 0.66rem; font-weight: 750; text-align: center; }

.avatar-skin-catalog {
  display: grid;
  gap: 8px;
}

.avatar-skin-shop[hidden],
.avatar-studio-section[hidden] {
  display: none;
}

.avatar-skin-option {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 84px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text);
  text-align: left;
}

.avatar-skin-option:disabled {
  cursor: default;
  opacity: 1;
}
button.avatar-skin-option:disabled {
  background-color: rgba(255, 255, 255, 0.055);
  color: var(--color-text);
  opacity: 1;
}
.avatar-skin-option.is-owned {
  border-color: rgba(31, 191, 232, 0.38);
}
.avatar-skin-option.is-locked small::before {
  content: "🔒 ";
}
.avatar-skin-option.skin-cyan-pulse {
  background: linear-gradient(
    105deg,
    rgba(31, 191, 232, 0.14),
    rgba(255, 255, 255, 0.035)
  );
}
.avatar-skin-option.skin-threshold-fire {
  background: linear-gradient(
    105deg,
    rgba(251, 113, 51, 0.15),
    rgba(255, 255, 255, 0.035)
  );
}

.avatar-skin-option > span:last-child,
.avatar-skin-option strong,
.avatar-skin-option small {
  display: block;
}

.avatar-skin-option small {
  margin-top: 2px;
  color: var(--text-secondary, #94a3b8);
}

.avatar-skin-preview {
  position: relative;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #15191e;
  background-position: center 30%;
  background-size: 112%;
  font-weight: 900;
}

.skin-cyan-pulse {
  border-color: #1fbfe8;
  box-shadow:
    0 0 0 3px rgba(31, 191, 232, 0.18),
    0 0 18px rgba(31, 191, 232, 0.42);
}

.skin-neon-surge {
  border-color: #39ff14;
  box-shadow:
    0 0 0 3px rgba(57, 255, 20, 0.18),
    0 0 20px rgba(57, 255, 20, 0.46);
}

.skin-threshold-fire {
  border-color: #fb7133;
  box-shadow:
    0 0 0 3px rgba(251, 113, 51, 0.18),
    0 0 20px rgba(239, 68, 68, 0.48);
}

.skin-patch-moonrunner {
  border-color: #d8b5ff;
  box-shadow: 0 0 0 3px rgba(216,181,255,.2), 0 0 24px rgba(199,75,255,.55);
}
[data-avatar-gender][data-avatar-skin="patch-moonrunner"] {
  filter: hue-rotate(245deg) saturate(1.8) contrast(1.16) drop-shadow(0 0 8px #ce70ff);
}
[data-avatar-gender="female"][data-avatar-skin="patch-moonrunner"] { background-image:url("assets/avatar/skins/female-cyan-pulse-logo-v2.png"); }
[data-avatar-gender="male"][data-avatar-skin="patch-moonrunner"] { background-image:url("assets/avatar/skins/male-cyan-pulse.webp"); }
[data-avatar-gender="unspecified"][data-avatar-skin="patch-moonrunner"] { background-image:url("assets/avatar/skins/neutral-cyan-pulse-v2.webp"); }
#avatarStudioFullBody[data-avatar-skin="patch-moonrunner"] {
  --avatar-row: 50%;
  filter: hue-rotate(245deg) saturate(1.8) contrast(1.16) drop-shadow(0 0 18px rgba(210,95,255,.72));
}

.avatar-studio-message {
  min-height: 1.2em;
  margin: 8px 2px 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.76rem;
}

.auth-status,
.auth-hint,
.cloud-sync-status {
  margin: 0;
}

.auth-status {
  color: var(--text-primary, #f8fafc);
  overflow: hidden;
  font-weight: 600;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-hint {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cloud-sync-status {
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem;
  font-weight: 600;
}

.cloud-sync-status[data-status="synced"] {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}

.cloud-sync-status[data-status="local"] {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.cloud-sync-status[data-status="pending"] {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
}

#googleSignInButton[hidden],
#settingsEmailPasswordButton[hidden],
#authSignOutButton[hidden],
#startupSignOutBtn[hidden] {
  display: none;
}

.training-detail-card {
  width: min(920px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
}

.training-detail-date,
.training-detail-stability,
.training-detail-legacy-hint {
  color: var(--color-text-muted, #94a3b8);
}

.training-detail-kpis,
.training-detail-zone-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.training-detail-kpis > div,
.training-detail-zone-times > div,
.training-detail-adherence {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.training-detail-kpis small,
.training-detail-zone-times small,
.training-detail-adherence span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-text-muted, #94a3b8);
}

.training-detail-kpis strong,
.training-detail-zone-times strong {
  font-size: 1.15rem;
}

.training-detail-zone-analysis,
.training-detail-chart-section,
.training-detail-comparison {
  margin-top: 22px;
}
.training-detail-pause-summary{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:7px 10px;border:1px solid rgba(244,197,80,.35);border-radius:999px;color:#ffd86f;background:rgba(244,197,80,.08);font-size:.72rem;font-weight:800}.training-detail-pause-summary::before{content:"\23F8";font-weight:950}

.training-detail-zone-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
}

.training-detail-adherence-ring {
  --adherence: 0%;
  flex: 0 0 132px;
  width: 132px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #17191d 57%, transparent 59%),
    conic-gradient(#22c55e var(--adherence), rgba(148, 163, 184, 0.18) 0);
}

.training-detail-adherence-ring strong {
  display: block;
  color: #4ade80;
  font-size: 2rem;
}

.training-detail-adherence-ring span {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.78rem;
}

.training-detail-interpretation {
  margin: 0;
  line-height: 1.55;
}
.training-detail-zone-distribution {
  margin-top: 16px;
}
.training-detail-zone-row {
  display: grid;
  grid-template-columns: 92px 1fr 48px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.84rem;
}
.training-detail-zone-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
}
.training-detail-zone-bar > span {
  display: block;
  height: 100%;
  width: var(--zone-percentage);
  border-radius: inherit;
  background: var(--zone-color);
}
.training-detail-zone-row strong {
  text-align: right;
}
.training-detail-comparison-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.training-detail-comparison-interpretation {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid #22c55e;
  border-radius: 0 10px 10px 0;
  background: rgba(34, 197, 94, 0.08);
  line-height: 1.5;
}
.training-detail-comparison-values > div {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.training-detail-comparison-values small {
  display: block;
  color: var(--color-text-muted, #94a3b8);
}
.training-detail-comparison-values strong {
  display: block;
  margin-top: 5px;
}

#trainingDetailPulseChart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
}

.training-detail-zone-changes {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.055);
}
.training-detail-zone-changes header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.training-detail-zone-changes header span {
  color: #22d3ee;
  font-size: 0.78rem;
  font-weight: 850;
}
.training-detail-zone-changes ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.training-detail-zone-changes li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}
.training-detail-zone-changes time { color: var(--color-text-muted, #94a3b8); font-size: 0.75rem; }
.training-detail-zone-changes li strong { font-size: 0.8rem; }

.training-history-details-button {
  flex: 0 0 auto;
  padding: 7px 8px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.training-history-delete-button {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 680px) {
  .training-detail-card h2 {
    font-size: 1.35rem;
  }

  .training-detail-card h3 {
    font-size: 1rem;
  }

  .training-detail-date,
  .training-detail-stability,
  .training-detail-legacy-hint {
    font-size: 0.78rem;
  }

  .training-detail-kpis,
  .training-detail-zone-times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .training-detail-kpis > div,
  .training-detail-zone-times > div {
    padding: 11px 13px;
  }

  .training-detail-kpis small,
  .training-detail-zone-times small {
    font-size: 0.7rem;
  }

  .training-detail-kpis strong,
  .training-detail-zone-times strong {
    font-size: 0.98rem;
  }

  .training-detail-zone-summary {
    align-items: center;
    gap: 14px;
  }

  .training-detail-adherence-ring {
    flex-basis: 104px;
    width: 104px;
    height: 104px;
  }

  .training-detail-adherence-ring strong {
    font-size: 1.45rem;
    line-height: 1;
  }

  .training-detail-adherence-ring span {
    margin-top: 5px;
    font-size: 0.62rem;
  }

  .training-detail-interpretation {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .training-detail-zone-row {
    grid-template-columns: 82px 1fr 42px;
    gap: 7px;
    font-size: 0.75rem;
  }

  .training-detail-comparison-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .training-detail-comparison-values > div {
    padding: 11px 13px;
  }
  .training-detail-comparison-values small {
    font-size: 0.7rem;
  }
  .training-detail-comparison-values strong {
    font-size: 0.92rem;
  }
  .training-detail-comparison-interpretation {
    font-size: 0.84rem;
  }
}

.settings-group-header {
  display: flex;
  width: 100%;
  min-height: 54px;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  padding: 0;
}

.settings-group-header h3 {
  margin: 0;
}

#pulseSourceSettingsArrow {
  flex: 0 0 auto;
}

#pulseSourceSettingsArrow.is-collapsed {
  transform: none;
}

#pulseSourceSettingsContent {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#pulseSourceSettingsContent[hidden] {
  display: none;
}

.subtitle {
  margin: var(--space-md);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.card,
.status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: var(--space-sm) var(--space-sm);
  padding: var(--space-sm);
}

.row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  font-weight: bold;
}

input {
  background: var(--color-surface-dark);
  color: var(--color-text);
  border: 1px solid #444;
}

input,
select {
  width: 100%;
  border-radius: 10px;
}

.buttons {
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--space-sm) 0;
  border-radius: 12px;
  width: 100%;
}

button {
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-surface-dark);
  font-size: 1rem;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

button.secondary {
  background: var(--color-secondary);
}

button:disabled {
  background: var(--color-secondary);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 18px;
}

.status-card.status-idle {
  background-color: var(--color-text-soft);
  border: 1px solid var(--color-border);
}

.status-card.status-idle .label,
.status-card.status-idle .value {
  color: var(--color-text);
}

.status-card.status-waiting {
  background-color: var(--status-waiting-bg);
  border: 1px solid var(--status-waiting-border);
}

.status-card.status-waiting .label,
.status-card.status-waiting .value {
  color: var(--status-waiting-text);
}

.status-card.status-playing {
  background-color: var(--status-playing-bg);
  border: 1px solid var(--status-playing-border);
}

.status-card.status-playing .label,
.status-card.status-playing .value {
  color: var(--status-playing-text);
}

.status-card.status-paused-manual {
  background-color: var(--status-paused-manual-bg);
  border: 1px solid var(--status-paused-manual-border);
}

.status-card.status-paused-manual .label,
.status-card.status-paused-manual .value {
  color: var(--status-paused-manual-text);
}

.status-card.status-paused-rule {
  background-color: var(--status-paused-rule-bg);
  border: 1px solid var(--status-paused-rule-border);
}

.status-card.status-paused-rule .label,
.status-card.status-paused-rule .value {
  color: var(--status-paused-rule-text);
}

.status-card.status-finished {
  background-color: var(--status-finished-bg);
  border: 1px solid var(--status-finished-border);
}

.status-card.status-finished .label,
.status-card.status-finished .value {
  color: var(--status-finished-text);
}

.label {
  display: block;
  color: var(--color-text-soft);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.value {
  font-size: 1.4rem;
  font-weight: bold;
}

.log {
  max-height: 300px;
  overflow-y: auto;
  background: var(--color-surface-dark);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  font-family: Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}

.log-entry {
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.hint {
  color: var(--color-text-soft);
  line-height: 1.5;
}

.player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-dark);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.player-wrapper:has(.player-shell:not(:fullscreen)) {
  aspect-ratio: auto;
  min-height: 0;

  background: transparent;
  border: none;

  overflow: visible;
}

.player-shell:not(:fullscreen) {
  width: 100%;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  overflow: visible;
}

.player-shell:not(:fullscreen) #fullscreenToggleTrainingBtn {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  height: 56px;
  min-width: 190px;
  font-size: 18px;
  display: none;
}

#newVideoBtn {
  display: block;
  margin-left: auto;
  margin-top: var(--space-md);
}

#player {
  width: 100%;
  height: 100%;
}

.player-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.player-shell iframe {
  position: relative;
  z-index: 1;
}

.local-cast-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #02070b;
}

.local-cast-poster[hidden] {
  display: none;
}

.local-cast-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.local-cast-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.16),
    transparent 45%,
    rgba(0, 0, 0, 0.58)
  );
}

.local-cast-poster span {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: 9px 16px;
  border: 1px solid rgba(31, 191, 232, 0.55);
  border-radius: 999px;
  background: rgba(2, 7, 11, 0.76);
  color: #fff;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  font-weight: 700;
  white-space: nowrap;
}

.player-shell:fullscreen .fullscreen-overlay {
  position: absolute;
  inset: 0;

  display: block;

  z-index: 20;
  pointer-events: none;
}

.player-shell:fullscreen .fullscreen-metric {
  position: relative;
  top: 16px;
  left: 16px;
  margin-bottom: 4px;
}

.player-shell:fullscreen #fullscreenSettingsBtn {
  position: fixed;
  top: 16px;
  right: 16px;

  z-index: 30;

  align-self: unset;
}

.player-shell:fullscreen .fullscreen-metric,
.player-shell:fullscreen #fullscreenSettingsBtn {
  pointer-events: auto;
}

.player-shell:fullscreen .settings-panel,
.settings-panel.is-open {
  pointer-events: auto;
}

.player-shell:fullscreen .toast-message {
  font-size: 1.25rem;
  padding: 48px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  z-index: 30;
}

.player-shell:not(:fullscreen) #player,
.player-shell:not(:fullscreen) .training-countdown-overlay,
.player-shell:not(:fullscreen) .toast-message,
.player-shell:not(:fullscreen) .fullscreen-overlay,
.player-shell:not(:fullscreen) .fullscreen-bluetooth-status,
.player-shell:not(:fullscreen) .heart-rate-monitor,
.player-shell:not(:fullscreen) .training-zone-map,
.player-shell:not(:fullscreen) .pocket-mode-btn,
.player-shell:not(:fullscreen) .fullscreen-cast-btn,
.player-shell:not(:fullscreen) .pocket-lock-overlay,
.player-shell:not(:fullscreen) #fullscreenBtn {
  display: none;
}

.player-shell:fullscreen #player,
.player-shell:-webkit-full-screen #player {
  display: block;
}

.fullscreen-control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  border-radius: 12px;
  cursor: pointer;
}

.training-pause-button[hidden],.fullscreen-training-pause-button[hidden]{display:none!important}.player-shell:not(:fullscreen):not(.is-simulated-fullscreen) .fullscreen-training-pause-button{display:none}.training-pause-button{border-color:rgba(53,217,232,.5)!important;color:#dffcff!important;background:rgba(8,42,49,.86)!important}.training-pause-button.is-paused{border-color:rgba(75,226,162,.62)!important;color:#081712!important;background:#55dfa4!important}
.fullscreen-training-pause-button{position:absolute;z-index:6000001;right:max(80px,calc(env(safe-area-inset-right) + 68px));bottom:max(88px,calc(env(safe-area-inset-bottom) + 78px));display:flex;align-items:center;justify-content:center;gap:8px;min-width:132px;height:44px;padding:8px 15px;border:1px solid rgba(48,216,234,.52);border-radius:999px;color:#e8fcff;background:rgba(4,24,29,.9);box-shadow:0 8px 28px rgba(0,0,0,.35);font:inherit;cursor:pointer}.fullscreen-training-pause-button span{font-size:1.05rem}.fullscreen-training-pause-button b{font-size:.8rem}.fullscreen-training-pause-button.is-paused{border-color:#5ce6ad;color:#062015;background:#5ce6ad;box-shadow:0 0 24px rgba(92,230,173,.22)}.player-shell.is-training-paused #player{filter:brightness(.48) saturate(.72);transition:filter .25s ease}.player-shell.is-training-paused .heart-rate-line{opacity:.45}
@media (orientation:portrait) and (max-width:700px){.fullscreen-training-pause-button{top:max(138px,calc(env(safe-area-inset-top) + 126px));right:max(12px,env(safe-area-inset-right));bottom:auto;min-width:0;height:42px;padding:8px 13px}.fullscreen-training-pause-button b{font-size:.7rem}}
@media (orientation:landscape) and (max-height:700px){.fullscreen-training-pause-button{top:126px;right:18px;bottom:auto;width:106px;min-width:106px;height:40px;padding:5px 8px}}

#fullscreenToggleTrainingBtn {
  position: absolute;
  top: 35%;
  left: 50%;
  height: 84px;
  width: auto;
  white-space: nowrap;
  transform: translate(-50%, 85px);
  z-index: 6000000;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    top 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.35s ease,
    min-width 0.35s ease;
}

#fullscreenToggleTrainingBtn.is-training-active,
#fullscreenToggleTrainingBtn.is-countdown-active {
  top: calc(100% - 24px);

  left: calc(100% - 72px);

  transform: translate(-100%, -100%) scale(0.72);

  height: 56px;

  min-width: 190px;

  padding: 10px 20px;

  font-size: 18px;
}

.fullscreen-metric {
  min-width: auto;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.55);
  box-shadow: none;
}

.fullscreen-metric span {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

#fullscreenTrainingDurationMetric span {
  font-size: 18px;
}

.fullscreen-metric small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

#fullscreenTrainingDurationMetric {
  position: relative;
  top: 24px;
}

.fullscreen-pulse-metric {
  display: flex;
  align-items: baseline;
  gap: 3px;
  z-index: 1000000;
}

.fullscreen-pulse-metric span {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

#fullscreenPulseValue {
  cursor: pointer;
}

#fullscreenPulseValue:hover {
  opacity: 0.8;
}

.fullscreen-pulse-metric em {
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.85;
}

.fullscreen-zone-metric {
  margin-top: -2px;
  margin-left: 5px;
  padding: 1px 6px;
  background: var(--zone-1);
  transition: background 0.25s ease;
}

.fullscreen-zone-metric span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.fullscreen-bluetooth-status {
  position: absolute;

  top: 72px;
  right: 32px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(15, 15, 15, 0.82);

  font-size: 22px;

  z-index: 30;

  transition:
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.fullscreen-bluetooth-status.status-ready {
  color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.65);
}

.fullscreen-bluetooth-status.status-disconnected,
.fullscreen-bluetooth-status.status-no-data {
  color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.65);
}

#fullscreenSettingsBtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(15, 15, 15, 0.82);
  color: var(--color-text);
  font-size: 22px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn {
  display: flex;
}

.fullscreen-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  z-index: 50;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.82);
  color: var(--color-text);
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.fullscreen-btn:hover {
  background: rgba(35, 35, 35, 0.92);
  transform: scale(1.05);
}

.player-shell:fullscreen .fullscreen-btn {
  bottom: 20px;
}

.pocket-mode-btn {
  position: absolute;
  right: 16px;
  bottom: 76px;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.82);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.fullscreen-cast-btn {
  position: absolute;
  right: 16px;
  bottom: 136px;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.82);
  color: var(--color-text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.fullscreen-cast-btn:hover {
  background: rgba(35, 35, 35, 0.92);
  transform: scale(1.05);
}

.fullscreen-cast-btn.is-connected {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(12, 186, 230, 0.16);
}

.fullscreen-cast-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.pocket-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 9000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 15%, rgba(31, 191, 232, 0.22), transparent 34%),
    linear-gradient(160deg, #03090d 0%, #07151c 55%, #020608 100%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pocket-lock-overlay::before {
  content: "♡  checkPulse  ·  TRAINING LOCKED";
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 20px;
  color: #dffaff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pocket-lock-overlay::after {
  content: "Z0     Z1     Z2     Z3     Z4     Z5";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
  padding-top: 12px;
  border-top: 5px solid;
  border-image: linear-gradient(90deg, #9ca3af 0 16%, #3b82f6 16% 32%, #22c55e 32% 49%, #eab308 49% 66%, #f97316 66% 83%, #ef4444 83%) 1;
  color: #a8bbc4;
  font-size: 0.65rem;
  font-weight: 800;
  word-spacing: 0.7em;
  text-align: center;
}

.player-shell.is-no-video-training:fullscreen,
.player-shell.is-no-video-training.is-simulated-fullscreen {
  background:
    radial-gradient(circle at 75% 15%, rgba(35, 203, 235, 0.22), transparent 26%),
    radial-gradient(circle at 20% 90%, rgba(61, 214, 123, 0.14), transparent 30%),
    linear-gradient(150deg, #020608, #07151c 55%, #020405);
}

.player-shell.is-no-video-training:fullscreen::before,
.player-shell.is-no-video-training.is-simulated-fullscreen::before {
  content: "checkPulse  ·  LIVE TRAINING";
  position: absolute;
  top: max(24px, calc(env(safe-area-inset-top) + 12px));
  left: 50%;
  z-index: 19;
  color: #dffaff;
  font-size: clamp(0.72rem, 2vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  transform: translateX(-50%);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-overlay,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-overlay {
  inset: clamp(58px, 9vh, 92px) clamp(18px, 5vw, 70px) clamp(76px, 11vh, 110px);
  border: 1px solid rgba(31, 191, 232, 0.42);
  border-radius: 28px;
  background: rgba(3, 12, 17, 0.72);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55), inset 0 0 50px rgba(31, 191, 232, 0.05);
  backdrop-filter: blur(14px);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-metric,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-metric {
  top: clamp(70px, 13vh, 130px);
  left: clamp(20px, 6vw, 70px);
  min-width: min(38vw, 210px);
  margin-bottom: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(31, 191, 232, 0.22);
  border-radius: 18px;
  background: rgba(6, 18, 24, 0.9);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric span,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric span {
  font-size: clamp(2.2rem, 9vw, 5.5rem);
}

.pocket-live-metrics {
  position: absolute;
  top: max(58px, calc(env(safe-area-inset-top) + 48px));
  left: 20px;
  right: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pocket-live-metric {
  min-width: 126px;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid rgba(12, 186, 230, 0.52);
  border-radius: 18px;
  background: rgba(5, 15, 20, 0.94);
  color: #ffffff;
  text-align: center;
}

.pocket-live-metric small,
.pocket-live-metric > span {
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 750;
}

.pocket-live-metric strong {
  color: #ffffff;
  font-size: clamp(1.25rem, 6vw, 2rem);
  line-height: 1;
}

.pocket-coach-card {
  position: absolute;
  top: max(178px, calc(env(safe-area-inset-top) + 164px));
  left: 50%;
  width: min(480px, calc(100vw - 40px));
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--coach-accent, #0cbae6);
  border-radius: 22px;
  background: rgba(4, 10, 14, 0.96);
  color: #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
}

.pocket-coach-card[hidden] {
  display: none;
}

.pocket-coach-card img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 1px solid var(--coach-accent, #0cbae6);
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: #071017;
}

.pocket-coach-card > div {
  display: grid;
  gap: 3px;
}

.pocket-coach-card small {
  color: var(--coach-accent, #0cbae6);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pocket-coach-card strong {
  font-size: clamp(0.94rem, 3.8vw, 1.15rem);
  line-height: 1.25;
}

.pocket-zone-message {
  position: absolute;
  top: max(150px, calc(env(safe-area-inset-top) + 134px));
  left: 50%;
  max-width: min(420px, 88vw);
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
}

.pocket-zone-message[hidden] {
  display: none;
}

.pocket-lock-overlay[hidden] {
  display: none;
}

.pocket-unlock-btn {
  position: relative;
  width: min(320px, 86vw);
  min-height: 132px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-align: center;
  touch-action: none;
}

.pocket-unlock-btn span,
.pocket-unlock-btn strong {
  position: relative;
  z-index: 2;
}

.pocket-unlock-btn span {
  font-size: 30px;
}

.pocket-unlock-btn strong {
  max-width: 240px;
  font-size: 16px;
  line-height: 1.4;
}

.pocket-unlock-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(31, 190, 232, 0.28);
  transform: scaleX(0);
  transform-origin: left center;
}

.pocket-unlock-btn.is-holding::after {
  animation: pocket-unlock-progress 2s linear forwards;
}

@keyframes pocket-unlock-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

#videoSetupModal .modal-box {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.video-preview-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-dark);
}

.video-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.training-zone-map {
  display: none;
}

.player-shell:fullscreen .training-zone-map {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;

  position: absolute;
  left: 16px;
  bottom: 16px;

  display: block;

  width: 140px;
  padding: 8px;

  border-radius: 18px;

  z-index: 30;
}

.player-shell:fullscreen #trainingZoneControls,
.player-shell.is-simulated-fullscreen #trainingZoneControls {
  transform: scale(0.6667);
  transform-origin: left bottom;
}

.zone-pie-chart {
  width: 60px;
  height: 60px;

  display: flex;
  justify-content: start;

  margin: 0 0 8px 0;

  border-radius: 50%;

  background: conic-gradient(#444 0deg 360deg);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 12px rgba(0, 0, 0, 1);
}

.zone-pie-legend {
  font-size: 11px;
  color: var(--color-text-muted);

  line-height: 1.5;
  text-align: left;

  margin-top: 10px;
  padding: 10px 14px;

  position: relative;
  z-index: 99999;

  border-radius: 16px;

  background: rgba(15, 15, 15, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.zone-legend-label.is-target-zone {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

.zone-legend-label.is-live-zone {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.zone-pie-label {
  position: absolute;

  font-size: 10px;
  font-weight: 700;

  color: white;

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.7);

  transform: translate(-50%, -50%);

  pointer-events: none;
}

@media (max-width: 768px) {
  .player-shell:fullscreen .training-zone-map {
    left: 4px;
    bottom: 4px;
  }

  .zone-pie-chart {
    width: 60px;
    height: 60px;
    margin-top: 24px;
    margin-left: 4px;
    z-index: 1;
    opacity: 0.92;
  }
}

.zone-legend-label {
  cursor: pointer;

  display: inline-block;

  min-width: 28px;

  padding: 2px 6px;

  margin-right: 6px;

  border-radius: 999px;

  font-weight: 700;

  color: white;

  text-align: center;
}

.heart-rate-line {
  position: relative;

  max-width: 440px;
  height: 80px;

  display: block;

  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;

  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
}

.heart-rate-monitor {
  position: absolute;

  left: 200px;
  bottom: 24px;

  display: none;

  width: 440px;
  height: 80px;

  z-index: 35;

  pointer-events: none;
}

.heart-rate-icon {
  position: absolute;

  top: 10px;
  left: 12px;

  z-index: 2;

  color: var(--color-primary);

  font-size: 22px;
}

.heart-rate-line {
  width: 100%;
  height: 100%;
}

.summary-heart-rate-line {
  max-width: 90%;
}

.player-shell:fullscreen .heart-rate-monitor {
  display: flex;
}

@media (orientation: landscape) {
  .player-shell:fullscreen .heart-rate-line {
    width: 340px;
  }

  .player-shell:fullscreen
    #fullscreenToggleTrainingBtn:not(.is-training-active):not(
      .is-countdown-active
    ) {
    top: 35%;

    transform: translate(-50%, 0);
  }
}

/* Live-Video: HF-Kurve und Coach bilden eine gemeinsame, ruhige Kartenzeile.
   BPM, Sollzone und Range stehen bereits in den oberen Cockpit-Metriken; die
   Kurvenkarte konzentriert sich deshalb wie die Abschlussstatistik auf Verlauf
   und den direkt bedienbaren Zonenstreifen. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
  grid-template-rows: minmax(42px, 1fr) 30px !important;
  gap: 7px !important;
  padding: 10px !important;
  border-color: rgba(37, 211, 231, .34) !important;
  background: linear-gradient(145deg, rgba(5, 31, 37, .94), rgba(4, 16, 21, .96)) !important;
  box-shadow: inset 0 0 28px rgba(24, 209, 226, .045), 0 12px 32px rgba(0, 0, 0, .34) !important;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-live-header,
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-cooldown {
  display: none !important;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-line {
  width: 100% !important;
  height: 100% !important;
  min-height: 42px !important;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 196, 218, .055), rgba(2, 11, 15, .08));
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
  gap: 4px !important;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .zone-legend-label {
  min-height: 28px !important;
  padding: 3px 1px !important;
  border-radius: 7px !important;
  font-size: .64rem !important;
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top: max(108px, calc(env(safe-area-inset-top) + 96px)) !important;
    right: auto !important;
    left: var(--portrait-edge) !important;
    width: calc(50% - var(--portrait-edge) - 4px) !important;
    height: 108px !important;
    max-height: 108px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top: max(108px, calc(env(safe-area-inset-top) + 96px)) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: calc(50% + 4px) !important;
    width: auto !important;
    max-width: none !important;
    height: 108px !important;
    min-height: 108px !important;
    padding: 9px !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: 39% !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top: 112px !important;
    right: auto !important;
    left: 78px !important;
    width: min(30vw, 360px) !important;
    height: 108px !important;
    max-height: 108px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top: 112px !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(78px + min(30vw, 360px) + 12px) !important;
    width: min(30vw, 360px) !important;
    max-width: min(30vw, 360px) !important;
    height: 108px !important;
    min-height: 108px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

/* ===== VIDEOLOSES LIVE-COCKPIT ===== */
.no-video-live-panel {
  display: none;
}

.player-shell.is-no-video-training:fullscreen,
.player-shell.is-no-video-training.is-simulated-fullscreen {
  --cockpit-cyan: #19d3f3;
  --cockpit-mint: #53e6b0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 12%, rgb(27 211 243 / 18%), transparent 31%),
    radial-gradient(circle at 9% 92%, rgb(83 230 176 / 13%), transparent 34%),
    linear-gradient(145deg, #07151b 0%, #061016 48%, #02070a 100%);
}

.player-shell.is-no-video-training:fullscreen::before,
.player-shell.is-no-video-training.is-simulated-fullscreen::before {
  content: "checkPulse  /  LIVE TRAINING";
  position: absolute;
  top: auto;
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
  left: 50%;
  z-index: 41;
  color: rgba(220, 250, 255, 0.68);
  font-size: clamp(0.56rem, 1vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.player-shell.is-no-video-training:fullscreen::after,
.player-shell.is-no-video-training.is-simulated-fullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgb(75 219 239 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(75 219 239 / 8%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-overlay,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-overlay {
  position: absolute;
  inset: 8% auto auto 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  width: min(82vw, 820px);
  min-height: min(62vh, 570px);
  padding: clamp(28px, 4vw, 52px);
  box-sizing: border-box;
  overflow: visible;
  transform: translateX(-50%);
  border: 1px solid rgb(89 224 240 / 43%);
  border-radius: clamp(24px, 4vw, 42px);
  background:
    linear-gradient(145deg, rgb(15 34 41 / 94%), rgb(3 13 18 / 96%));
  box-shadow:
    0 32px 80px rgb(0 0 0 / 58%),
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 55px rgb(25 211 243 / 8%);
  backdrop-filter: blur(20px);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-overlay::before,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-overlay::before {
  content: "HERZFREQUENZ";
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  left: clamp(28px, 4vw, 52px);
  color: rgb(222 241 245 / 64%);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  align-self: end;
  min-width: 0;
  margin: clamp(20px, 3vh, 36px) 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric small,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric small {
  display: none;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric span,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric span {
  color: #fff;
  font-size: clamp(5rem, 13vw, 9.5rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-shadow: 0 0 35px rgb(25 211 243 / 16%);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric em,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric em {
  margin-left: 16px;
  color: #d9edf0;
  font-size: clamp(1rem, 2.4vw, 1.55rem);
  font-style: normal;
  font-weight: 500;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-zone-metric,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-zone-metric {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: clamp(82px, 12vw, 116px);
  margin: 20px 0 0 24px;
  padding: 14px 18px;
  border: 1px solid rgb(83 230 176 / 64%);
  border-radius: 18px;
  background: rgb(7 22 22 / 76%) !important;
  box-shadow: 0 0 28px rgb(83 230 176 / 13%);
  text-align: center;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-zone-metric span,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-zone-metric span {
  color: var(--cockpit-mint);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 850;
}

.player-shell.is-no-video-training:fullscreen .fullscreen-zone-metric small,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-zone-metric small {
  display: block;
  margin-top: 4px;
  color: #b8c8ca;
  font-size: 0.72rem;
}

.player-shell.is-no-video-training:fullscreen #fullscreenTrainingDurationMetric,
.player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenTrainingDurationMetric {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 22px 0 16px;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.player-shell.is-no-video-training:fullscreen #fullscreenTrainingDurationMetric span,
.player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenTrainingDurationMetric span {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 650;
}

.player-shell.is-no-video-training:fullscreen #fullscreenTrainingDurationMetric small,
.player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenTrainingDurationMetric small {
  order: -1;
  margin-bottom: 5px;
  color: rgb(222 241 245 / 58%);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.player-shell.is-no-video-training:fullscreen .no-video-live-panel,
.player-shell.is-no-video-training.is-simulated-fullscreen .no-video-live-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.no-video-zone-scale {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  min-height: 42px;
  margin: 2px 0 10px;
}

.no-video-zone-scale .zone-legend-label {
  display: grid;
  min-width: 0;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 13px;
  color: #071014;
  font-size: clamp(0.65rem, 1.6vw, 0.85rem);
  font-weight: 950;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.no-video-zone-scale .zone-legend-label:hover,
.no-video-zone-scale .zone-legend-label:focus-visible {
  transform: translateY(-2px);
  outline: none;
  border-color: #fff;
}

.no-video-zone-scale .zone-legend-label.is-target-zone {
  transform: translateY(-3px);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 15%), 0 8px 20px rgb(0 0 0 / 38%);
}
.no-video-zone-scale .zone-scale-z0 { background: var(--zone-0); }
.no-video-zone-scale .zone-scale-z1 { background: var(--zone-1); }
.no-video-zone-scale .zone-scale-z2 { background: var(--zone-2); }
.no-video-zone-scale .zone-scale-z3 { background: var(--zone-3); }
.no-video-zone-scale .zone-scale-z4 { background: var(--zone-4); }
.no-video-zone-scale .zone-scale-z5 { background: var(--zone-5); }

/* Einheitliche plastische Zonenfarben in allen Zonenansichten. */
.zone-legend-label.zone-scale-z0,
.no-video-zone-scale .zone-scale-z0 { background: linear-gradient(145deg, #d8dde5, #7d8797 72%); }
.zone-legend-label.zone-scale-z1,
.no-video-zone-scale .zone-scale-z1 { background: linear-gradient(145deg, #60a5fa, #2563eb 72%); }
.zone-legend-label.zone-scale-z2,
.no-video-zone-scale .zone-scale-z2 { background: linear-gradient(145deg, #4ade80, #16a34a 72%); }
.zone-legend-label.zone-scale-z3,
.no-video-zone-scale .zone-scale-z3 { background: linear-gradient(145deg, #fde047, #eab308 72%); }
.zone-legend-label.zone-scale-z4,
.no-video-zone-scale .zone-scale-z4 { background: linear-gradient(145deg, #fb923c, #ea580c 72%); }
.zone-legend-label.zone-scale-z5,
.no-video-zone-scale .zone-scale-z5 { background: linear-gradient(145deg, #f87171, #dc2626 72%); }

.no-video-stat-grid {
  display: contents;
}

.no-video-stat-grid article,
.no-video-training-target {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 18px;
  background: rgb(255 255 255 / 4%);
}

.no-video-stat-grid small,
.no-video-training-target small {
  display: block;
  margin-bottom: 7px;
  color: rgb(222 241 245 / 58%);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.no-video-stat-grid strong {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.no-video-adherence-card strong {
  color: var(--cockpit-mint);
}

.no-video-training-target {
  grid-column: 1 / -1;
  border-color: rgb(25 211 243 / 20%);
  background: linear-gradient(110deg, rgb(25 211 243 / 9%), rgb(83 230 176 / 5%));
}

.no-video-training-target strong {
  color: #fff;
  font-size: clamp(1.15rem, 2.5vw, 1.8rem);
}

.player-shell.is-no-video-training:fullscreen #fullscreenSettingsBtn,
.player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenSettingsBtn {
  top: max(18px, env(safe-area-inset-top));
  right: clamp(18px, 4vw, 54px);
  z-index: 43;
  border: 1px solid rgb(255 255 255 / 13%);
  background: rgb(4 13 17 / 72%);
  backdrop-filter: blur(12px);
}

.player-shell.is-no-video-training:fullscreen .fullscreen-bluetooth-status,
.player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-bluetooth-status {
  top: max(24px, env(safe-area-inset-top));
  right: clamp(76px, 9vw, 116px);
  z-index: 43;
}

.player-shell.is-no-video-training:fullscreen .training-zone-map,
.player-shell.is-no-video-training.is-simulated-fullscreen .training-zone-map {
  display: none;
}

.player-shell.is-no-video-training:fullscreen .heart-rate-monitor,
.player-shell.is-no-video-training.is-simulated-fullscreen .heart-rate-monitor {
  left: 50%;
  top: var(--no-video-heart-rate-top, 72%);
  bottom: auto;
  z-index: 22;
  width: min(82vw, 820px);
  height: 108px;
  padding: 10px 14px;
  box-sizing: border-box;
  transform: translateX(-50%);
  opacity: 0.92;
  border: 1px solid rgb(89 224 240 / 43%);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(15 34 41 / 94%), rgb(3 13 18 / 96%));
  box-shadow: 0 20px 48px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 9%);
  backdrop-filter: blur(16px);
}

.player-shell.is-no-video-training:fullscreen .heart-rate-line,
.player-shell.is-no-video-training.is-simulated-fullscreen .heart-rate-line {
  width: 100%;
  height: 88px;
}

.player-shell.is-no-video-training:fullscreen #fullscreenToggleTrainingBtn,
.player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenToggleTrainingBtn {
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 44;
  min-width: 180px;
  padding: 13px 26px;
  box-shadow: 0 10px 30px rgb(15 190 224 / 24%);
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:fullscreen::before,
  .player-shell.is-no-video-training.is-simulated-fullscreen::before {
    top: auto;
    right: auto;
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 3px));
    left: 50%;
    font-size: 0.5rem;
    transform: translateX(-50%);
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-overlay,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-overlay {
    inset: 8.5% auto auto 50%;
    width: calc(100% - 28px);
    min-height: 0;
    padding: 34px 22px 24px;
    border-radius: 26px;
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-overlay::before,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-overlay::before {
    top: 25px;
    left: 22px;
    font-size: 0.58rem;
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric {
    margin-top: 24px;
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-pulse-metric span,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-pulse-metric span {
    font-size: clamp(4.2rem, 24vw, 6.2rem);
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-zone-metric,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-zone-metric {
    min-width: 72px;
    margin-left: 10px;
    padding: 10px;
  }

  .player-shell.is-no-video-training:fullscreen .fullscreen-zone-metric span,
  .player-shell.is-no-video-training.is-simulated-fullscreen .fullscreen-zone-metric span {
    font-size: 1.8rem;
  }

  .player-shell.is-no-video-training:fullscreen #fullscreenTrainingDurationMetric,
  .player-shell.is-no-video-training.is-simulated-fullscreen #fullscreenTrainingDurationMetric {
    padding: 15px 0 12px;
  }

  .player-shell.is-no-video-training:fullscreen .no-video-live-panel,
  .player-shell.is-no-video-training.is-simulated-fullscreen .no-video-live-panel {
    gap: 10px;
  }

  .no-video-zone-scale {
    gap: 3px;
    min-height: 34px;
    margin-bottom: 4px;
  }

  .no-video-zone-scale .zone-legend-label {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.62rem;
  }

  .no-video-stat-grid article,
  .no-video-training-target {
    padding: 12px 13px;
    border-radius: 14px;
  }

  .no-video-stat-grid small,
  .no-video-training-target small {
    font-size: 0.55rem;
  }

  .no-video-stat-grid strong {
    font-size: 1.35rem;
  }

  .no-video-training-target strong {
    font-size: 1rem;
  }

  .player-shell.is-no-video-training:fullscreen .heart-rate-monitor,
  .player-shell.is-no-video-training.is-simulated-fullscreen .heart-rate-monitor {
    top: var(--no-video-heart-rate-top, 62%);
    bottom: auto;
    width: calc(100% - 28px);
    height: 84px;
  }
}

.player-shell:fullscreen .heart-rate-line {
  display: block;
}

@media (max-width: 600px) {
  .player-shell:fullscreen .heart-rate-monitor {
    left: auto;
    right: 16px;
    bottom: 76px;

    width: 220px;

    gap: 8px;

    transform: none;
  }

  .player-shell:fullscreen .heart-rate-line {
    width: 174px;
    height: 54px;

    flex: none;
  }

  .player-shell:fullscreen .heart-rate-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;
  }
}

.player-shell:fullscreen,
.player-shell:-webkit-full-screen {
  width: 100vw;
  height: 100vh;

  padding: 8px;
  box-sizing: border-box;

  background: var(--color-bg);
}

.player-shell:fullscreen #player,
.player-shell:-webkit-full-screen #player {
  width: 100%;
  height: 100%;

  border-radius: 16px;
}

.player-shell:fullscreen #player,
.player-shell:-webkit-full-screen #player {
  width: 100%;
  height: 100%;
}

.player-shell:fullscreen iframe,
.player-shell:-webkit-full-screen iframe {
  width: 100%;
  height: 100%;
}

.player-shell:fullscreen {
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.player-shell:fullscreen.fullscreen-state-ok {
  box-shadow: inset 0 0 0 6px rgba(34, 197, 94, 0.8);
}

.player-shell:fullscreen.fullscreen-state-high {
  box-shadow: inset 0 0 0 6px rgba(249, 115, 22, 0.85);
}

.player-shell:fullscreen.fullscreen-state-critical {
  box-shadow: inset 0 0 0 6px rgba(239, 68, 68, 0.9);
}

.player-shell:fullscreen.fullscreen-state-critical {
  box-shadow: inset 0 0 0 6px rgba(142, 36, 170, 0.9);
}

/* App-Fullscreen: zuverlässiger Mobile-Fallback, falls der Browser requestFullscreen nicht bestätigt. */
body.has-simulated-player-fullscreen {
  overflow: hidden;
}

.player-shell.is-simulated-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 5000000;
  width: 100vw;
  height: 100dvh;
  padding: max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  background: var(--color-bg);
}

.player-shell.is-simulated-fullscreen #player,
.player-shell.is-simulated-fullscreen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.player-shell.is-simulated-fullscreen #fullscreenToggleTrainingBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  display: flex;
}

.player-shell.is-simulated-fullscreen
  #fullscreenToggleTrainingBtn.is-training-active,
.player-shell.is-simulated-fullscreen
  #fullscreenToggleTrainingBtn.is-countdown-active {
  top: auto;
  left: auto;
  right: max(80px, calc(env(safe-area-inset-right) + 68px));
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: none;
  height: 56px;
  min-width: 190px;
  padding: 10px 20px;
  font-size: 18px;
}

/* Mobile Hochformat: YouTube-Untertitel bleiben vollständig frei. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:fullscreen
    #fullscreenToggleTrainingBtn.is-training-active,
  .player-shell.is-simulated-fullscreen
    #fullscreenToggleTrainingBtn.is-training-active {
    top: max(88px, calc(env(safe-area-inset-top) + 76px));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    min-width: 0;
    width: auto;
    height: 42px;
    padding: 8px 14px;
    transform: none;
    font-size: 14px;
  }

  .player-shell:fullscreen .heart-rate-monitor,
  .player-shell.is-simulated-fullscreen .heart-rate-monitor {
    top: max(142px, calc(env(safe-area-inset-top) + 130px));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    width: 180px;
    height: 42px;
  }

  .player-shell:fullscreen .heart-rate-line,
  .player-shell.is-simulated-fullscreen .heart-rate-line {
    width: 136px;
    height: 42px;
  }

  .player-shell:fullscreen .heart-rate-icon,
  .player-shell.is-simulated-fullscreen .heart-rate-icon {
    top: 5px;
    left: 7px;
    font-size: 18px;
  }

  /* Ohne Video bleibt der Pulsverlauf unten. Die obere Ausweichposition ist
     ausschliesslich für Video-Trainings zum Schutz der Untertitel gedacht. */
  .player-shell.is-no-video-training:fullscreen .heart-rate-monitor,
  .player-shell.is-no-video-training.is-simulated-fullscreen .heart-rate-monitor {
    top: var(--no-video-heart-rate-top, 62%);
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100% - 28px);
    height: 84px;
    transform: translateX(-50%);
  }

  .player-shell.is-no-video-training:fullscreen .heart-rate-line,
  .player-shell.is-no-video-training.is-simulated-fullscreen .heart-rate-line {
    width: 100%;
    height: 64px;
  }

  .player-shell.is-no-video-training:fullscreen
    #fullscreenToggleTrainingBtn.is-training-active,
  .player-shell.is-no-video-training.is-simulated-fullscreen
    #fullscreenToggleTrainingBtn.is-training-active {
    top: auto;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    width: auto;
    min-width: 190px;
    height: 50px;
    padding: 10px 22px;
    transform: translateX(-50%);
    font-size: 16px;
  }
}

.player-shell.is-simulated-fullscreen .fullscreen-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  pointer-events: none;
}

.player-shell.is-simulated-fullscreen .fullscreen-metric {
  position: relative;
  top: 16px;
  left: 16px;
  margin-bottom: 4px;
  pointer-events: auto;
}

.player-shell.is-simulated-fullscreen #fullscreenSettingsBtn {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(24px, calc(env(safe-area-inset-right) + 12px));
  z-index: 30;
  pointer-events: auto;
}

.player-shell.is-simulated-fullscreen .training-countdown-overlay:not([hidden]),
.player-shell.is-simulated-fullscreen .toast-message,
.player-shell.is-simulated-fullscreen .fullscreen-bluetooth-status,
.player-shell.is-simulated-fullscreen .heart-rate-monitor,
.player-shell.is-simulated-fullscreen .pocket-mode-btn,
.player-shell.is-simulated-fullscreen .fullscreen-cast-btn,
.player-shell.is-simulated-fullscreen .pocket-lock-overlay:not([hidden]),
.player-shell.is-simulated-fullscreen #fullscreenBtn {
  display: flex;
}

.player-shell.is-simulated-fullscreen .training-countdown-overlay[hidden] {
  display: none;
}

.player-shell.is-simulated-fullscreen .training-zone-map {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  display: block;
  width: 140px;
  padding: 8px;
  border-radius: 18px;
}

.player-shell.is-simulated-fullscreen.fullscreen-state-ok {
  box-shadow: inset 0 0 0 6px rgba(34, 197, 94, 0.8);
}
.player-shell.is-simulated-fullscreen.fullscreen-state-high {
  box-shadow: inset 0 0 0 6px rgba(249, 115, 22, 0.85);
}
.player-shell.is-simulated-fullscreen.fullscreen-state-critical {
  box-shadow: inset 0 0 0 6px rgba(142, 36, 170, 0.9);
}

.toast-message {
  position: absolute;
  inset: 0;
  z-index: 60;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.72);

  color: rgb(255, 255, 255);

  font-size: 1.6rem;
  font-weight: 700;

  text-align: center;
  line-height: 1.5;

  z-index: 99999;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

  white-space: pre-line;
}

.toast-message.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.toast-message.is-coach-recovery {
  padding: clamp(18px, 5vw, 48px);
}

.toast-coach-recovery-card {
  width: min(92%, 720px);
  display: grid;
  grid-template-columns: clamp(76px, 18vw, 126px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 28px);
  padding: clamp(16px, 4vw, 28px);
  border: 1px solid color-mix(in srgb, var(--active-coach-accent) 72%, transparent);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(4, 25, 29, 0.96), rgba(7, 18, 22, 0.9));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 28px color-mix(in srgb, var(--active-coach-accent) 18%, transparent);
  text-align: left;
}

.toast-coach-recovery-portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--active-coach-accent);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 24px color-mix(in srgb, var(--active-coach-accent) 34%, transparent);
}

.toast-coach-recovery-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.toast-coach-recovery-name {
  color: var(--active-coach-accent);
  font-size: clamp(0.82rem, 2.5vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toast-coach-recovery-message {
  color: #fff;
  font-size: clamp(1.15rem, 4.4vw, 2rem);
  line-height: 1.28;
  text-wrap: balance;
}

@media (max-width: 440px) {
  .toast-coach-recovery-card {
    grid-template-columns: 70px minmax(0, 1fr);
    border-radius: 22px;
  }
}

/* Die Rule Engine darf das Medium sperren, aber niemals die Zielzonenwahl.
   Die Leiste bleibt über der Pulswarnung sichtbar und bedienbar; die fachliche
   Fünf-Minuten-Sperre wird ausschließlich in script.js geprüft. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen) #trainingZoneControls {
  z-index: 100001;
  pointer-events: auto;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) #trainingZoneControls .zone-pie-legend,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) #trainingZoneControls .zone-legend-label {
  pointer-events: auto;
}

.form-group {
  margin: 15px 0 15px 0;
}

#pulseSource {
  border: 1px solid var(--color-border);
}

.bluetooth-help {
  display: none;
  padding: 16px;
}

.bluetooth-help.is-visible {
  display: block;
  background-color: var(--color-primary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  margin-top: 16px;
}

.bluetooth-help.is-visible.is-startup-overlay {
  position: fixed;
  z-index: 10060;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  background: linear-gradient(155deg, #10272c, #07181c);
  border-color: rgba(45, 214, 235, 0.5);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72), 0 0 0 100vmax rgba(0, 5, 8, 0.64);
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#closeHelp {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}

#closeHelp:hover {
  opacity: 0.7;
  transform: none;
  border: 1px solid var(--color-border);
  padding: 2px 4px;
  margin: 0;
}

.bluetooth-help h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.bluetooth-help ol {
  padding-left: 18px;
  margin-bottom: 14px;
}

.device-specific-bluetooth-help{margin:16px 0;padding:14px;border:1px solid rgba(61,220,235,.55);border-radius:14px;background:rgba(13,59,66,.48)}
.device-specific-bluetooth-help[hidden]{display:none}
.device-specific-bluetooth-help h4{margin:0 0 7px;color:#7cecf5;font-size:1rem}
.device-specific-bluetooth-help p{margin:0 0 10px}
.device-specific-bluetooth-help ol{margin:0;padding-left:22px}
.device-specific-bluetooth-help li+li{margin-top:8px}

.desktop-install-hint{position:fixed;z-index:205000;right:22px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));display:grid;width:min(390px,calc(100vw - 28px));gap:9px;padding:18px 44px 18px 18px;border:1px solid rgba(68,220,236,.48);border-radius:16px;background:rgba(4,21,27,.96);box-shadow:0 18px 55px rgba(0,0,0,.48);color:#effdff;opacity:0;transform:translateY(14px);transition:opacity .24s ease,transform .24s ease;backdrop-filter:blur(16px)}
.desktop-install-hint[hidden]{display:none}
.desktop-install-hint.is-visible{opacity:1;transform:translateY(0)}
.desktop-install-hint strong{font-size:1rem;color:#70e7f2}
.desktop-install-hint p{margin:0;line-height:1.45}
.desktop-install-hint>button:not(.desktop-install-hint-close){justify-self:start;min-height:38px;padding:8px 13px;border:1px solid rgba(97,232,243,.55);border-radius:10px;background:#0daec8;color:#031418;font:inherit;font-weight:850;cursor:pointer}
.desktop-install-hint-close{position:absolute;right:9px;top:8px;width:32px;height:32px;border:0;background:transparent;color:#fff;font-size:1.35rem;cursor:pointer}
@media(max-width:700px){.desktop-install-hint{right:14px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px))}}
.desktop-app-settings-group{display:grid;gap:10px}
.desktop-app-settings-group h3,.desktop-app-settings-group p{margin:0}
.desktop-app-settings-group p,.desktop-app-settings-group small{line-height:1.45}
.desktop-app-settings-group small:empty{display:none}
.desktop-app-install-help{border-top:1px solid rgba(255,255,255,.1);padding-top:9px}.desktop-app-install-help summary{width:max-content;color:#8fa7ac;font-size:.78rem;font-weight:800;cursor:pointer}.desktop-app-install-help p{margin:9px 0 0!important;color:#a9bdc1;font-size:.78rem;line-height:1.5}.desktop-app-install-help[hidden]{display:none}
.desktop-app-fallback-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.desktop-app-fallback-actions .buttons{min-width:0;padding:10px 12px;font-size:.82rem}.desktop-app-fallback-actions .is-secondary{border-color:rgba(80,220,230,.34);background:rgba(3,24,29,.76);color:#bcecf0}@media(max-width:620px){.desktop-app-fallback-actions{grid-template-columns:1fr}}

.pulse-source-failure-form{display:grid;gap:8px;padding-top:13px;border-top:1px solid rgba(255,255,255,.25)}
.pulse-source-failure-form label{font-weight:800;line-height:1.3}
.pulse-source-failure-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pulse-source-failure-form input,.pulse-source-failure-form textarea{box-sizing:border-box;min-width:0;width:100%;padding:9px 11px;border:1px solid rgba(255,255,255,.38);border-radius:9px;background:rgba(2,17,22,.72);color:#fff;font:inherit}
.pulse-source-failure-form input{min-height:42px}
.pulse-source-failure-form textarea{min-height:76px;resize:vertical;line-height:1.35}
.pulse-source-failure-form input:focus,.pulse-source-failure-form textarea:focus{outline:2px solid rgba(85,230,216,.72);outline-offset:1px}
.pulse-source-failure-form button{min-height:42px;padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:#06232b;color:#fff;font:inherit;font-weight:850;cursor:pointer}
.pulse-source-failure-form small{line-height:1.35;color:rgba(255,255,255,.82)}
.pulse-source-failure-form.is-reported small{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin-top:4px;
  padding:12px 14px;
  border:1px solid rgba(69,232,145,.72);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(13,91,53,.92),rgba(8,55,39,.96));
  color:#effff6;
  font-size:.98rem;
  font-weight:900;
  line-height:1.35;
  box-shadow:0 0 0 1px rgba(69,232,145,.12),0 10px 26px rgba(0,0,0,.28);
  animation:pulse-source-report-success .48s ease-out both;
}
.pulse-source-failure-form.is-reported small::before{
  content:"\2713";
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:#52e89a;
  color:#052719;
  font-size:1.25rem;
  font-weight:1000;
}
.pulse-source-failure-form.is-reported input,
.pulse-source-failure-form.is-reported textarea,
.pulse-source-failure-form.is-reported button{opacity:.55}
@keyframes pulse-source-report-success{
  0%{opacity:0;transform:translateY(5px) scale(.98)}
  70%{transform:translateY(0) scale(1.015)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:560px){.pulse-source-failure-form>div{grid-template-columns:1fr}}

.source-setup-hint {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;

  border-radius: 12px;

  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);

  color: var(--color-text);
  font-size: 0.95rem;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  animation: fadeInHint 0.3s ease;
}

.status-row {
  display: grid;

  grid-template-columns: 1fr auto;

  column-gap: 18px;
  row-gap: 14px;

  align-items: baseline;

  margin-top: 0;
}

.status-card {
  min-height: 150px;
}

.status-hint {
  margin-top: 20px;
  padding-top: 16px;

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

  text-align: left;
  line-height: 1.45;
}

.source-setup-hint[hidden] {
  display: none;
}

@keyframes fadeInHint {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .bluetooth-help {
    position: static;
    width: auto;
    margin-top: 16px;
  }


  .bluetooth-help.is-visible.is-startup-overlay {
    position: fixed;
    width: min(430px, calc(100vw - 28px));
    margin: 0;
  }
}

.dropdown {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;
  font-size: 16px;
  box-sizing: border-box;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.control-element {
  min-height: 48px;
}

.control-element:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.3);
  color: var(--color-text);
}

.pulse-zones {
  position: static;
  width: 100%;
  margin-top: 16px;
  padding: 16px;

  border-radius: 16px;
  background: rgba(15, 15, 15, 0.82);
  border: 1px solid var(--color-border);

  color: var(--color-text);
  font-size: 14px;
}

.pulse-zones-card summary {
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  list-style: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pulse-zones-card summary::-webkit-details-marker {
  display: none;
}

.pulse-zones-card summary::after {
  content: "â–¾";
  font-size: 1rem;
}

.pulse-zones-card:not([open]) summary::after {
  content: "â–¸";
}

.pulse-zone-item {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  margin-bottom: 6px;
  opacity: 0.75;
}

.pulse-zone-item-active {
  border-color: #ffffff;
  opacity: 1;
  font-weight: 700;
}

.zone-legend-label {
  min-width: 56px;
  min-height: 56px;
  padding: 10px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  touch-action: manipulation;
}

/* Im Videotraining dieselbe kompakte Kachelform wie im videolosen Cockpit. */
.player-shell:not(.is-no-video-training):fullscreen .training-zone-map .zone-legend-label,
.player-shell:not(.is-no-video-training).is-simulated-fullscreen .training-zone-map .zone-legend-label {
  min-width: 64px;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 12px;
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:not(.is-no-video-training):fullscreen #trainingZoneControls,
  .player-shell:not(.is-no-video-training).is-simulated-fullscreen #trainingZoneControls {
    top: calc(50% + 28.125vw + 12px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: max-content;
    max-width: calc(150vw - 24px);
    padding: 6px;
    transform: translateX(-50%) scale(0.6667);
    transform-origin: center top;
  }

  .player-shell:not(.is-no-video-training):fullscreen #trainingZoneControls .zone-pie-legend,
  .player-shell:not(.is-no-video-training).is-simulated-fullscreen #trainingZoneControls .zone-pie-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    font-size: 0;
  }

  .player-shell:not(.is-no-video-training):fullscreen #trainingZoneControls .zone-pie-legend br,
  .player-shell:not(.is-no-video-training).is-simulated-fullscreen #trainingZoneControls .zone-pie-legend br {
    display: none;
  }

  .player-shell:not(.is-no-video-training):fullscreen #trainingZoneControls .zone-legend-label,
  .player-shell:not(.is-no-video-training).is-simulated-fullscreen #trainingZoneControls .zone-legend-label {
    margin: 0;
  }
}

.fullscreen-zone-metric {
  min-width: 72px;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: 18px;
}

.fullscreen-zone-metric span {
  font-size: 28px;
}

.fullscreen-zone-metric {
  color: #ffffff; /* Nutzt standardmässig helle Schrift auf dunkleren Zonenfarben */
}

.fullscreen-zone-metric small {
  color: inherit; /* Ãœbernimmt dieselbe Kontrastfarbe wie die Zonen-Kachel */
  opacity: 0.72; /* Hält die BPM-Range gegenüber der Zonennummer etwas dezenter */
}

.global-training-start {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 10020;
  display: flex;
  align-items: center;
  width: 54px;
  height: 54px;
  padding: 12px;
  border: 1px solid rgba(31, 190, 232, .65);
  border-radius: 50%;
  color: #071116;
  background: linear-gradient(135deg, #22d3ee, #1fbfe8);
  box-shadow: 0 7px 20px rgba(31, 190, 232, .28);
  font: inherit;
  transform: translate3d(0, 0, 0);
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

.global-training-start svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-training-start.is-scroll-chasing {
  transform: translate3d(4px, 5px, 0);
  box-shadow: 0 4px 13px rgba(31, 190, 232, .16);
}

.global-training-start[hidden] {
  display: none;
}

/* Die zentrale Trainingsaktion bleibt auch über dem geöffneten Profil erreichbar. */
body:has(#accountAndSettingsPanel.is-open) .global-training-start {
  z-index: 100020;
}

body.is-gear-view-open .global-training-start,
body.is-gear-view-open .haven-v2-launcher {
  display: none !important;
}

.training-feedback-prompt {
  position: fixed;
  inset: 0;
  z-index: 10050000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 7, 10, 0.86);
  backdrop-filter: blur(14px);
}

.training-feedback-prompt[hidden] { display: none; }

.training-feedback-prompt > section {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(45, 220, 239, 0.46);
  border-radius: 24px;
  color: #f3fcff;
  background: linear-gradient(145deg, rgba(12, 36, 42, 0.98), rgba(5, 14, 18, 0.99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66), 0 0 45px rgba(35, 205, 232, 0.1);
}

.training-feedback-prompt-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 1.7rem;
  cursor: pointer;
}

.training-feedback-prompt > section > span {
  display: block;
  padding-right: 36px;
  color: #3ddff0;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.training-feedback-prompt h2 { margin: 8px 0; font-size: clamp(1.6rem, 5vw, 2.25rem); }
.training-feedback-prompt > section > p { margin: 0 0 18px; color: #b8cbd0; line-height: 1.45; }

.training-feedback-prompt-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.training-feedback-prompt-choices button {
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid rgba(66, 214, 235, 0.25);
  border-radius: 13px;
  color: #eafcff;
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-weight: 780;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.training-feedback-prompt-choices button:hover,
.training-feedback-prompt-choices button:focus-visible { border-color: #3ddff0; outline: none; transform: translateY(-1px); }
.training-feedback-prompt-choices button.is-selected { border-color: #4ce49a; color: #b7ffd9; background: rgba(44, 207, 130, 0.15); box-shadow: 0 0 20px rgba(44, 207, 130, 0.12); }

.training-feedback-prompt label { display: block; margin-bottom: 7px; color: #d8e9ec; font-size: 0.78rem; font-weight: 800; }
.training-feedback-prompt textarea { width: 100%; min-height: 76px; padding: 12px; box-sizing: border-box; resize: vertical; border: 1px solid rgba(67, 216, 235, 0.28); border-radius: 13px; color: #fff; background: rgba(1, 8, 11, 0.82); font: inherit; }
.training-feedback-prompt textarea:focus { border-color: #3ddff0; outline: 3px solid rgba(61, 223, 240, 0.13); }

.training-feedback-prompt-reward { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(250, 204, 21, 0.32); border-radius: 13px; background: rgba(250, 204, 21, 0.08); }
.training-feedback-prompt-reward strong { color: #ffd85a; }
.training-feedback-prompt-reward span { color: #c8d5d8; font-size: 0.75rem; text-align: right; }
.training-feedback-prompt-status { min-height: 20px; margin: 0 0 8px !important; color: #ffb5b5 !important; font-size: 0.78rem; }

.training-feedback-prompt-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.training-feedback-prompt-actions button { min-height: 48px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(61, 223, 240, 0.3); font: inherit; font-weight: 850; cursor: pointer; }
#trainingFeedbackPromptSkip { color: #c2d1d4; background: transparent; }
#trainingFeedbackPromptSubmit { border: 0; color: #041418; background: #2bc9e5; }
#trainingFeedbackPromptSubmit:disabled { cursor: not-allowed; opacity: 0.42; }
.training-feedback-prompt.is-success .training-feedback-prompt-choices,
.training-feedback-prompt.is-success label,
.training-feedback-prompt.is-success textarea,
.training-feedback-prompt.is-success .training-feedback-prompt-actions { display: none; }
.training-feedback-prompt.is-success .training-feedback-prompt-reward { border-color: rgba(75, 229, 154, 0.5); background: rgba(75, 229, 154, 0.13); }

@media (max-width: 520px) {
  .training-feedback-prompt { padding: 8px; }
  .training-feedback-prompt > section { padding: 24px 16px 18px; border-radius: 20px; }
  .training-feedback-prompt-choices { grid-template-columns: 1fr; gap: 7px; }
  .training-feedback-prompt-choices button { min-height: 43px; }
  .training-feedback-prompt-reward { align-items: flex-start; flex-direction: column; }
  .training-feedback-prompt-reward span { text-align: left; }
}

.training-recovery-button { position:fixed; top:max(12px,env(safe-area-inset-top)); left:50%; z-index:250000; display:flex; align-items:center; gap:10px; min-height:50px; padding:8px 15px 8px 10px; border:1px solid rgba(75,231,211,.75); border-radius:999px; background:rgba(3,22,27,.96); box-shadow:0 10px 38px rgba(0,0,0,.6),0 0 22px rgba(41,211,190,.24); color:#f2ffff; font:inherit; cursor:pointer; transform:translateX(-50%); backdrop-filter:blur(12px); }
.training-recovery-button[hidden]{display:none}.training-recovery-button>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2bd5bd;color:#031417;font-size:1.25rem;font-weight:950}.training-recovery-button>span:last-child{display:grid;gap:1px;text-align:left}.training-recovery-button strong{font-size:.78rem}.training-recovery-button small{color:#8ff4e4;font-size:.68rem;font-weight:800}.training-recovery-button:focus-visible{outline:3px solid #fff;outline-offset:3px}

.virtual-coach-card {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  left: 50%;
  bottom: auto;
  z-index: 7000000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(390px, calc(100% - 48px));
  padding: 9px 13px;
  border: 1px solid rgba(250, 204, 21, .48);
  border-radius: 18px;
  background: rgba(10, 15, 20, .9);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  pointer-events: none;
}

.training-warmup-banner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: none;
  margin-top: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(43, 213, 189, .78);
  border-radius: 16px;
  background: rgba(3, 22, 27, .94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42), 0 0 24px rgba(43, 213, 189, .16);
  color: #f2ffff;
  backdrop-filter: blur(12px);
}

.training-warmup-banner[hidden] {
  display: none;
}

.training-warmup-banner > span {
  color: #2bd5bd;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.training-warmup-banner > strong {
  font-size: clamp(.92rem, 2vw, 1.15rem);
}

.training-warmup-banner > small {
  color: #b9d7d8;
  font-size: .72rem;
}

@media (max-width: 640px) {
  .training-warmup-banner {
    padding: 9px 11px;
  }
}

/* Verständliche Trainingsziele statt technischer Zonenkürzel. */
#trainingSetupModal .training-goal-choice{min-width:0;margin:16px 0 20px;padding:0;border:0}
#trainingSetupModal .training-goal-choice legend{margin:0 0 10px;padding:0;color:#effcfd;font-size:.92rem;font-weight:900}
#trainingSetupModal .training-goal-choice>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#trainingSetupModal .training-goal-choice label{position:relative;display:block;min-width:0;cursor:pointer}
#trainingSetupModal .training-goal-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#trainingSetupModal .training-goal-choice span{position:relative;display:grid;gap:4px;min-height:76px;align-content:center;padding:11px 13px 11px 17px;border:1px solid rgba(111,204,213,.2);border-radius:14px;background:linear-gradient(135deg,rgba(8,34,40,.82),rgba(4,20,25,.72));overflow:hidden;transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
#trainingSetupModal .training-goal-choice span::before{position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--goal-zone-color,#58dbe7);content:"";opacity:.55}
#trainingSetupModal .training-goal-choice b{color:#f1fbfc;font-size:.78rem;line-height:1.2}
#trainingSetupModal .training-goal-choice small{color:#91adb0;font-size:.64rem;line-height:1.3}
#trainingSetupModal .training-goal-choice label[data-zone="zone0"]{--goal-zone-color:#94a3b8}#trainingSetupModal .training-goal-choice label[data-zone="zone1"]{--goal-zone-color:#22c55e}#trainingSetupModal .training-goal-choice label[data-zone="zone2"]{--goal-zone-color:#84cc16}#trainingSetupModal .training-goal-choice label[data-zone="zone3"]{--goal-zone-color:#eab308}#trainingSetupModal .training-goal-choice label[data-zone="zone4"]{--goal-zone-color:#f97316}#trainingSetupModal .training-goal-choice label[data-zone="zone5"]{--goal-zone-color:#ef4444}
#trainingSetupModal .training-goal-choice input:checked+span{border-color:var(--goal-zone-color);background:linear-gradient(135deg,color-mix(in srgb,var(--goal-zone-color) 18%,#092128),rgba(5,28,33,.94));box-shadow:0 0 0 1px color-mix(in srgb,var(--goal-zone-color) 24%,transparent),0 8px 26px rgba(0,0,0,.2);transform:translateY(-1px)}
#trainingSetupModal .training-goal-choice input:checked+span::before{opacity:1;box-shadow:0 0 15px var(--goal-zone-color)}
#trainingSetupModal .training-goal-choice input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
@media(max-width:420px){#trainingSetupModal .training-goal-choice>div{grid-template-columns:1fr}#trainingSetupModal .training-goal-choice span{min-height:62px}}

/* Tagesform im Trainingssetup: kompakte checkPulse-Auswahl statt Browser-Radios. */
#trainingSetupModal .training-day-form {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 18px 0 2px;
  padding: 0;
  border: 0;
}

#trainingSetupModal .training-day-form legend {
  width: 100%;
  margin: 0 0 3px;
  padding: 0;
  color: #effcfd;
  font-size: 0.9rem;
  font-weight: 850;
}

#trainingSetupModal .training-day-form label {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

#trainingSetupModal .training-day-form input[type="radio"] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#trainingSetupModal .training-day-form label > span {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
  padding: 11px 36px 11px 11px;
  border: 1px solid rgba(74, 203, 216, 0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(9, 39, 45, 0.82), rgba(5, 22, 27, 0.72));
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

#trainingSetupModal .training-day-form label > span::before {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: rgba(39, 204, 224, 0.12);
  color: #51e5ef;
  content: "âš¡";
  font-size: 1rem;
}

#trainingSetupModal .training-day-form label:nth-of-type(2) > span::before {
  background: rgba(87, 224, 177, 0.11);
  color: #67e6b9;
  content: "↺";
}

#trainingSetupModal .training-day-form label:nth-of-type(3) > span::before {
  background: rgba(246, 197, 81, 0.11);
  color: #f5cc68;
  content: "↗";
}

#trainingSetupModal .training-day-form label b,
#trainingSetupModal .training-day-form label small {
  grid-column: 2;
  min-width: 0;
}

#trainingSetupModal .training-day-form label b {
  color: #f3fcfd;
  font-size: 0.84rem;
  line-height: 1.2;
}

#trainingSetupModal .training-day-form label small {
  color: #9db8bb;
  font-size: 0.69rem;
  line-height: 1.35;
}

#trainingSetupModal .training-day-form label > span::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(151, 190, 194, 0.55);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

#trainingSetupModal .training-day-form input[type="radio"]:checked + span {
  border-color: rgba(84, 231, 211, 0.72);
  background: linear-gradient(135deg, rgba(18, 85, 83, 0.58), rgba(5, 35, 39, 0.92));
  box-shadow: inset 3px 0 #59e7c8, 0 8px 22px rgba(18, 179, 173, 0.1);
}

#trainingSetupModal .training-day-form input[type="radio"]:checked + span::after {
  border-color: #061d20;
  background: #62ead0;
  box-shadow: 0 0 0 3px rgba(98, 234, 208, 0.2);
}

#trainingSetupModal .training-day-form input[type="radio"]:focus-visible + span {
  outline: 2px solid #55e4ec;
  outline-offset: 2px;
}

.virtual-coach-card[data-state="ok"] {
  border-color: rgba(34, 197, 94, .72);
}

.virtual-coach-card[data-state="daily"] {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  border-color: var(--coach-accent, rgba(31, 190, 232, 0.72));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.virtual-coach-card[data-state="low"] {
  border-color: rgba(250, 204, 21, .72);
}

.virtual-coach-card[data-state="high"] {
  border-color: rgba(249, 115, 22, .78);
}

.virtual-coach-card[data-state="critical"] {
  border-color: rgba(239, 68, 68, .85);
}

.virtual-coach-card[hidden] {
  display: none;
}

.virtual-coach-card > div:last-child {
  display: grid;
}

.virtual-coach-card small {
  color: var(--coach-accent, #facc15);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.virtual-coach-card strong {
  font-size: .82rem;
}

.virtual-coach-face {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 2px solid var(--coach-accent, #facc15);
  border-radius: 50%;
  background: #071018;
  box-shadow:
    0 0 0 2px rgba(31, 190, 232, .28),
    0 0 22px rgba(31, 190, 232, .38);
}

.virtual-coach-face img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 28%;
}

.profile-signout-button {
  width: 100%;
  margin-top: 0;
}

.profile-email-password-button {
  width: 100%;
  margin-top: 0;
}

.settings-account-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  padding-bottom: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.settings-panel[data-panel-mode="settings"] .settings-account-actions {
  display: none;
}

.profile-email-password-button[hidden] {
  display: none;
}

.email-password-auth-box > label {
  color: var(--color-text);
  font-weight: 700;
}

.email-password-auth-box .settings-eyebrow {
  padding-right: 36px;
}

.email-password-auth-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.88rem;
  line-height: 1.4;
}

.email-password-auth-status[data-status="success"] {
  color: #4ade80;
}

.email-password-auth-status[data-status="error"] {
  color: #fca5a5;
}

.email-password-reset-button {
  margin-top: -6px;
}

#profileAuthSignOutButton {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #031218;
}

#profileAuthSignOutButton:hover {
  border-color: color-mix(in srgb, var(--color-primary) 82%, white);
  background: color-mix(in srgb, var(--color-primary) 82%, white);
}

#profileAuthSignOutButton:disabled {
  opacity: 0.58;
}

#profileDeleteAccountButton.profile-delete-account-button {
  border-color: #ef4444;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.2);
}

#profileDeleteAccountButton[hidden] {
  display: none !important;
}

#profileDeleteAccountButton.profile-delete-account-button:hover {
  border-color: #f87171;
  background: #b91c1c;
  color: #fff;
}

#profileDeleteAccountButton.profile-delete-account-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.coach-mood-card {
  --coach-mood-color: var(--coach-accent, var(--color-primary));
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--coach-mood-color) 38%, var(--color-border));
  border-radius: 17px;
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--coach-mood-color) 15%, transparent), transparent 44%),
    rgba(255, 255, 255, 0.025);
}

.coach-mood-card.is-analysis-open {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.coach-mood-card.is-analysis-open .coach-mood-portrait {
  display: none;
}

.coach-mood-card[hidden],
.coach-settings-group[hidden] {
  display: none;
}

.coach-mood-portrait {
  position: relative;
  align-self: end;
  height: 112px;
}

.coach-mood-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.coach-mood-portrait span {
  position: absolute;
  right: -3px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--coach-mood-color) 65%, white);
  border-radius: 50%;
  background: #071018;
  font-size: 1rem;
  box-shadow: 0 0 14px color-mix(in srgb, var(--coach-mood-color) 38%, transparent);
}

.coach-mood-content {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.coach-mood-content > div:first-of-type {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.coach-mood-content > div:first-of-type strong {
  font-size: 1.05rem;
}

.coach-mood-content > div:first-of-type small,
.coach-mood-trophy-hint {
  color: var(--color-text-muted);
  font-size: 0.66rem;
}

.coach-mood-content > div:first-of-type small {
  flex: 0 0 auto;
}

.coach-mood-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.coach-mood-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--coach-mood-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--coach-mood-color) 48%, transparent);
  transition: width 300ms ease;
}

.coach-mood-content p {
  margin: 1px 0 0;
  color: #fff;
  font-size: 0.73rem;
  line-height: 1.35;
}

.coach-mood-card[data-mood="watchful"] { --coach-mood-color: #94a3b8; }
.coach-mood-card[data-mood="encouraging"] { --coach-mood-color: #38bdf8; }
.coach-mood-card[data-mood="satisfied"] { --coach-mood-color: #22c55e; }
.coach-mood-card[data-mood="proud"] { --coach-mood-color: #facc15; }
.coach-mood-card[data-mood="thrilled"] { --coach-mood-color: #f472b6; }

.guest-coach-hint {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border: 1px dashed rgba(31, 190, 232, 0.42);
  border-radius: 17px;
  background: rgba(31, 190, 232, 0.055);
}

.guest-coach-hint[hidden] {
  display: none;
}

.guest-coach-hint > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(31, 190, 232, 0.13);
  font-size: 1.25rem;
}

.guest-coach-hint strong,
.guest-coach-hint p {
  display: block;
  margin: 0;
}

.guest-coach-hint p {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.trophy-item {
  width: 100%;
  color: inherit;
  text-align: left;
  font: inherit;
}

.trophy-detail-card {
  position: relative;
  max-width: 480px;
}

#trophyDetailModal {
  z-index: 200500;
}

button.cockpit-trophy-chip {
  color: inherit;
  font: inherit;
  text-align: center;
}

.streak-freeze-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(125, 211, 252, .38);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(15, 23, 42, .72));
}

.streak-freeze-product > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.streak-freeze-product small {
  color: var(--color-text-muted);
}

.streak-freeze-product > div {
  display: grid;
  gap: 6px;
  text-align: right;
}

.streak-freeze-product button {
  min-height: 38px;
  border: 1px solid rgba(125, 211, 252, .6);
  border-radius: 12px;
  color: #071116;
  background: #7dd3fc;
  font-weight: 900;
}

.streak-freeze-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(125, 211, 252, .7));
}

.weekly-streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(251, 146, 60, .35);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(251, 146, 60, .12), rgba(20, 20, 20, .82));
}

.weekly-streak-card > span {
  font-size: 2.25rem;
}

.weekly-streak-card > div {
  display: grid;
}

.weekly-streak-card small {
  color: #fb923c;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.weekly-streak-card strong {
  font-size: 1.2rem;
}

.weekly-streak-card div > span {
  color: var(--color-text-muted);
  font-size: .76rem;
}

.weekly-streak-remaining{margin-top:4px;color:#f8c16b!important;font-size:.82rem!important}.weekly-streak-remaining.is-complete{color:#5ce29b!important}.weekly-streak-progress{width:100%;height:6px;margin:7px 0 5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)}.weekly-streak-progress>i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fb923c,#facc15);box-shadow:0 0 10px rgba(251,146,60,.55);transition:width .35s ease}.weekly-streak-rules{margin:8px 0 0;color:#b9c9cb;font-size:.72rem;line-height:1.45}.weekly-streak-rules b{color:#43ddec}
.urgent-streak-freeze-offer{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:11px;padding:11px;border:1px solid rgba(125,211,252,.42);border-radius:13px;background:rgba(43,95,125,.14)}.urgent-streak-freeze-offer[hidden]{display:none}.urgent-streak-freeze-offer>span{font-size:1.55rem}.urgent-streak-freeze-offer>div{display:grid;gap:4px}.urgent-streak-freeze-offer strong{color:#dff6ff;font-size:.78rem}.urgent-streak-freeze-offer small{color:#a9c0c7;text-transform:none;letter-spacing:0;line-height:1.4}.urgent-streak-freeze-offer button{justify-self:start;margin-top:5px;padding:7px 11px;border:1px solid rgba(125,211,252,.7);border-radius:999px;color:#031317;background:#7dd3fc;font-weight:900;cursor:pointer}.urgent-streak-freeze-offer button:disabled{opacity:.45;cursor:not-allowed}.urgent-streak-freeze-offer em{min-height:1.2em;color:#5ce29b;font-size:.68rem;font-style:normal}
.calendar-streak-freeze-tile{display:grid;grid-template-columns:auto 1fr;gap:14px;margin:0 0 16px;padding:15px;border:1px solid rgba(116,198,255,.42);border-radius:17px;background:radial-gradient(circle at 0 0,rgba(83,180,255,.16),transparent 45%),linear-gradient(145deg,rgba(8,31,40,.96),rgba(7,17,22,.96));box-shadow:0 12px 32px rgba(0,0,0,.25)}.calendar-streak-freeze-tile>span{font-size:2.1rem;filter:drop-shadow(0 0 11px rgba(125,211,252,.6))}.calendar-streak-freeze-tile>div{display:grid;gap:4px}.calendar-streak-freeze-tile small{color:#7dd3fc;font-size:.6rem;font-weight:950;letter-spacing:.13em}.calendar-streak-freeze-tile strong{color:#f0fbff}.calendar-streak-freeze-tile p{margin:1px 0;color:#abc1c7;font-size:.75rem;line-height:1.45}.calendar-streak-freeze-tile em{color:#8be6ff;font-size:.72rem;font-style:normal;font-weight:850}.calendar-streak-freeze-tile button{justify-self:start;margin-top:5px;padding:9px 13px;border:1px solid rgba(125,211,252,.72);border-radius:999px;color:#031317;background:#7dd3fc;font-weight:950;cursor:pointer}.calendar-streak-freeze-tile button:disabled{opacity:.45;cursor:not-allowed}.calendar-streak-freeze-tile b{min-height:1.2em;color:#5ce29b;font-size:.7rem;font-weight:750}@media(max-width:520px){.calendar-streak-freeze-tile{grid-template-columns:1fr}.calendar-streak-freeze-tile>span{font-size:1.7rem}.calendar-streak-freeze-tile button{width:100%}}
.calendar-streak-freeze-tile{display:block;padding:0;overflow:hidden}.calendar-streak-freeze-tile summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:15px;cursor:pointer;list-style:none}.calendar-streak-freeze-tile summary::-webkit-details-marker{display:none}.calendar-streak-freeze-tile summary>span:first-child{font-size:2.1rem;filter:drop-shadow(0 0 11px rgba(125,211,252,.6))}.calendar-streak-freeze-tile summary>span:nth-child(2){display:grid;gap:3px}.calendar-streak-freeze-chevron{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(125,211,252,.42);border-radius:50%;color:#7dd3fc;font-size:1.25rem;transition:transform .2s ease}.calendar-streak-freeze-tile[open] .calendar-streak-freeze-chevron{transform:rotate(180deg)}.calendar-streak-freeze-tile>.calendar-streak-freeze-content{display:grid;gap:4px;padding:0 15px 15px 63px;border-top:1px solid rgba(125,211,252,.12)}.calendar-streak-freeze-tile p{margin:12px 0 1px}@media(max-width:520px){.calendar-streak-freeze-tile summary{gap:10px;padding:13px}.calendar-streak-freeze-tile summary>span:first-child{font-size:1.7rem}.calendar-streak-freeze-tile>.calendar-streak-freeze-content{padding:0 13px 13px}}

.language-settings-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr);
  gap: 12px;
  align-items: center;
}

.language-settings-group label {
  display: grid;
  gap: 2px;
}

.coach-settings-group > p {
  margin: 4px 0 12px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.coach-selection-grid {
  display: grid;
  gap: 10px;
}

.coach-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  padding: 7px 10px 7px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text);
  text-align: left;
}

.coach-option:hover,
.coach-option.is-selected {
  border-color: var(--coach-accent, var(--color-primary));
  background: rgba(31, 190, 232, 0.09);
}

.coach-option:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.coach-option.is-selected:disabled {
  opacity: 1;
}

.coach-change-hint,
.startup-coach-change-hint {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(31, 190, 232, 0.34);
  border-radius: 12px;
  background: rgba(31, 190, 232, 0.08);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.38;
}

.coach-change-hint[hidden],
.startup-coach-change-hint[hidden] {
  display: none;
}

.startup-coach-change-hint {
  grid-column: 1 / -1;
  margin: 0 10px 10px;
}

.coach-option img {
  width: 58px;
  height: 64px;
  object-fit: contain;
  object-position: center bottom;
}

.coach-option > span {
  display: grid;
  min-width: 0;
}

.coach-option > span small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-option em {
  color: var(--coach-accent, var(--color-primary));
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.coach-option {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.coach-option-summary {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.coach-option-summary > span {
  display: grid;
  min-width: 0;
}

.coach-option-summary > span small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-option-summary > em,
.startup-coach-option-summary > em {
  color: var(--coach-accent, var(--color-primary));
  font-size: 1.25rem;
  font-style: normal;
  transition: transform 180ms ease;
}

.coach-option.is-expanded .coach-option-summary > em,
.startup-coach-option.is-expanded .startup-coach-option-summary > em {
  transform: rotate(90deg);
}

.coach-option-details,
.startup-coach-option-details {
  display: grid;
  gap: 11px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}

.coach-option-details[hidden],
.startup-coach-option-details[hidden] {
  display: none;
}

.coach-option-details p,
.startup-coach-option-details p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.coach-detail-traits {
  display: grid;
  gap: 5px;
}

.coach-detail-trait {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.coach-detail-trait-meter {
  display: flex;
  gap: 4px;
}

.coach-detail-trait-meter i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.3);
}

.coach-detail-trait-meter i.is-active {
  background: var(--startup-coach-accent, var(--coach-accent, var(--color-primary)));
  box-shadow: 0 0 6px color-mix(in srgb, var(--coach-accent, var(--color-primary)) 55%, transparent);
}

.coach-select-action {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--coach-accent, var(--color-primary)) 48%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--coach-accent, var(--color-primary)) 12%, transparent);
  color: var(--coach-accent, var(--color-primary));
  font-size: 0.75rem;
  font-weight: 850;
}

.coach-select-action:disabled {
  opacity: 0.62;
}

.language-settings-group select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(31, 190, 232, .34);
  background-color: #111820;
  color: #fff;
  color-scheme: dark;
  appearance: auto;
}

.language-settings-group select option {
  background: #111820;
  color: #fff;
}

.trophy-detail-icon {
  display: grid;
  width: 88px;
  height: 88px;
  margin: 4px auto 12px;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 204, 21, .12);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .4);
  font-size: 2.8rem;
}

.trophy-detail-date {
  color: var(--color-text-muted);
}

.trophy-detail-friends {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.trophy-detail-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}

@media (max-width: 600px) {
  .global-training-start {
    right: max(20px, calc(env(safe-area-inset-right) + 12px));
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
  .global-training-start strong {
    font-size: .76rem;
  }
  .virtual-coach-card {
    top: max(4px, env(safe-area-inset-top));
    left: 50%;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
  }
}
@media (max-width: 600px) {
  .app {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 12px;
    padding: 12px;
    overflow-x: clip;
  }

  .app > .card,
  .app > section,
  .app > details {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
  }

  .app > .training-goal-dashboard-card,
  .app > #trainingCockpitCard,
  .app > .cockpit-accordion-card[open] {
    grid-column: 1 / -1;
  }

  body.is-guest-athlete .app > #trainingCockpitCard:not([open]) {
    grid-column: 1;
    min-height: 116px;
  }

  body.is-guest-athlete .app > #cockpitTrophyPreviewCard {
    grid-column: 2;
    min-height: 116px;
  }

  body.is-guest-athlete .app > #trainingCockpitCard:not([open]) > summary,
  body.is-guest-athlete .app > #cockpitTrophyPreviewCard {
    height: 100%;
    box-sizing: border-box;
  }

  .app > .cockpit-accordion-card:not([open]),
  .app > .last-training-cockpit-card,
  .app > .cockpit-trophy-preview-card {
    min-height: 116px;
    border-radius: 16px;
  }

  .app > .cockpit-accordion-card:not([open]) > summary {
    min-height: 98px;
    align-items: center;
  }

  .app > .cockpit-accordion-card:not([open]) h2 {
    margin-left: 0;
    font-size: 1rem;
    line-height: 1.15;
  }

  .app > .cockpit-accordion-card:not([open]) .cockpit-card-eyebrow {
    font-size: 0.58rem;
    line-height: 1.25;
  }

  .app > .cockpit-trophy-preview-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app > .cockpit-trophy-preview-card .cockpit-trophy-preview-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .app > .cockpit-trophy-preview-card .cockpit-trophy-preview-heading h2 {
    margin-left: 0;
    font-size: 1rem;
  }

  .app > .cockpit-trophy-preview-card .cockpit-trophy-preview-heading > strong {
    font-size: 0.7rem;
  }

  .app > .cockpit-trophy-preview-card .cockpit-trophy-preview {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .app > .last-training-cockpit-card {
    align-content: start;
  }

  .app > .last-training-cockpit-card .last-training-cockpit-metrics {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  h1 {
    font-size: 1.8rem;
  }

  .last-training-cockpit-summary > div strong {
    font-size: clamp(.92rem, 4.2vw, 1.08rem);
    line-height: 1.1;
  }

  .card {
    padding: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .buttons {
    flex-direction: column;
    width: 100%;
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .pulse-zones {
    position: static;
    width: auto;
    margin-top: 16px;
  }
}

input[type="range"].control-element {
  --slider-zone-color: var(--color-primary);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--slider-zone-color) 55%, #09232a);
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-primary);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--slider-zone-color) 20%, transparent);

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

#thresholdInput::-webkit-slider-runnable-track {
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#thresholdInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 52px;
  margin-top: -2px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 0 9px, #72777b 9px 11px, transparent 11px 14px, #92979a 14px 16px, transparent 16px 19px, #72777b 19px 21px, transparent 21px),
    linear-gradient(180deg, #45494c 0%, #24272a 40%, #08090a 51%, #202326 64%, #050607 100%);
  border: 2px solid #777c80;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -3px 5px rgba(0,0,0,.72),
    0 0 0 2px rgba(0,0,0,.72),
    0 4px 10px rgba(0,0,0,.7);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

#thresholdInput::-moz-range-thumb {
  width: 30px;
  height: 52px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 0 9px, #72777b 9px 11px, transparent 11px 14px, #92979a 14px 16px, transparent 16px 19px, #72777b 19px 21px, transparent 21px),
    linear-gradient(180deg, #45494c 0%, #24272a 40%, #08090a 51%, #202326 64%, #050607 100%);
  border: 2px solid #777c80;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -3px 5px rgba(0,0,0,.72),
    0 0 0 2px rgba(0,0,0,.72),
    0 4px 10px rgba(0,0,0,.7);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

#thresholdInput::-moz-range-track {
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#thresholdInput:hover::-webkit-slider-thumb,
#thresholdInput:focus-visible::-webkit-slider-thumb {
  transform: scale(1.1);
}

#thresholdInput:hover::-moz-range-thumb,
#thresholdInput:focus-visible::-moz-range-thumb {
  transform: scale(1.1);
}

.slider-value {
  display: block;
  margin-top: var(--space-xs);

  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: bold;
  text-align: center;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  padding-top: 34px;
}

.training-zone-selected-title {
  margin: 18px 0 2px;
  color: var(--color-text);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  text-align: left;
}

.slider-bubble {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 27px;
  padding: 4px 8px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--slider-zone-color) 75%, #9ff7ff);
  border-radius: 999px;
  background: #071b21;
  color: color-mix(in srgb, var(--slider-zone-color) 75%, #85f6ff);
  font-size: 0.8rem;
  font-weight: bold;
  pointer-events: none;
  box-shadow: 0 0 14px color-mix(in srgb, var(--slider-zone-color) 38%, transparent);
}

.training-goal-dashboard-card {
  --training-goal-accent: var(--color-primary);
  border-color: color-mix(in srgb, var(--training-goal-accent) 30%, rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--training-goal-accent) 13%, transparent), transparent 35%),
    linear-gradient(155deg, rgba(6, 28, 34, .98), rgba(5, 16, 21, .98));
}

.training-goal-dashboard-card .cockpit-card-heading {
  border-bottom: 1px solid color-mix(in srgb, var(--training-goal-accent) 20%, transparent);
}

.training-zone-control-panel {
  position: relative;
  padding: 4px 2px 0;
}

.training-zone-control-panel::after {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--training-goal-accent) 72%, #36dcea);
  content: "";
  box-shadow: 0 0 10px color-mix(in srgb, var(--training-goal-accent) 30%, transparent);
}

.training-zone-control-panel > label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #efffff;
  font-size: .83rem;
  font-weight: 900;
}

.training-zone-control-panel > label > span { color: #53e5ea; font-size: 1.05rem; }
.training-zone-control-panel > p { max-width: 100%; margin: 7px 0 0; color: #91adb1; font-size: .72rem; line-height: 1.4; }

.training-zone-explorer-hint {
  margin: 14px 0 0 !important;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--training-goal-accent) 26%, rgba(255,255,255,.08));
  border-radius: 12px;
  background: rgba(3, 19, 24, .72);
  color: #c7dde0 !important;
  font-size: .72rem !important;
  font-weight: 750;
  line-height: 1.4 !important;
}

@media (max-width: 430px) {
  .training-zone-control-panel { padding: 2px 0 0; }
}

.developer-panel {
  display: block;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999999;
  pointer-events: auto;
}

.modal-overlay-visible {
  display: grid;
}

.modal-card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  position: relative;
  z-index: 100001;
}

#shareTrainingSuccessModal {
  z-index: 3000001;
}

.share-training-success-card {
  width: min(420px, 92vw);

  padding: 24px;

  text-align: center;
}

.share-training-success-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 16px;

  border-radius: 50%;

  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.5);

  color: var(--zone-2);

  font-size: 2rem;
  font-weight: 800;

  box-shadow: 0 0 22px rgba(34, 197, 94, 0.22);
}

.share-training-success-card h2 {
  margin: 0 0 10px;
}

.share-training-success-card > p {
  margin: 0 0 12px;

  color: var(--color-text-muted);
  line-height: 1.5;
}

.share-training-success-hint {
  padding: 12px 14px;

  border: 1px solid rgba(12, 186, 230, 0.28);
  border-radius: 12px;

  background: rgba(12, 186, 230, 0.08);

  font-size: 0.9rem;
}

.share-training-success-actions {
  margin-top: 20px;
}

.share-training-success-actions button {
  width: 100%;

  min-height: 48px;

  font-weight: 700;
}

.training-export-card { position: relative; width: min(560px, calc(100vw - 28px)); padding: clamp(24px, 5vw, 38px); border: 1px solid rgba(33, 212, 244, .38); background: radial-gradient(circle at 90% 0, rgba(33, 212, 244, .14), transparent 38%), linear-gradient(145deg, #061c22, #111317); }
.training-export-card > h2 { margin: 7px 48px 8px 0; font-size: clamp(1.65rem, 5vw, 2.25rem); }
.training-export-card > p { margin: 0 0 20px; color: #b9cbcf; line-height: 1.5; }
.training-export-card > label { display: block; margin: 0 0 7px; color: #72e6ee; font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.training-export-card .app-select { width: 100%; min-height: 48px; margin-bottom: 16px; }
.training-export-formats { display: grid; gap: 11px; }
.training-export-formats button { display: grid; gap: 4px; width: 100%; padding: 16px 18px; border: 1px solid rgba(33, 212, 244, .26); border-radius: 15px; color: #eefbfc; background: rgba(255,255,255,.055); text-align: left; cursor: pointer; }
.training-export-formats button:first-child { border-color: rgba(33, 212, 244, .68); background: linear-gradient(135deg, rgba(33, 212, 244, .18), rgba(255,255,255,.05)); }
.training-export-formats button:hover { border-color: #21d4f4; background-color: rgba(33, 212, 244, .12); }
.training-export-formats button > span { width: max-content; padding: 3px 7px; border-radius: 999px; color: #041316; background: #54e4ef; font-size: .65rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.training-export-formats button > strong { font-size: 1rem; }
.training-export-formats button > small { color: #9eb3b8; line-height: 1.35; }
.training-export-status { min-height: 1.4em; margin: 13px 0 !important; color: #71e9df !important; font-weight: 750; }
.training-export-card > aside { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; color: #9fb2b6; background: rgba(0,0,0,.2); font-size: .82rem; line-height: 1.4; }
.training-export-card > aside strong { color: #dce9e9; }
.training-detail-export-button { width: 100%; min-height: 48px; margin-top: 16px; }

.startup-gate {
  position: fixed;
  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  justify-content: flex-start;
  gap: var(--space-lg);
  height: 100dvh;
  box-sizing: border-box;
  padding: 8vh var(--space-lg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;

  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);

  /* Must stay above fullscreen feature views (for example the living map) and
     the admin preview from which the global training button can be used. */
  z-index: 1100020;
}

.startup-gate.is-hidden {
  display: none;
}

.startup-gate.is-pulse-source-searching {
  isolation: isolate;
  overflow: hidden;
  background: rgba(0, 5, 8, 0.9);
  backdrop-filter: blur(15px) brightness(0.5);
}
.startup-gate.is-pulse-source-stabilizing { isolation:isolate;overflow:hidden;background:rgba(0,5,8,.9);backdrop-filter:blur(15px) brightness(.5); }

.startup-gate.is-pulse-source-searching::before,
.startup-gate.is-pulse-source-searching::after {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.startup-gate.is-pulse-source-searching::before {
  inset: -12vmax;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(51, 224, 239, 0.16) 50%, transparent 50.15%),
    linear-gradient(transparent 49.85%, rgba(51, 224, 239, 0.16) 50%, transparent 50.15%),
    repeating-radial-gradient(circle at center, transparent 0 7.8vmin, rgba(43, 215, 235, 0.16) 7.95vmin 8.15vmin, transparent 8.3vmin 15.8vmin, rgba(105, 72, 160, 0.08) 15.95vmin 16.15vmin),
    radial-gradient(circle at center, rgba(10, 113, 137, 0.2), rgba(28, 23, 58, 0.12) 45%, rgba(0, 7, 11, 0.9) 68%, #000508 84%);
  filter: blur(2px) saturate(1.18);
  opacity: 0.82;
}

.startup-gate.is-pulse-source-searching::after {
  top: 50%;
  left: 50%;
  width: min(118vmin, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(50, 211, 232, 0.22);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(75, 54, 124, 0.035) 84%, rgba(91, 72, 154, 0.16) 91%, rgba(38, 205, 229, 0.58) 99.4%, rgba(80, 226, 244, 0.76) 100%);
  filter: blur(2.8px) drop-shadow(0 0 16px rgba(48, 204, 231, 0.2));
  opacity: 0.58;
  transform: translate(-50%, -50%);
  animation: checkpulse-search-radar-sweep 2.8s linear infinite;
}

.startup-gate.is-pulse-source-searching > .startup-gate-card,
.startup-gate.is-pulse-source-searching > #startupBluetoothHelpContainer,
.startup-gate.is-pulse-source-stabilizing > .startup-gate-card,
.startup-gate.is-pulse-source-stabilizing > #startupBluetoothHelpContainer {
  position: relative;
  z-index: 2;
}

.checkpulse-search-radar-hud { display: none; }
.startup-gate.is-pulse-source-searching > .checkpulse-search-radar-hud { position:fixed;z-index:0;inset:-5px;display:block;overflow:hidden;color:rgba(104,220,240,.62);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;filter:blur(2.2px);opacity:.58;pointer-events:none;background:linear-gradient(115deg,rgba(0,10,14,.86),rgba(0,3,7,.96)),url("assets/storyline/haven-signal-room-offline-v1.webp") center/cover no-repeat;background-blend-mode:multiply,normal; }
.startup-gate.is-pulse-source-stabilizing > .checkpulse-search-radar-hud { position:fixed;z-index:0;inset:-5px;display:block;overflow:hidden;color:rgba(104,220,240,.66);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;filter:blur(1.9px);opacity:.61;pointer-events:none;background:linear-gradient(115deg,rgba(0,13,17,.82),rgba(0,4,9,.94)),url("assets/storyline/haven-signal-room-online-v1.webp") center/cover no-repeat;background-blend-mode:multiply,normal; }
.checkpulse-search-radar-hud::before { position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(74,229,236,.025) 6px),linear-gradient(112deg,transparent 0 42%,rgba(255,117,88,.07) 42.2% 42.5%,transparent 42.8%),linear-gradient(18deg,transparent 0 68%,rgba(255,117,88,.05) 68.2% 68.45%,transparent 68.8%);mix-blend-mode:screen;content:"";animation:checkpulse-radar-interference 1.8s steps(2,end) infinite; }
.checkpulse-search-radar-hud>strong,.radar-hud-coordinates,.radar-hud-band,.radar-damage-sector { position:absolute;letter-spacing:.14em;text-shadow:0 0 10px rgba(49,207,231,.34),0 0 16px rgba(99,70,153,.08); }
.checkpulse-search-radar-hud>strong { top:4.5vh;left:4vw;font-size:clamp(.62rem,1.4vw,.86rem); }
.radar-hud-coordinates { top:8vh;left:4vw;font-size:clamp(.48rem,1vw,.65rem); }
.radar-hud-band { right:4vw;bottom:5vh;font-size:clamp(.48rem,1vw,.65rem); }
.radar-damage-sector { top:13vh;right:4vw;padding:5px 8px;border:1px solid rgba(255,117,88,.34);background:repeating-linear-gradient(135deg,rgba(255,117,88,.12) 0 5px,transparent 5px 10px);color:rgba(255,158,132,.78);font-size:clamp(.48rem,1vw,.62rem);animation:checkpulse-radar-damage 2.6s steps(2,end) infinite; }
.radar-contact { position:absolute;width:7px;height:7px;border:1px solid rgba(113,237,255,.9);border-radius:50%;background:#43ddf5;box-shadow:0 0 6px #43ddf5,0 0 20px rgba(55,215,246,.72);animation:checkpulse-radar-contact 2.8s ease-out infinite; }
.radar-contact::after { position:absolute;right:3px;bottom:3px;width:54px;height:1px;transform:rotate(var(--contact-track,-24deg));transform-origin:right;background:linear-gradient(90deg,transparent,rgba(94,226,248,.52));content:""; }
.radar-contact b { position:absolute;top:-9px;left:13px;color:rgba(139,236,255,.84);font-size:.48rem;font-style:normal;letter-spacing:.08em;white-space:nowrap; }
.radar-contact.contact-one { top:28%;left:22%;--contact-track:-18deg; }
.radar-contact.contact-two { top:63%;left:72%;--contact-track:31deg;animation-delay:-.8s;border-color:#8d82b5;background:#71669d;box-shadow:0 0 5px #71669d,0 0 14px rgba(91,70,139,.42); }
.radar-contact.contact-three { top:76%;left:31%;--contact-track:-46deg;animation-delay:-1.6s;border-color:#8b9bc4;background:#687da9;box-shadow:0 0 5px #687da9,0 0 14px rgba(82,104,153,.38); }
.radar-contact.contact-lost { top:22%;left:78%;--contact-track:12deg;border-color:rgba(255,117,88,.8);background:#ff765f;box-shadow:0 0 6px #ff765f,0 0 20px rgba(255,92,72,.65);animation:checkpulse-radar-lost 1.1s steps(2,end) infinite; }
.radar-contact.contact-lost b { color:rgba(255,167,143,.88); }
.radar-hud-telemetry { position:absolute;bottom:5vh;left:4vw;display:grid;gap:5px;min-width:175px;padding:9px 11px;border-left:2px solid rgba(58,205,228,.42);background:linear-gradient(90deg,rgba(7,52,65,.3),rgba(35,25,59,.08),transparent);font-size:.52rem;letter-spacing:.1em; }
.radar-hud-telemetry span { display:flex;justify-content:space-between;gap:14px; }
.radar-hud-telemetry b { color:rgba(217,255,245,.84); }
.radar-transmission-link { display:none; }
.startup-gate.is-pulse-source-stabilizing .radar-transmission-link { position:absolute;top:50%;left:50%;display:grid;grid-template-columns:88px minmax(150px,32vw) 110px;align-items:center;width:min(680px,82vw);translate:-50% -50%; }
.radar-transmission-link::before { position:absolute;z-index:-1;right:92px;left:72px;height:2px;background:linear-gradient(90deg,rgba(57,211,235,.18),#43d7ed 46%,rgba(117,92,185,.55));box-shadow:0 0 12px rgba(55,214,237,.4);content:""; }
.transmission-sensor,.transmission-base { display:grid;min-height:72px;place-content:center;padding:8px;border:1px solid rgba(64,217,236,.42);border-radius:50%;background:radial-gradient(circle,rgba(24,135,153,.28),rgba(3,20,27,.82));box-shadow:0 0 0 8px rgba(52,207,228,.035),0 0 24px rgba(43,205,229,.18);text-align:center; }
.transmission-base { border-radius:18px;border-color:rgba(116,99,181,.4);background:linear-gradient(145deg,rgba(25,67,82,.8),rgba(34,23,58,.82)); }
.transmission-sensor b,.transmission-base b { color:#7ee6f3;font-size:.55rem;letter-spacing:.12em; }.transmission-sensor small,.transmission-base small { margin-top:4px;color:rgba(193,226,232,.6);font-size:.38rem;letter-spacing:.06em; }
.radar-transmission-link>i { position:absolute;left:88px;width:9px;height:9px;border-radius:50%;background:#55dfef;box-shadow:0 0 7px #55dfef,0 0 18px rgba(65,220,239,.72);animation:haven-signal-packet 1.8s linear infinite; }.radar-transmission-link>i:nth-of-type(1){animation-delay:0s}.radar-transmission-link>i:nth-of-type(2){animation-delay:-.6s}.radar-transmission-link>i:nth-of-type(3){animation-delay:-1.2s}
.radar-transmission-link>strong { position:absolute;top:calc(50% + 24px);left:50%;translate:-50% 0;color:rgba(106,225,241,.72);font-size:.46rem;letter-spacing:.13em;white-space:nowrap; }
.startup-gate.is-pulse-source-stabilizing .radar-haven-title { font-size:0; }.startup-gate.is-pulse-source-stabilizing .radar-haven-title::after { color:rgba(100,225,242,.78);font-size:clamp(.55rem,1.2vw,.72rem);content:"HAVEN ZERO // SIGNAL LINK WIRD AUFGEBAUT"; }
.startup-gate.is-pulse-source-stabilizing :is(.radar-contact,.radar-search-vector,.radar-distress-feed,.radar-haven-core) { display:none; }
.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(1) b,.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(2) b,.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(3) b { font-size:0; }
.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(1) b::after { font-size:.52rem;content:"LINK 04"; }.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(2) b::after { font-size:.52rem;content:"SINKT"; }.startup-gate.is-pulse-source-stabilizing .radar-hud-telemetry span:nth-child(3) b::after { font-size:.52rem;content:"SYNC"; }
@keyframes haven-signal-packet { from{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateX(min(32vw,480px));opacity:0} }
.radar-haven-title { position:absolute;top:4.5vh;left:50%;translate:-50% 0;color:rgba(92,224,243,.72);font-size:clamp(.55rem,1.2vw,.72rem);font-weight:900;letter-spacing:.2em;text-shadow:0 0 12px rgba(40,205,231,.42);white-space:nowrap; }
.radar-haven-core { position:absolute;top:50%;left:50%;display:grid;width:104px;height:104px;place-content:center;translate:-50% -50%;border:1px solid rgba(58,218,235,.32);border-radius:50%;background:radial-gradient(circle,rgba(33,202,224,.2),rgba(5,37,45,.08) 48%,transparent 50%);box-shadow:0 0 0 14px rgba(35,202,224,.035),0 0 0 29px rgba(35,202,224,.025),0 0 35px rgba(34,207,229,.15);text-align:center;animation:radar-haven-core-pulse 3s ease-in-out infinite; }
.radar-haven-core b { color:#7de8f5;font-size:.58rem;letter-spacing:.14em; }.radar-haven-core small { margin-top:4px;color:rgba(190,231,238,.62);font-size:.42rem;letter-spacing:.08em; }
.radar-blackout,.radar-search-vector { position:absolute;padding:4px 7px;border:1px solid rgba(58,209,229,.18);background:rgba(1,13,18,.58);font-size:.46rem;font-weight:850;letter-spacing:.1em; }
.radar-blackout { border-color:rgba(255,115,86,.3);color:rgba(255,150,124,.76);background:repeating-linear-gradient(135deg,rgba(75,15,10,.42) 0 4px,rgba(8,12,15,.68) 4px 8px); }
.blackout-north { top:19%;left:14%;rotate:-7deg; }.blackout-east { top:42%;right:8%;rotate:5deg; }.radar-search-vector { right:8%;bottom:24%;color:rgba(111,224,241,.76); }
.radar-distress-feed { position:absolute;top:25%;left:3.5vw;display:grid;gap:4px;width:min(240px,24vw);padding:10px 12px;border:1px solid rgba(43,208,229,.22);border-left:3px solid rgba(43,208,229,.55);background:linear-gradient(90deg,rgba(2,31,39,.62),rgba(13,15,28,.35));box-shadow:0 14px 32px rgba(0,0,0,.24); }
.radar-distress-feed strong { color:#67ddeb;font-size:.52rem;letter-spacing:.12em; }.radar-distress-feed span { color:rgba(181,220,227,.58);font-size:.45rem;letter-spacing:.05em; }.radar-distress-feed b { margin-top:3px;color:rgba(171,132,218,.72);font-size:.47rem;letter-spacing:.08em; }
.radar-power-route { position:absolute;right:5vw;bottom:15%;display:flex;align-items:center;gap:6px;color:rgba(99,220,237,.66);font-size:.46rem;letter-spacing:.1em; }.radar-power-route::before { width:112px;height:1px;background:linear-gradient(90deg,transparent,#38cce2);content:""; }.radar-power-route i { width:5px;height:5px;border-radius:50%;background:#42d8ed;box-shadow:0 0 8px #42d8ed;animation:radar-power-node 1.5s ease-in-out infinite; }.radar-power-route i:nth-child(2){animation-delay:-.45s}.radar-power-route i:nth-child(3){animation-delay:-.9s}
@keyframes radar-haven-core-pulse { 50%{opacity:.6;scale:.94} }@keyframes radar-power-node { 50%{opacity:.25;scale:.65} }
@keyframes checkpulse-radar-interference { 0%,84%,100%{opacity:.5;transform:translateY(0)}86%{opacity:.85;transform:translateY(3px)}88%{opacity:.34;transform:translateY(-2px)} }
@keyframes checkpulse-radar-contact { 0%,100%{opacity:.18;scale:.55}22%,72%{opacity:1;scale:1} }
@keyframes checkpulse-radar-lost { 50%{opacity:.2;filter:blur(1.5px)} }
@keyframes checkpulse-radar-damage { 50%{opacity:.45} }

@keyframes checkpulse-search-radar-sweep {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .startup-gate.is-pulse-source-searching::after { animation-duration: 9s; }
  .checkpulse-search-radar-hud::before,.radar-contact,.radar-damage-sector { animation:none; }
  .radar-haven-core,.radar-power-route i { animation:none; }
  .radar-transmission-link>i { animation:none; }
}

@media (max-width:620px){.radar-distress-feed{top:18%;width:42vw}.radar-haven-title{top:3vh;font-size:.48rem}.radar-power-route::before{width:55px}.radar-blackout{font-size:.38rem}}

.player-shell > .startup-gate.is-player-bluetooth-gate {
  z-index: 100000;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
}


/* Bluetooth-Gate: Hoehe strikt an die sichtbare Player-Shell binden. */
.player-shell > .startup-gate.is-player-bluetooth-gate {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  padding:12px !important;
  overflow:hidden !important;
  pointer-events:auto !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  flex:0 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:100% !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  pointer-events:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Finaler Landscape-Video-Override: Coachmeldung deckt die Rail vollständig ab. */
@media (orientation:landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    display:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    top:58px !important;
    right:6px !important;
    bottom:106px !important;
    width:calc(var(--video-landscape-rail) - 12px) !important;
    isolation:isolate !important;
    background:#061419 !important;
    background-image:none !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    box-shadow:0 0 0 8px #061419,0 18px 48px rgba(0,0,0,.72) !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden])::before {
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    inset:-8px !important;
    display:block !important;
    border-radius:inherit !important;
    background:#061419 !important;
    opacity:1 !important;
    pointer-events:none !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview-reopen {
    display:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .fullscreen-zone-metric {
    display:none !important;
  }
}

/* Landscape mit Video: aktive Missionskachel vertikal je 8 px erweitern. */
@media (orientation:landscape) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview {
    top:190px !important;
    bottom:104px !important;
  }
}

/* Verbindlicher Bluetooth-Scrollcontainer – bewusst am Dateiende, damit keine
   aeltere Gate-Regel die nutzbare Hoehe wieder ueberschreibt. */
.player-shell > .startup-gate.is-player-bluetooth-gate {
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  flex:0 1 auto !important;
  width:min(100%,420px) !important;
  height:calc(100% - 24px) !important;
  min-height:0 !important;
  max-height:calc(100% - 24px) !important;
  margin:0 !important;
  padding-bottom:24px !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  overflow-y:scroll !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  pointer-events:auto !important;
  scrollbar-width:auto !important;
  scrollbar-color:#35cfe0 rgba(255,255,255,.08) !important;
  -webkit-overflow-scrolling:touch !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar {width:10px}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar-thumb {border:2px solid transparent;border-radius:999px;background:#35cfe0;background-clip:padding-box}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar-track {background:rgba(255,255,255,.06)}

/* FINAL freigegeben: Portrait-Fullscreen ohne Video – Steuerung unten rechts,
   HF-Kurve stärker gezoomt. Keine Video-Shell wird angesprochen. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    position: absolute !important;
    z-index: 10000001 !important;
    top: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle {
    bottom: max(62px, calc(env(safe-area-inset-bottom) + 50px)) !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn { right: 112px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status { right: 62px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle { right: 12px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn { right: 112px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn { right: 62px !important; }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn { right: 12px !important; }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    width: 200% !important;
    height: 200% !important;
    min-height: 0 !important;
    transform: translate(-25%, -25%) !important;
    transform-origin: center !important;
  }
}

/* ABSOLUTE ENDREGEL: Landscape-Fullscreen OHNE Video.
   Diese freigegebene Shell wird nach allen historischen Regeln gesetzt. */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 700px) {
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --nvl-edge: 14px;
    --nvl-right: 96px;
    --nvl-gap: 10px;
    overflow: hidden !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    position: absolute !important;
    z-index: 500 !important;
    top: 58px !important;
    bottom: auto !important;
    width: calc((100% - var(--nvl-right) - 48px) / 3) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(53,211,230,.34) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg,rgba(5,29,35,.97),rgba(3,15,20,.99)) !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {
    right: auto !important;
    left: var(--nvl-edge) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {
    display: flex !important;
    right: auto !important;
    left: calc(var(--nvl-edge) + ((100% - var(--nvl-right) - 48px) / 3) + var(--nvl-gap)) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    display: flex !important;
    right: auto !important;
    left: calc(var(--nvl-edge) + (((100% - var(--nvl-right) - 48px) / 3) * 2) + (var(--nvl-gap) * 2)) !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    z-index: 410 !important;
    top: 126px !important;
    right: calc(50% + 5px) !important;
    bottom: auto !important;
    left: var(--nvl-edge) !important;
    width: auto !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor .heart-rate-zone-selector {
    display: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    z-index: 420 !important;
    top: 126px !important;
    right: var(--nvl-right) !important;
    bottom: auto !important;
    left: calc(50% + 5px) !important;
    width: auto !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    padding: 8px 34px 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview > p {
    display: none !important;
  }
  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops {
    margin-top: 3px !important;
    padding-top: 3px !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position: absolute !important;
    z-index: 430 !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    position: absolute !important;
    top: 210px !important;
    right: var(--nvl-right) !important;
    bottom: auto !important;
    left: var(--nvl-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid {
    position: absolute !important;
    top: 258px !important;
    right: calc(50% + 5px) !important;
    bottom: auto !important;
    left: var(--nvl-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    width: auto !important;
    height: 50px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    width: auto !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(53,211,230,.24) !important;
    border-radius: 13px !important;
    background: rgba(6,25,30,.96) !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    position: absolute !important;
    top: 258px !important;
    right: var(--nvl-right) !important;
    bottom: auto !important;
    left: calc(50% + 5px) !important;
    display: flex !important;
    pointer-events: auto !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    z-index: 9000000 !important;
    top: 126px !important;
    right: var(--nvl-right) !important;
    bottom: auto !important;
    left: var(--nvl-edge) !important;
    width: auto !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

/* LANDSCAPE OHNE VIDEO – einzige aktuell freigegebene Fullscreen-Shell.
   Eigenstaendige Kacheln in einem kollisionsfreien Instrumentenraster. */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 700px) {
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --nv-land-edge: 14px;
    --nv-land-rail: 92px;
    --nv-land-gap: 10px;
    overflow: hidden !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    position: absolute !important;
    z-index: 220 !important;
    top: 58px !important;
    bottom: auto !important;
    width: calc((100% - var(--nv-land-rail) - 48px) / 3) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(53, 211, 230, .34) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(5, 29, 35, .96), rgba(3, 15, 20, .98)) !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {
    right: auto !important;
    left: var(--nv-land-edge) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {
    display: flex !important;
    right: auto !important;
    left: calc(var(--nv-land-edge) + ((100% - var(--nv-land-rail) - 48px) / 3) + var(--nv-land-gap)) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    right: auto !important;
    left: calc(var(--nv-land-edge) + (((100% - var(--nv-land-rail) - 48px) / 3) * 2) + (var(--nv-land-gap) * 2)) !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    z-index: 210 !important;
    top: 134px !important;
    right: calc(50% + 5px) !important;
    bottom: auto !important;
    left: var(--nv-land-edge) !important;
    width: auto !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    z-index: 230 !important;
    top: 134px !important;
    right: calc(var(--nv-land-rail) + var(--nv-land-edge)) !important;
    bottom: auto !important;
    left: calc(50% + 5px) !important;
    width: auto !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 10px 38px 9px 11px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    transform: none !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position: absolute !important;
    z-index: 215 !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    position: absolute !important;
    z-index: 1 !important;
    top: 236px !important;
    right: calc(var(--nv-land-rail) + var(--nv-land-edge)) !important;
    bottom: auto !important;
    left: var(--nv-land-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid {
    position: absolute !important;
    top: 288px !important;
    right: calc(50% + 5px) !important;
    bottom: auto !important;
    left: var(--nv-land-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: auto !important;
    height: 54px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(53, 211, 230, .24) !important;
    border-radius: 13px !important;
    background: rgba(6, 25, 30, .94) !important;
    transform: none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    position: absolute !important;
    top: 288px !important;
    right: calc(var(--nv-land-rail) + var(--nv-land-edge)) !important;
    bottom: auto !important;
    left: calc(50% + 5px) !important;
    display: flex !important;
    pointer-events: auto !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    z-index: 9000000 !important;
    top: 134px !important;
    right: calc(var(--nv-land-rail) + var(--nv-land-edge)) !important;
    bottom: auto !important;
    left: var(--nv-land-edge) !important;
    width: auto !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

/* ABSOLUTE LETZTE PORTRAIT-REGEL – zweifach explizit freigegebene Aenderung. */
@media (orientation: portrait) and (max-width: 700px) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: calc(49% + 25px) !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    bottom: calc(51% - 17px) !important;
    height: 151px !important;
    min-height: 151px !important;
    max-height: 151px !important;
  }
}

/* Explizit freigegebene Ausnahme fuer die eingefrorene Hochformat-Shell mit Video:
   Video 20 px tiefer; Missionskachel bei gleicher Oberkante 20 px nach unten erweitert. */
@media (orientation: portrait) and (max-width: 700px) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: calc(49% + 20px) !important;
  }

  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    bottom: calc(51% - 12px) !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
  }
}

/* Landscape mit Video: Der Startbutton gleitet waehrend des Countdowns exakt
   auf dieselbe Geometrie wie der spaetere Button in der Trainingsshell. */
@media (orientation:landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    #fullscreenToggleTrainingBtn {
    transition:
      top .65s cubic-bezier(.22,1,.36,1),
      right .65s cubic-bezier(.22,1,.36,1),
      bottom .65s cubic-bezier(.22,1,.36,1),
      left .65s cubic-bezier(.22,1,.36,1),
      width .65s cubic-bezier(.22,1,.36,1),
      min-width .65s cubic-bezier(.22,1,.36,1),
      height .65s cubic-bezier(.22,1,.36,1),
      padding .65s cubic-bezier(.22,1,.36,1),
      font-size .65s cubic-bezier(.22,1,.36,1),
      line-height .65s cubic-bezier(.22,1,.36,1),
      transform .65s cubic-bezier(.22,1,.36,1) !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    #fullscreenToggleTrainingBtn:is(.is-countdown-active, .is-training-active) {
    position:absolute !important;
    z-index:10000000 !important;
    top:auto !important;
    right:12px !important;
    bottom:12px !important;
    left:auto !important;
    width:calc(var(--video-landscape-rail) / 2 - 16px) !important;
    min-width:0 !important;
    max-width:none !important;
    height:38px !important;
    margin:0 !important;
    padding:5px 8px !important;
    box-sizing:border-box !important;
    font-size:clamp(.62rem,1.05vw,.78rem) !important;
    line-height:1.05 !important;
    transform:none !important;
  }
}

/* Landscape mit Video: kein separates Mission-Reopen-Label ueber dem HF-Monitor. */
@media (orientation:landscape) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview-reopen {
    display:none !important;
  }
}

/* Rule-Freeze: Die Zonenwahl bleibt sichtbar und bedienbar. Der bestehende
   Fuenf-Minuten-Cooldown entscheidet weiterhin, ob ein Wechsel erlaubt ist. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):has(> #userMessage.show)
  .heart-rate-zone-selector {
  z-index:9800000 !important;
  pointer-events:auto !important;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen):has(> #userMessage.show)
  .heart-rate-zone-selector .zone-legend-label {
  position:relative !important;
  z-index:9800001 !important;
  pointer-events:auto !important;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) #targetZoneConfirmModal.modal-overlay-visible {
  z-index:9900002 !important;
  pointer-events:auto !important;
}

/* Final: Bluetooth-Dialog scrollt innerhalb der real sichtbaren Player-Hoehe. */
.player-shell > .startup-gate.is-player-bluetooth-gate {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  padding:12px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  pointer-events:auto !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  flex:0 1 auto !important;
  width:min(100%,420px) !important;
  min-height:0 !important;
  height:auto !important;
  max-height:100% !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  pointer-events:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Bluetooth-Dialog bleibt auch in niedrigen Viewports vollständig bedienbar. */
.player-shell > .startup-gate.is-player-bluetooth-gate {
  box-sizing:border-box !important;
  padding:16px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow-y:scroll !important;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  width:min(100%,420px) !important;
  max-height:calc(100dvh - 32px) !important;
  margin:0 !important;
  overflow-y:scroll !important;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}

/* Landscape mit Video: Coachmeldung deckt die darunterliegenden Rail-Kacheln komplett ab. */
@media (orientation:landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    top:58px !important;
    right:6px !important;
    bottom:56px !important;
    width:calc(var(--video-landscape-rail) - 12px) !important;
    min-height:0 !important;
    max-height:none !important;
    padding:18px !important;
  }
}

.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  max-height:calc(100dvh - 32px);
  margin-block:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.startup-gate-card {
  width: min(100%, 420px);
  flex: 0 0 auto;
  margin-block: auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  padding: var(--space-xl);

  border-radius: 24px;

  background: var(--color-surface);
  border: 1px solid var(--color-border);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

#startupBluetoothHelpContainer {
  width: min(100%, 420px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.startup-gate-card h2 {
  margin: 0;

  text-align: center;
  font-size: 1.4rem;
  line-height: 1.4;
}

.training-history-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.training-history-heading {
  width: 100%;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.training-history-heading:hover .training-history-toggle-icon {
  transform: scale(1.12);
}

.training-history-heading:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: 10px;
}

.training-history-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(0, 188, 245, 0.12);
  color: var(--color-primary);
  font-size: 1rem;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.training-history-heading.is-collapsed .training-history-toggle-icon {
  background: rgba(255, 255, 255, 0.06);
}

.training-history-content {
  margin-top: 20px;
}

.training-history-content[hidden] {
  display: none;
}

.training-history-heading h2 {
  margin: 2px 0 0;
}

.training-history-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.training-history-list {
  display: grid;
  gap: 14px;
}

.guest-training-history-empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px;border:1px dashed color-mix(in srgb,var(--color-primary) 50%,var(--color-border));border-radius:16px;background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface))}
.guest-training-history-empty>span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface));color:var(--color-primary);font-size:1.35rem}
.guest-training-history-empty strong{display:block;color:var(--color-text)}
.guest-training-history-empty p{margin:5px 0 0;color:var(--color-text-muted);font-size:.84rem;line-height:1.45}
.guest-training-history-empty button{padding:11px 15px;border:0;border-radius:999px;background:var(--color-primary);color:#031216;font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}
@media(max-width:620px){.guest-training-history-empty{grid-template-columns:auto 1fr}.guest-training-history-empty button{grid-column:1/-1;width:100%}}

.training-zone-story {
  --zone-story-accent: var(--color-primary);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  margin-top: var(--space-lg);
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--zone-story-accent) 34%, var(--color-border));
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--zone-story-accent) 10%, var(--color-surface)),
    var(--color-surface)
  );
}

.training-zone-story-disclosure {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(63, 215, 225, .23);
  border-radius: 15px;
  background: rgba(5, 25, 29, .58);
}

.training-zone-story-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 11px 14px;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.training-zone-story-disclosure > summary::-webkit-details-marker { display: none; }
.training-zone-story-disclosure > summary span { display: grid; gap: 3px; min-width: 0; }
.training-zone-story-disclosure > summary small { color: var(--color-primary); font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.training-zone-story-disclosure > summary strong { font-size: .88rem; line-height: 1.25; }
.training-zone-story-disclosure > summary i { color: var(--color-primary); font-size: .95rem; font-style: normal; transition: transform .18s ease; }
.training-zone-story-disclosure[open] > summary { border-bottom: 1px solid rgba(63, 215, 225, .14); }
.training-zone-story-disclosure[open] > summary i { transform: rotate(180deg); }
.training-zone-story-disclosure > .training-zone-story {
  margin-top: 0;
  border-radius: 0;
}

.startup-step {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.startup-step[open] {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.startup-step-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  list-style: none;
  cursor: pointer;
}

.startup-step-heading::-webkit-details-marker {
  display: none;
}

.startup-step-title {
  display: grid;
  gap: 3px;
  font-weight: 800;
  line-height: 1.25;
}

.startup-step-title small {
  color: var(--color-primary);
  font-size: clamp(0.56rem, 2.5vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.startup-step[open] > .startup-step-heading .accordion-chevron::before {
  transform: rotate(90deg);
}

.startup-auth-panel,
.startup-pulse-setup {
  display: grid;
  gap: 14px;
}

.startup-step-content {
  padding: 2px 15px 15px;
}

@media (max-width: 600px) {
  .startup-gate {
    gap: 10px;
    padding: max(24px, calc(env(safe-area-inset-top) + 12px)) 12px
      max(16px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .startup-gate-card {
    gap: 10px;
    padding: 16px;
  }

  #startupPulseStep > .startup-step-heading {
    gap: 8px;
    padding: 10px 12px;
  }

  #startupPulseStep .startup-step-title {
    gap: 1px;
    max-width: calc(100% - 46px);
    font-size: 0.92rem;
    line-height: 1.16;
  }

  #startupPulseStep .accordion-chevron {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  #startupPulseSetup {
    gap: 7px;
    padding: 0 12px 12px;
  }

  #startupPulseSetup .form-group {
    margin: 3px 0;
  }

  #startupPulseSetup label {
    font-size: 0.82rem;
  }

  #startupPulseSource {
    min-height: 42px;
    margin: 4px 0 0;
    padding: 0 14px;
    font-size: 0.9rem;
  }

  #confirmStartupGateBtn {
    min-height: 42px;
    padding-block: 8px;
    font-size: 0.9rem;
  }
}

.startup-auth-status {
  margin: 0;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.startup-auth-actions {
  display: grid;
  gap: 9px;
}

.startup-auth-actions button {
  width: 100%;
}

.startup-equipment-note {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(31, 190, 232, 0.25);
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.07);
  text-align: left;
}

.startup-equipment-note > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
}

.startup-equipment-note strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.78rem;
}

.startup-equipment-note p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.startup-coach-card {
  --startup-coach-accent: var(--color-primary);
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 178px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--startup-coach-accent) 52%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 12% 20%,
      color-mix(in srgb, var(--startup-coach-accent) 16%, transparent),
      transparent 48%
    ),
    color-mix(in srgb, var(--startup-coach-accent) 4%, var(--color-surface));
}

.startup-coach-portrait {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.startup-coach-portrait img {
  display: block;
  width: 138px;
  height: 172px;
  margin-left: -10px;
  object-fit: contain;
  object-position: center bottom;
}

.startup-coach-content {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 14px 14px 14px 4px;
}

.startup-coach-eyebrow {
  color: var(--startup-coach-accent);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.startup-coach-content h3,
.startup-coach-content p {
  margin: 0;
}

.startup-coach-content h3 {
  font-size: 1.3rem;
  line-height: 1.1;
}

.startup-coach-content p {
  overflow: visible;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.startup-coach-traits {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.startup-coach-trait {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.startup-coach-trait-meter {
  display: flex;
  gap: 3px;
}

.startup-coach-trait-meter i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.startup-coach-trait-meter i.is-active {
  background: var(--startup-coach-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--startup-coach-accent) 62%, transparent);
}

.startup-coach-change {
  justify-self: start;
  margin-top: 7px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--startup-coach-accent) 52%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--startup-coach-accent) 12%, transparent);
  color: var(--startup-coach-accent);
  font-size: 0.68rem;
  font-weight: 800;
}

.startup-coach-change:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.startup-coach-picker button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.startup-coach-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 7, 10, 0.5);
}

.startup-coach-picker[hidden] {
  display: none;
}

.startup-coach-picker button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
}

.startup-coach-picker button.is-selected {
  border-color: var(--startup-coach-accent);
  color: #fff;
  background: color-mix(in srgb, var(--startup-coach-accent) 13%, transparent);
}

.startup-coach-picker img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  object-position: center bottom;
}

.startup-coach-picker span {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.6rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.startup-coach-picker {
  grid-template-columns: 1fr;
}

.startup-coach-option {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.startup-coach-option.is-selected {
  border-color: var(--startup-coach-accent);
}

.startup-coach-picker .startup-coach-option-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
}

.startup-coach-picker .startup-coach-option-summary > span {
  display: grid;
  justify-items: start;
}

.startup-coach-picker .startup-coach-option-summary strong {
  font-size: 0.72rem;
}

.startup-coach-picker .startup-coach-option-summary small {
  overflow: hidden;
  max-width: 100%;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.startup-coach-picker .coach-select-action {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--startup-coach-accent) 48%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--startup-coach-accent) 12%, transparent);
  color: var(--startup-coach-accent);
}

.startup-guest-coach-teaser {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px;
}

.startup-guest-coach-teaser[hidden] {
  display: none;
}

.startup-guest-coach-teaser > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(31, 190, 232, 0.14);
  font-size: 1.2rem;
}

.startup-guest-coach-teaser strong,
.startup-guest-coach-teaser p {
  margin: 0;
}

.startup-guest-coach-teaser p {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.startup-coach-card[data-guest="true"] {
  display: block;
  min-height: 0;
  border-style: dashed;
  border-color: rgba(31, 190, 232, 0.38);
  background: rgba(31, 190, 232, 0.045);
}

.startup-coach-card[data-guest="true"] > .startup-coach-portrait,
.startup-coach-card[data-guest="true"] > .startup-coach-content,
.startup-coach-card[data-guest="true"] > .startup-coach-picker {
  display: none;
}

.developer-page {
  width: min(100% - 24px, 720px);
  margin: 24px auto;
}

.developer-cost-guard { display: grid; gap: 12px; margin-block: 20px; border-color: rgba(31, 190, 232, 0.3); }
.developer-cost-guard h2, .developer-cost-guard p { margin: 0; }
.developer-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.developer-cost-grid > div { display: grid; gap: 3px; padding: 11px; border-radius: 12px; background: rgba(31, 190, 232, 0.08); }
.developer-cost-grid span { color: var(--color-text-muted); font-size: 0.7rem; }
.developer-cost-grid strong { color: var(--color-primary); font-size: 1rem; }
.developer-cost-links { display: grid; gap: 8px; }
.developer-cost-links a { padding: 10px 12px; border: 1px solid rgba(31, 190, 232, 0.2); border-radius: 10px; background: rgba(31, 190, 232, 0.07); color: var(--color-primary); font-weight: 750; text-decoration: none; }

.developer-danger-zone {
  display: grid;
  gap: 12px;
  margin-block: 20px;
  border-color: rgba(248, 113, 113, 0.32);
}

.developer-danger-zone h2,
.developer-danger-zone p {
  margin: 0;
}

.developer-danger-zone button {
  width: 100%;
}

.friends-settings-card {
  overflow: hidden;
}

.friends-settings-card > button {
  width: 100%;
}

.friends-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.friend-nav-badge {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  background: #f5c442;
  color: #111317;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(245, 196, 66, 0.11);
}

.friend-nav-badge[hidden] {
  display: none;
}

.friends-settings-content {
  display: grid;
  gap: 18px;
  padding-top: 16px;
}

.friends-settings-content[hidden] {
  display: none;
}

.friend-search-form {
  display: grid;
  gap: 8px;
}

.friend-search-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.friend-search-form input {
  min-width: 0;
}

.friend-search-result:empty {
  display: none;
}

.friend-invite-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(31, 190, 232, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0, rgba(31, 190, 232, 0.12), transparent 46%),
    rgba(20, 31, 37, 0.78);
}

.friend-invite-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 900;
}

.friend-invite-card strong {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
}

.friend-invite-card p {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: 0.69rem;
  line-height: 1.4;
}

.friend-invite-card > button,
.friend-invite-status,
.friend-referral-reward,
.friend-referral-trophies,
.friend-referral-explanation {
  grid-column: 1 / -1;
}

.friend-referral-reward {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.friend-referral-reward span {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.friend-referral-reward small {
  color: var(--color-text-muted);
  font-size: 0.55rem;
}

.friend-referral-reward strong {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.76rem;
}

.friend-referral-trophies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.friend-referral-trophies button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(245, 196, 66, 0.2);
  border-radius: 10px;
  background: rgba(245, 196, 66, 0.055);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.friend-referral-trophies button:hover,
.friend-referral-trophies button:focus-visible,
.friend-referral-trophies button.is-active {
  border-color: rgba(245, 196, 66, 0.72);
  background: rgba(245, 196, 66, 0.14);
  outline: none;
  box-shadow: 0 0 0 2px rgba(245, 196, 66, 0.12);
}

.friend-referral-trophies small {
  color: #f5c442;
  font-size: 0.62rem;
  font-weight: 900;
}

.friend-referral-trophies .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.friend-referral-explanation {
  padding: 10px 12px;
  border: 1px solid rgba(245, 196, 66, 0.28);
  border-radius: 11px;
  background: rgba(245, 196, 66, 0.075);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.friend-referral-explanation strong {
  display: block;
  margin-bottom: 2px;
  color: #f5c442;
  font-size: 0.76rem;
}

.friend-invite-card > button {
  width: 100%;
  min-height: 40px;
}

.friend-invite-card .friend-invite-status {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--color-primary);
  font-weight: 750;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.friend-invite-status:empty {
  display: none;
}

.friends-settings-content section {
  display: grid;
  gap: 9px;
}

.friends-settings-content h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 0.95rem;
}

.friends-settings-content h3 span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
  font-size: 0.75rem;
}

.friends-list,
.friend-search-result {
  display: grid;
  gap: 8px;
}

.friends-list > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.friend-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.friend-row > div {
  display: flex;
  gap: 6px;
}
.friend-row > small {
  color: var(--color-text-muted);
}
.friend-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-profile-trigger {
  width: 100%;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.friend-profile-trigger > .friend-list-avatar {
  width: 50px;
  height: 50px;
  min-width: 50px;
  justify-self: start;
}

.friend-profile-trigger > strong {
  position: relative;
  z-index: 1;
}

.friend-profile-trigger:hover,
.friend-profile-trigger:focus-visible {
  border-color: rgba(31, 190, 232, 0.34);
  background: rgba(31, 190, 232, 0.08);
  transform: translateY(-1px);
}

.friend-profile-trigger > small {
  color: var(--color-primary);
}

.friend-request-row {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
}

.friend-request-row.is-new-friend-request {
  position: relative;
  border-color: rgba(243, 194, 33, 0.72);
  background: linear-gradient(135deg, rgba(243, 194, 33, 0.16), rgba(243, 194, 33, 0.035));
  box-shadow:
    inset 3px 0 0 #f3c221,
    0 0 18px rgba(243, 194, 33, 0.11);
}

.friend-request-row.is-new-friend-request > .friend-avatar-placeholder {
  border-color: rgba(243, 194, 33, 0.7);
  background: rgba(243, 194, 33, 0.14);
  color: #ffd94f;
}

.friend-request-new-label {
  position: absolute;
  top: 8px;
  right: 9px;
  padding: 2px 6px;
  border: 1px solid rgba(243, 194, 33, 0.52);
  border-radius: 999px;
  background: rgba(243, 194, 33, 0.12);
  color: #ffd94f !important;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.has-new-friend-requests > h3 > span {
  border-color: rgba(243, 194, 33, 0.58);
  background: rgba(243, 194, 33, 0.16);
  color: #ffd94f;
  box-shadow: 0 0 13px rgba(243, 194, 33, 0.16);
}

.friend-request-row > div {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.friend-request-row .friend-action {
  width: 100%;
}

.friend-challenge-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(243, 194, 33, .3);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(243, 194, 33, .1), rgba(31, 190, 232, .04));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.friend-challenge-row > span:first-child { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; background:rgba(243,194,33,.14); color:#f3c221; font-size:1.05rem; }
.friend-challenge-row > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.friend-challenge-row strong { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.friend-challenge-row small { color:var(--color-text-muted); font-size:.68rem; line-height:1.35; }
.friend-challenge-row b { color:#f3c221; font-size:.68rem; }

.friend-challenge-inbox.has-open-challenges {
  padding: 10px;
  border: 1px solid rgba(243, 194, 33, .58);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(243, 194, 33, .13), rgba(243, 194, 33, .025));
  box-shadow: 0 0 22px rgba(243, 194, 33, .1);
}

.friend-challenge-inbox.has-load-error {
  border-color: rgba(255, 91, 91, .42);
}

.friend-challenge-inbox.has-load-error .friend-challenge-list > p {
  color: #ffb0b0;
}

.friend-challenge-inbox.has-open-challenges > h3,
.friend-challenge-inbox.has-open-challenges > h3 span {
  color: #ffd75c;
}

.friend-live-row.has-incoming-challenge {
  overflow: hidden;
  border: 1px solid rgba(243, 194, 33, .62);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(243, 194, 33, .12), rgba(31, 190, 232, .035));
  box-shadow: 0 0 20px rgba(243, 194, 33, .1);
}

.friend-challenge-inbox-card {
  display: grid;
  gap: 8px;
  padding: 9px;
  animation: friendChallengeAttention 2.8s ease-in-out infinite;
}

.friend-challenge-inbox {
  display: grid;
  gap: 7px;
  margin: 8px 0 12px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(0, 0, 0, .12);
}

.friend-challenge-inbox > h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: .72rem;
}

.friend-challenge-inbox > h4 span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 193, 232, .12);
  color: var(--color-cyan);
}

.friend-challenge-inbox.has-open-challenges {
  border-color: rgba(243, 194, 33, .6);
  background: linear-gradient(135deg, rgba(243, 194, 33, .11), rgba(0, 0, 0, .1));
}

.friend-challenge-list { margin: 0; }
.friend-challenge-list > p { margin: 0; color: var(--color-text-muted); font-size: .68rem; }

.friend-challenge-inbox-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.friend-challenge-inbox-heading > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(243, 194, 33, .18);
  color: #ffd75c;
}

.friend-challenge-inbox-heading > span:last-child { display: grid; gap: 2px; }
.friend-challenge-inbox-heading small { color: #ffd75c; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.friend-challenge-inbox-heading strong { color: #fff4bd; font-size: .82rem; }

@keyframes friendChallengeAttention {
  0%, 72%, 100% { box-shadow: 0 0 14px rgba(243, 194, 33, .08); }
  78% { box-shadow: 0 0 20px rgba(243, 194, 33, .18); }
  84% { box-shadow: 0 0 16px rgba(243, 194, 33, .12); }
}

.friend-live-row.has-incoming-challenge .friend-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.friend-incoming-challenge {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  padding: 9px;
  border: 1px solid rgba(243, 194, 33, .48);
  border-radius: 11px;
  background: rgba(8, 14, 16, .72);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.friend-incoming-challenge > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(243, 194, 33, .16);
  color: #ffd75c;
}

.friend-incoming-challenge > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.friend-incoming-challenge small { color: #ffd75c; font-size: .55rem; font-weight: 900; letter-spacing: .09em; }
.friend-incoming-challenge strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-incoming-challenge em { color: var(--color-text-muted); font-size: .62rem; font-style: normal; }
.friend-incoming-challenge b { color: #ffd75c; font-size: .66rem; }

.friend-avatar-placeholder {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(31, 190, 232, 0.35);
  border-radius: 50%;
  background: rgba(31, 190, 232, 0.12);
  color: var(--color-primary);
  font-weight: 800;
}

.friend-list-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-width: 2px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}

.friend-list-avatar > .friend-avatar-fallback {
  color: transparent;
  user-select: none;
}

.friend-list-avatar > .avatar-sport-badge,
.friend-list-avatar > .avatar-presence-dot {
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
}

.friend-list-avatar > .avatar-sport-badge {
  font-size: 0.58rem;
}

.friend-action {
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.09);
  color: inherit;
  cursor: pointer;
}

.friend-action.accept {
  background: rgba(31, 190, 232, 0.16);
  color: var(--color-primary);
}

@media (max-width: 430px) {
  .friend-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .friend-row > div,
  .friend-row > .friend-action,
  .friend-row > small {
    grid-column: 2;
    justify-self: start;
  }
}

.in-app-notification {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 100100;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 11px;
  width: min(calc(100vw - 24px), 420px);
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(31, 190, 232, 0.34);
  border-radius: 16px;
  background: rgba(17, 19, 23, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translate(-50%, -14px) scale(0.97);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
  pointer-events: none;
}

.in-app-notification[hidden] {
  display: none;
}

.in-app-notification-action {
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(76, 220, 239, .62);
  border-radius: 10px;
  background: rgba(25, 190, 218, .18);
  color: #dffbff;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.in-app-notification-action:hover { background: rgba(25, 190, 218, .28); }
.in-app-notification-action:disabled { cursor: wait; opacity: .62; }

.in-app-notification.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.in-app-notification > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.14);
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 900;
}

.in-app-notification[data-type="success"] {
  border-color: rgba(52, 211, 153, 0.42);
}
.in-app-notification[data-type="success"] > span {
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
}
.in-app-notification[data-type="request"] {
  border-color: rgba(245, 196, 66, 0.42);
}
.in-app-notification[data-type="request"] > span {
  background: rgba(245, 196, 66, 0.14);
  color: #f5c442;
}
.in-app-notification[data-type="error"] {
  border-color: rgba(248, 113, 113, 0.42);
}
.in-app-notification[data-type="error"] > span {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}

.in-app-notification[data-type="trophy"],
.in-app-notification[data-type="level"] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 32px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(31, 190, 232, 0.3), transparent 30%),
    rgba(4, 8, 12, 0.96);
  text-align: center;
  transform: scale(0.92);
}

.in-app-notification[data-type="referral"] {
  top: 0;
  left: 0;
  z-index: 500200;
  width: 100%;
  height: 100dvh;
  max-width: none;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: 20px;
  padding: 32px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(245, 196, 66, .34), transparent 27%),
    radial-gradient(circle at 50% 65%, rgba(31, 190, 232, .2), transparent 36%),
    linear-gradient(155deg, #071013, #10221f 54%, #09131a);
  text-align: center;
  transform: scale(.9);
}

.in-app-notification[data-type="referral"]::before,
.in-app-notification[data-type="referral"]::after {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle, #f5c442 0 3px, transparent 4px),
    radial-gradient(circle, #22d3ee 0 2px, transparent 3px),
    radial-gradient(circle, #34d399 0 3px, transparent 4px),
    radial-gradient(circle, #fb7185 0 2px, transparent 3px);
  background-position: 8% 14%, 28% 5%, 73% 11%, 91% 26%;
  background-size: 83px 97px, 109px 127px, 137px 113px, 97px 139px;
  opacity: .72;
  animation: referral-confetti 5.8s linear infinite;
}

.in-app-notification[data-type="referral"]::after {
  rotate: 180deg;
  opacity: .46;
  animation-delay: -2.9s;
  animation-duration: 7.2s;
}

.in-app-notification[data-type="referral"].is-visible { transform: scale(1); }

.in-app-notification[data-type="referral"] > span {
  position: relative;
  z-index: 1;
  width: 142px;
  height: 142px;
  border: 2px solid rgba(245, 196, 66, .66);
  border-radius: 50%;
  background: linear-gradient(145deg, #f8d66d, #f5a623 58%, #1fbde8);
  color: #071014;
  font-size: 4rem;
  box-shadow: 0 0 0 9px rgba(245, 196, 66, .1), 0 0 85px rgba(245, 196, 66, .42);
  animation: referral-hero-pop 850ms cubic-bezier(.2,.9,.25,1.25);
}

.in-app-notification[data-type="referral"] > div { position: relative; z-index: 1; }
.in-app-notification[data-type="referral"] strong {
  max-width: 680px;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.02;
  text-wrap: balance;
}
.in-app-notification[data-type="referral"] p {
  max-width: 560px;
  margin: 16px auto 0;
  color: #e7f5f2;
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  line-height: 1.5;
  text-wrap: balance;
}
.in-app-notification[data-type="referral"] > button {
  position: absolute;
  z-index: 2;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}

.referral-success-details { width: min(620px, calc(100vw - 32px)); margin: 24px auto 0; text-align: left; }
.referral-success-timeline { display: grid; padding: 16px 18px; border: 1px solid rgba(34,211,238,.32); border-radius: 18px; background: rgba(3,12,16,.72); }
.referral-success-timeline > div { display: grid; grid-template-columns: 20px 1fr; gap: 12px; min-height: 62px; }
.referral-success-timeline > div > span { position: relative; width: 12px; height: 12px; margin-top: 5px; border: 3px solid #071014; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,.65); }
.referral-success-timeline > div:not(:last-child) > span::after { position: absolute; top: 13px; left: 3px; width: 2px; height: 45px; content: ""; background: linear-gradient(#22d3ee, rgba(245,196,66,.65)); }
.referral-success-timeline strong { display: block; font-size: .95rem !important; color: #f4fbfa; }
.referral-success-timeline time { display: block; margin-top: 3px; color: #9db4b3; font-size: .88rem; }
.referral-success-gains { margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(245,196,66,.48); border-radius: 18px; background: linear-gradient(135deg,rgba(245,196,66,.13),rgba(31,189,232,.09)); }
.referral-gains-label { color: #f5c442; font-size: .78rem; font-weight: 900; letter-spacing: .15em; }
.referral-success-gains > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.referral-success-gains > div strong { padding: 12px; border-radius: 12px; background: rgba(2,8,11,.68); color: #f8d66d; font-size: clamp(1.15rem,4vw,1.45rem) !important; text-align: center; }
.referral-success-friend { margin-top: 16px; text-align: center; }
.referral-success-friend > strong { display: block; font-size: clamp(1rem,3.5vw,1.2rem) !important; }
.referral-success-friend > div { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.referral-success-friend button { position: static !important; min-height: 46px; padding: 10px 16px; border-radius: 999px; font-weight: 800; }
#referralSuccessFriendButton { border: 0; background: #f5c442; color: #071014; }
#referralSuccessLaterButton { border: 1px solid rgba(231,245,242,.45); background: rgba(5,16,20,.75); color: #e7f5f2; }
#referralSuccessFriendStatus { display: block; min-height: 20px; margin-top: 9px; color: #7fffd4; }
@media (max-height: 820px) {
  .in-app-notification[data-type="referral"] { align-content: start; gap: 12px; padding-top: 68px; }
  .in-app-notification[data-type="referral"] > span { width: 86px; height: 86px; font-size: 2.6rem; }
  .referral-success-details { margin-top: 14px; }
}

@keyframes referral-hero-pop {
  0% { opacity: 0; transform: scale(.25) rotate(-16deg); }
  72% { transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes referral-confetti {
  from { translate: 0 -12%; }
  to { translate: 3% 28%; }
}

.in-app-notification[data-type="level"] {
  z-index: 500100;
  background:
    radial-gradient(circle at 50% 38%, rgba(31, 190, 232, 0.38), transparent 32%),
    linear-gradient(160deg, rgba(4, 8, 12, 0.99), rgba(5, 20, 28, 0.98));
}

.in-app-notification[data-type="level"] > span {
  position: relative;
  width: 132px;
  height: 132px;
  color: #071014;
  background: linear-gradient(145deg, #67e8f9, #1fbde8 58%, #f5c442);
  font-size: 3.6rem;
  line-height: 1;
  box-shadow:
    0 0 0 7px rgba(31, 190, 232, 0.12),
    0 0 70px rgba(31, 190, 232, 0.48);
}

.in-app-notification[data-type="level"] > span::before {
  content: "LEVEL";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.in-app-notification[data-type="level"] > span {
  padding-top: 22px;
}
.in-app-notification[data-type="trophy"].is-visible,
.in-app-notification[data-type="level"].is-visible {
  transform: scale(1);
}
.in-app-notification[data-type="trophy"] > span,
.in-app-notification[data-type="level"] > span {
  width: 112px;
  height: 112px;
  background: rgba(245, 196, 66, 0.14);
  color: #f5c442;
  font-size: 3.5rem;
  box-shadow: 0 0 55px rgba(245, 196, 66, 0.28);
  animation: reward-pop 700ms cubic-bezier(.2,.9,.25,1.25);
}
.in-app-notification[data-type="trophy"] > span {
  background-color: #081219;
  background-image: url("icons/icon-192-logo.png");
  background-position: center;
  background-size: 88%;
  background-repeat: no-repeat;
  color: transparent;
  box-shadow:
    0 0 0 3px rgba(245, 196, 66, 0.45),
    0 0 55px rgba(31, 190, 232, 0.34);
}
.in-app-notification[data-type="trophy"] strong,
.in-app-notification[data-type="level"] strong {
  font-size: clamp(1.65rem, 7vw, 3rem);
}
.in-app-notification[data-type="trophy"] p,
.in-app-notification[data-type="level"] p {
  max-width: 420px;
  font-size: 1rem;
}
.in-app-notification[data-type="trophy"] button,
.in-app-notification[data-type="level"] button {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}
@keyframes reward-pop {
  0% { opacity: 0; transform: scale(.45) rotate(-8deg); }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .in-app-notification[data-type="trophy"] > span,
  .in-app-notification[data-type="level"] > span,
  .in-app-notification[data-type="referral"] > span,
  .in-app-notification[data-type="referral"]::before,
  .in-app-notification[data-type="referral"]::after { animation: none; }
}

.in-app-notification strong {
  display: block;
  font-size: 0.86rem;
}
.in-app-notification p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.in-app-notification button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.in-app-notification button.is-acknowledge {
  width: auto;
  min-width: 88px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(31, 190, 232, 0.48);
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.13);
  color: #8be7fb;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.in-app-notification:has(button.is-acknowledge) {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

/* Premium expiry notices have two real actions and need more room than a toast. */
.in-app-notification[data-action="premium-subscribe"] {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  width: min(calc(100vw - 24px), 480px);
  padding: 18px;
  gap: 14px;
  border-color: rgba(31, 190, 232, 0.42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0, rgba(31, 190, 232, 0.13), transparent 34%),
    rgba(15, 18, 23, 0.98);
}

.in-app-notification[data-action="premium-subscribe"] > span {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.in-app-notification[data-action="premium-subscribe"] strong {
  padding-right: 4px;
  color: #f5fbfc;
  font-size: 1.02rem;
  line-height: 1.18;
  text-wrap: balance;
}

.in-app-notification[data-action="premium-subscribe"] p {
  margin-top: 7px;
  color: #b9c4c9;
  font-size: 0.9rem;
  line-height: 1.45;
}

.in-app-notification[data-action="premium-subscribe"] .in-app-notification-action,
.in-app-notification[data-action="premium-subscribe"] > button.is-acknowledge {
  min-height: 44px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 850;
}

.in-app-notification[data-action="premium-subscribe"] .in-app-notification-action {
  width: 100%;
  height: auto;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid #27c4df;
  background: linear-gradient(135deg, #20b9d5, #1597ba);
  color: #061116;
  box-shadow: 0 8px 22px rgba(31, 190, 232, 0.2);
}

.in-app-notification[data-action="premium-subscribe"] > button.is-acknowledge {
  grid-column: 2;
  width: 100%;
  height: auto;
  margin-top: -2px;
  border-color: rgba(185, 196, 201, 0.28);
  background: rgba(255, 255, 255, 0.035);
  color: #aebbc0;
}

@media (max-width: 430px) {
  .in-app-notification[data-action="premium-subscribe"] {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 15px;
    gap: 11px;
  }

  .in-app-notification[data-action="premium-subscribe"] > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

@media (max-width: 430px) {
  .friend-row.friend-profile-trigger {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .friend-row.friend-profile-trigger > small {
    grid-column: 3;
    justify-self: end;
  }
}

.friend-profile-modal {
  z-index: 100200;
}

.friend-profile-card {
  position: relative;
  overflow: hidden;
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
  border: 1px solid rgba(31, 190, 232, 0.3);
  background: linear-gradient(
    155deg,
    rgba(31, 190, 232, 0.09),
    #17191d 38%,
    #111317
  );
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
}

#friendProfileModal {
  z-index: 200000;
} /* Ende von #friendProfileModal */

.friend-profile-hero {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.friend-profile-hero .athlete-avatar {
  width: 92px;
  height: 92px;
}

.friend-profile-hero h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.35rem;
}

.friend-profile-hero p {
  margin: 5px 0 0;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.friend-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.friend-profile-stats > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.friend-profile-stats span {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.friend-profile-stats strong {
  color: var(--color-primary);
  font-size: 1.2rem;
}
.friend-profile-privacy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.friend-profile-block-button {
  width: 100%;
  margin-top: 12px;
}

.friend-profile-trophies-section {
  display: grid;
  gap: 10px;
}

.friend-profile-section-heading h3 {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

.friend-profile-section-heading h3 strong {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  background: rgba(245, 196, 66, 0.14);
  color: #f5c442;
  font-size: 0.7rem;
}

.friend-profile-trophy-list {
  display: flex;
  gap: 9px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.friend-profile-trophy {
  display: grid;
  flex: 0 0 92px;
  min-height: 94px;
  box-sizing: border-box;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 10px 7px;
  border: 1px solid rgba(245, 196, 66, 0.2);
  border-radius: 14px;
  background: rgba(245, 196, 66, 0.055);
  text-align: center;
  scroll-snap-align: start;
}

.friend-profile-trophy > span {
  font-size: 1.7rem;
}
.friend-profile-trophy > strong {
  font-size: 0.66rem;
  line-height: 1.2;
}
.friend-profile-trophy-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.shared-trophies-section {
  padding: 12px;
  border: 1px solid rgba(31, 190, 232, 0.17);
  border-radius: 15px;
  background: rgba(31, 190, 232, 0.045);
}

.friend-profile-social-section {
  display: grid;
  gap: 10px;
}

.friend-profile-friends-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.friend-profile-connection {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.friend-profile-connection > .friend-avatar-placeholder {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 800;
}

.friend-profile-connection strong,
.friend-profile-connection small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-profile-connection strong {
  font-size: 0.76rem;
}
.friend-profile-connection small {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.62rem;
}

.friend-profile-activity-list {
  display: grid;
  gap: 7px;
}

.friend-profile-activity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.032);
}

.friend-profile-activity > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: rgba(31, 190, 232, 0.1);
}

.friend-profile-activity strong,
.friend-profile-activity small {
  display: block;
}
.friend-profile-activity strong {
  font-size: 0.76rem;
}
.friend-profile-activity small {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.activity-pulse-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: 9px;
  padding: 6px 10px;
  border: 1px solid rgba(31, 190, 232, 0.2);
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.08);
  color: var(--color-primary);
  font-size: 0.69rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.activity-pulse-button:hover {
  transform: translateY(-1px);
}

.activity-pulse-button.is-pulsed {
  background: linear-gradient(
    135deg,
    rgba(31, 190, 232, 0.24),
    rgba(167, 139, 250, 0.18)
  );
  box-shadow: 0 0 16px rgba(31, 190, 232, 0.18);
}

.activity-pulse-button > span {
  font-size: 1rem;
}
.activity-pulse-button > strong {
  color: inherit;
  font-size: 0.7rem;
}

.activity-pulse-button.is-own-post-resonance {
  cursor: default;
  border-color: rgba(75, 227, 170, 0.26);
  background: rgba(75, 227, 170, 0.08);
  color: #65eeb8;
}

.activity-pulse-button.is-own-post-resonance:hover { transform: none; }
.activity-pulse-button.has-system-resonance > strong { text-decoration: underline dotted; text-underline-offset: 3px; }

.feed-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.newsfeed-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.newsfeed-delete-post {
  padding: 4px 7px;
  border: 1px solid rgba(255, 92, 117, 0.24);
  border-radius: 999px;
  background: rgba(255, 92, 117, 0.08);
  color: #ff8da0;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 750;
  cursor: pointer;
}

.newsfeed-delete-post:hover {
  background: rgba(255, 92, 117, 0.16);
}

.newsfeed-pin-post {
  padding: 4px 8px;
  border: 1px solid rgba(245, 196, 66, 0.3);
  border-radius: 999px;
  background: rgba(245, 196, 66, 0.08);
  color: #f8d970;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 800;
  cursor: pointer;
}

.newsfeed-pin-post:hover,
.newsfeed-pin-post.is-active {
  border-color: rgba(245, 196, 66, 0.62);
  background: rgba(245, 196, 66, 0.18);
}

.newsfeed-pin-post:disabled {
  cursor: progress;
  opacity: 0.55;
}

.newsfeed-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.newsfeed-detail-button {
  padding: 4px 8px;
  border: 1px solid rgba(31, 190, 232, 0.25);
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.08);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.64rem;
  font-weight: 750;
  cursor: pointer;
}

.newsfeed-summary {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.news-detail-card {
  width: min(560px, 100%);
  padding-top: 34px;
}

.news-detail-card h2 {
  margin: 5px 0 0;
}

.news-detail-meta {
  margin: 8px 0 18px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.news-detail-body {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.17);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.news-detail-actions {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin-top: 12px;
}

.news-detail-actions:empty {
  display: none;
}

.feed-item-actions .activity-pulse-button {
  margin-top: 0;
}

.feed-comment-toggle {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 750;
  cursor: pointer;
}

.feed-comment-toggle[aria-expanded="true"] {
  border-color: rgba(31, 190, 232, 0.34);
  color: var(--color-primary);
}

.feed-comment-toggle.has-comments {
  border-color: rgba(72, 218, 207, 0.42);
  background: rgba(25, 174, 190, 0.12);
  color: #7be9e1;
}

.feed-comments {
  display: grid;
  gap: 9px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feed-comments[hidden] {
  display: none;
}

.feed-comments-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 151, 92, 0.28);
  border-radius: 12px;
  background: rgba(255, 151, 92, 0.07);
}

.feed-comments-error p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.feed-comments-error button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.68rem;
}

.feed-comment {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.feed-comment > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.feed-comment > div strong,
.feed-comment > div small {
  font-size: 0.68rem;
}

.feed-comment > div small,
.feed-comments-status {
  color: var(--color-text-muted);
}

.feed-comment-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.feed-comment-delete {
  padding: 2px 6px;
  border: 1px solid rgba(255, 92, 117, 0.24);
  border-radius: 999px;
  background: rgba(255, 92, 117, 0.08);
  color: #ff8da0;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  cursor: pointer;
}

.feed-comment-delete:hover {
  background: rgba(255, 92, 117, 0.16);
}

.feed-comment-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.feed-comment > p {
  margin: 6px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
}

.feed-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.feed-comment-form textarea {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

.feed-comment-form .buttons {
  min-height: 40px;
  align-self: end;
  padding-inline: 13px;
}

@media (max-width: 390px) {
  .friend-profile-friends-list {
    grid-template-columns: 1fr;
  }
}

.activity-feed-card {
  border-color: rgba(31, 190, 232, 0.24);
  background: linear-gradient(
    145deg,
    rgba(31, 190, 232, 0.07),
    rgba(255, 255, 255, 0.025)
  );
}

.activity-feed-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-feed-list {
  display: grid;
  gap: 10px;
}

.newsfeed-category-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: rgba(6, 18, 22, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.newsfeed-category-navigation::-webkit-scrollbar {
  display: none;
}

.newsfeed-category-navigation button {
  min-height: 34px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: normal;
  line-height: 1.2;
}

.newsfeed-category-navigation button.is-active {
  border-color: rgba(12, 186, 230, 0.45);
  background: rgba(12, 186, 230, 0.15);
  color: var(--color-primary);
}

.community-post-composer {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(12, 186, 230, 0.16);
  border-radius: 14px;
  background: rgba(12, 186, 230, 0.055);
}

.newsfeed-composer-accordion {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(12, 186, 230, 0.2);
  border-radius: 15px;
  background: rgba(12, 186, 230, 0.055);
}

.newsfeed-composer-accordion:has(.community-post-composer[hidden]) {
  display: none;
}

.newsfeed-composer-accordion > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.newsfeed-composer-accordion > summary::-webkit-details-marker { display: none; }
.newsfeed-composer-accordion > summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 186, 230, 0.16);
  color: var(--color-primary);
  font-size: 1.15rem;
}
.newsfeed-composer-accordion > summary div { display: grid; gap: 2px; }
.newsfeed-composer-accordion > summary strong { font-size: 0.83rem; }
.newsfeed-composer-accordion > summary small { color: var(--color-text-muted); font-size: 0.66rem; }
.newsfeed-composer-accordion > summary > b { color: var(--color-primary); transition: transform 0.2s ease; }
.newsfeed-composer-accordion[open] > summary > b { transform: rotate(180deg); }
.newsfeed-composer-accordion[open] > summary { border-bottom: 1px solid rgba(12, 186, 230, 0.14); }
.newsfeed-composer-accordion .community-post-composer { border: 0; border-radius: 0; background: transparent; }

.newsfeed-list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 10px;
}
.newsfeed-list-heading div { display: grid; gap: 2px; }
.newsfeed-list-heading span { color: var(--color-primary); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.12em; }
.newsfeed-list-heading h3 { margin: 0; color: var(--color-text); font-size: 1rem; }
.newsfeed-list-heading small { color: var(--color-text-muted); font-size: 0.64rem; }

.community-post-composer[hidden] {
  display: none;
}

.community-post-composer label {
  font-size: 0.75rem;
}

.community-post-composer textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--color-text);
  font: inherit;
}

.community-post-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end !important;
  gap: 9px !important;
}

.community-post-options label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.community-post-options select {
  min-width: 0;
  min-height: 40px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #15191e;
  color: var(--color-text);
  font: inherit;
  font-size: 0.7rem;
}

.community-guideline-warning {
  display: grid;
  gap: 6px;
  margin-top: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 197, 80, 0.42);
  border-radius: 11px;
  background: rgba(244, 197, 80, 0.075);
}
.community-guideline-warning > strong { color: #f4c550; font-size: 0.76rem; }
.community-guideline-warning > p { margin: 0; color: #c7d5d8; font-size: 0.68rem; line-height: 1.45; }
.community-guideline-warning > label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #eef8fa;
  font-size: 0.69rem;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
}
.community-guideline-warning input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #25cbe3; }
.community-guideline-warning.is-comment-guideline { margin: 3px 0 0; }
.feed-comment-form .community-guideline-warning.is-comment-guideline {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.feed-comment-form .community-guideline-warning.is-comment-guideline > label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}
.feed-comment-form .community-guideline-warning.is-comment-guideline > label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .community-post-options {
    grid-template-columns: 1fr;
  }

  .newsfeed-category-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .newsfeed-category-navigation button:first-child {
    grid-column: 1 / -1;
  }
}

.newsfeed-modal,
.trophy-collection-modal {
  z-index: 200100;
}

body.is-newsfeed-modal-open .newsfeed-modal {
  bottom: calc(68px + env(safe-area-inset-bottom));
  padding-bottom: 12px;
}

body.is-newsfeed-modal-open .app-bottom-navigation {
  z-index: 200200;
}

body.is-newsfeed-modal-open .global-training-start {
  z-index: 200210;
}

body.is-newsfeed-modal-open .newsfeed-modal-box {
  max-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
}
.newsfeed-modal-box,
.trophy-collection-modal-box {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.newsfeed-modal-box { scrollbar-gutter: stable; isolation: isolate; }
.newsfeed-modal-box > .modal-close-btn {
  z-index: 20;
  pointer-events: auto;
  touch-action: manipulation;
}
.newsfeed-modal .activity-feed-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.newsfeed-modal .activity-feed-card > summary {
  pointer-events: none;
  padding-bottom: 12px;
}
.newsfeed-modal .activity-feed-heading-actions .cockpit-card-toggle-icon {
  display: none;
}
.trophy-collection-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: none;
}
.trophy-collection-modal-grid .trophy-item {
  min-width: 0;
  height: 100%;
}
.cockpit-trophy-preview-card {
  cursor: pointer;
}
.pulse-league-accordion {
  padding: 0;
}
.pulse-league-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  cursor: pointer;
  list-style: none;
}
.pulse-league-summary::-webkit-details-marker { display: none; }
.pulse-league-summary-status { display: flex; align-items: center; gap: 9px; }
.pulse-league-content { padding: 0 15px 15px; }
.pulse-league-accordion[open] .cockpit-card-toggle-icon { transform: rotate(180deg); }
.media-cockpit-section:not([open]) .cockpit-card-toggle-icon { transform: rotate(-90deg); }

.media-player-settings-toggle {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.media-player-settings-toggle > span { display: grid; gap: 3px; }
.media-player-settings-toggle small { display: block; }
.media-player-settings-toggle strong { font-size: 1.08rem; line-height: 1.15; }
.media-player-settings-toggle i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 188, 245, .1);
  color: var(--color-cyan);
  font-style: normal;
  transition: transform .2s ease, background .2s ease;
}
.media-player-settings-toggle.is-open i { transform: rotate(180deg); background: rgba(0, 188, 245, .18); }
.media-player-settings-group:not(:has(.media-player-settings-toggle.is-open)) #mediaPlayerSettingsMount { display: none; }
.media-player-settings-group .training-media-subsection { margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(0, 188, 245, .24); border-radius: 14px; background: rgba(0, 0, 0, .14); }
.media-player-settings-group .training-media-subsection > summary { min-height: 64px; padding: 14px 16px; box-sizing: border-box; }
.media-player-settings-group .training-media-subsection > summary .cockpit-card-eyebrow { display: none; }
.media-player-settings-group .training-media-subsection > .cockpit-card-content { display: grid; gap: 16px; margin: 0; padding: 4px 16px 16px; }
.media-player-settings-group .training-media-subsection > .cockpit-card-content > .hint,
.media-player-settings-group #mediaCockpitTitle { margin: 0; line-height: 1.45; }
.media-player-settings-group .cockpit-media-actions { display: grid; gap: 12px; margin: 4px 0 0; }
.media-player-settings-group .cockpit-media-actions > button { width: 100%; margin: 0; }
.media-player-settings-group .tv-training-help { margin: 0; }
@media (max-width: 420px) {
  .media-player-settings-group { padding: 14px; }
  .media-player-settings-group .training-media-subsection > summary { padding-inline: 14px; }
  .media-player-settings-group .training-media-subsection > .cockpit-card-content { padding: 4px 14px 14px; }
}
.friend-profile-remove-button {
  width: 100%;
  margin-top: 12px;
}
.coach-radar-label {
  fill: #d8e2e8;
  font-size: 7px;
  font-weight: 750;
  text-anchor: middle;
}
.coach-premium-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(245,196,66,.16);
  color: #f5c442;
  font-size: .5rem;
  letter-spacing: .08em;
}

.coach-analysis-toggle {
  width: auto;
  min-height: 0;
  margin-top: 6px;
  padding: 4px 9px;
  justify-self: start;
  border: 1px solid rgba(31, 190, 232, 0.25);
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.08);
  color: var(--color-primary);
  font-size: 0.64rem;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: none;
}

.coach-analysis-toggle:hover,
.coach-analysis-toggle:focus-visible {
  border-color: rgba(31, 190, 232, 0.45);
  background: rgba(31, 190, 232, 0.13);
  box-shadow: none;
}

.coach-analysis-panel {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.coach-athlete-rating {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.coach-athlete-rating span {
  display: grid;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.coach-athlete-rating strong {
  min-width: 0;
  color: var(--color-primary);
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}

.coach-radar-chart svg {
  display: block;
  width: min(100%, 270px);
  margin: 8px auto;
}

.radar-grid polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
}

.radar-previous {
  fill: rgba(255, 255, 255, 0.08);
  stroke: #9aa3b2;
  stroke-width: 2;
}

.radar-current {
  fill: rgba(31, 190, 232, 0.2);
  stroke: var(--color-primary);
  stroke-width: 2;
}

.radar-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.75rem;
}

.coach-analysis-factors {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.coach-analysis-factors > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 2px 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.coach-analysis-factors span,
.coach-analysis-factors strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.coach-analysis-factors small {
  grid-column: 1 / -1;
}

.coach-analysis-factors em {
  grid-column: 1 / -1;
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--color-text-muted);
  font-size: .7rem;
  font-style: normal;
  line-height: 1.4;
}

.coach-analysis-factors > button[aria-expanded="true"] {
  border-color: rgba(31, 190, 232, .35);
  background: rgba(31, 190, 232, .08);
}

.coach-analysis-note {
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.community-post-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-post-composer small {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.community-post-composer button {
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--color-primary);
  color: #06151a;
  font-weight: 800;
  cursor: pointer;
}

.newsfeed-category-label {
  margin: 0 0 4px !important;
  color: var(--color-primary) !important;
  font-size: 0.6rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsfeed-item[data-feed-category="community"] {
  border-color: rgba(145, 105, 255, 0.2);
}

.newsfeed-item[data-feed-category="checkpulse"] {
  border-color: rgba(12, 186, 230, 0.24);
}

.newsfeed-item.is-haven-zero-news {
  border-color: rgba(87, 231, 211, 0.58);
  background: linear-gradient(135deg, rgba(31, 190, 232, 0.12), rgba(98, 55, 140, 0.13) 56%, rgba(8, 12, 17, 0.76));
  box-shadow: inset 3px 0 0 #57e7d3, 0 0 22px rgba(87, 231, 211, 0.09);
}

.newsfeed-item.is-haven-zero-news .newsfeed-category-label,
#newsDetailModal.is-haven-zero-news .settings-eyebrow {
  color: #70f0df !important;
  text-shadow: 0 0 12px rgba(87, 231, 211, 0.3);
}

#newsDetailModal.is-haven-zero-news .news-detail-card {
  border-color: rgba(87, 231, 211, 0.58);
  box-shadow: inset 3px 0 0 #57e7d3, 0 24px 70px rgba(0, 0, 0, 0.52);
}

.newsfeed-item[data-feed-category="insights"] {
  border-color: rgba(245, 196, 66, 0.2);
}

.newsfeed-item.is-pinned {
  border-color: rgba(245, 196, 66, 0.5);
  background: linear-gradient(135deg, rgba(245, 196, 66, 0.11), rgba(8, 12, 17, 0.72));
  box-shadow: inset 3px 0 0 #f5c442;
}

.activity-feed-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(8, 12, 17, 0.52);
}

.newsfeed-item.is-unread {
  border-color: rgba(31, 190, 232, 0.72);
  background: linear-gradient(135deg, rgba(31, 190, 232, 0.16), rgba(8, 12, 17, 0.72));
  box-shadow: inset 3px 0 0 var(--color-primary), 0 0 18px rgba(31, 190, 232, 0.12);
}

.newsfeed-item.is-unread::after {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #041217;
  content: attr(data-feed-new-label);
  font-size: 0.52rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.activity-feed-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.13);
  font-size: 1.3rem;
}

.activity-feed-profile-icon {
  overflow: visible;
  background: transparent;
}

.activity-feed-profile-icon .friend-list-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
}

.feed-profile-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 190, 232, 0.3);
  border-radius: 50%;
  background: #0f1216;
}

.feed-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-feed-checkpulse-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.activity-feed-item[data-feed-type="checkpulse"] .activity-feed-icon {
  padding: 0;
  overflow: hidden;
  background: #0f1216;
  box-shadow: 0 0 0 1px rgba(12, 186, 230, 0.28);
}

.activity-feed-item[data-feed-type="trophy"] .activity-feed-icon {
  background: rgba(245, 196, 66, 0.14);
}
.activity-feed-item[data-feed-type="level"] .activity-feed-icon {
  background: rgba(167, 139, 250, 0.14);
}
.activity-feed-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}
.activity-feed-item div > span {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.activity-feed-item small {
  display: block;
  margin-top: 7px;
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.68rem;
}
.activity-feed-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.training-zone-story-visual {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: #070d12;
}

.training-zone-story-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 58%, var(--color-surface));
  pointer-events: none;
}

.training-zone-story-visual img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: opacity 180ms ease;
}

.training-zone-story-badge {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 10, 13, 0.78);
  color: #fff;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.training-zone-story-copy {
  align-self: center;
  padding: 24px 24px 24px 0;
}

.training-zone-story-copy h3 {
  margin: 5px 0 8px;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
}

.training-zone-story-copy > p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.training-zone-story-copy ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-zone-story-copy li {
  position: relative;
  padding-left: 20px;
  line-height: 1.42;
}

.training-zone-story-copy li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  color: var(--zone-story-accent);
  font-weight: 900;
}

.training-zone-story-note {
  display: block;
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

#trainingCockpitCard {
  scroll-margin-top: 92px;
}

/* Home: Training wird über den globalen Startbutton geöffnet; keine leere Doppel-Kachel. */
body:not(.is-training-fullscreen) main.app > #trainingCockpitCard:not([open]) {
  display: none;
}

main.app > #trainingHistoryCard {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  main.app > #trainingHistoryCard:not([open]) {
    grid-column: 1 / -1;
    min-height: 116px;
  }
}

@media (max-width: 680px) {
  .training-zone-story {
    grid-template-columns: 1fr;
  }

  .training-zone-story-visual,
  .training-zone-story-visual img {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .training-zone-story-visual img {
    object-fit: cover;
    object-position: center top;
  }

  .training-zone-story-visual::after {
    background: linear-gradient(180deg, transparent 62%, var(--color-surface));
  }

  .training-zone-story-copy {
    padding: 0 18px 20px;
  }
}

.cockpit-card-eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cockpit-card-eyebrow + h2 {
  margin-top: 2px;
}

#patchLabel {
  box-sizing: border-box;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.75rem;
  text-align: center;
}

.cockpit-footer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px 104px;
}


.app-bottom-navigation {
  position: fixed;
  z-index: 85;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  min-height: calc(68px + env(safe-area-inset-bottom));
  padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0;
  background: #0f1216;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
}


.gear-view {
  display: grid;
  grid-column: 1 / -1;
  gap: 14px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  scroll-margin-top: 16px;
}

.gear-view[hidden] {
  display: none;
}

.context-gear-recommendation,
.gear-context-insight {
  display: grid;
  gap: 11px;
  border: 1px solid rgba(31, 190, 232, 0.32);
  background:
    radial-gradient(circle at 0 0, rgba(31, 190, 232, 0.13), transparent 42%),
    #172026;
}

.context-gear-recommendation {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 14px;
  border-radius: 18px;
}

.context-gear-recommendation[hidden] {
  display: none;
}

.context-gear-icon,
.gear-context-insight > div:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.12);
  color: var(--color-primary);
  font-size: 1.35rem;
  font-weight: 900;
}

.context-gear-recommendation strong,
.gear-context-insight strong {
  display: block;
  margin-top: 2px;
}

.context-gear-recommendation p,
.gear-context-insight p {
  margin: 4px 0 0;
  color: #d7e6eb;
  font-size: 0.75rem;
  line-height: 1.42;
}

.context-gear-recommendation small {
  display: block;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 0.61rem;
  line-height: 1.35;
}

.context-gear-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.context-gear-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
}

#openContextGearBtn {
  border: 1px solid var(--color-primary);
  background: rgba(31, 190, 232, 0.12);
  color: var(--color-primary);
}

#dismissContextGearBtn {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: transparent;
  color: var(--color-text-muted);
}

.gear-context-insight {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 14px;
  border-radius: 17px;
}

.gear-context-insight.has-recommendation {
  border-color: rgba(74, 222, 128, 0.34);
  background:
    radial-gradient(circle at 0 0, rgba(74, 222, 128, 0.11), transparent 42%),
    #17221d;
}

.gear-hero {
  display: grid;
  gap: 8px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(31, 190, 232, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(31, 190, 232, 0.2), transparent 42%),
    linear-gradient(145deg, #15252b, #11161a 62%);
}

.gear-hero h2,
.gear-product-heading h3,
.gear-empty-category h3 {
  margin: 0;
}

.gear-hero > p,
.gear-product-summary,
.gear-empty-category p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.gear-trust-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.07);
}

.gear-trust-note > span {
  display: grid;
  flex: 0 0 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #22c55e;
  color: #07120b;
  font-weight: 900;
}

.gear-trust-note p {
  margin: 0;
  color: #c9e8d2;
  font-size: 0.78rem;
  line-height: 1.4;
}

.gear-category-navigation {
  display: flex;
  gap: 7px;
  padding: 2px 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gear-category-navigation::-webkit-scrollbar {
  display: none;
}

.gear-category-navigation button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: #1b2025;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
}

.gear-category-navigation button.is-active {
  border-color: var(--color-primary);
  background: rgba(31, 190, 232, 0.13);
  color: var(--color-primary);
}

.gear-rating-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gear-rating-legend article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 7px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: #191d21;
}

.gear-rating-legend article > span {
  grid-row: 1 / 3;
  font-size: 0.65rem;
  letter-spacing: -0.12em;
}

.gear-rating-legend strong {
  font-size: 0.7rem;
}

.gear-rating-legend small {
  color: var(--color-text-muted);
  font-size: 0.57rem;
  line-height: 1.25;
}

.gear-rating-legend .is-approved,
.gear-rating-legend .is-elite {
  color: #4ade80;
}

.gear-rating-legend .is-compatible {
  color: #facc15;
}

.gear-rating-legend .is-rejected {
  color: #f87171;
}

.gear-product-list {
  display: grid;
  gap: 12px;
}

.gear-product-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, #20252a, #171b1f);
}

.gear-product-image {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(31, 190, 232, 0.2);
  background-image: url("assets/gear/heart-rate-straps-sprite-v1.webp");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  box-shadow: inset 0 0 18px rgba(31, 190, 232, 0.08);
}

.gear-product-image.is-strap-polar {
  background-position: left top;
}

.gear-product-image.is-strap-dual {
  background-position: right top;
}

.gear-product-image.is-strap-pro {
  background-position: left bottom;
}

.gear-product-image.is-strap-concept {
  background-position: right bottom;
}

.gear-product-card.is-featured {
  border-color: rgba(74, 222, 128, 0.38);
  box-shadow: inset 0 0 24px rgba(74, 222, 128, 0.035);
}

.gear-product-card[hidden] {
  display: none;
}

.gear-product-visual {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(31, 190, 232, 0.28);
  border-radius: 17px;
  background: radial-gradient(circle, rgba(31, 190, 232, 0.2), rgba(31, 190, 232, 0.04));
  color: #ff5b69;
  font-size: 1.55rem;
}

.gear-product-visual.gear-product-image {
  width: 76px;
  height: 76px;
  background-color: #07111d;
  background-image: url("assets/gear/heart-rate-straps-sprite-v1.webp");
  background-repeat: no-repeat;
  background-size: 200% 200%;
}

.gear-product-visual.is-garmin {
  border-color: rgba(239, 68, 68, 0.3);
  background: radial-gradient(circle, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.035));
  color: #f87171;
  font-size: 1.05rem;
  font-weight: 950;
}

.gear-product-main,
.gear-product-heading {
  min-width: 0;
}

.gear-product-heading {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.gear-product-heading small {
  color: var(--color-primary);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gear-product-heading h3 {
  margin-top: 2px;
  font-size: 1rem;
}

.gear-seal {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
}

.gear-seal.is-elite {
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
}

.gear-seal.is-approved {
  border: 1px solid rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.075);
  color: #86efac;
}

.gear-seal.is-community {
  border: 1px solid rgba(31, 190, 232, 0.38);
  background: rgba(31, 190, 232, 0.1);
  color: #6ee7f2;
}

.gear-seal.is-preview {
  border: 1px solid rgba(31, 190, 232, 0.28);
  background: rgba(31, 190, 232, 0.09);
  color: var(--color-primary);
}

.gear-product-summary {
  margin-top: 8px;
  font-size: 0.76rem;
}

.gear-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.gear-product-tags span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
  font-size: 0.59rem;
  font-weight: 700;
}

.gear-product-tags .gear-performance-proof {
  flex-basis: 100%;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.09);
  color: #86efac;
}

.gear-product-card.is-community-proven {
  border-color: rgba(31, 190, 232, 0.42);
  box-shadow: inset 0 0 24px rgba(31, 190, 232, 0.045);
}

.gear-product-visual.is-generic-sensor {
  align-content: center;
  background: radial-gradient(circle, rgba(31, 190, 232, 0.17), #07151b 68%);
}

.gear-product-visual.is-generic-sensor > span {
  color: #6ee7f2;
  font-size: 3rem;
}

.gear-product-visual.is-generic-sensor figcaption {
  justify-self: center;
  color: #9fb3ba;
}

.gear-product-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.gear-product-actions button {
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 11px;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 850;
}

.gear-details-button {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #252b30;
  color: var(--color-text);
}

.gear-partner-button {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #061218;
}

.gear-product-details {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.7rem;
}

.gear-product-details[hidden] {
  display: none;
}

.gear-product-details p,
.gear-detail-column ul {
  margin: 0;
}

.gear-detail-column {
  padding: 10px;
  border-radius: 12px;
}

.gear-detail-column.is-positive {
  background: rgba(74, 222, 128, 0.07);
}

.gear-detail-column.is-negative {
  background: rgba(250, 204, 21, 0.065);
}

.gear-detail-column ul {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding-left: 17px;
  color: #cbd5e1;
}

.gear-empty-category {
  display: none;
  padding: 26px 18px;
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.gear-empty-category.is-visible {
  display: grid;
  gap: 7px;
}

.gear-empty-category > span {
  color: var(--color-primary);
  font-size: 2rem;
}

@media (max-width: 370px) {
  .gear-rating-legend {
    grid-template-columns: 1fr;
  }

  .gear-product-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
  }

  .gear-product-visual {
    width: 62px;
    height: 62px;
  }

  .gear-product-heading {
    display: grid;
  }

  .gear-seal {
    justify-self: start;
  }
}

.gear-hero {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(16px, 4vw, 24px);
}

.gear-hero h2 {
  max-width: 620px;
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.gear-hero > p {
  max-width: 720px;
}

.gear-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.gear-hero-facts span {
  padding: 6px 9px;
  border: 1px solid rgba(31, 190, 232, 0.22);
  border-radius: 999px;
  background: rgba(31, 190, 232, 0.08);
  color: #cceef7;
  font-size: 0.68rem;
  font-weight: 800;
}

.gear-category-navigation a {
  display: grid;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 13px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: #1b2025;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.gear-rating-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  background: #191d21;
  color: var(--color-text-muted);
  font-size: 0.66rem;
}

.gear-rating-legend b {
  margin-right: 4px;
  letter-spacing: -0.12em;
}

.gear-product-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.gear-product-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  padding: 12px;
}

.gear-product-visual {
  display: grid;
  width: 100%;
  height: auto;
  min-height: 154px;
  margin: 0;
  padding: 10px;
  place-items: center;
  border-radius: 14px;
  background: #f5f7f8;
  overflow: hidden;
}

.gear-product-visual img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: contain;
}

.gear-product-visual figcaption {
  justify-self: end;
  color: #59646b;
  font-size: 0.52rem;
  font-weight: 700;
}

.gear-product-heading {
  display: grid;
}

.gear-seal {
  justify-self: start;
  margin-top: 6px;
}

.gear-product-actions {
  grid-template-columns: minmax(0, 1fr);
}

.gear-connection-help {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid rgba(31, 190, 232, 0.3);
  border-radius: 22px;
  background: linear-gradient(145deg, #152229, #11171b 62%);
  scroll-margin-top: 18px;
}

.gear-performance-evidence {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 18px 13px 13px;
  border: 1px solid rgba(31, 190, 232, 0.24);
  border-radius: 14px;
  background: rgba(31, 190, 232, 0.065);
}

.gear-performance-evidence > div {
  min-width: 0;
}

.gear-performance-evidence .context-info-disclosure.is-inline {
  display: block;
  margin: 8px 0 0;
}

.gear-performance-evidence .context-info-disclosure.is-inline > div {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.gear-performance-evidence > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 190, 232, 0.14);
  color: #6ee7f2;
  font-weight: 950;
}

.gear-performance-evidence strong {
  color: #dff9fd;
  font-size: 0.78rem;
}

.gear-performance-evidence p {
  margin: 4px 0 0;
  color: #aebfc5;
  font-size: 0.66rem;
  line-height: 1.42;
}

.gear-connection-help header h2,
.gear-connection-help header p,
.gear-experience-grid h3,
.gear-experience-grid p,
.gear-report-note p {
  margin: 0;
}

.gear-connection-help header h2 {
  margin-top: 4px;
  font-size: clamp(1.18rem, 3vw, 1.55rem);
}

.gear-connection-help header p {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.gear-quick-check {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gear-step;
}

.gear-quick-check li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 11px;
  border: 1px solid rgba(31, 190, 232, 0.17);
  border-radius: 13px;
  background: rgba(31, 190, 232, 0.055);
  counter-increment: gear-step;
}

.gear-quick-check li::before {
  display: grid;
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #061218;
  content: counter(gear-step);
  font-size: 0.68rem;
  font-weight: 950;
}

.gear-quick-check b {
  font-size: 0.72rem;
}

.gear-quick-check span {
  color: #c8d4da;
  font-size: 0.64rem;
  line-height: 1.4;
}

.gear-experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.gear-experience-heading {
  margin: 22px 0 10px;
  font-size: 1.15rem;
}

.gear-experience-grid article {
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 14px;
  background: #1a2024;
}

.gear-report-state {
  color: var(--color-primary);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gear-experience-grid h3 {
  margin-top: 5px;
  font-size: 0.82rem;
}

.gear-experience-grid p {
  margin-top: 7px;
  color: #cbd5e1;
  font-size: 0.68rem;
  line-height: 1.45;
}

.gear-report-note {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(74, 222, 128, 0.24);
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.07);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.gear-report-note:hover,
.gear-report-note:focus-visible {
  border-color: rgba(74, 222, 128, 0.58);
  background: rgba(74, 222, 128, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.gear-report-note strong {
  color: #86efac;
}

.gear-report-note p {
  margin-top: 4px;
  color: #d7e8dc;
  font-size: 0.7rem;
  line-height: 1.45;
}

.gear-report-note-action {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 900;
}

.gear-report-note-action b {
  font-size: 1rem;
}

.bluetooth-help.is-visible.is-standalone-overlay,
.bluetooth-help.is-visible.is-startup-overlay {
  position: fixed;
  z-index: 205100;
  top: 50%;
  left: 50%;
  display: block;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(69, 214, 232, 0.46);
  border-radius: 22px;
  background: linear-gradient(155deg, #12262c, #08171b 72%);
  color: #f2fbfd;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.76), 0 0 0 100vmax rgba(0, 5, 8, 0.72);
}

.bluetooth-help.is-standalone-overlay > section,
.bluetooth-help.is-startup-overlay > section {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 4vw, 24px);
}

.bluetooth-help .help-header {
  gap: 14px;
  align-items: flex-start;
}

.bluetooth-help .help-header h3 {
  margin: 3px 0 0;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
}

.bluetooth-help #closeHelp {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  font-size: 1rem;
}

.bluetooth-help #closeHelp:hover {
  margin: 0;
  padding: 0;
  border-color: rgba(69, 214, 232, 0.58);
  background: rgba(69, 214, 232, 0.1);
}

.bluetooth-help-welcome {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.075);
}

.bluetooth-help-welcome > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.16);
  color: #86efac;
  font-size: 1.25rem;
}

.bluetooth-help-welcome strong {
  color: #9af0b9;
}

.bluetooth-help-welcome p {
  margin: 4px 0 0;
  color: #d7e8dc;
  font-size: 0.76rem;
  line-height: 1.45;
}

.bluetooth-help-step-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 850;
}

.pulse-source-report-disclosure {
  overflow: hidden;
  border: 1px solid rgba(69, 214, 232, 0.24);
  border-radius: 15px;
  background: rgba(2, 17, 22, 0.48);
}

.pulse-source-report-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  color: #effcff;
  cursor: pointer;
  list-style: none;
}

.pulse-source-report-disclosure > summary::-webkit-details-marker { display: none; }
.pulse-source-report-disclosure > summary span { display: grid; gap: 3px; min-width: 0; }
.pulse-source-report-disclosure > summary small { color: #48d9e9; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.pulse-source-report-disclosure > summary strong { font-size: .86rem; line-height: 1.25; }
.pulse-source-report-disclosure > summary i { color: #58dce9; font-size: 1rem; font-style: normal; transition: transform .18s ease; }
.pulse-source-report-disclosure[open] > summary { border-bottom: 1px solid rgba(69, 214, 232, 0.14); }
.pulse-source-report-disclosure[open] > summary i { transform: rotate(180deg); }
.pulse-source-report-disclosure > .pulse-source-failure-form { margin: 0; border: 0; border-radius: 0; background: transparent; }

.bluetooth-help ol {
  display: grid;
  gap: 7px;
  margin: -5px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: bluetooth-help-step;
}

.bluetooth-help ol > li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  counter-increment: bluetooth-help-step;
}

.bluetooth-help ol > li::before {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(69, 214, 232, 0.14);
  color: #6ee7f2;
  content: counter(bluetooth-help-step);
  font-size: 0.68rem;
  font-weight: 950;
}

.pulse-source-failure-form {
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(69, 214, 232, 0.22);
  border-radius: 16px;
  background: rgba(2, 17, 22, 0.56);
}

.pulse-source-failure-heading {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.pulse-source-failure-form > .pulse-source-failure-heading {
  grid-template-columns: 1fr;
}

.pulse-source-failure-heading strong {
  font-size: 0.96rem;
}

.pulse-source-failure-heading p {
  margin: 0;
  color: #b9cbd1;
  font-size: 0.7rem;
  line-height: 1.4;
}

.pulse-source-failure-form input,
.pulse-source-failure-form textarea {
  padding: 11px 12px;
  border-color: rgba(148, 163, 184, 0.32);
  border-radius: 11px;
  background: #071317;
}

.pulse-source-failure-form textarea {
  min-height: 100px;
}

.pulse-source-diagnostics-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border-radius: 10px;
  background: rgba(31, 190, 232, 0.07);
}

.pulse-source-failure-form > .pulse-source-diagnostics-note {
  grid-template-columns: 24px minmax(0, 1fr);
}

.pulse-source-diagnostics-note > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(69, 214, 232, 0.36);
  border-radius: 50%;
  color: #6ee7f2;
  font-size: 0.7rem;
  font-weight: 900;
}

.pulse-source-failure-form #reportPulseSourceFailure {
  min-height: 46px;
  border-color: #34cfe2;
  background: linear-gradient(135deg, #35d3e6, #16acc5);
  color: #041317;
}

@media (max-width: 520px) {
  .bluetooth-help.is-visible.is-standalone-overlay,
  .bluetooth-help.is-visible.is-startup-overlay {
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: calc(100dvh - 10px);
    transform: translateX(-50%);
    border-radius: 22px 22px 0 0;
  }
}

@media (max-width: 760px) {
  .gear-product-list,
  .gear-quick-check {
    grid-template-columns: 1fr;
  }

  .gear-product-card {
    height: auto;
  }

  .gear-experience-grid {
    grid-template-columns: 1fr;
  }
}

.app-bottom-navigation-item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 56px;
  padding: 4px 2px 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  font-family: inherit;
  font-size: clamp(0.54rem, 2.35vw, 0.68rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.app-bottom-navigation-item:hover,
.app-bottom-navigation-item:focus-visible {
  color: var(--color-text, #f8fafc);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.app-bottom-navigation-item:active {
  transform: scale(0.96);
}

.app-bottom-navigation-item.is-active {
  color: var(--color-primary, #19bfe5);
  background: rgba(25, 191, 229, 0.12);
}

body.is-guest-athlete .app-bottom-navigation-item[data-bottom-navigation="challenges"],
body.is-guest-athlete .app-bottom-navigation-item[data-bottom-navigation="calendar"],
body.is-guest-athlete .app-bottom-navigation-item[data-bottom-navigation="gear"] {
  opacity: 0.38;
  filter: grayscale(1);
}

/* Haven Zero ist Bestandteil des dauerhaften Athletenkontos und bleibt im
   Gastmodus vollständig unsichtbar – inklusive laufender Storymissionen. */
body.is-guest-athlete .app-bottom-navigation-item[data-bottom-navigation="base-storyline"],
body.is-guest-athlete .base-storyline-navigation,
body.is-guest-athlete #baseStorylineView,
body.is-guest-athlete .haven-v2-launcher,
body.is-guest-athlete .haven-v2-overlay,
body.is-guest-athlete .mission-training-banner,
body.is-guest-athlete .mission-training-overview,
body.is-guest-athlete .mission-training-overview-reopen,
body.is-guest-athlete .mission-loot-toast {
  display: none !important;
}

.guest-account-notice {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid rgba(26, 185, 224, 0.4);
  border-radius: 14px;
  color: #c9d7dc;
  background: rgba(26, 185, 224, 0.08);
}

.guest-value-card {
  grid-column: 1 / -1;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 5vw, 34px);
  border: 1px solid rgba(31, 191, 232, 0.46);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 10%, rgba(31, 191, 232, 0.2), transparent 32%),
    linear-gradient(145deg, #07151c, #10181d 58%, #171407);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.guest-value-card > span { color: #21c7ec; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; }
.guest-value-card h2 { margin: 0; font-size: clamp(1.65rem, 6vw, 2.7rem); }
.guest-value-card p { max-width: 720px; margin: 0; color: #c8d2d7; line-height: 1.55; }
.guest-value-card div { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-value-card div strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(31, 191, 232, 0.25);
  border-radius: 999px;
  color: #dff9ff;
  font-size: 0.78rem;
}
.guest-value-card div strong::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #28d17c;
  color: #03140b;
  font-size: 0.8em;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 0 9px rgba(40, 209, 124, 0.34);
}
.guest-value-card button { width: fit-content; padding: 12px 18px; border: 0; border-radius: 999px; background: #1fc0e8; color: #031016; font-weight: 900; }

.guest-training-account-prompt {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(43, 211, 238, .38);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 48, 57, .96), rgba(5, 20, 27, .98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.guest-training-account-prompt[hidden] { display: none; }
.guest-training-account-prompt > span { color: #55dff1; font-size: .7rem; font-weight: 900; letter-spacing: .16em; }
.guest-training-account-prompt h3 { margin: 8px 0; color: #fff; font-size: 1.15rem; line-height: 1.2; }
.guest-training-account-prompt p { margin: 0; color: #bdd0d5; line-height: 1.45; }
.guest-training-account-prompt ul { display: grid; gap: 7px; margin: 14px 0 17px; padding: 0; list-style: none; }
.guest-training-account-prompt li { color: #e7f8fa; font-size: .84rem; }
.guest-training-account-prompt li::before { margin-right: 8px; color: #55dff1; content: "✓"; font-weight: 900; }
.guest-training-account-prompt button { width: 100%; padding: 13px 16px; border: 0; border-radius: 999px; background: #35d4e9; color: #031116; font: inherit; font-weight: 900; cursor: pointer; }

.app-bottom-navigation-icon {
  position: relative;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
}

.app-bottom-navigation-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.bottom-navigation-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid #11151a;
  border-radius: 999px;
  background: #f7c843;
  color: #111827;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.bottom-navigation-badge[hidden] {
  display: none;
}

.cockpit-developer-link {
  color: var(--color-text-muted, #94a3b8);
  font: 700 0.65rem/1 monospace;
  opacity: 0.22;
  text-decoration: none;
  transition:
    opacity 160ms ease,
    color 160ms ease;
}

.cockpit-developer-link:hover,
.cockpit-developer-link:focus-visible {
  color: var(--color-primary);
  opacity: 0.85;
}

.training-history-development {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(0, 188, 245, 0.18);
  border-radius: 16px;
  background: rgba(0, 188, 245, 0.055);
}

.training-live-status {
  min-height: 0;
  margin-bottom: 14px;
}

.cockpit-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  width: 100%;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.cockpit-card-heading > div,
.cockpit-card-heading .activity-feed-heading-actions {
  min-width: 0;
}

.cockpit-card-heading .cockpit-card-toggle-icon,
.activity-feed-heading-actions {
  justify-self: end;
}

.embedded-training-history {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
}

.training-media-subsection {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
}

.training-media-subsection > summary,
.embedded-training-history > summary {
  cursor: pointer;
  gap: 10px;
}

.training-media-subsection > summary h2,
.embedded-training-history > summary h2 {
  margin-top: 1px;
  font-size: 1.05rem;
  font-weight: 720;
  line-height: 1.15;
}

.training-media-subsection > summary .cockpit-card-eyebrow,
.embedded-training-history > summary .cockpit-card-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  opacity: 0.82;
}

.training-media-subsection > summary .cockpit-card-toggle-icon,
.embedded-training-history > summary .training-history-toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: rgba(31, 190, 232, 0.07);
}

.tv-training-help {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 191, 232, 0.32);
  border-radius: 14px;
  background: rgba(31, 191, 232, 0.07);
}

.tv-training-help > summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 800;
}

.tv-training-help ol {
  display: grid;
  gap: 10px;
  margin: 14px 0 10px;
  padding-left: 22px;
}

.tv-training-help li,
.tv-training-help p {
  color: var(--color-text-muted);
  line-height: 1.45;
}

.tv-training-help strong {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.tv-training-help p {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

.tv-qr-scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 7000000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: rgba(2, 7, 11, 0.94);
}

.tv-qr-scanner-modal[hidden] {
  display: none;
}

.tv-qr-scanner-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(31, 191, 232, 0.48);
  border-radius: 20px;
  background: var(--color-surface);
  text-align: center;
}

.tv-qr-scanner-card h2 {
  margin: 0 40px 8px;
}

.tv-qr-scanner-card p {
  color: var(--color-text-muted);
  line-height: 1.4;
}

.tv-qr-scanner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--color-text);
}

#tvQrReader {
  min-height: 260px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 14px;
  background: #02070b;
}

#tvQrReader video {
  border-radius: 14px;
}

.tv-qr-file-button {
  display: inline-flex;
  justify-content: center;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(31, 191, 232, 0.55);
  border-radius: 12px;
  background: rgba(31, 191, 232, 0.12);
  color: var(--color-primary);
  font-weight: 800;
  cursor: pointer;
}

.tv-qr-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.embedded-training-history > summary {
  cursor: pointer;
}

.embedded-training-history .training-history-content {
  margin-top: 14px;
}

.app.is-calendar-view > :not(.training-calendar-view) {
  display: none !important;
}

.training-calendar-view {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}

.training-calendar-view[hidden] {
  display: none;
}

.app.is-challenges-view > :not(.challenges-view) { display: none !important; }
.app.is-gear-view {
  display: block;
}

.app.is-gear-view > :not(.gear-view) { display: none !important; }

.gear-partner-notice {
  position: fixed;
  z-index: 180;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 420px);
  box-sizing: border-box;
  padding: 12px 14px;
  transform: translate(-50%, 16px);
  border: 1px solid rgba(31, 190, 232, 0.42);
  border-radius: 14px;
  background: #172127;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  color: #e8f8fc;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.gear-partner-notice.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.challenges-view {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 18px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}
.challenges-view[hidden] { display: none; }
.challenges-view > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.gamification-page-heading{padding:clamp(16px,3vw,28px);border:1px solid rgba(48,218,232,.28);border-radius:18px;background:radial-gradient(circle at 100% 0,rgba(101,72,211,.18),transparent 42%),linear-gradient(135deg,rgba(10,47,55,.92),rgba(5,19,24,.96))}.gamification-page-heading h2{margin:7px 0 8px;font-size:clamp(1.65rem,4vw,2.6rem);line-height:1.05}.gamification-page-heading p{max-width:760px;margin:0;color:#b8d1d4;line-height:1.55}
.gamification-guide{display:grid;gap:14px}.gamification-guide>header h3{margin:5px 0 0;font-size:1.22rem}.gamification-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.gamification-guide-grid article{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:11px;min-width:0;padding:14px;border:1px solid rgba(67,218,229,.2);border-radius:15px;background:rgba(5,26,31,.78)}.gamification-guide-grid article>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(63,222,232,.42);border-radius:13px;color:#07171b;background:linear-gradient(145deg,#64f0df,#27bbdb);font-size:.76rem;font-weight:950;box-shadow:0 0 20px rgba(41,205,222,.12)}.gamification-guide-grid strong{display:block;color:#f4ffff;font-size:.86rem}.gamification-guide-grid p{margin:5px 0 0;color:#9fb9bd;font-size:.72rem;line-height:1.42}.gamification-trophy-button{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid rgba(244,197,80,.36);border-radius:15px;color:#f8ffff;background:linear-gradient(110deg,rgba(244,197,80,.1),rgba(7,27,32,.8));font:inherit;text-align:left;cursor:pointer}.gamification-trophy-button>span:first-child{font-size:1.55rem}.gamification-trophy-button>span:nth-child(2){display:grid;gap:3px}.gamification-trophy-button small{color:#adbec0;font-size:.7rem}.gamification-trophy-button b{color:#f4c550;font-size:1.5rem}.gamification-trophy-button:hover,.gamification-trophy-button:focus-visible{border-color:#f4c550;box-shadow:0 0 25px rgba(244,197,80,.1);outline:none}
.gamification-next-goal{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:17px 18px;border:1px solid rgba(76,231,174,.46);border-radius:17px;background:radial-gradient(circle at 100% 50%,rgba(71,226,169,.16),transparent 36%),rgba(5,28,30,.9);box-shadow:inset 4px 0 #4be3aa}.gamification-next-goal span{color:#55e7b1;font-size:.64rem;font-weight:950;letter-spacing:.13em}.gamification-next-goal h3{margin:5px 0 4px;font-size:1.15rem}.gamification-next-goal p{margin:0;color:#a9c2c4;font-size:.76rem;line-height:1.4}.gamification-next-goal aside{display:grid;justify-items:end;gap:5px;min-width:130px}.gamification-next-goal aside strong{color:#6ef0bd}.gamification-next-goal aside small{color:#f4c550;font-weight:850}
.challenge-accordion {
  overflow: hidden;
  border: 1px solid rgba(31, 190, 232, 0.25);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}
.challenge-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  cursor: pointer;
  list-style: none;
}
.challenge-accordion > summary::-webkit-details-marker { display: none; }
.challenge-accordion > summary > span:first-child {
  display: grid;
  gap: 3px;
}
.challenge-accordion > summary strong { font-size: 1.08rem; }
.challenge-accordion[open] .cockpit-card-toggle-icon {
  transform: rotate(180deg);
}
.challenge-accordion .challenge-list { padding: 0 15px 15px; }
.weekly-league-heading {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.weekly-league-heading h2 { margin-bottom: 0; }
.challenge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.challenge-card,
.league-card {
  padding: 15px;
  border: 1px solid rgba(31, 190, 232, .2);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.challenge-card > span,
.challenge-card-status > span { color: var(--color-primary); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.challenge-card-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 27px; }
.challenge-card-status > strong { display: inline-flex; align-items: center; gap: 4px; color: #65e5a7; font-size: .66rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.challenge-card-status > strong > span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #062419; background: #65e5a7; font-size: .65rem; }
.challenge-card h3 { margin: 5px 0; }
.challenge-card p, .league-card p { color: var(--color-text-muted); font-size: .78rem; }
.challenge-progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.challenge-progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.challenge-card.is-complete { border-color: rgba(52,211,153,.5); }
.challenge-card.is-complete .challenge-progress span { background: #34d399; }
.challenge-card footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: .7rem; }
.challenge-card footer small { color: #f5c442; }
.league-ranking-list { display: grid; gap: 7px; }
.league-ranking-list article {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: var(--color-text);
  text-align: left;
}
.league-ranking-list article.is-own {
  border-color: var(--color-primary);
  background: rgba(31,190,232,.1);
}
.league-ranking-list article.is-profile-link {
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.league-ranking-list article.is-profile-link:hover,
.league-ranking-list article.is-profile-link:focus-visible {
  border-color: rgba(31,190,232,.72);
  background: rgba(31,190,232,.09);
  outline: none;
}
.league-ranking-list article.is-profile-link > strong::after {
  content: "\203A";
  display: inline-block;
  margin-inline-start: .35em;
  color: var(--color-primary);
  font-family: Arial, sans-serif;
  line-height: 1;
}

.league-ai-note {
  margin: 0 0 3px;
  padding: 8px 10px;
  border: 1px dashed rgba(103, 232, 249, 0.34);
  border-radius: 11px;
  background: rgba(103, 232, 249, 0.055);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.league-ranking-list article.is-ai {
  border-style: dashed;
  border-color: rgba(103, 232, 249, 0.24);
}

.league-ai-badge {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(103, 232, 249, 0.12);
  color: #67e8f9;
  font-size: 0.54rem;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}
.league-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.league-card-header h3 { margin: 4px 0 0; }
.league-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: #cd7f32;
  font-size: .72rem;
}
.league-tier-badge.is-silver { color: #b9c4cc; }
.league-tier-badge.is-gold { color: #f5c442; }
.league-tier-badge.is-platinum { color: #55d6d0; }
.league-tier-badge.is-diamond { color: #78a7ff; }
.league-own-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.league-coach-opinion {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 10px 13px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--coach-accent, var(--color-primary)) 48%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--coach-accent, var(--color-primary)) 8%, rgba(0, 0, 0, 0.22));
}

.league-coach-opinion[hidden] {
  display: none;
}

.league-coach-opinion img {
  width: 58px;
  height: 66px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.league-coach-opinion > div {
  display: grid;
  gap: 3px;
}

.league-coach-opinion small {
  color: var(--coach-accent, var(--color-primary));
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.league-coach-opinion strong {
  font-size: 0.82rem;
  line-height: 1.38;
}
.league-coach-opinion p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}
.league-own-summary > div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.league-own-summary small { color: var(--color-text-muted); font-size: .62rem; }
.league-own-summary strong { font-size: .82rem; }
.league-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 12px 0;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.league-ranking-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.league-ranking-tabs button.is-active {
  background: rgba(31,190,232,.16);
  color: var(--color-primary);
}
.league-ranking-model {
  margin: 10px 0 14px;
  color: var(--muted-text, #a9bdc2);
  font-size: .78rem;
  line-height: 1.5;
}
.league-ranking-list article {
  grid-template-columns: 42px minmax(0,1fr) auto auto;
}
.league-ranking-list article > em {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted);
  font-size: .58rem;
  font-style: normal;
}
.league-rank-position {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(31,190,232,.1);
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 900;
}
.league-season-card { padding: 0; overflow: hidden; }
.league-season-summary { display: grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:15px; cursor:pointer; list-style:none; }
.league-season-summary::-webkit-details-marker { display:none; }
.league-season-summary > strong { color:#6fe5ee; white-space:nowrap; }
.league-season-card[open] .cockpit-card-toggle-icon { transform:rotate(180deg); }
.league-season-content { padding:0 15px 15px; }
.league-season-card .league-ranking-list article {
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
}
.league-season-avatar {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(31, 190, 232, .48);
  border-radius: 50%;
  background-color: rgba(31, 190, 232, .1);
  background-position: center;
  background-size: cover;
}
.league-season-avatar-initial,
.league-season-avatar-fallback > span {
  color: var(--color-primary);
  font-size: .82rem;
  font-weight: 900;
}
.league-season-avatar.uses-checkpulse-avatar .league-season-avatar-initial { opacity: 0; }
.league-season-avatar > b {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #172125;
  border-radius: 999px;
  background: var(--color-primary);
  color: #071014;
  font-size: .58rem;
  font-weight: 950;
  line-height: 1;
}
@media (max-width: 430px) {
  .league-own-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-league-accordion .league-ranking-list article {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
  }
  .pulse-league-accordion .league-ranking-list article > .league-season-avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
  .pulse-league-accordion .league-ranking-list article > strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pulse-league-accordion .league-ranking-list article > small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    white-space: normal;
  }
  .pulse-league-accordion .league-ranking-list article > em {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }
  .league-season-card .league-ranking-list article {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }
}
.pulse-source-connection-card { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 10px 0; }
.pulse-source-connection-card span { display: grid; gap: 3px; padding: 9px; border-radius: 11px; background: rgba(255,255,255,.04); }
.pulse-source-connection-card small { color: var(--color-text-muted); font-size: .62rem; }
.pulse-source-connection-card strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; }
.training-detail-rewards { display: grid; gap: 10px; }
.training-detail-rewards-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.training-detail-rewards-grid article { display: grid; justify-items: center; gap: 3px; padding: 12px 7px; border-radius: 13px; background: rgba(31,190,232,.08); text-align: center; }
.training-detail-rewards-grid article > span { font-size: 1.4rem; }
.training-detail-rewards-grid article small { color: var(--color-text-muted); font-size: .62rem; }
.training-detail-rewards-grid article strong { font-size: .78rem; }
.training-detail-rewards-empty { grid-column: 1 / -1; color: var(--color-text-muted); font-size: .75rem; }
.training-summary-rewards { margin: 14px 0; }
.training-echo-signal { position:relative;display:grid;gap:8px;margin:14px 0;padding:18px;overflow:hidden;border:1px solid rgba(238,183,76,.4);border-radius:18px;background:radial-gradient(circle at 100% 0,rgba(238,183,76,.18),transparent 42%),linear-gradient(145deg,rgba(24,20,12,.96),rgba(5,20,23,.96));box-shadow:inset 0 0 28px rgba(238,183,76,.05),0 12px 30px rgba(0,0,0,.3)}
.training-echo-signal[hidden]{display:none}.training-echo-signal>small{color:#f2c65b;font-size:.62rem;font-weight:950;letter-spacing:.14em}.training-echo-signal h3{margin:0;color:#fff8df;font-size:1.12rem;line-height:1.2}.training-echo-signal>p,.training-echo-find p{margin:0;color:#b9cac9;line-height:1.45}.training-echo-signal>button{min-height:46px;margin-top:5px;border:0;border-radius:999px;color:#171104;background:linear-gradient(135deg,#f7d166,#e4a638);font:inherit;font-weight:950;cursor:pointer;box-shadow:0 8px 24px rgba(238,183,76,.2)}
.training-echo-signal.is-rare{border-color:rgba(88,225,211,.48);background:radial-gradient(circle at 100% 0,rgba(88,225,211,.18),transparent 42%),linear-gradient(145deg,rgba(5,31,31,.96),rgba(7,16,22,.96))}.training-echo-signal.is-legendary{border-color:rgba(181,103,255,.55);background:radial-gradient(circle at 100% 0,rgba(181,103,255,.24),transparent 45%),linear-gradient(145deg,rgba(28,12,39,.97),rgba(6,20,24,.97))}.training-echo-find{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:13px}.training-echo-find>span{display:grid;width:52px;height:52px;place-items:center;border:1px solid currentColor;border-radius:16px;color:#f2c65b;background:rgba(255,255,255,.04);font-size:1.55rem}.training-echo-find>div{display:grid;gap:4px}.training-echo-find strong{color:#fff}.training-echo-find em{color:#79dccc;font-size:.65rem;font-style:normal;font-weight:850}
.inline-pulse-zones-link { padding: 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.progression-detail-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.progression-detail-body div { display: grid; gap: 3px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.04); }
.progression-detail-body p { grid-column: 1 / -1; color: var(--color-text-muted); font-size: .72rem; line-height: 1.45; }

.progression-detail-body .pulsecoin-wallet {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(245, 196, 66, .38);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 15%, rgba(245, 196, 66, .2), transparent 54%),
    linear-gradient(155deg, #252012, #111318 70%);
  text-align: center;
}

.progression-detail-body .pulsecoin-wallet-vault {
  position: relative;
  display: block;
  width: min(100%, 220px);
  height: 112px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(180deg, transparent 58%, rgba(65, 40, 7, .78)),
    radial-gradient(ellipse at 50% 100%, rgba(245, 196, 66, .22), transparent 65%);
  box-shadow: inset 0 -2px 0 rgba(245, 196, 66, .28);
}

.wallet-coin {
  position: absolute;
  left: calc(var(--coin-x) * 1%);
  bottom: calc(var(--coin-y) * 1px);
  width: 27px;
  aspect-ratio: 1;
  border: 2px solid #fff1a0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff8c7, #f5c442 42%, #9a6105 78%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), 0 0 10px rgba(245, 196, 66, .24);
  transform: translateX(-50%) rotate(var(--coin-rotation));
  animation: walletCoinDrop 560ms cubic-bezier(.18, .82, .25, 1.18) both;
  animation-delay: calc(var(--coin-index) * 34ms);
}

.wallet-coin::after {
  content: "P";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6a4300;
  font-size: 11px;
  font-weight: 950;
}

.pulsecoin-wallet.is-few .wallet-coin { width: 30px; }
.pulsecoin-wallet.is-many .wallet-coin { width: 24px; }
.pulsecoin-wallet > strong { color: #f5c442; font-size: 1.35rem; }
.pulsecoin-wallet > small { color: var(--color-text-muted); font-size: .68rem; }

@keyframes walletCoinDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -95px) rotate(calc(var(--coin-rotation) - 80deg));
  }
  72% {
    opacity: 1;
    transform: translate(-50%, 4px) rotate(calc(var(--coin-rotation) + 8deg));
  }
}

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

@media (max-width: 420px) {
  .athlete-progression-card > .athlete-progression-tile > small {
    display: none;
  }

  .athlete-progression-tile {
    min-height: 58px;
    padding-inline: 5px;
  }
}
.startup-gate-card { position: relative; }
.startup-gate-close { position: absolute; z-index: 3; top: 10px; right: 10px; }

@media (max-width: 600px) {
  .app > #challengesView {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    box-sizing: border-box;
    justify-self: stretch;
  }
  .challenge-list { grid-template-columns: 1fr; }
  .gamification-guide-grid { grid-template-columns: 1fr; }
  .gamification-next-goal { grid-template-columns: 1fr; }
  .gamification-next-goal aside { justify-items: start; }
  .gamification-page-heading { padding: 17px; }
  .pulse-source-connection-card { grid-template-columns: 1fr; }
  .training-detail-rewards-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .level-progress-panel { width: 100%; box-sizing: border-box; }
}

.training-calendar-header {
  display: grid;
  gap: 16px;
}

.training-calendar-header h2,
.training-calendar-day-panel h3 {
  margin: 2px 0 0;
}

.training-calendar-navigation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.training-calendar-navigation button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(12, 186, 230, 0.2);
  border-radius: 12px;
  background: rgba(12, 186, 230, 0.1);
  color: var(--color-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

.training-calendar-navigation strong {
  text-align: center;
  text-transform: capitalize;
}

.training-calendar-weekdays,
.training-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.training-calendar-weekdays {
  margin-top: 18px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.training-calendar-grid {
  margin-top: 8px;
}

.training-calendar-day {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  padding: 3px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.training-calendar-day.is-outside-month {
  opacity: 0.3;
}

.training-calendar-day.is-today {
  border-color: var(--color-primary);
}

.training-calendar-day.is-selected {
  background: rgba(12, 186, 230, 0.18);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.training-calendar-day.has-training::after {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  content: "";
}

.training-calendar-day.is-streak-week {
  background:
    radial-gradient(circle at 82% 18%, rgba(251, 146, 60, .28), transparent 38%),
    rgba(251, 146, 60, .07);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .24);
}

.training-calendar-day.is-streak-week::before {
  content: "\1F525";
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: .58rem;
}

.training-calendar-day > strong {
  position: absolute;
  top: 2px;
  right: 3px;
  color: var(--color-primary);
  font-size: 0.52rem;
}

.training-calendar-day-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.training-calendar-day-trainings {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.training-calendar-entry {
  overflow: hidden;
  border: 1px solid rgba(83, 216, 226, 0.13);
  border-radius: 14px;
  background: rgba(5, 29, 34, 0.5);
}

.training-calendar-activity {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  width: 100%;
  padding: 10px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.training-calendar-activity > span:nth-child(2) {
  min-width: 0;
}

.training-calendar-activity > span:nth-child(2) > strong {
  overflow-wrap: anywhere;
  line-height: 1.08;
}

.training-calendar-social-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
  padding: 8px 10px 10px 58px;
  border-top: 1px solid rgba(83, 216, 226, 0.09);
}

.training-calendar-social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(83, 216, 226, 0.2) !important;
  border-radius: 9px;
  background: rgba(10, 45, 51, 0.72) !important;
  color: #b9dadd !important;
  font-size: 0.68rem;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.training-calendar-social-button > span {
  color: currentColor;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.training-calendar-social-button:hover:not(:disabled),
.training-calendar-social-button:focus-visible:not(:disabled) {
  border-color: rgba(83, 216, 226, 0.42) !important;
  background: rgba(14, 59, 67, 0.88) !important;
  color: #e2f7f8 !important;
}

.training-calendar-social-button:disabled {
  opacity: 0.5;
}

.training-calendar-delete-button {
  border-color: rgba(222, 111, 124, 0.24) !important;
  background: rgba(64, 26, 32, 0.42) !important;
  color: #d9b8bd !important;
}

.training-calendar-delete-button:hover,
.training-calendar-delete-button:focus-visible {
  border-color: rgba(222, 111, 124, 0.46) !important;
  background: rgba(79, 31, 39, 0.62) !important;
  color: #f2dfe2 !important;
}

@media (max-width: 430px) {
  .training-calendar-activity {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .training-calendar-activity-icon {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .training-calendar-activity > span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .training-calendar-adherence {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    text-align: left;
  }

  .training-calendar-adherence strong {
    margin: 0 8px 0 auto;
  }

  .training-calendar-social-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 7px 10px 9px;
  }

  .training-calendar-social-button {
    min-height: 36px;
    padding: 6px 4px;
    font-size: clamp(0.58rem, 2.7vw, 0.68rem);
  }
}

.training-calendar-activity-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(12, 186, 230, 0.1);
}

.training-calendar-activity strong,
.training-calendar-activity small {
  display: block;
}

.training-calendar-adherence {
  position: relative;
  min-width: 86px;
  padding: 7px 18px 7px 9px;
  border: 1px solid rgba(83, 216, 226, 0.18);
  border-radius: 10px;
  background: rgba(8, 39, 45, 0.62);
  text-align: right;
}

.training-calendar-adherence small {
  margin: 0;
  color: #84aeb2;
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.training-calendar-adherence strong {
  margin-top: 2px;
  color: #67dfe8;
  font-size: 0.82rem;
}

.training-calendar-adherence i {
  position: absolute;
  top: 50%;
  right: 7px;
  color: #70999d;
  font-style: normal;
  transform: translateY(-50%);
}

@media (max-width: 380px) {
  .training-calendar-activity {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }

  .training-calendar-adherence {
    min-width: 72px;
    padding-left: 6px;
  }

  .training-calendar-adherence small {
    font-size: 0.5rem;
  }
}

/* Auf schmalen Displays bleiben Titel, Pulsdaten und Zielzonentreue in
   getrennten Zeilen. Diese Regel steht bewusst nach den Basiswerten. */
@media (max-width: 430px) {
  .training-calendar-adherence {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
  }
}

.training-calendar-activity small,
.training-calendar-empty {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.cockpit-card-heading::-webkit-details-marker {
  display: none;
}
.cockpit-card-heading h2 {
  margin: 0;
}
.cockpit-card-content {
  margin-top: 18px;
}

.training-live-sharing-shortcut{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:11px 13px;border:1px solid rgba(49,211,222,.22);border-radius:13px;color:#dcebed;background:rgba(7,38,44,.46);cursor:pointer}.training-live-sharing-shortcut input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--color-primary)}.training-live-sharing-shortcut span{display:grid;gap:2px}.training-live-sharing-shortcut strong{font-size:.82rem}.training-live-sharing-shortcut small{color:var(--color-text-muted);font-size:.68rem;line-height:1.3}

.cockpit-card-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: rgba(0, 188, 245, 0.12);
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.cockpit-accordion-card:not([open]) .cockpit-card-toggle-icon {
  transform: rotate(-90deg);
}
.training-history-section:not([open]) .training-history-toggle-icon {
  transform: rotate(-90deg);
}

.training-history-development h3,
.training-history-development > p {
  margin: 0;
}

.training-success-history{margin:0 0 16px;padding:clamp(15px,2.5vw,22px);border:1px solid color-mix(in srgb,#5ef0b4 34%,var(--color-border));border-radius:16px;background:linear-gradient(135deg,rgba(8,48,48,.82),rgba(7,24,31,.9))}.training-success-history header small{color:#5ef0b4;font-size:.64rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.training-success-history header h3{margin:4px 0 0;font-size:clamp(1.05rem,2.4vw,1.35rem)}.training-success-history header p{max-width:720px;margin:6px 0 0;color:var(--color-text-muted);font-size:.78rem;line-height:1.45}.training-success-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px;margin-top:15px}.training-success-history-grid article{min-width:0;padding:12px;border:1px solid rgba(94,240,180,.13);border-radius:12px;background:rgba(2,13,18,.55)}.training-success-history-grid strong{display:block;color:#5ef0b4;font-size:clamp(1.05rem,2.6vw,1.4rem);line-height:1}.training-success-history-grid span{display:block;margin-top:6px;color:#c5d7d9;font-size:.67rem;font-weight:720;line-height:1.25}@media(max-width:430px){.training-success-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-success-history-grid article:last-child{grid-column:1/-1}}

.training-history-development > p {
  margin-top: 3px;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.78rem;
}

.training-history-subaccordion {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.13);
}

.training-history-subaccordion + .training-history-subaccordion {
  margin-top: 12px;
}

.training-history-subaccordion > summary {
  display: flex;
  padding: 15px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.training-history-subaccordion > summary::-webkit-details-marker {
  display: none;
}

.training-history-subaccordion > summary span:first-child {
  display: grid;
  gap: 3px;
}

.training-history-subaccordion > summary strong {
  font-size: 1rem;
}

.training-history-subaccordion > summary small {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.72rem;
}

.training-history-subaccordion-icon {
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.training-history-subaccordion:not([open]) .training-history-subaccordion-icon {
  transform: rotate(-90deg);
}

.training-history-subaccordion-content {
  padding: 0 12px 14px;
}

.training-history-development-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.training-history-development-card {
  --development-zone-color: var(--color-primary);
  display: flex;
  min-width: 0;
  min-height: 132px;
  padding: 10px 8px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: inherit;
  font: inherit;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 4px solid var(--development-zone-color);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.training-history-development-card:hover,
.training-history-development-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--development-zone-color);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.training-history-development-code {
  color: var(--development-zone-color);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.training-history-development-card h4 {
  display: -webkit-box;
  min-height: 2.4em;
  margin: 5px 0 0;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.training-history-development-adherence {
  display: block;
  margin-top: auto;
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  color: var(--development-zone-color);
}

.training-history-development-details {
  margin-top: 4px;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.65rem;
}

.zone-development-detail-card {
  --development-zone-color: var(--color-primary);
  max-width: 520px;
  border-top: 5px solid var(--development-zone-color);
}

.zone-development-detail-code {
  display: inline-grid;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--development-zone-color) 18%, transparent);
  color: var(--development-zone-color);
  font-weight: 900;
}

.zone-development-detail-card > p {
  color: var(--color-text-muted, #94a3b8);
}

.zone-development-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0;
}

.zone-development-detail-metrics > div,
.zone-development-detail-trend {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
}

.zone-development-detail-metrics small,
.zone-development-detail-trend small {
  display: block;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.68rem;
}

.zone-development-detail-metrics strong,
.zone-development-detail-trend strong {
  display: block;
  margin-top: 5px;
  color: var(--development-zone-color);
  font-size: 1.15rem;
}

.zone-development-detail-trend p {
  margin-bottom: 0;
  color: var(--color-text-muted, #94a3b8);
}

@media (max-width: 420px) {
  .feed-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .feed-comment-form .buttons {
    grid-column: 1;
    width: 100%;
  }

  .training-history-development-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .training-history-development-card { min-height:142px; padding:11px 10px; }
  .training-history-development-card h4 { display:block; min-height:0; overflow:visible; font-size:.76rem; line-height:1.25; -webkit-line-clamp:unset; }
  .zone-development-detail-metrics { grid-template-columns: 1fr; }
}
.league-season-tier{display:inline-flex!important;align-items:center;gap:5px}.league-season-tier::before{content:"LIGA";color:#8fa4a7;font-size:.47rem;font-style:normal;font-weight:900;letter-spacing:.08em}

/* Reduzierte TV-Kachel in den Einstellungen; der Trainingsfullscreen bleibt intakt. */
.media-cockpit-section.is-settings-media-player > .cockpit-card-heading {
  display: none !important;
}
.media-cockpit-section.is-settings-media-player > .cockpit-card-content {
  display: block !important;
}
.media-cockpit-section.is-settings-media-player
  .player-shell:not(:fullscreen):not(.is-simulated-fullscreen)
  > #heartRateZoneSelector {
  display: none !important;
}

.training-history-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.training-history-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--color-primary);
}

.training-history-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 188, 245, 0.35);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.training-history-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.training-history-card-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  margin-left: auto;

  min-width: 0;
  flex-shrink: 1;
}

.training-history-social-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.training-history-share-menu {
  grid-column: 1 / -1;
  border: 1px solid rgba(83, 216, 226, 0.24);
  border-radius: 10px;
  background: rgba(9, 42, 48, 0.82);
  overflow: hidden;
}

.training-history-share-menu > summary {
  display: flex;
  min-height: 44px;
  padding: 9px 14px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #c4e1e3;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.training-history-share-menu > summary::-webkit-details-marker { display: none; }
.training-history-share-menu > summary span { transition: transform 160ms ease; }
.training-history-share-menu[open] > summary span { transform: rotate(180deg); }

.training-history-share-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 8px 8px;
}

.training-history-share-options button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 7px;
  line-height: 1.15;
}

@media (max-width: 560px) {
  .training-history-share-options { grid-template-columns: 1fr; }
}

.training-history-feed-share-button {
  border: 1px solid rgba(83, 216, 226, 0.24) !important;
  background: rgba(9, 42, 48, 0.82) !important;
  color: #c4e1e3 !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

.training-history-feed-share-button:hover:not(:disabled),
.training-history-feed-share-button:focus-visible:not(:disabled) {
  border-color: rgba(83, 216, 226, 0.46) !important;
  background: rgba(13, 58, 66, 0.94) !important;
  color: #effcfc !important;
}

.training-history-feed-share-button:disabled {
  color: #65e5a7 !important;
  opacity: 0.82;
}

/* Soziale Trainingsaktionen bleiben bewusst ruhig und im dunklen checkPulse-Look. */
.training-challenge-button,
#shareTrainingButton,
.training-history-share-button,
.training-history-poster-button {
  border: 1px solid rgba(83, 216, 226, 0.24) !important;
  background: rgba(9, 42, 48, 0.82) !important;
  color: #c4e1e3 !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

.training-challenge-button:hover:not(:disabled),
.training-challenge-button:focus-visible:not(:disabled),
#shareTrainingButton:hover:not(:disabled),
#shareTrainingButton:focus-visible:not(:disabled),
.training-history-share-button:hover:not(:disabled),
.training-history-share-button:focus-visible:not(:disabled),
.training-history-poster-button:hover:not(:disabled),
.training-history-poster-button:focus-visible:not(:disabled) {
  border-color: rgba(83, 216, 226, 0.46) !important;
  background: rgba(13, 58, 66, 0.94) !important;
  color: #effcfc !important;
}

.training-history-challenge-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  color: #f2c94c;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Verhindert, dass vom ausgeblendeten Challenge-Status nur der gelbe Punkt sichtbar bleibt. */
.training-history-challenge-status[hidden] {
  display: none !important;
}

.training-history-challenge-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.training-history-challenge-status[data-tone="accepted"] { color: #59e89a; }
.training-history-challenge-status[data-tone="declined"] { color: #ff6f7d; }
.training-history-challenge-status[data-tone="seen"] { color: #67dff4; }

.training-history-social-actions:has(.training-history-share-button:only-child) {
  grid-template-columns: 1fr;
}

.training-summary-actions > .training-history-challenge-status {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 4px;
}

.training-history-social-actions button {
  width: 100%;
  min-height: 44px;
}
.training-history-social-actions > .training-history-challenge-button { grid-column: 1 / -1; }
.training-history-export-button { grid-column: 1 / -1; }

.training-history-social-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

.training-history-date-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.training-history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 1.2rem;
}

.training-history-date {
  display: block;
  font-size: 1rem;
}

.training-history-time {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.58);
}

.training-history-duration {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.training-history-duration small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
}

.training-history-duration strong {
  margin-top: 3px;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.training-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
}

.training-history-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.18);
}

.training-history-metric-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
}

.training-history-metric div {
  min-width: 0;
}

.training-history-metric small {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

.training-history-metric strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-history-card[data-zone-id="zone0"]::before {
  background: var(--zone-0);
}

.training-history-card[data-zone-id="zone1"]::before {
  background: var(--zone-1);
}

.training-history-card[data-zone-id="zone2"]::before {
  background: var(--zone-2);
}

.training-history-card[data-zone-id="zone3"]::before {
  background: var(--zone-3);
}

.training-history-card[data-zone-id="zone4"]::before {
  background: var(--zone-4);
}

.training-history-card[data-zone-id="zone5"]::before {
  background: var(--zone-5);
}

@media (max-width: 700px) {
  .training-history-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-history-zone-metric {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .training-history-card {
    padding: 15px;
  }

  .training-history-card-header {
    align-items: flex-start;
  }

  .training-history-icon {
    width: 38px;
    height: 38px;
  }

  .training-history-duration strong {
    font-size: 1.05rem;
  }

  .training-history-metric {
    padding: 10px;
  }
}

.modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.78);

  z-index: 800;

  padding: var(--space-md);
}

.modal.hidden {
  display: none;
}

.live-training-consent-modal{z-index:250000;background:radial-gradient(circle at 50% 42%,rgba(15,164,178,.2),transparent 44%),rgba(1,8,11,.88);backdrop-filter:blur(10px)}.live-training-consent-card{width:min(460px,calc(100vw - 28px));gap:13px;padding:28px;border-color:rgba(55,220,227,.46);border-radius:28px;background:linear-gradient(155deg,rgba(10,39,46,.99),rgba(5,18,23,.99));box-shadow:0 28px 80px rgba(0,0,0,.65),0 0 45px rgba(23,190,203,.12);text-align:center;overflow:hidden}.live-training-consent-visual{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:0 auto 2px}.live-training-consent-heart{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(91,236,237,.75);border-radius:50%;color:#07171b;background:linear-gradient(145deg,#58f2df,#37bfe7);font-size:1.65rem;box-shadow:0 0 30px rgba(68,226,222,.38)}.live-training-consent-visual i{position:absolute;inset:8px;border:1px solid rgba(73,226,228,.34);border-radius:50%;animation:live-consent-signal 2.4s ease-out infinite}.live-training-consent-visual i:nth-of-type(2){animation-delay:.8s}.live-training-consent-visual i:nth-of-type(3){animation-delay:1.6s}.live-training-consent-card .cockpit-card-eyebrow{color:#63e9ec;font-size:.67rem;letter-spacing:.16em}.live-training-consent-card h2{margin:0;color:#f5ffff;font-size:clamp(1.45rem,5vw,2rem);line-height:1.12}.live-training-consent-card>p{margin:0;color:#b8cdd1;font-size:.92rem;line-height:1.55}.live-training-consent-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px}.live-training-consent-benefits span{display:grid;place-items:center;align-content:center;gap:5px;min-height:70px;padding:8px 5px;border:1px solid rgba(73,199,205,.2);border-radius:13px;color:#cbe0e2;background:rgba(15,61,68,.34);font-size:.68rem;line-height:1.25}.live-training-consent-benefits b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#062326;background:#52dfcf}.live-training-consent-card>.live-training-consent-note{display:flex;align-items:flex-start;gap:8px;padding:11px 12px;border-radius:12px;color:#91b4b8;background:rgba(2,14,18,.56);font-size:.72rem;text-align:left}.live-training-consent-note span{color:#58e3dc}.live-training-consent-actions{display:grid;grid-template-columns:.75fr 1.55fr;gap:9px;margin-top:4px}.live-training-consent-actions button{min-height:48px;padding:11px;border:1px solid rgba(90,218,224,.35);border-radius:14px;color:#c3dadd;background:rgba(19,53,60,.65);font-weight:850;cursor:pointer}.live-training-consent-actions button:last-child{border-color:#56e8df;color:#032023;background:linear-gradient(135deg,#62ead7,#4cc7ed);box-shadow:0 10px 28px rgba(50,205,208,.2)}body.is-live-training-consent-open{overflow:hidden}@keyframes live-consent-signal{0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.45);opacity:0}}@media(max-width:520px){.live-training-consent-card{padding:23px 18px}.live-training-consent-benefits{grid-template-columns:1fr}.live-training-consent-benefits span{grid-template-columns:auto 1fr;justify-items:start;min-height:0;padding:9px 12px;text-align:left}.live-training-consent-actions{grid-template-columns:1fr}.live-training-consent-actions button:last-child{grid-row:1}.live-training-consent-visual{width:76px;height:76px}.live-training-consent-heart{width:52px;height:52px}}@media(prefers-reduced-motion:reduce){.live-training-consent-visual i{animation:none}}

#emailPasswordAuthModal {
  z-index: 200600;
}

#friendProfileModal {
  z-index: 200000;
}

.modal-box {
  width: min(420px, 100%);

  display: flex;
  flex-direction: column;

  gap: var(--space-md);

  padding: var(--space-lg);

  border: 1px solid var(--color-border);
  border-radius: 20px;

  background: var(--color-surface);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

  position: relative;
  z-index: 1000000;

  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal-box select.control-element {
  min-height: 42px;
  padding: 12px 14px;
  font-size: 1rem;
}

.modal-box.live-training-consent-card{width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 24px);gap:13px;padding:28px;border-color:rgba(55,220,227,.46);border-radius:28px;background:linear-gradient(155deg,rgba(10,39,46,.99),rgba(5,18,23,.99));box-shadow:0 28px 80px rgba(0,0,0,.65),0 0 45px rgba(23,190,203,.12);text-align:center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.modal-box.live-training-consent-card h2{margin:0;color:#f5ffff;font-size:clamp(1.45rem,5vw,2rem);line-height:1.12}@media(max-width:520px){.modal-box.live-training-consent-card{padding:23px 18px}}@media(max-height:620px){.live-training-consent-modal{align-items:flex-start;padding:12px}.modal-box.live-training-consent-card{gap:9px;padding:18px 20px}.live-training-consent-visual{width:58px;height:58px}.live-training-consent-heart{width:44px;height:44px;font-size:1.25rem}.live-training-consent-card h2{font-size:1.45rem}.live-training-consent-card>p{font-size:.82rem;line-height:1.4}.live-training-consent-benefits{margin-top:0}.live-training-consent-benefits span{min-height:54px}.live-training-consent-actions button{min-height:44px}}

.health-data-consent-modal{z-index:260000;background:rgba(1,8,11,.92);backdrop-filter:blur(12px)}
.modal-box.health-data-consent-card{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;gap:14px;padding:26px;border-color:rgba(55,220,227,.46);border-radius:26px;background:linear-gradient(155deg,#0a2930,#051217);box-shadow:0 28px 90px rgba(0,0,0,.72)}
.health-data-consent-card h2{margin:0;text-align:left}.health-data-consent-card>p{margin:0;color:#bdd0d4;line-height:1.5}.health-data-consent-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.health-data-consent-summary article{display:grid;gap:5px;padding:12px;border:1px solid rgba(74,204,211,.22);border-radius:14px;background:rgba(11,47,54,.52)}.health-data-consent-summary b{color:#62e6e8;font-size:.78rem}.health-data-consent-summary span{color:#bfd0d3;font-size:.72rem;line-height:1.4}.health-data-consent-choice{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:11px;padding:13px;border:1px solid rgba(84,196,202,.28);border-radius:14px;background:rgba(5,22,27,.68);cursor:pointer}.health-data-consent-choice input{width:20px;height:20px;min-height:0;margin:1px 0 0;accent-color:#55dfe2}.health-data-consent-choice span{display:grid;gap:4px}.health-data-consent-choice b{color:#edfafa;font-size:.86rem}.health-data-consent-choice small{color:#9db8bd;line-height:1.4}.health-data-consent-required{border-color:rgba(86,230,225,.48)}.health-data-consent-links{display:flex;flex-wrap:wrap;gap:10px}.health-data-consent-links button,.health-data-consent-links a{padding:0;border:0;color:#65e5ea;background:transparent;font:inherit;font-size:.75rem;text-decoration:underline;cursor:pointer}.health-data-consent-status{min-height:1.2em;color:#ffca69!important;font-size:.78rem}.health-data-consent-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:9px}.health-data-consent-actions button{min-height:48px;padding:11px;border:1px solid rgba(90,218,224,.35);border-radius:14px;color:#c3dadd;background:rgba(19,53,60,.65);font-weight:850;cursor:pointer}.health-data-consent-actions button:last-child{border-color:#56e8df;color:#032023;background:linear-gradient(135deg,#62ead7,#4cc7ed)}.health-data-consent-actions button:disabled{opacity:.38;cursor:not-allowed}body.is-health-data-consent-open{overflow:hidden}@media(max-width:620px){.modal-box.health-data-consent-card{padding:20px 16px}.health-data-consent-summary{grid-template-columns:1fr}.health-data-consent-actions{grid-template-columns:1fr}.health-data-consent-actions button:last-child{grid-row:1}}

.privacy-consent-overview p{margin:4px 0;color:#bad0d3}.privacy-consent-overview small{display:block;color:#8eacb1;line-height:1.45}.privacy-consent-overview>button{margin-top:12px;padding:10px 14px;border:1px solid rgba(75,222,225,.45);border-radius:12px;color:#5ce3e8;background:rgba(10,49,56,.68);font-weight:800;cursor:pointer}

.modal-box h2 {
  font-size: 1.4rem;
  text-align: center;

  color: var(--color-text);
}

.modal-box input {
  width: 100%;
  min-height: 42px;

  padding: 14px;

  border: 1px solid var(--color-border);
  border-radius: 12px;

  background: var(--color-surface-dark);
  color: var(--color-text);

  font-size: 1rem;
}

#trainingModeSelect {
  width: 100%;
  min-height: 52px;

  padding: 0 16px;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: var(--color-surface-dark);
  color: var(--color-text);

  font-size: 1rem;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  display: flex;
  align-items: center;
}

#trainingModeSelect:hover {
  border-color: var(--color-primary);
  background: #151515;
}

#trainingModeSelect:focus {
  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px var(--color-primary);
}

#trainingSummaryModal {
  z-index: 3000000;
}

#trainingSummaryModal .training-summary-card {
  width: min(720px, 100%);
  padding: 26px;
  border: 1px solid rgba(33, 212, 244, 0.36);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(33, 212, 244, 0.16), transparent 30%),
    radial-gradient(circle at 5% 48%, rgba(48, 230, 135, 0.08), transparent 36%),
    linear-gradient(155deg, #071b22 0%, #091319 52%, #111116 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.training-summary-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 44px 20px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(33, 212, 244, 0.2);
}

.training-summary-brand-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(33, 212, 244, 0.55);
  border-radius: 13px;
  background: rgba(33, 212, 244, 0.1);
  overflow: hidden;
  box-shadow: 0 0 24px rgba(33, 212, 244, 0.17);
}

.training-summary-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.training-summary-brand > span:last-child { display: grid; gap: 1px; }
.training-summary-brand strong { font-size: 1.15rem; letter-spacing: -0.03em; }
.training-summary-brand small { color: #21d4f4; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; }

#trainingSummaryModal .training-summary-card > h2 {
  margin-bottom: 4px;
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  letter-spacing: -0.04em;
}

#trainingSummaryModal .training-summary-card > h2 + p { margin: 0; color: #8edceb; }

#trainingSummaryModal .training-summary-zone-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.2);
}

#trainingSummaryModal .zone-pie-chart {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border: 9px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  background-clip: padding-box !important;
  contain: paint;
  backdrop-filter: none;
  box-shadow: 0 0 35px rgba(33, 212, 244, 0.13), inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.summary-zone-text-list { display: grid; gap: 6px; }
.summary-zone-row {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  isolation: isolate;
}
.summary-zone-fill {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--zone-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 10%, transparent));
  box-shadow: inset -1px 0 0 color-mix(in srgb, currentColor 38%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.2, 0.82, 0.2, 1) var(--zone-delay, 0ms);
}
.summary-zone-row.is-animated .summary-zone-fill { transform: scaleX(1); }
.summary-zone-dot { position: relative; z-index: 1; width: 8px; height: 24px; border-radius: 999px; background: currentColor; }
.summary-zone-row > span:nth-child(3) { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.summary-zone-row small { color: currentColor; font-size: 0.63rem; font-weight: 900; }
.summary-zone-row strong { overflow: hidden; color: var(--color-text); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.summary-zone-row b { position: relative; z-index: 1; color: var(--color-text); font-size: 0.78rem; }
.summary-zone-row.zone-scale-z0 { color: #aeb7c4; }
.summary-zone-row.zone-scale-z1 { color: #3684ff; }
.summary-zone-row.zone-scale-z2 { color: #39d870; }
.summary-zone-row.zone-scale-z3 { color: #f3c221; }
.summary-zone-row.zone-scale-z4 { color: #ff7b22; }
.summary-zone-row.zone-scale-z5 { color: #fa404c; }

@media (prefers-reduced-motion: reduce) {
  .summary-zone-fill { transition: none; }
}

#trainingSummaryModal .training-summary-duration,
#trainingSummaryModal .training-summary-rewards,
#trainingSummaryModal .summary-heart-rate-wrapper {
  border-color: rgba(33, 212, 244, 0.16);
  background: rgba(7, 30, 37, 0.52);
}

.training-save-auth-choice-modal {
  z-index: 3000010;
}

.training-save-auth-choice-box {
  width: min(420px, calc(100vw - 28px));
  padding: 24px;
  border: 1px solid rgba(33, 212, 244, 0.42);
  background: linear-gradient(155deg, #10252a, #111616 62%, #17160f);
}

.training-save-auth-choice-box h2 {
  margin: 8px 34px 8px 0;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.12;
}

.training-save-auth-choice-box > p,
.training-save-auth-choice-box > small {
  font-size: 0.95rem;
  line-height: 1.45;
}

.training-save-auth-choice-box > small {
  display: block;
  margin-top: 14px;
  color: var(--color-text-muted);
}

.training-save-auth-choice-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.training-save-auth-choice-actions button {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
  font-weight: 850;
}

#deleteTrainingConfirmModal {
  z-index: 3000002;
}

.training-summary-coach {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  align-items: end;
  min-height: 190px;
  margin: 10px 0 14px;
  overflow: hidden;
  border: 1px solid var(--coach-accent, rgba(31, 190, 232, 0.35));
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 76%, rgba(31, 190, 232, 0.2), transparent 42%),
    rgba(4, 12, 18, 0.72);
}

.training-summary-coach img {
  align-self: stretch;
  width: 100%;
  height: 210px;
  object-fit: contain;
  object-position: center bottom;
}

.training-summary-coach > div {
  display: grid;
  gap: 5px;
  align-self: center;
  padding: 18px 18px 18px 4px;
}

.training-summary-coach small {
  color: var(--coach-accent, var(--color-primary));
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.training-summary-coach strong {
  font-size: 1.08rem;
  line-height: 1.25;
}

.training-summary-coach p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.training-summary-coach p > span { display:block; }
.training-summary-success-proof b { color:#f2fbfc; }
.training-summary-success-meaning { margin-top:6px; color:var(--color-text-muted); }
.training-summary-success-next { margin-top:10px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--coach-accent,var(--color-primary)) 35%,transparent); border-radius:10px; background:color-mix(in srgb,var(--coach-accent,var(--color-primary)) 9%,transparent); }
.training-summary-success-next b { color:var(--coach-accent,var(--color-primary)); }

.training-success-target { display:grid; gap:6px; margin:16px 0; padding:14px 15px; border:1px solid rgba(78,230,190,.32); border-radius:14px; background:radial-gradient(circle at 100% 0,rgba(72,225,187,.13),transparent 42%),rgba(3,20,23,.72); }
.training-success-target small { color:#6fe9c3; font-size:.64rem; font-weight:900; letter-spacing:.12em; }
.training-success-target strong { color:#f3ffff; font-size:1.05rem; }
.training-success-target p { margin:0; color:#e4f4f3; font-weight:750; line-height:1.42; }
.training-success-target span { color:#9fbabb; font-size:.78rem; line-height:1.4; }
.training-day-form { display:grid; gap:8px; margin:16px 0 0; padding:0; border:0; }
.training-day-form legend { margin-bottom:8px; color:#eaf9fa; font-weight:850; }
.training-day-form label { display:block; }
.training-day-form input { position:absolute; opacity:0; }
.training-day-form label > span { display:grid; gap:3px; padding:11px 13px; border:1px solid rgba(90,210,220,.18); border-radius:12px; background:rgba(2,13,16,.55); cursor:pointer; }
.training-day-form label b { color:#e9f6f7; }
.training-day-form label small { color:#91aaad; line-height:1.35; }
.training-day-form input:checked + span { border-color:#63e5ca; background:rgba(60,213,176,.1); box-shadow:inset 3px 0 #63e5ca; }
.training-day-form input:focus-visible + span { outline:2px solid #63e5ee; outline-offset:2px; }

.training-summary-coach.is-exceptional-performance {
  border-color: #f5c451;
  background:
    radial-gradient(circle at 18% 76%, rgba(245, 196, 81, 0.3), transparent 45%),
    linear-gradient(135deg, rgba(39, 30, 7, 0.96), rgba(4, 12, 18, 0.92));
  box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.3), 0 0 28px rgba(245, 196, 81, 0.2);
}

.training-summary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.training-summary-actions button {
  width: 100%;
}

.training-summary-actions #challengeFriendButton {
  grid-column: 1 / -1;
}

.training-summary-actions .save-first-training-button {
  border: 1px solid rgba(72, 224, 139, 0.72);
  background: linear-gradient(135deg, #159b52, #2bd878);
  color: #03150c;
  font-weight: 900;
  box-shadow: 0 9px 25px rgba(35, 205, 111, 0.22);
}

.training-summary-actions .save-first-training-button:hover,
.training-summary-actions .save-first-training-button:focus-visible {
  background: linear-gradient(135deg, #1caf60, #49e590);
  box-shadow: 0 11px 30px rgba(35, 205, 111, 0.3);
}

@media (max-width: 520px) {
  #trainingSummaryModal .training-summary-card { padding: 18px 14px; border-radius: 20px; }
  #trainingSummaryModal .training-summary-zone-layout { grid-template-columns: 1fr; padding: 13px; }
  #trainingSummaryModal .zone-pie-chart { width: 105px; height: 105px; }
  .summary-zone-row > span:nth-child(3) { display: grid; gap: 0; }
  .summary-zone-row strong { font-size: 0.74rem; }

  #trainingSummaryModal .modal-card > p,
  #trainingSummaryModal .training-summary-date,
  #trainingSummaryModal .summary-zone-text-list,
  #trainingSummaryModal .training-detail-rewards-empty,
  #trainingSummaryModal .training-summary-duration small,
  #trainingSummaryModal .training-summary-rewards .cockpit-card-eyebrow {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  #trainingSummaryModal .training-summary-coach small {
    font-size: 0.82rem;
  }

  #trainingSummaryModal .training-summary-coach strong {
    font-size: 1rem;
  }

  #trainingSummaryModal .training-summary-coach p {
    font-size: 0.94rem;
  }

  .training-summary-coach {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 160px;
  }

  .training-summary-coach img {
    height: 175px;
  }

  .training-summary-coach > div {
    padding: 14px 12px 14px 0;
  }

  .training-summary-actions button {
    padding-inline: 10px;
    min-height: 48px;
    font-size: 0.9rem;
  }

  .training-history-social-actions {
    grid-template-columns: 1fr;
  }
}

.training-summary-duration {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 16px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.training-summary-duration small {
  color: var(--color-text-muted);
}
.training-summary-duration strong {
  color: var(--color-primary);
  font-size: 1.35rem;
}

#chooseOwnVideoBtn {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(33, 212, 244, 0.42);
  background: rgba(4, 19, 24, 0.8);
  color: #eafcff;
  font-weight: 850;
}

#videoSearchInput.is-own-video-highlighted {
  border-color: #38dded;
  box-shadow: 0 0 0 3px rgba(56, 221, 237, 0.2), 0 0 28px rgba(56, 221, 237, 0.32);
  animation: own-video-input-pulse 0.55s ease-in-out infinite alternate;
}

#videoSearchInput.is-own-video-ready {
  border-color: #4be59a;
  box-shadow: 0 0 0 3px rgba(75, 229, 154, 0.18), 0 0 24px rgba(75, 229, 154, 0.25);
}

@keyframes own-video-input-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  #videoSearchInput.is-own-video-highlighted { animation: none; }
}

#trainWithoutVideoBtn {
  margin-top: 10px;
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 15px 18px 15px 66px;
  text-align: left;
  border: 1px solid rgba(33, 212, 244, 0.42);
  background: linear-gradient(125deg, rgba(5, 32, 41, 0.98), rgba(14, 20, 34, 0.98));
  color: #f7fcff;
  box-shadow: inset 0 0 25px rgba(33, 212, 244, 0.05);
}

#trainWithoutVideoBtn::before {
  content: "♡";
  position: absolute;
  left: 20px;
  top: 50%;
  translate: 0 -50%;
  color: #21d4f4;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(33, 212, 244, 0.75);
}

#trainWithoutVideoBtn strong { font-size: 1rem; }
#trainWithoutVideoBtn span { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.35; }

/* Trainingssetup kompakt halten, damit HFmax-Auswahl und Startbutton sofort sichtbar bleiben. */
#trainingSetupModal .modal-box {
  width:min(440px,calc(100vw - 24px));
  max-height:min(82dvh,620px);
  padding:22px 24px;
  gap:10px;
  overflow-y:auto;
  box-sizing:border-box;
}
#trainingSetupModal .modal-box > h2 {margin:0 0 6px;font-size:1.35rem;line-height:1.12}
#trainingSetupModal .training-success-target {
  gap:3px;
  margin:4px 0 8px;
  padding:10px 12px;
}
#trainingSetupModal .training-success-target strong {font-size:.92rem}
#trainingSetupModal .training-success-target p {font-size:.82rem;line-height:1.3}
#trainingSetupModal .training-success-target span {font-size:.68rem;line-height:1.3}
#trainingSetupModal .modal-box > h3 {margin:4px 0 0;font-size:.95rem}
#trainingSetupModal .modal-option-row {margin:0}
#trainingSetupModal #startCockpitBtn {margin-top:4px}
#trainingSetupModal .modal-box {scrollbar-gutter:stable}

.last-training-cockpit-card {
  border-color: rgba(0, 188, 245, 0.28);
  background: linear-gradient(
    145deg,
    rgba(0, 188, 245, 0.1),
    rgba(255, 255, 255, 0.025)
  );
}

.last-training-cockpit-card > summary { list-style:none; }
.last-training-cockpit-card > summary::-webkit-details-marker { display:none; }
.last-training-cockpit-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; }
.last-training-cockpit-summary > div { display:flex; min-width:0; flex-direction:column; gap:5px; }
.last-training-cockpit-summary-effect { margin-top:4px; color:#9db5b3!important; font-size:.72rem!important; font-weight:600!important; line-height:1.35; letter-spacing:0!important; text-transform:none!important; }
.last-training-cockpit-toggle { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:1px solid rgba(83,232,190,.48); border-radius:50%; color:#65ebc5; font-size:1.35rem; line-height:1; transition:transform .2s ease; }
.last-training-cockpit-card[open] .last-training-cockpit-toggle { transform:rotate(45deg); }
.last-training-cockpit-content { padding-top:14px; }

.last-training-cockpit-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.last-training-cockpit-summary > div small,
.last-training-cockpit-metrics small {
  color: var(--color-text-muted);
}

.last-training-cockpit-summary > div strong {
  font-size: 1.1rem;
}

.cockpit-trophy-preview-card {
  overflow: hidden;
  border-color: rgba(245, 196, 66, 0.28);
  background: linear-gradient(
    145deg,
    rgba(245, 196, 66, 0.09),
    rgba(255, 255, 255, 0.025)
  );
}

.cockpit-trophy-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cockpit-trophy-preview-heading h2 {
  margin: 0;
}

.cockpit-trophy-preview-heading > strong {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(245, 196, 66, 0.13);
  color: #f5c442;
  font-size: 0.76rem;
}

.cockpit-trophy-preview {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 2px 2px 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.cockpit-trophy-chip {
  display: grid;
  flex: 0 0 104px;
  min-height: 104px;
  box-sizing: border-box;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid rgba(245, 196, 66, 0.2);
  border-radius: 16px;
  background: rgba(12, 16, 22, 0.62);
  text-align: center;
  scroll-snap-align: start;
}

.cockpit-trophy-chip > span {
  font-size: 2rem;
  filter: drop-shadow(0 4px 8px rgba(245, 196, 66, 0.2));
}

.cockpit-trophy-chip > strong {
  font-size: 0.72rem;
  line-height: 1.2;
}

.cockpit-trophy-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.last-training-cockpit-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.last-training-cockpit-metrics span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.last-training-cockpit-metrics small {
  font-size: 0.68rem;
}
.last-training-cockpit-metrics strong {
  font-size: 0.9rem;
}

.last-training-success-story { display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(0,188,245,.17); }
.last-training-success-story p { display:grid; gap:3px; margin:0; }
.last-training-success-story small { color:#6fdff1; font-size:.6rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.last-training-success-story strong,.last-training-success-story span { color:#eaf8fa; font-size:.76rem; line-height:1.35; }
.last-training-success-story span { color:#b8cbce; }
.last-training-next-step { padding:9px 10px; border:1px solid rgba(83,232,190,.22); border-radius:10px; background:rgba(55,210,168,.07); }
.last-training-next-step strong { color:#78edc7; }

#genderSelect option {
  background: var(--color-surface);
  color: var(--color-text);
}

.hfmax-estimate {
  display: block;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(31, 190, 232, 0.08);
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

#pulseZoneEstimationFields {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

#pulseZoneEstimationFields[hidden] {
  display: none;
}

.zone-editor-head,
.zone-editor-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.25fr) repeat(2, minmax(72px, 0.75fr));
  gap: 8px;
  align-items: center;
}

.zone-editor-head {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.66rem;
}

.zone-editor-row > span {
  display: grid;
}

.zone-editor-row > span small {
  color: var(--color-text-muted);
  font-size: 0.62rem;
}

.hfmax-source-note {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.hfmax-source-note a {
  color: var(--color-primary);
}

select option {
  background: var(--color-surface);
  color: var(--color-text);
}

#selectedVideoLabel {
  text-align: center;

  color: var(--color-text-muted);

  font-size: 0.95rem;
}

#selectedVideoLabel.green-text {
  color: #4caf50;
}

/* Videoauswahl als klare Medienkarte statt technischer Linkmaske. */
#videoSetupModal .video-setup-card {
  display: grid;
  gap: 12px;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(47, 211, 232, 0.28);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 0, rgba(31, 190, 232, 0.12), transparent 32%),
    linear-gradient(155deg, #171c20, #101418 72%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7);
}

.video-setup-eyebrow {
  color: #55ddec;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

#videoSetupModal .video-setup-card > h2 {
  margin: -5px 38px 2px 0;
  font-size: clamp(1.55rem, 6vw, 2rem) !important;
  line-height: 1.08 !important;
}

#videoSetupModal #selectedVideoLabel {
  justify-self: start;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgba(78, 217, 161, 0.28);
  border-radius: 999px;
  background: rgba(28, 104, 75, 0.14);
  color: #a9ddc5;
  font-size: 0.75rem;
  font-weight: 750;
  text-align: left;
}

#videoSetupModal #videoSearchInput {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 13px;
  font-size: 0.86rem;
}

#videoSetupModal.has-ready-video #videoSearchInput {
  display: none;
}

#videoSetupModal .video-preview-box {
  position: relative;
  border-color: rgba(79, 218, 236, 0.22);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

#videoSetupModal #videoPrimaryActionBtn {
  min-height: 52px;
  margin: 2px 0 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #27c9e3, #12a9ca);
  color: #031419;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(31, 190, 232, 0.22);
}

#videoSetupModal #chooseOwnVideoBtn {
  display: flex;
  min-height: 46px;
  margin: 2px 0 0;
  padding: 9px 14px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
}

#videoSetupModal #chooseOwnVideoBtn > span {
  color: #58e1ee;
  font-size: 1rem;
}

#videoSetupModal #chooseOwnVideoBtn > strong {
  font-size: 0.86rem;
}

#videoSetupModal #trainWithoutVideoBtn {
  min-height: 66px;
  margin: 0;
  padding: 11px 14px 11px 52px;
  border-radius: 15px;
}

#videoSetupModal #trainWithoutVideoBtn::before {
  left: 17px;
  font-size: 1.65rem;
}

@media (max-width: 430px) {
  #videoSetupModal .video-setup-card {
    gap: 10px;
    padding: 20px 18px;
    border-radius: 22px;
  }

  #videoSetupModal .video-setup-card > h2 {
    font-size: 1.55rem !important;
  }
}

.app-select {
  width: 100%;
  min-height: 52px;

  padding: 0 20px;
  margin: 8px 0;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: var(--color-surface-dark);
  color: var(--color-text);

  font-size: 1rem;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.app-select:hover {
  border-color: var(--color-primary);
}

.app-select:focus {
  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px var(--color-primary);
}

.app-select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.modal-hint {
  margin: 0;

  color: var(--color-text-muted);

  font-size: 0.9rem;

  line-height: 1.4;
}

.modal-option-row {
  display: flex;

  gap: var(--space-lg);

  align-items: center;
}

.modal-option-row label {
  display: flex;

  align-items: center;

  gap: var(--space-sm);

  color: var(--color-text);
}

.modal-option-row button {
  flex: 1;
}

.modal-option-row button {
  flex: 1;
  min-height: 48px;
}

.modal-box h3 {
  margin: 0;

  font-size: 1rem;

  color: var(--color-text);

  text-align: center;
}

#targetZoneConfirmText {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.delete-training-confirm-card {
  width: min(420px, 92vw);

  padding: 24px;

  text-align: center;
}

.delete-training-confirm-card h2 {
  margin: 0 0 10px;
}

.delete-training-confirm-card p {
  margin: 0 0 22px;

  color: var(--color-text-muted);
  line-height: 1.5;
}

.delete-training-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.delete-training-confirm-actions button {
  width: 100%;

  padding: 12px 14px;

  border: none;
  border-radius: 10px;

  font-weight: 700;
  cursor: pointer;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.1);

  color: var(--color-text);
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.17);
}

.danger-button {
  background: #d64545;

  color: #ffffff;
}

.danger-button:hover {
  background: #ef5350;
}

@media (max-width: 420px) {
  .delete-training-confirm-actions {
    grid-template-columns: 1fr;
  }
}

.player-shell.is-mission-training {
  --mission-accent: #f3c54b;
  box-shadow:
    inset 0 0 0 4px var(--mission-accent),
    inset 0 0 54px color-mix(in srgb, var(--mission-accent) 20%, transparent);
}

.mission-training-banner {
  --mission-accent: #f3c54b;
  position: absolute;
  z-index: 170;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  width: min(680px, calc(100% - 32px));
  min-height: 62px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 75%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mission-accent) 18%, #071014), #071014 42%),
    #071014;
  box-shadow: 0 12px 34px rgb(0 0 0 / 55%);
}

.mission-training-banner[hidden],
.mission-loot-toast[hidden] {
  display: none;
}

.mission-training-badge {
  padding: 7px 10px;
  color: #101010;
  border-radius: 999px;
  background: var(--mission-accent);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.mission-training-banner div {
  min-width: 0;
}

.mission-training-banner strong,
.mission-training-banner small {
  display: block;
}

.mission-training-banner strong {
  overflow: hidden;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-training-banner small {
  margin-top: 3px;
  color: #bdc8cc;
  font-size: 0.76rem;
}

.mission-training-count {
  color: var(--mission-accent);
  font-weight: 900;
  white-space: nowrap;
}

.mission-loot-toast {
  position: absolute;
  z-index: 180;
  top: 22%;
  left: 50%;
  min-width: min(360px, calc(100% - 32px));
  transform: translate(-50%, -18px) scale(0.94);
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  opacity: 0;
  color: #fff;
  border: 1px solid #f3c54b;
  border-radius: 18px;
  background: rgb(7 16 20 / 96%);
  box-shadow: 0 0 34px rgb(243 197 75 / 35%);
  pointer-events: none;
}

.mission-loot-toast.is-visible {
  animation: mission-loot-arrival 4.2s ease both;
}

.mission-loot-toast > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #111;
  border-radius: 14px;
  background: #f3c54b;
  font-size: 1.8rem;
  font-weight: 900;
}

.mission-loot-toast small,
.mission-loot-toast strong {
  display: block;
}

.mission-loot-toast small {
  color: #f3c54b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.mission-loot-toast strong {
  margin-top: 3px;
  font-size: 1.25rem;
}

@keyframes mission-loot-arrival {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.94);
  }
  10%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 640px) {
  .mission-training-banner {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 8px 10px;
  }

  .mission-training-badge {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  .mission-training-banner strong {
    font-size: 0.82rem;
  }

  .mission-training-banner small,
  .mission-training-count {
    font-size: 0.68rem;
  }
}

@media (orientation: portrait) {
  .player-shell.is-mission-training:fullscreen .mission-training-banner,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner {
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    width: auto;
    min-height: 34px;
    transform: none;
    display: inline-flex;
    grid-template-columns: none;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 999px;
    box-shadow: 0 5px 16px rgb(0 0 0 / 32%);
  }

  .player-shell.is-mission-training:fullscreen
    .mission-training-banner
    > div,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner
    > div {
    display: none;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-badge,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-badge {
    grid-column: auto;
    padding: 3px 6px;
    font-size: 0.5rem;
    letter-spacing: 0.07em;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-banner small,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner
    small {
    display: none;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-banner strong,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner
    strong {
    font-size: 0.74rem;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-count,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-count {
    font-size: 0.58rem;
  }

  .player-shell.is-mission-training:fullscreen .fullscreen-pulse-metric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-pulse-metric,
  .player-shell.is-mission-training:fullscreen .fullscreen-zone-metric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-zone-metric,
  .player-shell.is-mission-training:fullscreen
    #fullscreenTrainingDurationMetric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    #fullscreenTrainingDurationMetric {
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 44px);
    margin: 0;
    min-height: 50px;
    height: 60px;
    box-sizing: border-box;
    border-radius: 13px;
    background-color: rgb(7 16 20 / 88%);
    box-shadow: 0 7px 18px rgb(0 0 0 / 28%);
  }

  .player-shell.is-mission-training:fullscreen .fullscreen-pulse-metric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-pulse-metric {
    left: 12px;
    width: 76px;
    align-items: center;
  }

  .player-shell.is-mission-training:fullscreen .fullscreen-zone-metric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-zone-metric {
    left: 96px;
    width: 82px;
    padding: 7px 10px;
    background-color: var(--zone-1);
  }

  .player-shell.is-mission-training:fullscreen
    .fullscreen-zone-metric
    span,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-zone-metric
    span {
    font-size: 24px;
  }

  .player-shell.is-mission-training:fullscreen
    .fullscreen-zone-metric
    small,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .fullscreen-zone-metric
    small {
    margin-top: 2px;
    font-size: 10px;
  }

  .player-shell.is-mission-training:fullscreen
    #fullscreenTrainingDurationMetric,
  .player-shell.is-mission-training.is-simulated-fullscreen
    #fullscreenTrainingDurationMetric {
    left: 186px;
    width: 82px;
    padding: 7px 10px;
  }

  .player-shell.is-mission-training:fullscreen .virtual-coach-card:not([hidden]),
  .player-shell.is-mission-training.is-simulated-fullscreen
    .virtual-coach-card:not([hidden]) {
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 112px);
    left: 10px;
    width: calc(100% - 20px);
    max-width: none;
    min-height: 58px;
    box-sizing: border-box;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 14px;
    transform: none;
  }

  .player-shell.is-mission-training:fullscreen .virtual-coach-face,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .virtual-coach-face {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .player-shell.is-mission-training:fullscreen .virtual-coach-card small,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .virtual-coach-card
    small {
    font-size: 0.58rem;
  }

  .player-shell.is-mission-training:fullscreen .virtual-coach-card strong,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .virtual-coach-card
    strong {
    font-size: 0.72rem;
    line-height: 1.25;
  }
}

@media (orientation: landscape) {
  .player-shell.is-mission-training:fullscreen .mission-training-banner,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner {
    top: max(8px, env(safe-area-inset-top));
    width: min(500px, calc(100% - 190px));
    min-height: 36px;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 38%);
  }

  .player-shell.is-mission-training:fullscreen .mission-training-badge,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-badge {
    padding: 3px 7px;
    font-size: 0.52rem;
    letter-spacing: 0.07em;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-banner strong,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner
    strong {
    font-size: 0.72rem;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-banner small,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-banner
    small {
    display: none;
  }

  .player-shell.is-mission-training:fullscreen .mission-training-count,
  .player-shell.is-mission-training.is-simulated-fullscreen
    .mission-training-count {
    font-size: 0.62rem;
  }
}
/* ===== ACTIVATION LANDING · FIRST PULSE ===== */
.activation-brand{display:flex;grid-column:1/-1;align-items:center;justify-content:center;gap:17px;width:100%;margin:-18px 0 0;padding:0 18px 22px;box-sizing:border-box;border-bottom:1px solid rgba(54,211,231,.28);text-align:left}.activation-brand img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(42,211,235,.38))}.activation-brand>div{display:grid;gap:4px}.activation-brand strong{color:#f7fbfc;font-size:clamp(2.35rem,4vw,3.4rem);line-height:.92;font-weight:950;letter-spacing:-.055em;text-shadow:0 0 28px rgba(59,213,232,.14)}.activation-brand span{color:#50dced;font-size:clamp(.8rem,1.3vw,.98rem);font-weight:900;letter-spacing:.055em}
.activation-landing{position:relative;width:min(1180px,calc(100% - 32px));margin:26px auto 18px;padding-top:58px;color:#f7fbfc}.activation-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:42px;align-items:center;padding:clamp(26px,5vw,64px);border:1px solid rgba(33,206,229,.28);border-radius:28px;background:radial-gradient(circle at 88% 8%,rgba(32,194,224,.18),transparent 34%),linear-gradient(145deg,#07171b,#0b1214 62%,#17170d);box-shadow:0 28px 80px rgba(0,0,0,.38)}
.landing-language-picker{position:absolute;z-index:8;top:0;left:0;display:flex;align-items:center;gap:8px;padding:7px;border:1px solid rgba(73,220,237,.28);border-radius:18px;background:rgba(4,18,23,.9);box-shadow:0 12px 34px rgba(0,0,0,.3);backdrop-filter:blur(14px)}.landing-language-picker button{display:flex;align-items:center;gap:6px;min-width:58px;min-height:40px;padding:6px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:#b9cbd0;cursor:pointer}.landing-language-picker button span{font-size:1.25rem;line-height:1}.landing-language-picker button small{font-size:.68rem;font-weight:900;letter-spacing:.08em}.landing-language-picker button:is(:hover,:focus-visible){border-color:rgba(70,220,238,.52);outline:none}.landing-language-picker button.is-active{border-color:#39dcea;background:rgba(34,205,229,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(57,220,234,.18),0 0 18px rgba(34,205,229,.14)}
.landing-language-picker-label{flex:0 1 auto;min-width:0;margin:0 4px 0 3px;color:#eafcff;font-size:.9rem;font-weight:750;white-space:nowrap}.landing-language-picker button{justify-content:center;flex:0 0 44px;min-width:44px;width:44px;padding:5px}.landing-language-picker button span{font-size:1.48rem}.landing-language-picker button small{display:none}
.activation-hero h1{white-space:pre-line}
.activation-kicker,.activation-steps header>span,.activation-step-grid article div>span,.activation-demo-box>span{color:#23d8ee;font-size:.72rem;font-weight:900;letter-spacing:.16em}.activation-hero h1{max-width:720px;margin:12px 0 14px;font-size:clamp(2.25rem,5.2vw,4.9rem);line-height:.97;letter-spacing:-.055em}.activation-positioning{margin:0;color:#fff;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:850}.activation-promise{max-width:620px;color:#b7c7cb;font-size:1rem;line-height:1.55}.activation-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 10px}.activation-primary,.activation-secondary,.activation-step-grid button,.activation-compatibility button{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid rgba(34,215,238,.42);font:inherit;font-weight:900;cursor:pointer}.activation-primary,.activation-step-grid article:last-child button,.activation-compatibility button{border:0;background:#21c5e4;color:#031316;box-shadow:0 10px 30px rgba(33,197,228,.22)}.activation-secondary,.activation-step-grid button{background:rgba(5,23,27,.76);color:#eafcff}.activation-hero-copy>small{color:#81979d}.activation-live-preview{padding:18px;border:1px solid rgba(42,224,242,.38);border-radius:22px;background:rgba(3,13,16,.82);box-shadow:0 22px 50px rgba(0,0,0,.35)}.activation-preview-top{display:flex;justify-content:space-between;color:#73e8f3;font-size:.72rem;font-weight:900;letter-spacing:.12em}.activation-live-preview>strong{display:block;margin:18px 0 12px;font-size:3.2rem}.activation-live-preview>strong small{font-size:.72rem;color:#9fb3b7}.activation-zone{display:flex;align-items:center;gap:8px;color:#43e08b;font-size:.72rem;font-weight:900}.activation-zone i{width:9px;height:9px;border-radius:50%;background:#38dc7d;box-shadow:0 0 18px #38dc7d}.activation-video-poster{position:relative;overflow:hidden;margin:16px 0;border-radius:15px;aspect-ratio:16/8}.activation-video-poster img{width:100%;height:100%;object-fit:cover;filter:brightness(.62)}.activation-video-poster span{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;background:#21c5e4;color:#031316;font-size:1.25rem}.activation-live-preview>p{margin:0;color:#a9bdc1;font-size:.82rem}.activation-proofline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px;padding:18px 22px;margin:12px 0;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#0b1416;color:#b9c8cb}.activation-proofline strong{margin-right:12px;color:#fff}.activation-proofline span{padding:7px 11px;border-radius:9px;background:#122226;color:#dff9fb}.activation-proofline b{color:#24cce6}.activation-steps{padding:34px 0}.activation-steps header{text-align:center}.activation-steps h2{margin:8px 0 24px;font-size:clamp(1.7rem,3vw,2.6rem)}.activation-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.activation-step-grid article{display:flex;gap:15px;min-height:190px;padding:20px;border:1px solid rgba(41,211,234,.2);border-radius:19px;background:#0a171a}.activation-step-grid article>b{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#133238;color:#4de7f4}.activation-step-grid h3{margin:6px 0;font-size:1.15rem}.activation-step-grid p{color:#9eb1b5;line-height:1.45}.activation-step-grid button{min-height:38px;padding:0 14px;font-size:.78rem}.activation-goals{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.activation-goals button.is-active{border-color:#32e3f2;background:#15424a;color:#fff}.activation-compatibility{max-width:820px;margin:0 auto 34px;border:1px solid rgba(38,206,230,.25);border-radius:17px;background:#091619}.activation-compatibility summary{padding:18px 21px;color:#fff;font-weight:900;cursor:pointer}.activation-compatibility>div{padding:0 21px 21px;color:#b3c4c7}.activation-compatibility li{margin:6px 0}.activation-demo{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:18px;background:rgba(0,5,7,.88);backdrop-filter:blur(12px)}.activation-demo[hidden]{display:none}.activation-demo-box{position:relative;width:min(560px,100%);padding:30px;border:1px solid rgba(42,216,238,.42);border-radius:25px;background:#071518;color:#fff}.activation-demo-box>button:first-child{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#fff;font-size:1.8rem;cursor:pointer}.activation-demo-stage{margin:24px 0;padding:30px;border-radius:20px;text-align:center;background:linear-gradient(145deg,#10262b,#0b1719)}.activation-demo-stage>strong{font-size:3rem}.activation-demo-stage small{font-size:.8rem}.activation-demo-stage>div{height:8px;overflow:hidden;border-radius:9px;background:#253438}.activation-demo-stage i{display:block;height:100%;width:0;background:#28d5eb;transition:width .3s linear}.activation-demo-stage[data-state=high]{box-shadow:inset 0 0 0 1px #ff615f}.activation-demo-stage[data-state=high]>strong{color:#ff6b68}.activation-demo-stage[data-state=target]>strong{color:#38dd87}
@media(max-width:800px){.activation-landing{width:min(100% - 18px,680px);margin-top:10px;padding-top:55px}.landing-language-picker{right:58px;left:0;justify-content:center;gap:3px}.landing-language-picker button{justify-content:center;min-width:0;flex:1;padding:5px}.activation-brand{justify-content:flex-start;gap:12px;margin:-7px 0 0;padding:0 52px 17px 0}.activation-brand img{width:66px;height:66px}.activation-brand strong{font-size:2.1rem}.activation-brand span{font-size:.7rem;letter-spacing:.025em}.activation-hero{grid-template-columns:1fr;gap:25px;padding:24px;border-radius:21px}.activation-live-preview{max-width:520px;width:100%;margin:auto}.activation-step-grid{grid-template-columns:1fr}.activation-proofline strong{width:100%;text-align:center}.activation-proofline{font-size:.78rem}.activation-positioning{line-height:1.35}.activation-actions>*{width:100%}}
@media(max-width:800px){.activation-landing{padding-top:70px}.landing-language-picker{right:0;justify-content:space-between;gap:8px}.landing-language-picker-label{flex:1 1 auto;font-size:.82rem}.landing-language-picker button{flex:0 0 42px;width:42px;min-width:42px;min-height:42px}}
@media(max-width:430px){.landing-language-picker-label{flex:0 0 40px;font-size:0;text-align:center}.landing-language-picker-label::after{content:"🌐";font-size:1rem}.landing-language-picker{right:0}.landing-language-picker button{flex-basis:42px;width:42px;min-width:42px}}
.activation-account-prompt{position:fixed;z-index:10030;right:18px;bottom:86px;display:flex;align-items:center;gap:20px;width:min(520px,calc(100% - 36px));padding:18px;border:1px solid rgba(45,222,239,.45);border-radius:18px;background:#07171a;color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.55)}.activation-account-prompt div{display:grid;gap:4px}.activation-account-prompt span{color:#30d9ec;font-size:.65rem;font-weight:900;letter-spacing:.13em}.activation-account-prompt p{margin:0;color:#a8bdc1;font-size:.78rem}.activation-account-prompt button{flex:0 0 auto;padding:12px 16px;border:0;border-radius:999px;background:#20c4e3;color:#041417;font-weight:900;cursor:pointer}@media(max-width:620px){.activation-account-prompt{align-items:stretch;flex-direction:column}.activation-account-prompt button{width:100%}}
body.is-activation-first>.app,
body.is-activation-first>.app-header,
body.is-activation-first>.app-bottom-navigation {
  display: none !important;
}
body.is-activation-first>.global-training-start {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  z-index: 10040 !important;
  display: flex !important;
}
body.is-activation-first { padding-bottom: 0; }
.activation-video-poster{display:block;width:100%;padding:0;border:0;background:#02080a;cursor:pointer}.activation-video-poster img{display:block;transition:filter .2s ease,transform .25s ease}.activation-video-poster:hover img,.activation-video-poster:focus-visible img{filter:brightness(.78);transform:scale(1.015)}.activation-video-poster:focus-visible{outline:3px solid #35dced;outline-offset:3px}

/* Sichtbare Bluetooth-Verbindungsdiagnose */
.startup-pulse-connection-status{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(45,214,235,.32);border-radius:11px;background:rgba(9,38,43,.72);color:#c9edf0;font-size:.82rem;line-height:1.4}
.startup-pulse-connection-status[data-state=success]{border-color:rgba(61,220,139,.5);background:rgba(13,60,40,.7);color:#aaf4cb}
.startup-pulse-connection-status[data-state=error]{border-color:rgba(255,106,106,.55);background:rgba(73,22,27,.72);color:#ffd0d0}
.startup-pulse-connection-status[data-state=retrying] {
  border-color: rgba(45, 214, 235, 0.52);
  background: rgba(8, 43, 49, 0.82);
  color: #d9fbff;
  animation: bluetooth-stabilizing-attention 3s ease-in-out infinite;
}

@keyframes bluetooth-stabilizing-attention {
  0%, 72%, 80%, 88%, 100% {
    border-color: rgba(45, 214, 235, 0.52);
    box-shadow: 0 0 0 0 rgba(45, 214, 235, 0);
    filter: brightness(1);
    transform: translateY(0);
  }
  76% {
    border-color: rgba(85, 232, 246, 0.94);
    box-shadow: 0 0 0 1px rgba(45, 214, 235, 0.03), 0 0 4px rgba(45, 214, 235, 0.07);
    filter: brightness(1.02);
    transform: translateY(-1px);
  }
  84% {
    border-color: rgba(111, 242, 252, 1);
    box-shadow: 0 0 0 1px rgba(45, 214, 235, 0.04), 0 0 7px rgba(45, 214, 235, 0.1);
    filter: brightness(1.04);
    transform: translateY(-2px);
  }
}

@keyframes checkpulse-heartbeat-attention {
  0%, 72%, 80%, 88%, 100% { transform: scale(1); filter: brightness(1); }
  76% { transform: scale(1.018); filter: brightness(1.015); }
  84% { transform: scale(1.034); filter: brightness(1.035); }
}

#activationDemoStart.is-awaiting-start,
#activationDemoStart.is-demo-complete,
#videoSearchInput.is-own-video-highlighted,
#videoSearchInput.is-first-pulse-prologue-ready {
  animation-name: checkpulse-heartbeat-attention;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls {
    top: auto !important;
    right: auto !important;
    bottom: 18px !important;
    left: 18px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-pie-legend {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: auto !important;
    padding: 7px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-item {
    display: grid !important;
    grid-template-columns: 48px minmax(30px, auto) !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    gap: 7px !important;
    color: #d7e8eb;
    text-align: right;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-label {
    width: 48px !important;
    min-width: 48px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 2px !important;
    box-sizing: border-box !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-item > small {
    display: block !important;
    min-width: 30px;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
  }
}

/* Kompakter, vollbreiter App-Header im Landscape. */
@media (orientation: landscape) and (max-height: 700px) {
  body {
    --app-header-height: 58px;
  }

  .app-header {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    min-height: calc(var(--app-header-height) + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 7px max(18px, env(safe-area-inset-left));
    transform: none;
    overflow: visible;
  }

  .app-header > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }

  .app-header h1 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.05;
  }

  .app-header .cockpit-header-username {
    overflow: hidden;
    max-width: min(42vw, 360px);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header .settings-button.account-avatar-trigger {
    top: calc(7px + env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
    max-width: 40px;
  }
}

/* Landscape ohne Medium: Mission kompakt in der freien Fläche neben BPM. */
@media (orientation: landscape) and (max-height: 700px) {
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top: 112px !important;
    right: clamp(300px, 27vw, 350px) !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(148px, 190px) !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 2px 12px !important;
    width: min(38vw, 420px) !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: .5rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview > strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: .76rem !important;
    line-height: 1.05 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview > p {
    display: -webkit-box !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    overflow: hidden !important;
    font-size: .58rem !important;
    line-height: 1.18 !important;
    -webkit-box-orient: vertical;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    line-clamp: 1;
    -webkit-line-clamp: 1;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 11px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops > span {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 1rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops small {
    font-size: .48rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops strong {
    font-size: .62rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops > b {
    font-size: 1rem !important;
  }
}

/* Landscape-Mission: keine doppelte Kopfinfo und vollständig sichtbare Kennzahlen. */
@media (orientation: landscape) and (max-height: 700px) {
  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-banner {
    display: none !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    inset: 5% auto auto 50% !important;
    min-height: min(57vh, 430px) !important;
    padding: clamp(20px, 2.6vw, 32px) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay::before {
    top: 20px !important;
    left: clamp(20px, 2.6vw, 32px) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {
    margin-top: 14px !important;
    margin-bottom: 5px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric span {
    font-size: clamp(4.5rem, 10vw, 7.2rem) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    padding: 12px 0 9px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric span {
    font-size: clamp(1.55rem, 3.2vw, 2.2rem) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    gap: 9px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    min-height: 36px !important;
    margin-bottom: 2px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    min-height: 36px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    padding: 10px 13px !important;
    border-radius: 13px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid small,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target small {
    margin-bottom: 3px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid strong {
    font-size: clamp(1.15rem, 2.4vw, 1.7rem) !important;
  }
}

/* Missions-Training ohne Medium: eigenständiges, kollisionsfreies Hochformat. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) {
    --mission-portrait-edge: max(12px, env(safe-area-inset-left));
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen)::before {
    top: auto !important;
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 3px)) !important;
    left: 50% !important;
    color: rgba(220, 250, 255, 0.76) !important;
    font-size: .55rem !important;
    letter-spacing: .18em !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-banner {
    right: 112px !important;
    max-width: calc(100% - 124px) !important;
    min-height: 38px !important;
    padding: 5px 9px !important;
    border-color: rgba(92, 230, 170, 0.42) !important;
    background: linear-gradient(120deg, rgba(8, 34, 31, 0.96), rgba(3, 17, 22, 0.94)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    position: absolute !important;
    top: max(9px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    border: 1px solid rgba(31, 191, 232, 0.28) !important;
    background: linear-gradient(145deg, rgba(7, 24, 30, 0.96), rgba(2, 11, 15, 0.96)) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn {
    right: 10px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    right: 60px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position: absolute !important;
    inset: max(62px, calc(env(safe-area-inset-top) + 54px)) auto auto 50% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    width: calc(100% - 20px) !important;
    min-height: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    border-color: rgba(31, 191, 232, 0.34) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(6, 28, 35, 0.97), rgba(2, 13, 18, 0.96)) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay::before {
    display: none !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-metric {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(31, 191, 232, 0.26) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(7, 25, 31, 0.96), rgba(2, 12, 16, 0.94)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {
    grid-column: 1 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {
    grid-column: 2 !important;
    flex-direction: column !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    grid-column: 3 !important;
    flex-direction: column !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric span {
    font-size: clamp(.88rem, 4.5vw, 1.18rem) !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric span,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric span,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric span {
    font-size: clamp(1.08rem, 5.8vw, 1.48rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric em {
    margin-left: 4px !important;
    font-size: .62rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-metric small {
    display: block !important;
    margin-top: 3px !important;
    font-size: .52rem !important;
    line-height: 1 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid {
    display: contents !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    grid-column: auto !important;
    min-height: 48px !important;
    padding: 10px 11px !important;
    border-radius: 11px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    grid-column: 1 / -1 !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid small,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target small {
    margin-bottom: 3px !important;
    font-size: .48rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid strong,
  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target strong {
    font-size: .82rem !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor {
    top: max(332px, calc(env(safe-area-inset-top) + 320px)) !important;
    right: var(--mission-portrait-edge) !important;
    left: var(--mission-portrait-edge) !important;
    width: auto !important;
    height: 82px !important;
    transform: none !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    right: var(--mission-portrait-edge) !important;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px)) !important;
    left: var(--mission-portrait-edge) !important;
    width: auto !important;
    padding: 12px !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    top: auto !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: var(--mission-portrait-edge) !important;
    width: min(210px, calc(100% - 184px)) !important;
    min-width: 0 !important;
    height: 48px !important;
    transform: none !important;
  }
}

/* App-Boot: Vor der Auth-Auflösung darf ausschließlich der Startscreen erscheinen. */
body.is-app-booting {
  overflow: hidden;
}

body.is-app-booting > :not(#appLaunchSplash) {
  visibility: hidden !important;
}

body.is-app-booting > #appLaunchSplash {
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-entry-route="landing"] body.is-app-booting {
  overflow: auto;
}
html[data-entry-route="landing"] body.is-app-booting > :not(#appLaunchSplash) {
  visibility: visible !important;
}
html[data-entry-route="landing"] #appLaunchSplash,
html[data-entry-route="landing"] #launchMainMenu {
  display: none !important;
}

.coach-behavior-impact {
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--coach-accent, var(--color-primary));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--coach-accent, var(--color-primary)) 9%, transparent);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.coach-behavior-impact strong {
  color: var(--color-text);
}

/* Android-PWA: Hauptflaeche darf nie breiter als der reale Screen werden. */
@media (pointer: coarse) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: none;
  }

  body > main.app {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    box-sizing: border-box;
    overflow-x: clip;
  }

  body > main.app > .training-goal-dashboard-card,
  body > main.app > .cockpit-accordion-card[open] {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* Funnel: direkter Einstieg für bereits bestehende Konten. */
.activation-existing-account {
  position: fixed;
  z-index: 10010;
  top: max(68px, calc(env(safe-area-inset-top) + 58px));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  gap: 9px;
  width: min(310px, calc(100vw - 32px));
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(46, 211, 233, 0.38);
  border-radius: 16px;
  background: rgba(4, 18, 22, 0.97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(18px);
}

.activation-existing-account[hidden] { display: none; }

.activation-account-menu-button {
  position: fixed;
  z-index: 10011;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(46, 211, 233, 0.42);
  border-radius: 50%;
  background: rgba(4, 19, 23, 0.92);
  color: #dffcff;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.activation-account-menu-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.activation-account-menu-button[aria-expanded="true"] {
  border-color: #42dcee;
  color: #42dcee;
  background: #0c3037;
}

.activation-existing-account > span {
  color: #9db2b7;
  font-size: 0.76rem;
  font-weight: 800;
}

.activation-existing-account > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.activation-existing-account button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(46, 211, 233, 0.32);
  border-radius: 12px;
  background: rgba(5, 24, 28, 0.88);
  color: #e8fbfd;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.activation-existing-account button:hover,
.activation-existing-account button:focus-visible {
  border-color: #42dcee;
  background: #10353c;
  outline: none;
}

@media (max-width: 620px) {
  .activation-existing-account > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .activation-existing-account button {
    width: 100%;
  }
}

.mission-training-overview {
  display: none;
}

.mission-training-overview[hidden] {
  display: none !important;
}

.player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
  position: absolute;
  z-index: 165;
  display: grid;
  gap: 6px;
  width: min(280px, calc(100% - 28px));
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 48%, transparent);
  border-radius: 16px;
  background: rgba(4, 15, 19, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.mission-training-overview-label,
.mission-training-drops small {
  color: var(--mission-accent);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.mission-training-overview > strong {
  color: #f5fbfc;
  font-size: 0.9rem;
}

.mission-training-overview > p {
  margin: 0;
  color: #b8c9cc;
  font-size: 0.72rem;
  line-height: 1.4;
}

.mission-training-drops {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.mission-training-drops > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--mission-accent);
  color: #111;
  font-size: 1.2rem;
  font-weight: 900;
}

.mission-training-drops div,
.mission-training-drops strong,
.mission-training-drops small {
  display: block;
  min-width: 0;
}

.mission-training-drops strong {
  overflow: hidden;
  margin-top: 2px;
  color: #eef9fa;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-training-drops > b {
  color: var(--mission-accent);
  font-size: 1.2rem;
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-pie-legend {
    width: 99px !important;
    box-sizing: border-box !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    height: 48px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    top: 76px !important;
    height: 68px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    top: 154px !important;
    height: 54px !important;
  }

  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top: 92px;
    right: clamp(118px, 13vw, 160px);
    width: min(260px, calc(100% - 300px));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    top: auto !important;
    right: var(--portrait-edge) !important;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px)) !important;
    left: auto !important;
    width: 166px !important;
    min-width: 166px !important;
  }

  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    right: var(--portrait-edge);
    bottom: max(150px, calc(env(safe-area-inset-bottom) + 144px));
    left: var(--portrait-edge);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .startup-pulse-connection-status[data-state=retrying] {
    animation: none;
    box-shadow: 0 0 0 2px rgba(45, 214, 235, 0.12);
  }
}

/* ===== CHECKPULSE LIVE-PLAYER · COCKPIT SHELL ===== */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) {
  --player-glass: rgba(3, 12, 16, 0.82);
  --player-line: rgba(31, 191, 232, 0.32);
  background:
    radial-gradient(circle at 82% 8%, rgba(31, 191, 232, 0.13), transparent 28%),
    linear-gradient(155deg, #03090c, #020405 72%);
}

/* Landscape-Trainingsshell: Mission am rechten Rand und jederzeit ausblendbar. */
.mission-training-overview-close {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(112, 224, 239, 0.3);
  border-radius: 50%;
  background: rgba(8, 28, 33, 0.92);
  color: #eafcff;
  font: 900 1rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.mission-training-overview-close:hover,
.mission-training-overview-close:focus-visible {
  border-color: #54e2f1;
  background: #123b43;
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 211, 231, 0.13);
}

.mission-training-overview > .mission-training-overview-label,
.mission-training-overview > strong,
.mission-training-overview > p {
  padding-right: 30px;
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top: 92px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  .player-shell.is-mission-training.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-drops {
    padding-right: 27px !important;
  }

  .mission-training-overview-close {
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    font-size: .85rem;
  }
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay::after {
  content: "checkPulse  /  LIVE COCKPIT";
  position: absolute;
  top: 22px;
  left: 50%;
  color: rgba(218, 248, 252, 0.7);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  transform: translateX(-50%);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-metric {
  position: absolute;
  inset: auto;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--player-line);
  border-radius: 13px;
  background: var(--player-glass);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
  top: 18px;
  left: 18px;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
  top: 18px;
  left: 122px;
  border-color: rgba(255, 255, 255, 0.28);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
  top: 18px;
  left: 214px;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
  right: auto;
  bottom: 18px;
  left: 50%;
  width: min(42vw, 520px);
  height: 64px;
  padding: 4px;
  border: 1px solid var(--player-line);
  border-radius: 16px;
  background: rgba(2, 9, 12, 0.78);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-line {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn {
  border: 1px solid rgba(31, 191, 232, 0.28);
  background: rgba(3, 12, 16, 0.84);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
  top: 18px;
  right: 76px;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status:hover,
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status:focus-visible {
  border-color: currentColor;
  transform: translateY(-2px);
  outline: none;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
  top: 18px;
  right: 142px;
  bottom: auto;
  left: auto;
  height: 48px;
  min-width: 160px;
  padding: 8px 18px;
  transform: none;
  border: 1px solid rgba(31, 191, 232, 0.5);
  box-shadow: 0 10px 28px rgba(31, 191, 232, 0.18);
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .training-zone-map {
  bottom: 18px;
  left: 18px;
  width: auto;
  padding: 0;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .zone-pie-legend {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--player-line);
  background: var(--player-glass);
  backdrop-filter: blur(12px);
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    position: absolute;
    top: 46%;
    left: 8px;
    width: calc(100% - 16px);
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(31, 191, 232, 0.16);
    border-radius: 18px;
    transform: translateY(-50%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player iframe {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay::after {
    top: 9px;
    left: 18px;
    transform: none;
    font-size: 0.55rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    top: 32px;
    left: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    top: 88px;
    left: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    top: 142px;
    left: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    top: 72px;
    right: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    top: 130px;
    right: 14px;
    bottom: auto;
    left: auto;
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 8px 13px;
    transform: none;
    font-size: 0.78rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    top: 198px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100% - 28px);
    height: 50px;
    transform: translateX(-50%);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-line {
    width: 100%;
    height: 100%;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .training-zone-map {
    right: auto;
    bottom: 86px;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls {
    transform: none;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    bottom: 18px;
    width: 48px;
    height: 48px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn { right: 132px; }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn { right: 74px; }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn { right: 16px; }
}

/* ===== LIVE-COCKPIT · PORTRAIT REFINEMENT ===== */
.player-shell:fullscreen.fullscreen-state-ok,
.player-shell.is-simulated-fullscreen.fullscreen-state-ok {
  box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.78), inset 0 0 34px rgba(34, 197, 94, 0.08);
}

.player-shell:fullscreen.fullscreen-state-high,
.player-shell.is-simulated-fullscreen.fullscreen-state-high {
  box-shadow: inset 0 0 0 3px rgba(249, 115, 22, 0.82), inset 0 0 34px rgba(249, 115, 22, 0.08);
}

.player-shell:fullscreen.fullscreen-state-critical,
.player-shell.is-simulated-fullscreen.fullscreen-state-critical {
  box-shadow: inset 0 0 0 3px rgba(142, 36, 170, 0.86), inset 0 0 34px rgba(142, 36, 170, 0.1);
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) {
    --portrait-edge: max(12px, env(safe-area-inset-left));
    background:
      linear-gradient(rgba(31, 191, 232, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 191, 232, 0.025) 1px, transparent 1px),
      radial-gradient(circle at 50% 34%, rgba(31, 191, 232, 0.1), transparent 38%),
      #02080b;
    background-size: 32px 32px, 32px 32px, auto, auto;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay::after {
    top: max(14px, env(safe-area-inset-top));
    left: var(--portrait-edge);
    max-width: 210px;
    overflow: hidden;
    color: #8fb5bd;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-metric {
    top: max(50px, calc(env(safe-area-inset-top) + 38px));
    display: flex;
    min-width: 0;
    height: 50px;
    box-sizing: border-box;
    align-items: center;
    margin: 0;
    padding: 8px 10px;
    border-color: rgba(31, 191, 232, 0.24);
    border-radius: 14px;
    background: rgba(4, 16, 21, 0.9);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    left: var(--portrait-edge);
    width: 80px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric span {
    font-size: 1.35rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    left: calc(var(--portrait-edge) + 88px);
    width: 76px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric span {
    font-size: 1.18rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric small {
    overflow: hidden;
    max-width: 100%;
    margin-top: 2px;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    left: calc(var(--portrait-edge) + 172px);
    width: 76px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric span {
    font-size: 1rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric small {
    margin-top: 2px;
    font-size: 0.58rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    top: max(9px, env(safe-area-inset-top));
    width: 40px;
    height: 40px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn {
    right: var(--portrait-edge);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    right: calc(var(--portrait-edge) + 48px);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    top: max(54px, calc(env(safe-area-inset-top) + 42px));
    right: var(--portrait-edge);
    width: 126px;
    height: 42px;
    min-width: 0;
    padding: 7px 11px;
    border-radius: 14px;
    font-size: 0.72rem;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    top: max(112px, calc(env(safe-area-inset-top) + 100px));
    right: var(--portrait-edge);
    left: var(--portrait-edge);
    width: auto;
    height: 48px;
    box-sizing: border-box;
    padding: 3px 6px;
    border-radius: 14px;
    transform: none;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: 43%;
    right: var(--portrait-edge);
    left: var(--portrait-edge);
    width: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    border-color: rgba(31, 191, 232, 0.3);
    border-radius: 20px;
    transform: translateY(-50%);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .training-zone-map {
    top: 59%;
    right: var(--portrait-edge);
    bottom: auto;
    left: var(--portrait-edge);
    width: auto;
    transform: none;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .zone-pie-legend {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px;
    border-radius: 16px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .zone-legend-label {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 9px 2px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {
    position: absolute;
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn { right: calc(var(--portrait-edge) + 108px); }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn { right: calc(var(--portrait-edge) + 54px); }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn { right: var(--portrait-edge); }
}

/* Finale Layout-Grenze: überschreibt bewusst ältere Mission-/Zonenregeln. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    position: absolute !important;
    top: max(50px, calc(env(safe-area-inset-top) + 38px)) !important;
    bottom: auto !important;
    left: calc(var(--portrait-edge) + 172px) !important;
    width: 76px !important;
    height: 50px !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: 43% !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls {
    position: absolute !important;
    top: calc(43% + 28.125vw + 14px) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-pie-legend {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    font-size: inherit !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-item {
    display: grid;
    min-width: 0;
    grid-template-rows: 44px auto;
    gap: 5px;
    justify-items: stretch;
    color: #d7e8eb;
    text-align: center;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-item > small {
    display: block;
    color: #b8cbcf;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-pie-legend br {
    display: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-legend-label {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 1px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: clamp(0.68rem, 3vw, 0.88rem) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    height: 96px !important;
    overflow: hidden;
    border-color: rgba(42, 218, 235, 0.42);
    background:
      linear-gradient(180deg, rgba(29, 210, 232, 0.13), rgba(3, 13, 18, 0.86) 58%, rgba(14, 90, 102, 0.18)),
      repeating-linear-gradient(0deg, transparent 0 19px, rgba(45, 214, 235, 0.07) 20px),
      repeating-linear-gradient(90deg, transparent 0 31px, rgba(45, 214, 235, 0.055) 32px);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.32);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-line {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(21, 205, 230, 0.04), rgba(29, 214, 235, 0.13), rgba(21, 205, 230, 0.04));
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)::after {
    content: "";
    position: absolute;
    right: calc(var(--portrait-edge) - 4px);
    bottom: max(12px, calc(env(safe-area-inset-bottom) - 2px));
    z-index: 42;
    width: 166px;
    height: 58px;
    border: 1px solid rgba(31, 191, 232, 0.2);
    border-radius: 18px;
    background: rgba(3, 12, 16, 0.68);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    backdrop-filter: blur(10px);
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {
    z-index: 43;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* Erfolgreicher Kompatibilitätstest */
.activation-compatibility-success{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:18px;background:rgba(0,7,9,.88);backdrop-filter:blur(12px)}
.activation-compatibility-success[hidden]{display:none}
.activation-compatibility-success>div{width:min(480px,100%);padding:30px;border:1px solid rgba(65,224,139,.55);border-radius:24px;background:linear-gradient(145deg,#0a2624,#071619);box-shadow:0 24px 70px rgba(0,0,0,.55);text-align:center}
.activation-compatibility-success>div>span{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:#39dc89;color:#032116;font-size:2rem;font-weight:950;box-shadow:0 0 28px rgba(57,220,137,.32)}
.activation-compatibility-success small{color:#65efb0;font-weight:900;letter-spacing:.13em}
.activation-compatibility-success h2{margin:10px 0;font-size:clamp(1.55rem,4vw,2.1rem);line-height:1.1}
.activation-compatibility-success p{margin:0 auto 22px;color:#b9cdca;line-height:1.55}
.activation-compatibility-success button{width:100%;min-height:50px;border:0;border-radius:999px;background:#2bcce4;color:#031518;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 12px 30px rgba(43,204,228,.22)}

/* First Pulse: verständliche Tonsteuerung direkt im Trainingsvideo */
.activation-demo-sound{position:absolute;z-index:4;top:11px;right:11px;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(3,12,15,.86);color:#fff;font:inherit;font-size:.65rem;font-weight:900;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.3)}
.activation-demo-sound:hover,.activation-demo-sound:focus-visible{border-color:#2ed8ea;outline:none}
.activation-demo-sound.is-on{border-color:#42df8c;background:rgba(5,49,32,.92);color:#8affbd}
#activationDemoStart.is-awaiting-start{position:relative;isolation:isolate;animation:activation-demo-start-attention 1.35s ease-in-out 3;box-shadow:0 0 0 0 rgba(33,197,228,.58),0 10px 30px rgba(33,197,228,.3)}
#activationDemoStart.is-awaiting-start::after{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid rgba(80,232,247,.72);border-radius:inherit;opacity:0;animation:activation-demo-start-ring 1.35s ease-out 3}
#activationDemoStart.is-demo-complete{position:relative;isolation:isolate;background:#39df8b;color:#03150d;animation:activation-demo-complete-attention 1.2s ease-in-out 4;box-shadow:0 0 30px rgba(57,223,139,.46)}
#activationDemoStart.is-demo-complete::after{content:"";position:absolute;z-index:-1;inset:-4px;border:2px solid rgba(87,242,163,.85);border-radius:inherit;animation:activation-demo-complete-ring 1.2s ease-out 4}
@keyframes activation-demo-start-attention{0%,100%{transform:scale(1)}45%{transform:scale(1.035);filter:brightness(1.16)}}
@keyframes activation-demo-start-ring{0%{inset:-3px;opacity:.85}100%{inset:-15px;opacity:0}}
@keyframes activation-demo-complete-attention{0%,100%{transform:scale(1)}45%{transform:scale(1.045);filter:brightness(1.12)}}
@keyframes activation-demo-complete-ring{0%{inset:-3px;opacity:.95}100%{inset:-17px;opacity:0}}
@media(prefers-reduced-motion:reduce){#activationDemoStart.is-awaiting-start,#activationDemoStart.is-awaiting-start::after,#activationDemoStart.is-demo-complete,#activationDemoStart.is-demo-complete::after{animation:none}#activationDemoStart.is-awaiting-start{outline:3px solid #58e6f4;outline-offset:4px}#activationDemoStart.is-demo-complete{outline:3px solid #57f2a3;outline-offset:4px}}

/* First Pulse: echte 90-Sekunden-Produktdemo */
.activation-demo-box{width:min(760px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:26px}.activation-demo-box h2{margin:7px 0 18px}.activation-demo-stage{display:grid;gap:12px;margin:0 0 16px;padding:0;overflow:hidden;text-align:left;border:1px solid rgba(40,215,235,.22);background:#071317}.activation-demo-stage>div{height:auto;background:transparent}.activation-demo-video{position:relative;aspect-ratio:16/8.2;overflow:hidden;background:#020608!important}.activation-demo-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.activation-demo-video-shade{position:absolute;inset:0;height:auto!important;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 55%,rgba(0,0,0,.58))!important}.activation-demo-video-state{position:absolute;z-index:2;left:13px;top:12px;display:flex;align-items:center;gap:7px;height:auto!important;padding:7px 9px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(3,12,15,.78)!important;color:#fff;font-size:.62rem;letter-spacing:.1em}.activation-demo-video-state i{width:7px;height:7px;border-radius:50%;background:#38dc83;box-shadow:0 0 13px #38dc83}.activation-demo-pause-mark{position:absolute;z-index:3;inset:50% auto auto 50%;display:grid;place-items:center;gap:5px;height:auto!important;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease}.activation-demo-pause-mark span{display:grid;place-items:center;width:62px;height:62px;border:2px solid #ff6464;border-radius:50%;background:rgba(5,8,10,.86);color:#ff7471;font-size:1.65rem;font-weight:900}.activation-demo-pause-mark b{padding:5px 8px;border-radius:6px;background:#ff5757;color:#180303;font-size:.57rem;letter-spacing:.12em}.activation-demo-stage[data-state=low] .activation-demo-pause-mark,.activation-demo-stage[data-state=high] .activation-demo-pause-mark{opacity:1}.activation-demo-stage[data-state=low] .activation-demo-video iframe,.activation-demo-stage[data-state=high] .activation-demo-video iframe{filter:grayscale(.45) brightness(.55)}.activation-demo-live{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:0 18px!important}.activation-demo-live>div{display:grid;height:auto!important}.activation-demo-live>div>span{color:#7e9ca2;font-size:.59rem;font-weight:900;letter-spacing:.11em}.activation-demo-live strong{font-size:2.65rem;line-height:1;color:#41df8b}.activation-demo-live strong small{font-size:.65rem}.activation-demo-zone{align-self:center;padding:8px 11px;border:1px solid rgba(59,226,139,.4);border-radius:999px;color:#42df8c;font-size:.68rem;font-weight:900}.activation-demo-wave{position:relative;height:54px!important;margin:0 18px;overflow:hidden!important;border-radius:10px;background:linear-gradient(180deg,rgba(40,218,235,.08),transparent)!important}.activation-demo-wave svg{width:100%;height:100%}.activation-demo-wave polyline{fill:none;stroke:#2ed8ea;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;animation:activation-wave-draw 2.8s linear infinite}.activation-demo-wave>i{position:absolute;right:0;top:0;width:5px;height:100%;background:#38dfee;box-shadow:0 0 18px #38dfee}.activation-demo-coach{display:flex;align-items:center;gap:10px;height:auto!important;margin:0 18px;padding:11px 13px;border:1px solid rgba(45,214,235,.25);border-radius:12px;background:#102328!important}.activation-demo-coach>span{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#31d981;color:#02130a;box-shadow:0 0 18px rgba(49,217,129,.35)}.activation-demo-coach p{margin:0;color:#eaf9fb;font-weight:750}.activation-demo-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);height:auto!important;margin:0 18px 18px;padding-top:13px;border-top:4px solid #243438;background:transparent!important;color:#769197;font-size:.52rem;font-weight:900;text-align:center;letter-spacing:.05em}.activation-demo-timeline>i{position:absolute;left:0;top:-4px;width:0;height:4px;background:linear-gradient(90deg,#36cbe4,#42df8c,#ffcc36,#ff5b5b);transition:width .3s linear}.activation-demo-stage[data-state=low] .activation-demo-live strong,.activation-demo-stage[data-state=low] .activation-demo-zone{color:#ffd24a}.activation-demo-stage[data-state=high] .activation-demo-live strong,.activation-demo-stage[data-state=high] .activation-demo-zone{color:#ff6565}.activation-demo-stage[data-state=high] .activation-demo-zone{border-color:rgba(255,101,101,.45)}.activation-demo-stage[data-state=low] .activation-demo-video-state i,.activation-demo-stage[data-state=high] .activation-demo-video-state i{background:#ff5e5e;box-shadow:0 0 13px #ff5e5e}@keyframes activation-wave-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}@media(max-width:620px){.activation-demo{padding:8px}.activation-demo-box{padding:20px 14px}.activation-demo-box h2{padding-right:25px;font-size:1.35rem}.activation-demo-video{aspect-ratio:16/9}.activation-demo-live{align-items:start}.activation-demo-live strong{font-size:2.25rem}.activation-demo-zone{font-size:.58rem}.activation-demo-coach{margin:0 12px}.activation-demo-wave,.activation-demo-timeline{margin-left:12px;margin-right:12px}}

/* Einmaliger cineastischer Prolog vor dem ersten echten Training. */
.first-pulse-prologue{position:fixed;inset:0;z-index:10030;display:grid;place-items:center;padding:18px;overflow:auto;background:radial-gradient(circle at 50% 35%,rgba(33,197,228,.18),transparent 38%),rgba(0,5,8,.96);backdrop-filter:blur(14px)}
.first-pulse-prologue[hidden]{display:none}.first-pulse-prologue-card{position:relative;width:min(640px,100%);padding:clamp(28px,6vw,54px);overflow:hidden;border:1px solid rgba(44,218,238,.42);border-radius:28px;background:linear-gradient(155deg,rgba(7,25,29,.98),rgba(3,10,14,.99));color:#eefcfd;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 55px rgba(34,211,238,.1)}
#firstPulsePrologueClose{position:absolute;z-index:2;top:14px;right:15px;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(4,14,18,.72);color:#fff;font-size:1.5rem;cursor:pointer}.first-pulse-prologue-media{margin:0 auto 26px}.first-pulse-prologue-media iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#000}.first-pulse-prologue-media.has-video .first-pulse-prologue-visual{display:none}.first-pulse-prologue-visual{position:relative;display:grid;place-items:center;width:180px;height:180px;margin:0 auto}.first-pulse-prologue-ring{position:absolute;inset:16px;border:2px solid #25d4e9;border-radius:50%;box-shadow:0 0 35px rgba(37,212,233,.4);animation:first-pulse-prologue-ring 2.4s ease-out infinite}.first-pulse-prologue-heart{position:relative;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#0d2c33;color:#49e5f2;font-size:4rem;font-weight:900;box-shadow:0 0 35px rgba(45,224,240,.35);animation:first-pulse-prologue-beat 1.6s ease-in-out infinite}
.first-pulse-prologue-visual i{position:absolute;width:7px;height:7px;border-radius:50%;background:#f5c442;box-shadow:0 0 16px #f5c442}.first-pulse-prologue-visual i:nth-of-type(1){top:18px;left:36px}.first-pulse-prologue-visual i:nth-of-type(2){right:22px;top:70px}.first-pulse-prologue-visual i:nth-of-type(3){left:43px;bottom:25px}.first-pulse-prologue-eyebrow{color:#45e3ef;font-size:.72rem;font-weight:950;letter-spacing:.17em}.first-pulse-prologue h2{max-width:520px;margin:12px auto 16px;font-size:clamp(1.8rem,5vw,3rem);line-height:1.06;text-wrap:balance}.first-pulse-prologue p{max-width:500px;margin:0 auto 28px;color:#b6c9cd;font-size:clamp(.96rem,2.5vw,1.12rem);line-height:1.6;text-wrap:balance}#firstPulsePrologueContinue{width:min(360px,100%)}.first-pulse-prologue-skip{display:block;margin:15px auto 0;padding:8px 14px;border:0;background:transparent;color:#82999e;font:inherit;font-size:.84rem;font-weight:750;cursor:pointer}.first-pulse-prologue-skip:hover,.first-pulse-prologue-skip:focus-visible{color:#dffbfc;outline:none;text-decoration:underline}
@keyframes first-pulse-prologue-ring{0%{opacity:.9;transform:scale(.72)}75%,100%{opacity:0;transform:scale(1.2)}}@keyframes first-pulse-prologue-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(1)}36%{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.first-pulse-prologue-ring,.first-pulse-prologue-heart{animation:none}}
.video-setup-modal input.is-first-pulse-prologue-ready,#videoSearchInput.is-first-pulse-prologue-ready{border-color:#d8a5ff;box-shadow:0 0 0 3px rgba(172,92,255,.13),0 0 28px rgba(172,92,255,.2);animation:first-pulse-link-attention 1.8s ease-in-out 3}@keyframes first-pulse-link-attention{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}@media(prefers-reduced-motion:reduce){#videoSearchInput.is-first-pulse-prologue-ready{animation:none;outline:2px solid #d8a5ff;outline-offset:2px}}

/* Einheitlicher checkPulse-Doppelschlag für interaktive Aufmerksamkeit. */
#activationDemoCta {
  position: relative;
  width: min(330px, 100%);
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(55, 218, 238, 0.58);
  box-shadow: 0 8px 24px rgba(24, 191, 219, 0.16), 0 0 18px rgba(52, 220, 239, 0.12);
}

#activationDemoCta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  bottom: -45%;
  left: -32%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(116, 236, 248, 0.17), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: activation-demo-cta-shimmer 5s ease-in-out infinite;
}

@keyframes activation-demo-cta-shimmer {
  0%, 72% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  76% { opacity: 0.68; }
  88% { transform: skewX(-18deg) translateX(660%); opacity: 0.5; }
  92%, 100% { transform: skewX(-18deg) translateX(660%); opacity: 0; }
}

#activationDemoCta,
#activationDemoStart.is-awaiting-start,
#activationDemoStart.is-demo-complete,
#videoSearchInput.is-own-video-highlighted,
#videoSearchInput.is-first-pulse-prologue-ready {
  animation: checkpulse-heartbeat-attention 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #activationDemoCta::after,
  #activationDemoCta,
  #activationDemoStart.is-awaiting-start,
  #activationDemoStart.is-demo-complete,
  #videoSearchInput.is-own-video-highlighted,
  #videoSearchInput.is-first-pulse-prologue-ready,
  .trophy-item.is-new {
    animation: none;
  }
}

/* Finale Layout-Grenze ausschließlich für die Landscape-Trainingsshell. */
@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    top: 18px !important;
    bottom: auto !important;
    left: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    top: 76px !important;
    bottom: auto !important;
    left: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    top: 154px !important;
    bottom: auto !important;
    left: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    top: 18px !important;
    right: auto !important;
    bottom: auto !important;
    left: 42% !important;
    width: min(32vw, 420px) !important;
    height: 64px !important;
    transform: translateX(-50%) !important;
  }
}

/* Jeder laufende Bluetooth-Zustand macht mit demselben Doppelschlag auf sich aufmerksam. */
.startup-pulse-connection-status:is(
  [data-state="connecting"],
  [data-state="searching-long"],
  [data-state="retrying"]
) {
  border-color: rgba(45, 214, 235, 0.52);
  background: rgba(8, 43, 49, 0.82);
  color: #d9fbff;
  animation: bluetooth-stabilizing-attention 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .startup-pulse-connection-status:is(
    [data-state="connecting"],
    [data-state="searching-long"],
    [data-state="retrying"]
  ) {
    animation: none;
    box-shadow: 0 0 0 2px rgba(45, 214, 235, 0.12);
  }
}

.activation-demo-local-visual {
  position: absolute;
  inset: 0;
  height: auto !important;
  overflow: hidden;
  background: #061013 url("assets/training-zones/cycling/zone2.webp") center / cover no-repeat !important;
  animation: activation-local-demo-motion 12s ease-in-out infinite alternate;
  transform: scale(1.035);
  transition: filter .35s ease;
}
.activation-demo-local-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(8,229,225,.12), transparent 42%, rgba(189,71,255,.1));
  content: "";
}
.activation-demo-local-visual > i {
  position: absolute;
  z-index: 2;
  left: -15%;
  top: 62%;
  width: 130%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #38e4ef 25%, #d95fff 52%, #38e4ef 76%, transparent);
  box-shadow: 0 0 14px #39dce8;
  animation: activation-local-pulse-line 2.6s linear infinite;
}
.activation-demo-local-visual > span {
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 11px;
  color: rgba(255,255,255,.8);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.activation-demo-stage[data-state="low"] .activation-demo-local-visual,
.activation-demo-stage[data-state="high"] .activation-demo-local-visual {
  filter: grayscale(.5) brightness(.52);
  animation-play-state: paused;
}
@keyframes activation-local-demo-motion {
  from { transform: scale(1.035) translate3d(-.7%,0,0); }
  to { transform: scale(1.12) translate3d(.8%,-1.4%,0); }
}
@keyframes activation-local-pulse-line {
  from { translate: -35% 0; }
  to { translate: 35% 0; }
}

/* Trainingsshell: finale geometrische Ausrichtung der Bedienelemente. */
.activation-demo-video > #activationDemoStart {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: max-content;
  margin: 0;
  translate: -50% -50%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.activation-demo-complete {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  text-align: center;
  background: rgba(1, 8, 11, 0.76);
  backdrop-filter: blur(3px);
  animation: activation-demo-complete-reveal 0.7s ease-out both;
}

.activation-demo-complete[hidden] { display: none; }
.activation-demo-complete > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(73, 230, 164, 0.62); border-radius: 50%; background: rgba(15, 78, 55, 0.72); color: #65f0b2; font-size: 1.45rem; box-shadow: 0 0 24px rgba(54, 225, 161, 0.2); }
.activation-demo-complete > strong { color: #f4fdff; font-size: clamp(1.25rem, 4vw, 1.8rem); }
.activation-demo-complete > small { color: #a9c5ca; font-size: 0.78rem; }
.activation-demo-video.is-complete iframe { filter: brightness(0.26) saturate(0.65); transition: filter 0.7s ease; }
@keyframes activation-demo-complete-reveal { from { opacity: 0; } to { opacity: 1; } }

.activation-demo-stage + #activationDemoStart {
  position: relative;
  display: block;
  width: max-content;
  margin: 0;
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)::after {
    right: var(--portrait-edge) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn {
    right: calc(var(--portrait-edge) + 114px) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn {
    right: calc(var(--portrait-edge) + 60px) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {
    right: calc(var(--portrait-edge) + 6px) !important;
  }
}

/* Portrait-Trainingsshell: HF-Kurve und sichtbare Coach-Mitteilung teilen sich exakt eine Zeile. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: max(112px, calc(env(safe-area-inset-top) + 100px)) !important;
    right: auto !important;
    left: var(--portrait-edge) !important;
    width: calc(50% - var(--portrait-edge) - 4px) !important;
    height: 96px !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    top: max(112px, calc(env(safe-area-inset-top) + 100px)) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: calc(50% + 4px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 96px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    gap: 7px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) .virtual-coach-face {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) > div:last-child {
    min-width: 0;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) small {
    overflow: hidden;
    font-size: .52rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(.6rem, 2.5vw, .72rem) !important;
    line-height: 1.22 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    top: 18px !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    position: absolute !important;
    top: 18px !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn {
    right: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    right: 76px !important;
  }
}
/* Klare A-nach-B-Transformation auf der Aktivierungsseite. */
.activation-transformation{margin:34px 0 8px;padding:clamp(22px,4vw,42px);border:1px solid rgba(41,211,234,.2);border-radius:24px;background:linear-gradient(145deg,#081619,#0b1214)}
.activation-transformation>header{text-align:center}.activation-transformation>header span{color:#23d8ee;font-size:.72rem;font-weight:900;letter-spacing:.16em}.activation-transformation h2{max-width:800px;margin:8px auto 24px;font-size:clamp(1.7rem,3.2vw,2.8rem)}
.activation-target-anchor{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 20px;padding:12px;border:1px solid rgba(41,211,234,.28);border-radius:16px;background:rgba(7,29,34,.72)}
.activation-target-anchor span{display:flex;align-items:center;gap:8px;min-width:0;color:#eaffff;font-size:.78rem;font-weight:850}.activation-target-anchor b{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;color:#031316;background:#31dceb}.activation-target-anchor i{color:#43dbea;font-style:normal;font-weight:950}
.activation-before-after{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}.activation-before-after article{padding:22px;border-radius:17px}.activation-before-after small{font-weight:900;letter-spacing:.12em}.activation-before-after h3{margin:8px 0}.activation-before-after p{margin:0;color:#b7c7cb;line-height:1.55}
.activation-before-after .is-before{border:1px solid rgba(255,140,90,.24);background:rgba(87,37,22,.18)}.activation-before-after .is-before small{color:#ff9d73}.activation-before-after .is-after{border:1px solid rgba(65,225,151,.3);background:rgba(21,82,57,.2)}.activation-before-after .is-after small{color:#52e6a0}.activation-journey-arrow{align-self:center;color:#29d5e9;font-size:2rem;font-weight:900}
.activation-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0;padding:0;list-style:none}.activation-journey li{display:flex;gap:10px;padding:14px;border:1px solid rgba(41,211,234,.15);border-radius:13px;background:rgba(255,255,255,.025)}.activation-journey li>b{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;color:#031316;background:#23d8ee}.activation-journey strong,.activation-journey span{display:block}.activation-journey span{margin-top:3px;color:#94a9ad;font-size:.8rem;line-height:1.35}.activation-transformation>.activation-primary{display:block;margin:20px auto 0}
@media(max-width:800px){.activation-before-after{grid-template-columns:1fr}.activation-journey-arrow{justify-self:center;transform:rotate(90deg)}.activation-journey{grid-template-columns:1fr 1fr}.activation-target-anchor{align-items:stretch;gap:5px;padding:9px}.activation-target-anchor span{flex:1;flex-direction:column;justify-content:center;gap:5px;text-align:center;font-size:.66rem}.activation-target-anchor i{align-self:center}}
@media(max-width:480px){.activation-journey{grid-template-columns:1fr}}
/* Privates Herzfrequenzprofil als Berechnungsgrundlage der Statistik. */
.heart-rate-profile-statistics{margin:0 0 18px;padding:18px;border:1px solid rgba(31,191,232,.22);border-radius:17px;background:linear-gradient(145deg,rgba(7,28,34,.8),rgba(7,18,22,.92))}.heart-rate-profile-statistics>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.heart-rate-profile-statistics h3{margin:4px 0 0}.heart-rate-profile-statistics>header>strong{padding:6px 9px;border-radius:999px;color:#73e4b7;background:rgba(115,228,183,.1);font-size:.7rem}.heart-rate-profile-statistics-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.heart-rate-profile-statistics-meta>span{padding:11px;border-radius:11px;background:rgba(255,255,255,.04)}.heart-rate-profile-statistics-meta small,.heart-rate-profile-statistics-meta strong{display:block}.heart-rate-profile-statistics-meta small{color:#8da8ad;font-size:.68rem}.heart-rate-profile-statistics-meta strong{margin-top:3px;font-size:.85rem}.heart-rate-profile-statistics-zones{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.heart-rate-profile-statistics-zones span{padding:9px 5px;border-top:3px solid hsl(calc(200 - (var(--zone-index,0) * 28)) 78% 52%);border-radius:8px;background:rgba(255,255,255,.035);text-align:center}.heart-rate-profile-statistics-zones span:nth-child(1){--zone-index:0}.heart-rate-profile-statistics-zones span:nth-child(2){--zone-index:1}.heart-rate-profile-statistics-zones span:nth-child(3){--zone-index:2}.heart-rate-profile-statistics-zones span:nth-child(4){--zone-index:3}.heart-rate-profile-statistics-zones span:nth-child(5){--zone-index:4}.heart-rate-profile-statistics-zones span:nth-child(6){--zone-index:5}.heart-rate-profile-statistics-zones b,.heart-rate-profile-statistics-zones strong{display:block}.heart-rate-profile-statistics-zones strong{margin-top:3px;font-size:.72rem}
@media(max-width:700px){.heart-rate-profile-statistics-meta{grid-template-columns:1fr 1fr}.heart-rate-profile-statistics-zones{grid-template-columns:repeat(3,1fr)}}

/* Zentrale HF-Steuerung im laufenden Videotraining. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(54px, 1fr) auto auto;
  gap: 5px;
  box-sizing: border-box;
  height: 168px;
  padding: 10px 12px 8px;
  overflow: hidden;
  pointer-events: auto;
}

.heart-rate-live-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.heart-rate-live-header > div { display: grid; min-width: 0; }
.heart-rate-live-header small { color: #83abb2; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.heart-rate-live-header strong { overflow: hidden; color: #f2fdff; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.heart-rate-live-header > div:first-child strong { color: #24d9ef; font-size: 1rem; }
.heart-rate-live-header > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #b9f7ef;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1.2;
}

.heart-rate-zone-selector {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.heart-rate-zone-selector .zone-legend-label {
  min-width: 0;
  width: 100%;
  min-height: 29px;
  padding: 4px 1px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: .67rem;
  font-weight: 950;
  opacity: .78;
}

.heart-rate-zone-selector .zone-legend-label.is-target-zone {
  outline: 2px solid #fff;
  outline-offset: 1px;
  opacity: 1;
  box-shadow: 0 0 16px rgba(255,255,255,.18);
}

.heart-rate-zone-selector .zone-legend-label:disabled {
  cursor: not-allowed;
  filter: saturate(.35);
  opacity: .38;
}

.heart-rate-zone-selector .zone-legend-label.is-target-zone:disabled {
  filter: none;
  opacity: 1;
}

.heart-rate-zone-selector .zone-legend-label.is-cooldown-locked {
  cursor: pointer;
  filter: saturate(.52);
  opacity: .58;
}

.heart-rate-zone-selector .zone-legend-label.is-cooldown-locked:active {
  filter: saturate(.75) brightness(1.08);
  opacity: .78;
}

.heart-rate-zone-cooldown {
  color: #91b9bf;
  font-size: .57rem;
  font-weight: 800;
  text-align: center;
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: max(108px, calc(env(safe-area-inset-top) + 96px)) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 178px !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: 52% !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls .zone-pie-legend {
    display: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top: calc(max(108px, calc(env(safe-area-inset-top) + 96px)) + 186px) !important;
    right: var(--portrait-edge) !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 64px !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    top: 74px !important;
    right: auto !important;
    bottom: auto !important;
    left: 18px !important;
    width: min(56vw, 620px) !important;
    height: 154px !important;
    transform: none !important;
  }
}

.heart-rate-profile-statistics.training-history-subaccordion {
  margin: 0 0 12px;
  padding: 0;
}

.heart-rate-profile-statistics.training-history-subaccordion > summary {
  padding: 16px 18px;
}

.heart-rate-profile-statistics.training-history-subaccordion > summary .cockpit-card-eyebrow {
  color: var(--color-primary);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.heart-rate-profile-statistics.training-history-subaccordion > summary strong {
  font-size: 1.05rem;
}

.heart-rate-profile-statistics .heart-rate-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.training-history-development.training-history-subaccordion {
  margin-bottom: 14px;
}
/* Aktionen im synchronisierten Herzfrequenzprofil. */
.heart-rate-profile-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;align-items:center}.heart-rate-profile-actions>strong{padding:6px 9px;border-radius:999px;color:#73e4b7;background:rgba(115,228,183,.1);font-size:.7rem}.heart-rate-profile-actions>button{min-height:32px;padding:0 12px;border:1px solid rgba(31,191,232,.42);border-radius:999px;color:#e9fbff;background:rgba(31,191,232,.12);font:inherit;font-size:.72rem;font-weight:850;cursor:pointer}.heart-rate-profile-actions>button:hover{background:rgba(31,191,232,.24)}
/* Einheitliche checkPulse-Zonenfarben im Herzfrequenzprofil. */
#heartRateProfileCloudStatus{display:none!important}
.heart-rate-profile-statistics-zones span:nth-child(1){border-top-color:var(--zone-0)}
.heart-rate-profile-statistics-zones span:nth-child(2){border-top-color:var(--zone-1)}
.heart-rate-profile-statistics-zones span:nth-child(3){border-top-color:var(--zone-2)}
.heart-rate-profile-statistics-zones span:nth-child(4){border-top-color:var(--zone-3)}
.heart-rate-profile-statistics-zones span:nth-child(5){border-top-color:var(--zone-4)}
.heart-rate-profile-statistics-zones span:nth-child(6){border-top-color:var(--zone-5)}

/* Aktivierungslogo optisch identisch zum runden Start-Loading-Emblem. */
.activation-brand img{object-fit:cover;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 0 30px rgba(12,186,230,.48);filter:drop-shadow(0 5px 18px rgba(0,0,0,.58))}
/* Freiwillige Geburtsangabe und jährliches Treuegeschenk. */
.birth-date-privacy-note{display:block;margin:8px 0 14px;color:#8eaaae;line-height:1.45}.birthday-reward-overlay{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(2,8,11,.9);backdrop-filter:blur(10px)}.birthday-reward-overlay section{width:min(520px,100%);padding:30px;border:1px solid rgba(244,197,80,.45);border-radius:24px;color:#f7fbfc;text-align:center;background:radial-gradient(circle at 50% 0,rgba(244,197,80,.2),transparent 42%),linear-gradient(145deg,#102329,#071418);box-shadow:0 28px 90px rgba(0,0,0,.6)}.birthday-reward-overlay section>div:first-child{font-size:4rem}.birthday-reward-overlay section>small{color:#f4c550;font-weight:900;letter-spacing:.13em}.birthday-reward-overlay h2{margin:10px 0}.birthday-reward-overlay p{color:#b5c9cc;line-height:1.55}.birthday-reward-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin:20px 0}.birthday-reward-values span{padding:14px;border:1px solid rgba(244,197,80,.18);border-radius:12px;background:rgba(255,255,255,.04)}.birthday-reward-values b,.birthday-reward-values small{display:block}.birthday-reward-values b{color:#f4c550}.birthday-reward-values small{margin-top:3px;color:#8ea5a8}.birthday-reward-overlay button{min-height:46px;padding:0 22px;border:0;border-radius:999px;color:#171000;background:#f4c550;font:inherit;font-weight:900;cursor:pointer}
.birthday-prompt-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}.birthday-prompt-actions button[data-birthday-later]{border:1px solid rgba(255,255,255,.18);color:#c2d1d3;background:transparent}

#trainingChallengeModal{z-index:3000002}.training-challenge-button{border:1px solid rgba(244,197,80,.7)!important;color:#171000!important;background:linear-gradient(135deg,#ffe27a,#eab72f)!important;font-weight:950!important}.training-challenge-button:disabled{cursor:not-allowed!important;filter:grayscale(.45);opacity:.55}.training-challenge-card{border-color:rgba(244,197,80,.55)!important;background:radial-gradient(circle at 50% 0,rgba(244,197,80,.16),transparent 42%),#0a1519!important}.training-challenge-card>p{color:#b9cdcf;line-height:1.5}.training-challenge-card label{display:block;margin:18px 0 7px;color:#f4c550;font-weight:850}.training-challenge-card select{width:100%}.training-challenge-status{min-height:24px;color:#4de0d0!important;font-weight:800}

.live-training-challenge-victory{position:absolute;z-index:8000000;top:50%;left:50%;display:grid;width:min(520px,calc(100% - 28px));padding:28px 22px;box-sizing:border-box;justify-items:center;gap:7px;border:2px solid #f4c550;border-radius:24px;color:#fff;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,219,88,.32),transparent 48%),rgba(5,15,18,.96);box-shadow:0 0 0 9999px rgba(0,0,0,.42),0 0 55px rgba(244,197,80,.58);opacity:0;transform:translate(-50%,-50%) scale(.72);transition:opacity .28s ease,transform .4s cubic-bezier(.2,1.4,.35,1);pointer-events:none}.live-training-challenge-victory.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.live-training-challenge-victory>span{font-size:4.5rem;filter:drop-shadow(0 0 20px rgba(244,197,80,.8))}.live-training-challenge-victory>small{color:#f4c550;font-weight:950;letter-spacing:.14em}.live-training-challenge-victory>strong{font-size:clamp(1.5rem,5vw,2.6rem)}.live-training-challenge-victory>p{margin:3px 0 0;color:#dcebed;font-weight:800}

/* Unübersteuerbare Abschlussgeometrie der Landscape-Trainingsshell. */
@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    top:76px!important;right:18px!important;bottom:auto!important;left:auto!important;width:106px!important;min-width:106px!important;max-width:106px!important;height:44px!important;padding:5px 8px!important;box-sizing:border-box!important;font-size:clamp(.62rem,1.05vw,.78rem)!important;line-height:1.05!important;white-space:normal!important;text-align:center!important;overflow-wrap:anywhere;transform:none!important
  }
  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview{top:130px!important;right:max(14px,env(safe-area-inset-right))!important;left:auto!important}
  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview-reopen:not([hidden]){top:130px!important;right:max(14px,env(safe-area-inset-right))!important}
}
.activation-pulse-network{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px;align-items:center;margin:20px 0 8px;padding:clamp(18px,3vw,32px);overflow:hidden;border:1px solid rgba(43,214,232,.28);border-radius:24px;background:radial-gradient(circle at 20% 50%,rgba(27,181,204,.14),transparent 38%),linear-gradient(145deg,#061317,#0b1517);box-shadow:0 24px 65px rgba(0,0,0,.28)}
.activation-network-map{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2/1;border:1px solid rgba(54,211,228,.28);border-radius:18px;background:radial-gradient(circle at 50% 48%,#0a3038,#020b0e 72%);box-shadow:inset 0 0 45px rgba(0,0,0,.75)}
.activation-network-map>img,.activation-network-map>svg{position:absolute;inset:0;width:100%;height:100%}.activation-network-map>img{opacity:.82}.activation-network-map>svg{z-index:2}.activation-network-map path{fill:none;stroke:#2bdced;stroke-width:.5;stroke-linecap:round;stroke-dasharray:2 2;filter:drop-shadow(0 0 2px #2bdced);animation:activation-network-route 2.2s linear infinite}.activation-network-origin,.activation-network-future{fill:#54eba0;stroke:#eafff4;stroke-width:.35;filter:drop-shadow(0 0 2px #54eba0)}
.activation-network-map path.activation-network-route-line{stroke:rgba(54,220,233,.58);stroke-width:.16;stroke-dasharray:none;filter:drop-shadow(0 0 .7px rgba(43,220,237,.7));animation:none}.activation-network-map path.activation-network-route-pulse{stroke:#a8fff1;stroke-width:.48;stroke-linecap:round;stroke-dasharray:2 98;filter:drop-shadow(0 0 1.8px #50ecd5);animation:activation-network-pulse-travel 4.6s ease-in-out infinite alternate}@keyframes activation-network-pulse-travel{from{stroke-dashoffset:2}to{stroke-dashoffset:-98}}
.activation-network-origin-wave,.activation-network-future-wave{fill:none;stroke:#35ddec;stroke-width:.35;transform-box:fill-box;transform-origin:center;animation:activation-network-wave 2s ease-out infinite}.activation-network-future-wave{animation-delay:.55s}.activation-network-map text{fill:#eafdff;font-size:2px;font-weight:900;letter-spacing:.06em;paint-order:stroke;stroke:#031216;stroke-width:.65}.activation-network-map .activation-network-you{fill:#78f2b2;font-size:2.8px}.activation-network-map>i{position:absolute;z-index:3;inset:-25%;background:linear-gradient(100deg,transparent 43%,rgba(76,229,242,.13) 50%,transparent 57%);animation:activation-network-scan 3.2s ease-in-out infinite;pointer-events:none}
.activation-network-copy>span{color:#36dced;font-size:.68rem;font-weight:900;letter-spacing:.15em}.activation-network-copy h2{margin:9px 0;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.06}.activation-network-copy p{margin:0 0 20px;color:#a9bdc1;line-height:1.55}.activation-network-copy .activation-primary{width:100%}
@keyframes activation-network-route{to{stroke-dashoffset:-16}}@keyframes activation-network-wave{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.5);opacity:0}}@keyframes activation-network-scan{0%,100%{transform:translateX(-55%)}50%{transform:translateX(55%)}}
@media(max-width:800px){.activation-pulse-network{grid-template-columns:1fr}.activation-network-copy{text-align:center}}
@media(prefers-reduced-motion:reduce){.activation-network-map path,.activation-network-origin-wave,.activation-network-future-wave,.activation-network-map>i{animation:none}}

/* WHO-orientierte Streak-Regel und funktionaler Streak-Schutz. */
.weekly-streak-label{display:flex!important;align-items:center;gap:7px}.streak-who-info,.challenge-who-info{position:relative}.streak-who-info summary,.challenge-who-info summary{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(45,218,235,.55);border-radius:50%;color:#43ddec;background:#092127;font-size:.72rem;font-weight:950;cursor:pointer;list-style:none}.streak-who-info summary::-webkit-details-marker,.challenge-who-info summary::-webkit-details-marker{display:none}.streak-who-info p,.challenge-who-info p{position:absolute;z-index:80;top:30px;left:0;box-sizing:border-box;width:min(330px,calc(100vw - 58px));margin:0!important;padding:14px;border:1px solid rgba(45,218,235,.42);border-radius:14px;color:#c8dadd!important;background:#071b20;box-shadow:0 18px 45px rgba(0,0,0,.55);font-size:.75rem!important;line-height:1.5;overflow-wrap:anywhere}.streak-who-info p strong{display:block;margin-bottom:5px;color:#42deec}.challenge-card{position:relative}.challenge-who-info{position:static}.challenge-who-info summary{position:absolute;top:12px;right:12px}.challenge-who-info p{top:44px;right:12px;left:12px;width:auto}.challenge-accordion:has(.challenge-who-info[open]){position:relative;z-index:20;overflow:visible}.streak-safe-shop{margin:14px 15px 16px;padding:16px;border:1px solid rgba(244,197,80,.42);border-radius:17px;background:radial-gradient(circle at 0 0,rgba(244,197,80,.14),transparent 42%),#09191d}.streak-safe-shop>header{display:flex;align-items:center;gap:12px}.streak-safe-shop>header>span{font-size:2rem}.streak-safe-shop header strong,.streak-safe-shop header small{display:block}.streak-safe-shop header p{margin:4px 0 0;color:#a9bec1;font-size:.78rem}.streak-safe-purchase{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.streak-safe-purchase>small{color:#f4c550;font-weight:850}.streak-safe-purchase button{min-height:40px;padding:8px 14px;border:1px solid rgba(244,197,80,.65);border-radius:999px;color:#171000;background:#f4c550;font-weight:900;cursor:pointer}.streak-safe-purchase button:disabled{opacity:.45;cursor:not-allowed}.streak-safe-status{min-height:1.3em;margin:9px 0 0;color:#4de0d0;font-size:.76rem}@media(max-width:560px){.streak-safe-purchase{align-items:stretch;flex-direction:column}.streak-safe-purchase button{width:100%}.streak-who-info p{position:fixed;z-index:250100;top:50%;right:auto;left:50%;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 150px);overflow:auto;transform:translate(-50%,-50%)}}

/* Streak Safe gehört ausschließlich in den Trainingskalender. Diese ältere
   Shop-Karte darf in Challenges und Wochenliga nicht mehr erscheinen. */
.streak-safe-shop { display: none !important; }
.privacy-center-settings{padding:0;overflow:hidden}.privacy-center-settings>.private-account-heading{width:100%;padding:16px 18px}.privacy-center-content{display:grid;gap:12px;padding:0 16px 16px}.privacy-center-content[hidden]{display:none}.privacy-center-intro{margin:0;color:#a8c0c3;line-height:1.5}.privacy-center-block{padding:15px;border:1px solid rgba(72,207,219,.2);border-radius:15px;background:rgba(4,20,25,.58)}.privacy-center-block h3{margin:4px 0 11px;text-align:left}.privacy-center-block>p{margin:10px 0 0;color:#9bb3b6;font-size:.8rem;line-height:1.5}.privacy-rights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.privacy-request-button{display:grid;gap:4px;min-height:76px;padding:12px;border:1px solid rgba(74,208,220,.22);border-radius:12px;color:#efffff;background:rgba(14,46,53,.64);font:inherit;text-align:left;cursor:pointer}.privacy-request-button:hover,.privacy-request-button:focus-visible{border-color:#4ddbe5;background:rgba(21,72,80,.72)}.privacy-request-button b{font-size:.82rem}.privacy-request-button small{color:#9ab5b8;font-size:.68rem;line-height:1.35}.privacy-request-danger{border-color:rgba(255,107,107,.28)}.privacy-request-danger b{color:#ffaaaa}.privacy-request-status{min-height:1.2em;color:#67e5ee!important}.privacy-transparency-details{border:1px solid rgba(72,207,219,.2);border-radius:13px;background:rgba(4,20,25,.5)}.privacy-transparency-details summary{padding:13px 14px;color:#eaffff;font-weight:850;cursor:pointer}.privacy-transparency-details div{padding:0 14px 13px}.privacy-transparency-details p{margin:7px 0;color:#a8c0c3;font-size:.76rem;line-height:1.45}.privacy-transparency-details b{color:#ddf9fa}.privacy-contact-note{display:grid;gap:4px;padding:13px;border-radius:13px;background:rgba(50,190,204,.08);color:#dffbfc}.privacy-contact-note span{color:#62dfeb;font-size:.82rem}.privacy-contact-note small{color:#91aaad;line-height:1.45}@media(max-width:520px){.privacy-rights-grid{grid-template-columns:1fr}.privacy-request-button{min-height:68px}}
.privacy-right-item{display:grid;align-content:start;gap:7px}.privacy-right-item .privacy-request-button{width:100%}.legal-reference-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.privacy-right-item>.legal-reference-links{margin:0 4px 5px}.legal-reference-links a{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid rgba(79,220,238,.28);border-radius:999px;color:#70eafb;background:rgba(0,207,232,.07);font-size:.68rem;font-weight:800;line-height:1.2;text-decoration:none}.legal-reference-links a:hover,.legal-reference-links a:focus-visible{border-color:#70eafb;background:rgba(0,207,232,.14)}.privacy-legal-overview{margin:0 14px 14px;padding:13px;border:1px solid rgba(72,207,219,.2);border-radius:12px;background:rgba(9,35,40,.62)}.privacy-transparency-details .privacy-legal-overview p{padding:0;margin:6px 0}.privacy-transparency-details .privacy-legal-overview nav{padding:0}
.privacy-rights-block{padding:0}.privacy-rights-heading{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:15px;border:0;background:transparent;color:#efffff;font:inherit;text-align:left;cursor:pointer}.privacy-rights-heading>span:first-child{display:grid;gap:4px}.privacy-rights-heading strong{font-size:1rem}.privacy-rights-content{display:grid;gap:8px;padding:0 15px 15px}.privacy-rights-content[hidden]{display:none}.privacy-rights-heading:hover,.privacy-rights-heading:focus-visible{background:rgba(50,190,204,.06);outline:none}
.privacy-data-map{display:grid!important;gap:8px;padding:0 12px 12px!important}.privacy-data-map article{display:grid;gap:4px;padding:12px;border:1px solid rgba(72,207,219,.16);border-radius:12px;background:rgba(10,39,45,.58)}.privacy-data-map article p{margin:0}.privacy-data-map article small{color:#77979b;font-size:.68rem;line-height:1.4}.privacy-automation-result{display:grid;gap:7px;padding:14px;border:1px solid rgba(78,226,212,.42);border-radius:14px;background:linear-gradient(145deg,rgba(12,64,67,.68),rgba(5,27,32,.8))}.privacy-automation-result[hidden]{display:none}.privacy-automation-result>strong{color:#f1ffff}.privacy-automation-result>p{margin:0;color:#afd0d2;font-size:.78rem;line-height:1.5}.privacy-automation-result>div{display:grid;gap:4px;color:#8fb1b4;font-size:.72rem}.privacy-automation-result button{justify-self:start;margin-top:4px;padding:9px 12px;border:1px solid rgba(80,224,214,.52);border-radius:11px;color:#062326;background:#54dfd1;font-weight:850;cursor:pointer}.privacy-request-button:disabled{opacity:.55;cursor:wait}
.mandatory-username-gate{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(1,7,10,.9);backdrop-filter:blur(14px)}
.mandatory-username-gate form{display:grid;gap:13px;width:min(480px,100%);padding:26px;border:1px solid rgba(74,226,210,.55);border-radius:24px;background:linear-gradient(145deg,#092126,#10181b);box-shadow:0 28px 100px rgba(0,0,0,.7);color:#f3fffd}
.mandatory-username-gate form>span{color:#55e1d3;font-size:.66rem;font-weight:950;letter-spacing:.1em}
.mandatory-username-gate h2,.mandatory-username-gate p{margin:0}.mandatory-username-gate p{color:#b9ceca;font-size:.88rem;line-height:1.55}
.mandatory-username-gate label{font-size:.76rem;font-weight:900}.mandatory-username-gate input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(85,225,211,.42);border-radius:12px;background:#061316;color:#fff;font:inherit;outline:none}
.mandatory-username-gate input:focus{border-color:#55e1d3;box-shadow:0 0 0 3px rgba(85,225,211,.13)}
.mandatory-username-gate small{color:#819b97;font-size:.68rem}.mandatory-username-gate button{padding:13px;border:0;border-radius:12px;background:#55e1d3;color:#03201d;font-weight:950;cursor:pointer}.mandatory-username-gate button:disabled{opacity:.55;cursor:wait}
.mandatory-username-gate output{min-height:1.2em;color:#ffc276;font-size:.75rem}.requires-username-onboarding{overflow:hidden}
/* Konkrete Trainingsziele bleiben auch mit sprechenden Namen als drei klare Kacheln lesbar. */
.activation-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.activation-goals button {
  min-width: 0;
  min-height: 58px;
  padding: 8px 7px;
  line-height: 1.15;
  white-space: normal;
}

/* Portrait-Cockpit: Pause belegt den freien vierten Platz der oberen Kennzahlenzeile. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button {
    position: absolute !important;
    top: max(50px, calc(env(safe-area-inset-top) + 38px)) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 50px !important;
    padding: 7px 9px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button b {
    font-size: .7rem;
  }
}

/* Der Kalender zeigt beim Wochenstreak nur Status und Fortschritt; Erklärungen liegen im vorhandenen Hilfe-Popover. */
.training-calendar-view .weekly-streak-card{align-items:flex-start;gap:10px;margin-bottom:10px;padding:11px 13px;border-radius:15px}
.training-calendar-view .weekly-streak-card>span{margin-top:2px;font-size:1.65rem}
.training-calendar-view .weekly-streak-card>div{width:100%;min-width:0;gap:1px}
.training-calendar-view .weekly-streak-card strong{font-size:1.05rem}
.training-calendar-view .weekly-streak-remaining{margin-top:1px;color:#f8c16b!important;font-size:.72rem!important}
.training-calendar-view .weekly-streak-progress{height:5px;margin:6px 0 1px}
.streak-who-info-content{position:absolute;z-index:80;top:30px;left:0;display:grid;gap:8px;box-sizing:border-box;width:min(350px,calc(100vw - 58px));height:auto;min-height:0;padding:14px;border:1px solid rgba(45,218,235,.42);border-radius:14px;color:#c8dadd;background:#071b20;box-shadow:0 18px 45px rgba(0,0,0,.55);font-size:.75rem;line-height:1.5;overflow-wrap:anywhere}
.streak-who-info-content>strong,.streak-who-info-content>span{position:static!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;transform:none!important;overflow:visible!important;white-space:normal!important;line-height:1.45!important}
.streak-who-info-content>strong{margin-bottom:6px;color:#42deec}
.streak-who-info-content .weekly-streak-rules{margin-top:0!important;color:#b9c9cb;font-size:.72rem}
.streak-who-info-content>p{position:static!important;inset:auto!important;width:auto!important;height:auto!important;min-height:0!important;margin:1px 0 0!important;padding:9px 0 0!important;border:0!important;border-top:1px solid rgba(45,218,235,.18)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#8fa9ac!important;font-size:.68rem!important;line-height:1.5!important;transform:none!important;overflow:visible!important;white-space:normal!important}
@media(max-width:560px){.streak-who-info-content{position:fixed;z-index:250100;top:50%;right:auto;left:50%;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 150px);overflow:auto;transform:translate(-50%,-50%)}}

/* Lesbare Cockpit-Typografie mit fluiden Grenzen statt starrer Vergrösserung. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header small {
  font-size: clamp(.64rem, 1.25vw, .78rem);
  line-height: 1.1;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header strong {
  font-size: clamp(.88rem, 1.55vw, 1.08rem);
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header > div:first-child strong {
  font-size: clamp(1.12rem, 2vw, 1.42rem);
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header > p {
  font-size: clamp(.76rem, 1.35vw, .94rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-selector .zone-legend-label {
  font-size: clamp(.74rem, 1.25vw, .9rem);
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown {
  font-size: clamp(.65rem, 1.1vw, .78rem);
  line-height: 1.2;
}

@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric span {
    font-size: clamp(1.48rem, 6.4vw, 1.72rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric em {
    font-size: .61rem;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric span {
    font-size: clamp(1.28rem, 5.5vw, 1.48rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric small,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric small {
    font-size: .64rem;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric span {
    font-size: clamp(1.08rem, 4.7vw, 1.28rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    grid-template-rows: auto minmax(38px, 1fr) auto auto;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header {
    grid-template-columns: minmax(64px, .8fr) minmax(0, 1.55fr) minmax(76px, 1fr);
    gap: 7px;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header small {
    font-size: clamp(.61rem, 2.55vw, .7rem);
    letter-spacing: .07em;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header strong {
    font-size: clamp(.8rem, 3.25vw, .94rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header > div:first-child strong {
    font-size: clamp(1.04rem, 4.5vw, 1.28rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header > p {
    font-size: clamp(.72rem, 3vw, .84rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-selector .zone-legend-label {
    min-height: 30px;
    font-size: clamp(.72rem, 3vw, .82rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown {
    font-size: clamp(.62rem, 2.5vw, .72rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button b {
    font-size: .78rem;
  }
}

@media (orientation: portrait) and (max-width: 370px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header {
    grid-template-columns: 58px minmax(0, 1fr) 72px;
    gap: 5px;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header strong {
    white-space: normal;
    line-height: 1.08;
  }
}

/* Hochformat-Fullscreen: Die Videoshell beginnt erst unter dem kompletten
   Live-HUD. Landscape und die eingebettete Playeransicht bleiben unberührt. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: calc(49% + 20px) !important;
  }

  /* Verbindliche Endregel: bedienbares Zonenkarussell unten links. */
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector {
    position: fixed !important;
    z-index: 6000004 !important;
    top: auto !important;
    right: 184px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: var(--portrait-edge) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 82px !important;
    padding: 9px calc(50% - 27px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: calc(50% - 27px) !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-radius: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector::before {
    content: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector .zone-legend-label {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    scroll-snap-align: center !important;
    opacity: .48 !important;
    transform: scale(.84) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector .zone-legend-label.is-target-zone {
    opacity: 1 !important;
    transform: scale(1.1) !important;
  }
}

@media (orientation: portrait) and (max-width: 370px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector {
    right: 176px !important;
  }
}

/* Absolute letzte Priorität für die temporäre Coach-Vollfläche. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    inset: max(3px, env(safe-area-inset-top)) 3px calc(51% + 28.125vw + 3px) 3px !important;
    z-index: 9000000 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    transform: none !important;
  }
}

/* FINALE COACH-EBENE: Bei einer Meldung wird der komplette Cockpitbereich
   vom oberen Bildschirmrand bis exakt zur Oberkante des Videos überdeckt. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    inset: max(3px, env(safe-area-inset-top)) 3px calc(51% + 28.125vw + 3px) 3px !important;
    z-index: 9000000 !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 4vw, 22px) !important;
    padding: clamp(18px, 5vw, 28px) !important;
    overflow: auto !important;
    border-radius: 17px 17px 8px 8px !important;
    background: linear-gradient(145deg, rgba(3, 23, 29, .995), rgba(4, 10, 15, .995)) !important;
    box-shadow: inset 0 0 0 1px rgba(51, 217, 231, .2), 0 14px 36px rgba(0, 0, 0, .65) !important;
    backdrop-filter: blur(18px) !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) .virtual-coach-face {
    flex: 0 0 clamp(64px, 21vw, 90px) !important;
    width: clamp(64px, 21vw, 90px) !important;
    height: clamp(64px, 21vw, 90px) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) > div:last-child {
    width: min(62vw, 360px) !important;
    min-width: 0 !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) small {
    display: block !important;
    overflow: visible !important;
    margin-bottom: 5px !important;
    font-size: clamp(.62rem, 2.8vw, .78rem) !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) strong {
    display: block !important;
    overflow: visible !important;
    font-size: clamp(.9rem, 4vw, 1.15rem) !important;
    line-height: 1.38 !important;
    text-wrap: balance;
    -webkit-line-clamp: unset !important;
  }
}

/* Coach-HUD während eines laufenden Clips: Die Meldung übernimmt temporär
   die komplette freie Fläche oberhalb des Videos. Dadurch werden lange
   Hinweise weder abgeschnitten noch über dem Clip zusammengedrängt. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: var(--portrait-edge) !important;
    bottom: calc(51% + 28.125vw + 8px) !important;
    left: var(--portrait-edge) !important;
    z-index: 7000002 !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 14px 16px !important;
    overflow: auto !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(5, 25, 31, .985), rgba(8, 14, 20, .985)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .58), inset 0 0 28px rgba(31, 191, 232, .04) !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) .virtual-coach-face {
    flex: 0 0 clamp(48px, 15vw, 66px) !important;
    width: clamp(48px, 15vw, 66px) !important;
    height: clamp(48px, 15vw, 66px) !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) > div:last-child {
    min-width: 0 !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) small {
    overflow: visible !important;
    font-size: .62rem !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) strong {
    display: block !important;
    overflow: visible !important;
    font-size: clamp(.78rem, 3.4vw, .98rem) !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: unset !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    top: 8px !important;
    right: 136px !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 7000002 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 70px !important;
    max-height: 118px !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    overflow: auto !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) strong {
    display: block !important;
    overflow: visible !important;
    font-size: clamp(.76rem, 1.5vw, .94rem) !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Verbindliche Portrait-Geometrie. Ausschließlich Fullscreen-Hochformat;
   die eigenständige Landscape-Spalte wird hiervon nicht berührt. */
@media (orientation: portrait) and (max-width:700px) {
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training){--portrait-edge:12px;--portrait-top:12px;overflow:hidden!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-banner{top:var(--portrait-top)!important;right:auto!important;left:var(--portrait-edge)!important;width:174px!important;max-width:174px!important;height:38px!important;min-height:38px!important;padding:5px 8px!important;box-sizing:border-box!important;overflow:hidden!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle{position:absolute!important;top:var(--portrait-top)!important;width:42px!important;height:42px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn{right:var(--portrait-edge)!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status{right:62px!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle{right:112px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button{position:absolute!important;top:62px!important;bottom:auto!important;width:calc((100% - 42px)/4)!important;min-width:0!important;max-width:none!important;height:52px!important;padding:6px!important;box-sizing:border-box!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric{left:var(--portrait-edge)!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric{display:flex!important;left:calc(var(--portrait-edge) + ((100% - 42px)/4) + 6px)!important;margin:0!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric{left:calc(var(--portrait-edge) + (((100% - 42px)/4) * 2) + 12px)!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button{right:var(--portrait-edge)!important;left:auto!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor{position:absolute!important;top:124px!important;right:auto!important;bottom:auto!important;left:var(--portrait-edge)!important;width:calc(55% - 18px)!important;height:124px!important;min-height:124px!important;max-height:124px!important;padding:9px!important;box-sizing:border-box!important;overflow:visible!important;grid-template-rows:minmax(0,1fr)!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]){position:absolute!important;top:124px!important;right:var(--portrait-edge)!important;bottom:auto!important;left:55%!important;width:auto!important;max-width:none!important;height:124px!important;min-height:124px!important;padding:10px!important;box-sizing:border-box!important;overflow:hidden!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) .virtual-coach-face{width:44px!important;height:44px!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) small{font-size:.58rem!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) strong{font-size:.68rem!important;line-height:1.18!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector{position:fixed!important;z-index:6000004!important;top:auto!important;right:auto!important;bottom:max(14px,env(safe-area-inset-bottom))!important;left:var(--portrait-edge)!important;display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:9px!important;width:calc(100% - 214px)!important;min-width:142px!important;max-width:190px!important;height:82px!important;padding:29px calc(50% - 27px) 9px!important;box-sizing:border-box!important;overflow-x:scroll!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-padding-inline:calc(50% - 27px)!important;overscroll-behavior-x:contain!important;touch-action:pan-x!important;pointer-events:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;border:1px solid rgba(39,207,226,.42)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(5,31,37,.97),rgba(4,16,21,.98))!important;box-shadow:inset 0 0 28px rgba(24,209,226,.055),0 12px 32px rgba(0,0,0,.48)!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector::-webkit-scrollbar{display:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector::before{content:"ZIELZONE · WISCHEN";position:absolute;top:10px;left:12px;color:#37d7e8;font-size:.54rem;font-weight:900;letter-spacing:.12em;white-space:nowrap;pointer-events:none}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector .zone-legend-label{position:relative!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:14px!important;scroll-snap-align:center!important;opacity:.5!important;transform:scale(.84)!important;pointer-events:auto!important;touch-action:manipulation!important;transition:transform 180ms ease,opacity 180ms ease,box-shadow 180ms ease!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector .zone-legend-label.is-target-zone{z-index:2!important;opacity:1!important;transform:scale(1.12)!important;outline:2px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(41,215,230,.16),0 10px 24px rgba(0,0,0,.42)!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #player{top:326px!important;right:0!important;bottom:0!important;left:0!important;height:auto!important;transform:none!important}

}

/* Eigenständiges Fullscreen-Landscape-Cockpit. Portrait bleibt unberührt. */
#fullscreenHudToggle{display:none;position:absolute;z-index:6000002;top:max(16px,env(safe-area-inset-top));right:max(126px,calc(env(safe-area-inset-right) + 116px));width:44px;height:44px;padding:0;place-items:center;border:1px solid rgba(66,218,232,.38);border-radius:50%;color:#ddfbff;background:rgba(4,24,29,.9);box-shadow:0 8px 24px rgba(0,0,0,.3);font:900 1.05rem/1 system-ui;cursor:pointer;backdrop-filter:blur(8px)}
.player-shell:is(:fullscreen,.is-simulated-fullscreen) #fullscreenHudToggle{display:grid}
.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden #fullscreenHudToggle{border-color:#58e7be;color:#062019;background:#58e7be}
.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .fullscreen-overlay>.fullscreen-metric,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .heart-rate-monitor,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .virtual-coach-card,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .no-video-live-panel,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .mission-training-banner,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .mission-training-overview,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden .mission-training-overview-reopen,.player-shell:is(:fullscreen,.is-simulated-fullscreen).is-hud-hidden #trainingZoneControls{display:none!important}
@media (orientation: landscape) and (min-width:600px) and (max-height:700px) {
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training){--landscape-rail:clamp(224px,31vw,286px);overflow:hidden!important;background:#02080b!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training)::before{content:"";position:absolute;z-index:8;inset:0 0 0 auto;width:var(--landscape-rail);border-left:1px solid rgba(52,215,229,.2);background:linear-gradient(160deg,rgba(7,29,35,.98),rgba(3,11,15,.99));box-shadow:-16px 0 38px rgba(0,0,0,.34);pointer-events:none}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #player,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .local-cast-poster{top:0!important;right:var(--landscape-rail)!important;bottom:0!important;left:0!important;width:auto!important;height:100%!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-banner{display:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric{position:absolute!important;right:auto!important;left:14px!important;width:104px!important;box-sizing:border-box!important;border:1px solid rgba(53,211,230,.3)!important;border-radius:14px!important;background:rgba(2,15,20,.9)!important;box-shadow:0 10px 26px rgba(0,0,0,.32)!important;backdrop-filter:blur(10px)}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric{top:14px!important;height:60px!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric{top:82px!important;height:55px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor{position:absolute!important;z-index:45!important;top:auto!important;right:auto!important;bottom:14px!important;left:14px!important;width:min(330px,calc(100% - var(--landscape-rail) - 42px))!important;height:94px!important;min-height:94px!important;max-height:94px!important;padding:8px!important;box-sizing:border-box!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-line{min-height:36px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status{position:absolute!important;z-index:190!important;top:12px!important;width:42px!important;height:42px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn{right:12px!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status{right:62px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle{top:12px!important;right:112px!important;width:42px!important;height:42px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active,.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button{position:absolute!important;z-index:190!important;top:62px!important;bottom:auto!important;height:38px!important;box-sizing:border-box!important;transform:none!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active{right:12px!important;left:auto!important;width:112px!important;min-width:112px!important;max-width:112px!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button{right:132px!important;width:calc(var(--landscape-rail) - 144px)!important;min-width:78px!important;padding-inline:8px!important}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]){position:absolute!important;z-index:170!important;top:110px!important;right:12px!important;bottom:auto!important;left:auto!important;width:calc(var(--landscape-rail) - 24px)!important;max-width:none!important;height:78px!important;min-height:78px!important;padding:10px!important;box-sizing:border-box!important;overflow:hidden!important;transform:none!important}.player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) .virtual-coach-face{width:48px!important;height:48px!important}
  .player-shell.is-mission-training:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview{position:absolute!important;z-index:175!important;top:198px!important;right:12px!important;bottom:12px!important;left:auto!important;width:calc(var(--landscape-rail) - 24px)!important;max-height:none!important;padding:12px!important;gap:4px!important;box-sizing:border-box!important;overflow:auto!important}.player-shell.is-mission-training:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview>p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .player-shell.is-mission-training:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-drops{grid-template-columns:32px minmax(0,1fr) auto;gap:7px;padding-top:7px}.player-shell.is-mission-training:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .mission-training-drops>span{width:32px;height:32px}
  .player-shell:is(:fullscreen,.is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn{z-index:190!important;right:calc(var(--landscape-rail) + 12px)!important;bottom:12px!important;width:42px!important;height:42px!important}
}

/* Landscape bleibt ein Trainingsbild mit kompaktem Instrumentenstreifen. */
@media (orientation: landscape) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .training-warmup-banner {
    display: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    top: 18px !important;
    bottom: auto !important;
    left: 18px !important;
    width: 142px !important;
    height: 70px !important;
    justify-content: center;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric span {
    font-size: clamp(1.65rem, 3vw, 2.15rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    display: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    top: 96px !important;
    bottom: auto !important;
    left: 18px !important;
    width: 142px !important;
    height: 66px !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric span {
    font-size: clamp(1.05rem, 2vw, 1.38rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: 18px !important;
    right: auto !important;
    bottom: auto !important;
    left: 176px !important;
    width: min(54vw, 690px) !important;
    height: clamp(112px, 19vh, 148px) !important;
    grid-template-rows: auto minmax(28px, 1fr) auto auto !important;
    gap: 4px !important;
    padding: 10px 12px 8px !important;
    transform: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-live-header {
    grid-template-columns: minmax(76px, .75fr) minmax(0, 1.6fr) minmax(92px, .9fr);
    gap: 10px;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-live-header > p {
    font-size: clamp(.72rem, 1.35vw, .9rem);
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-zone-selector .zone-legend-label {
    min-height: 30px;
    padding-block: 4px;
  }
}

@media (orientation: landscape) and (max-width: 760px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    left: 10px !important;
    width: 112px !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    left: 132px !important;
    width: calc(100% - 292px) !important;
  }
}

/* Video-Cockpit: Warm-up und Zonendaten werden bereits im HF-Monitor gezeigt.
   Die zweite Statuskachel darunter war redundant und kollidierte in beiden
   Ausrichtungen mit Video, Coach und Missionskarte. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #trainingZoneControls {
  display: none !important;
}

@media (orientation: landscape) {
  /* Der obere Instrumentenstreifen bleibt kompakt und kann seine feste Höhe
     nicht mehr durch den Inhalt der vier Grid-Zeilen aufsprengen. */
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    box-sizing: border-box !important;
    height: 168px !important;
    min-height: 0 !important;
    max-height: 168px !important;
    overflow: hidden !important;
    grid-template-rows: auto minmax(24px, 1fr) 32px auto !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-live-header {
    min-height: 0 !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-line {
    min-height: 24px !important;
  }
}

/* Abschliessende Cockpit-Geometrie: muss nach den historischen Layoutregeln
   stehen, damit HF-Kurve und Coach in beiden Ausrichtungen eine Reihe bilden. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
  grid-template-rows: minmax(42px, 1fr) 30px !important;
  gap: 7px !important;
  padding: 10px !important;
  border-color: rgba(37, 211, 231, .34) !important;
  background: linear-gradient(145deg, rgba(5, 31, 37, .94), rgba(4, 16, 21, .96)) !important;
  box-shadow: inset 0 0 28px rgba(24, 209, 226, .045), 0 12px 32px rgba(0, 0, 0, .34) !important;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-live-header,
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-cooldown { display: none !important; }
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-line {
  width: 100% !important;
  height: 100% !important;
  min-height: 42px !important;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 196, 218, .055), rgba(2, 11, 15, .08));
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector { gap: 4px !important; }
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .zone-legend-label {
  min-height: 28px !important;
  padding: 3px 1px !important;
  border-radius: 7px !important;
  font-size: .64rem !important;
}
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top: max(108px, calc(env(safe-area-inset-top) + 96px)) !important;
    right: auto !important;
    left: var(--portrait-edge) !important;
    width: calc(50% - var(--portrait-edge) - 4px) !important;
    height: 108px !important;
    min-height: 0 !important;
    max-height: 108px !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top: max(108px, calc(env(safe-area-inset-top) + 96px)) !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: calc(50% + 4px) !important;
    width: auto !important;
    max-width: none !important;
    height: 108px !important;
    min-height: 108px !important;
    padding: 9px !important;
    transform: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player { top: 39% !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top: 112px !important;
    right: auto !important;
    left: 78px !important;
    width: min(30vw, 360px) !important;
    height: 108px !important;
    min-height: 0 !important;
    max-height: 108px !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top: 112px !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(78px + min(30vw, 360px) + 12px) !important;
    width: min(30vw, 360px) !important;
    max-width: min(30vw, 360px) !important;
    height: 108px !important;
    min-height: 108px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}
.context-info-disclosure {
  position: relative;
  margin-top: 8px;
}

.context-info-disclosure > summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(78, 224, 235, 0.42);
  border-radius: 50%;
  background: rgba(8, 35, 40, 0.9);
  color: #6cecf2;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.context-info-disclosure > summary::-webkit-details-marker,
.page-support-disclosure > summary::-webkit-details-marker { display: none; }

.context-info-disclosure > div {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 13px;
  border: 1px solid rgba(78, 224, 235, 0.2);
  border-radius: 12px;
  background: rgba(4, 23, 27, 0.96);
  color: #b9cfce;
  line-height: 1.5;
}

.context-info-disclosure.is-inline { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.context-info-disclosure.is-inline > div { min-width: min(420px, calc(100vw - 64px)); }
.league-info-disclosure { margin: 2px 0 10px; }
.league-info-disclosure > div > p { margin: 0; }

.page-support-disclosure {
  border: 1px solid rgba(78, 224, 235, 0.2);
  border-radius: 16px;
  background: rgba(6, 28, 32, 0.72);
}

.gear-connection-help.page-support-disclosure { gap: 0; padding: 0; overflow: hidden; }
.gamification-guide.page-support-disclosure { gap: 0; overflow: hidden; }

.page-support-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}

.page-support-disclosure > summary > span { display: grid; gap: 3px; }
.page-support-disclosure > summary strong { color: #efffff; }
.page-support-disclosure > summary > i {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(78, 224, 235, 0.42);
  border-radius: 50%;
  color: #6cecf2;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
}

.page-support-disclosure-content { padding: 0 16px 16px; }
.page-support-intro { margin: 0 0 14px; color: #9bb5b4; font-size: 0.78rem; }

@media (max-width: 560px) {
  .page-support-disclosure > summary { min-height: 58px; padding: 11px 13px; }
  .page-support-disclosure-content { padding: 0 12px 12px; }
  .context-info-disclosure.is-inline > div { min-width: calc(100vw - 88px); }
}

/* Abschließende Farbregel: Teilen und Freundesduelle sind Funktionen, keine Werbebanner. */
.training-challenge-button,
#shareTrainingButton,
.training-history-share-button,
.training-history-poster-button,
.training-calendar-social-button {
  border: 1px solid rgba(83, 216, 226, 0.24) !important;
  background: rgba(9, 42, 48, 0.82) !important;
  color: #c4e1e3 !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

.training-challenge-button:hover:not(:disabled),
.training-challenge-button:focus-visible:not(:disabled),
#shareTrainingButton:hover:not(:disabled),
#shareTrainingButton:focus-visible:not(:disabled),
.training-history-share-button:hover:not(:disabled),
.training-history-share-button:focus-visible:not(:disabled),
.training-history-poster-button:hover:not(:disabled),
.training-history-poster-button:focus-visible:not(:disabled),
.training-calendar-social-button:hover:not(:disabled),
.training-calendar-social-button:focus-visible:not(:disabled) {
  border-color: rgba(83, 216, 226, 0.46) !important;
  background: rgba(13, 58, 66, 0.94) !important;
  color: #effcfc !important;
}

.training-calendar-delete-button {
  border-color: rgba(222, 111, 124, 0.24) !important;
  background: rgba(64, 26, 32, 0.42) !important;
  color: #d9b8bd !important;
}

.training-calendar-delete-button:hover,
.training-calendar-delete-button:focus-visible {
  border-color: rgba(222, 111, 124, 0.46) !important;
  background: rgba(79, 31, 39, 0.62) !important;
  color: #f2dfe2 !important;
}
.gamification-latest-success {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(70, 235, 173, 0.48);
  border-radius: 17px;
  background: radial-gradient(circle at 100% 50%, rgba(70, 235, 173, 0.16), transparent 38%), rgba(5, 31, 31, 0.94);
  box-shadow: inset 4px 0 #4be3aa;
}

.gamification-success-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(75, 227, 170, 0.14);
  color: #66f0bc;
  font-size: 1.35rem;
  font-weight: 950;
}

.gamification-latest-success > div { display: grid; gap: 4px; min-width: 0; }
.gamification-latest-success strong { color: #f3fffb; font-size: clamp(1rem, 3vw, 1.2rem); }
.gamification-latest-success p { margin: 0; color: #a8c8c1; font-size: 0.76rem; line-height: 1.45; }
.gamification-latest-success .cockpit-card-eyebrow { color: #58e9af; }
.gamification-guide-grid .gamification-guide-jump {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  cursor: pointer;
}

.gamification-guide-jump > b {
  align-self: center;
  color: #64f0df;
  font-size: 1.1rem;
}

.gamification-guide-jump:hover,
.gamification-guide-jump:focus-visible {
  border-color: rgba(100, 240, 223, 0.72);
  background: rgba(29, 116, 116, 0.2);
  outline: none;
}

#challengeList:focus { outline: 2px solid rgba(100, 240, 223, 0.65); outline-offset: 6px; }

/* Newsfeed als breite Inhaltsansicht statt als schmalen Standarddialog nutzen. */
.modal .modal-box.newsfeed-modal-box {
  width: min(1180px, calc(100vw - 32px));
  padding: clamp(18px, 2.4vw, 30px);
}

.newsfeed-modal-box .activity-feed-list {
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  align-items: start;
}

.newsfeed-modal-box .activity-feed-empty,
.newsfeed-modal-box .newsfeed-item.is-pinned {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .modal.newsfeed-modal {
    padding-inline: 6px;
  }

  .modal .modal-box.newsfeed-modal-box {
    width: calc(100vw - 12px);
    padding: 16px 12px;
    border-radius: 18px;
    scrollbar-gutter: auto;
  }

  .newsfeed-modal-box .cockpit-card-content {
    margin-top: 12px;
  }

  .newsfeed-modal-box .activity-feed-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .newsfeed-modal-box .activity-feed-icon,
  .newsfeed-modal-box .feed-profile-avatar,
  .newsfeed-modal-box .activity-feed-profile-icon .friend-list-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* Portrait-Fullscreen: Zielzone ist ein eigenes Instrument unten links und
   nicht länger Bestandteil der Herzfrequenzkarte. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor {
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
    position: fixed !important;
    z-index: 24;
    right: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: var(--portrait-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px !important;
    width: calc(100vw - (var(--portrait-edge) * 2) - 170px) !important;
    min-width: 146px;
    height: 58px;
    box-sizing: border-box;
    padding: 22px 7px 7px;
    border: 1px solid rgba(46, 211, 226, 0.34);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(5, 33, 39, 0.97), rgba(3, 15, 20, 0.98));
    box-shadow: inset 0 0 18px rgba(28, 211, 225, 0.04), 0 10px 26px rgba(0, 0, 0, 0.38);
    pointer-events: auto;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector::before {
    position: absolute;
    top: 6px;
    left: 9px;
    color: #61dfea;
    content: "ZIELZONE";
    font-size: 0.54rem;
    font-weight: 950;
    letter-spacing: 0.12em;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector .zone-legend-label {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 2px 0 !important;
    border-radius: 7px !important;
    font-size: clamp(0.58rem, 2.6vw, 0.7rem) !important;
  }
}

@media (orientation: portrait) and (max-width: 370px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
    width: calc(100vw - (var(--portrait-edge) * 2) - 162px) !important;
    min-width: 138px;
    gap: 3px !important;
    padding-inline: 6px;
  }
}

/* Finale Hochformat-Grenze: bewusst nach sämtlichen älteren Cockpit-Regeln. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player {
    top: calc(49% + 25px) !important;
    right: var(--portrait-edge) !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
  }

  /* Diese Regel steht absichtlich ganz zuletzt: echtes Zonenkarussell unten links. */
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
    position: fixed !important;
    z-index: 6000004 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: var(--portrait-edge) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 9px !important;
    width: clamp(142px, calc(100vw - 214px), 190px) !important;
    min-width: 142px !important;
    max-width: 190px !important;
    height: 82px !important;
    padding: 29px calc(50% - 27px) 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: calc(50% - 27px) !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-radius: 18px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector::before {
    content: "ZIELZONE · WISCHEN" !important;
    top: 9px !important;
    left: 11px !important;
    pointer-events: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector .zone-legend-label {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    scroll-snap-align: center !important;
    opacity: .48 !important;
    transform: scale(.84) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector .zone-legend-label.is-target-zone {
    opacity: 1 !important;
    transform: scale(1.1) !important;
  }
}

/* Finale Portrait-Geometrie: Mission vollständig in der freien Fläche über
   dem Video; beide Informationskarten bewusst zehn Prozent niedriger. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    position: absolute !important;
    z-index: 6000003 !important;
    top: auto !important;
    right: var(--portrait-edge) !important;
    bottom: calc(51% - 17px) !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 151px !important;
    min-height: 151px !important;
    max-height: 151px !important;
    padding: 10px 40px 8px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top: 124px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    max-width: none !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector::before,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector::before {
    content: none !important;
    display: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector {
    position: fixed !important;
    z-index: 6000004 !important;
    top: auto !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 8px !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector .zone-legend-label {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  /* Temporäre Coachmeldung ersetzt exakt den Informationsblock aus HF und
     Mission. Das Video beginnt darunter und wird nicht verdeckt. */
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    z-index: 9000000 !important;
    top: 124px !important;
    right: var(--portrait-edge) !important;
    bottom: calc(51% + 8px) !important;
    left: var(--portrait-edge) !important;
    inset-inline: var(--portrait-edge) !important;
    width: calc(100% - (2 * var(--portrait-edge))) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    grid-area: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    transform: none !important;
  }
}

/* Muss nach sämtlichen Cockpit-Layern stehen. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay:has(> .virtual-coach-card:not([hidden])) {
  z-index: 9500000 !important;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
  z-index: 9600000 !important;
}

/* Nur das Innenlayout der Coachmeldung: keine Änderung an ihrer Außenbox. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 14px !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) .virtual-coach-face {
    align-self: center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) .virtual-coach-face img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) > div:last-child {
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) small,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) strong {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) strong {
    font-size: clamp(.82rem, 3.5vw, 1rem) !important;
    line-height: 1.28 !important;
    text-wrap: pretty !important;
  }
}

/* Zielzonen-Sperrhinweis über Mission und Video, ohne seine Geometrie zu
   verändern. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #userMessage.show {
  z-index: 9700000 !important;
}

.player-shell:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn {
  z-index: 10000000 !important;
  pointer-events: auto !important;
}

/* Tatsächlich letzte Ohne-Video-Priorität. Der ausführliche, ausschließlich
   auf .is-no-video-training begrenzte Aufbau steht oben; diese Endmarke hebt
   ihn hinter alle historischen Regeln, ohne die Videoansicht zu treffen. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #player,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .local-cast-poster { display: none !important; }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position: absolute !important;
    top: 62px !important;
    bottom: auto !important;
    width: calc((100% - 42px) / 4) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric{right:auto !important;left:var(--portrait-edge) !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric{right:auto !important;left:calc(var(--portrait-edge) + ((100% - 42px)/4) + 6px) !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric{right:auto !important;left:calc(var(--portrait-edge) + (((100% - 42px)/4)*2) + 12px) !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button{
    z-index:10000000 !important;top:auto !important;right:auto !important;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 66px)) !important;
    left:max(12px,env(safe-area-inset-left)) !important;width:166px !important;
    min-width:166px !important;max-width:166px !important;height:48px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position: absolute !important;
    z-index: 120 !important;
    top: 234px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: auto !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid {
    display: contents !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article {
    min-width: 0 !important;
    height: 46px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    grid-column: 1 / -1 !important;
    height: 46px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    top: 124px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    max-width: none !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-live-header,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-zone-cooldown { display: none !important; }

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position: absolute !important;
    z-index: 6000003 !important;
    top: 390px !important;
    right: var(--portrait-edge) !important;
    bottom: auto !important;
    left: var(--portrait-edge) !important;
    width: auto !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    overflow: hidden !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector {
    display: none !important;
  }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    z-index: 10000000 !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
    height: 48px !important;
    transform: none !important;
  }
}

/* ABSOLUT LETZTE OHNE-VIDEO-GEOMETRIE — nicht oberhalb historischer Regeln verschieben. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) { --nv-edge:max(12px,env(safe-area-inset-left)); }

  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:300 !important;top:124px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:96px !important;min-height:96px !important;max-height:96px !important;margin:0 !important;padding:8px !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position:absolute !important;z-index:310 !important;top:230px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-template-rows:42px 46px 46px !important;gap:6px 8px !important;
    width:auto !important;height:146px !important;min-height:146px !important;max-height:146px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel article {position:static !important;inset:auto !important;margin:0 !important;transform:none !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-zone-scale {grid-column:1/-1 !important;grid-row:1 !important;width:100% !important;height:42px !important;min-height:42px !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid {display:contents !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-stat-grid article {grid-row:2 !important;height:46px !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel .no-video-training-target {grid-column:1/-1 !important;grid-row:3 !important;height:46px !important}

  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position:absolute !important;z-index:400 !important;top:386px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:126px !important;min-height:126px !important;max-height:126px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-training-pause-button {
    position:absolute !important;z-index:10000000 !important;top:auto !important;right:auto !important;bottom:max(72px,calc(env(safe-area-inset-bottom) + 66px)) !important;left:var(--nv-edge) !important;
    width:166px !important;min-width:166px !important;max-width:166px !important;height:48px !important;margin:0 !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenToggleTrainingBtn.is-training-active {
    position:absolute !important;z-index:10000000 !important;top:auto !important;right:auto !important;bottom:max(14px,env(safe-area-inset-bottom)) !important;left:var(--nv-edge) !important;
    width:166px !important;min-width:166px !important;max-width:166px !important;height:48px !important;margin:0 !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position:absolute !important;z-index:7000000 !important;top:124px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:96px !important;min-height:96px !important;max-height:96px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
}

/* NO-VIDEO PORTRAIT — finale Bandpositionen (muss Dateiende bleiben). */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    position:absolute !important;z-index:500 !important;top:74px !important;bottom:auto !important;height:62px !important;min-height:62px !important;max-height:62px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:300 !important;top:148px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:92px !important;min-height:92px !important;max-height:92px !important;margin:0 !important;padding:8px !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    position:absolute !important;z-index:310 !important;top:252px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:146px !important;min-height:146px !important;max-height:146px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    position:absolute !important;z-index:400 !important;top:410px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:126px !important;min-height:126px !important;max-height:126px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position:absolute !important;z-index:7000000 !important;top:148px !important;right:var(--nv-edge) !important;bottom:auto !important;left:var(--nv-edge) !important;
    width:auto !important;height:92px !important;min-height:92px !important;max-height:92px !important;margin:0 !important;overflow:hidden !important;transform:none !important;
  }
}

/* OHNE VIDEO: gewünschter Fünf-Zeilen-Aufbau. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top:144px !important;height:124px !important;min-height:124px !important;max-height:124px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    display:block !important;width:100% !important;height:100% !important;min-height:0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    top:216px !important;height:114px !important;min-height:114px !important;max-height:114px !important;
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:52px 52px !important;gap:10px 8px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    grid-column:1/-1 !important;grid-row:1 !important;display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:6px !important;
    width:100% !important;height:52px !important;min-height:52px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    width:auto !important;min-width:0 !important;height:52px !important;min-height:52px !important;margin:0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid {
    grid-column:1/-1 !important;grid-row:2 !important;display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;
    width:100% !important;height:52px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid article {
    width:auto !important;min-width:0 !important;height:52px !important;min-height:52px !important;margin:0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    display:none !important;
  }
  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top:340px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    top:144px !important;height:62px !important;min-height:62px !important;max-height:62px !important;
  }
}

/* OHNE VIDEO: final exakt vier sichtbare Zeilen. */
@media (orientation: portrait) and (max-width: 700px) {
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay {
    position:absolute !important;inset:0 !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
    display:block !important;width:auto !important;min-width:0 !important;max-width:none !important;
    height:auto !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;
    overflow:visible !important;transform:none !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    top:74px !important;width:calc((100% - 36px)/3) !important;height:62px !important;
    min-height:62px !important;max-height:62px !important;margin:0 !important;padding:6px !important;
    box-sizing:border-box !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-pulse-metric {left:12px !important;right:auto !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-zone-metric {left:calc(33.333% + 2px) !important;right:auto !important}
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric {
    display:flex !important;left:auto !important;right:12px !important;border:1px solid rgba(53,211,230,.3) !important;
    border-radius:14px !important;background:rgba(2,15,20,.9) !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric span {
    font-size:1.18rem !important;line-height:1 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenTrainingDurationMetric small {
    order:initial !important;margin:2px 0 0 !important;font-size:.58rem !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-monitor,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    top:144px !important;height:62px !important;min-height:62px !important;max-height:62px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    top:278px !important;height:52px !important;min-height:52px !important;max-height:52px !important;
    display:block !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale {
    display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:6px !important;
    width:100% !important;height:52px !important;min-height:52px !important;margin:0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-zone-scale .zone-legend-label {
    width:auto !important;height:52px !important;min-height:52px !important;margin:0 !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-stat-grid,
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-training-target {
    display:none !important;
  }
  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview {
    top:340px !important;height:139px !important;min-height:139px !important;max-height:139px !important;
  }
  .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .mission-training-overview {
    top:412px !important;
  }
  .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    top:340px !important;height:62px !important;min-height:62px !important;max-height:62px !important;
  }
}

/* LANDSCAPE MIT VIDEO: feste videofreie HUD-Spalte rechts.
   Hochformat und Training ohne Medium bleiben unberührt. */
@media (orientation: landscape) {
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) {
    --video-landscape-rail: clamp(250px, 31vw, 330px);
    overflow: hidden !important;
    background: #02080b !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)::before {
    content: "" !important;
    position: absolute !important;
    z-index: 20 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--video-landscape-rail) !important;
    border-left: 1px solid rgba(52, 215, 229, .24) !important;
    background: linear-gradient(160deg, rgba(7,29,35,.99), rgba(2,9,13,1)) !important;
    box-shadow: -18px 0 42px rgba(0,0,0,.38) !important;
    pointer-events: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #player,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .local-cast-poster {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: var(--video-landscape-rail) !important;
    bottom: 0 !important;
    left: 0 !important;
    width: calc(100% - var(--video-landscape-rail)) !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay {
    position: absolute !important;
    z-index: 30 !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > * {
    pointer-events: auto !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle {
    position: absolute !important;
    z-index: 210 !important;
    top: 12px !important;
    width: 42px !important;
    height: 42px !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn { right: 12px !important; }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status { right: 62px !important; }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle { right: 112px !important; }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    position: absolute !important;
    z-index: 80 !important;
    top: 58px !important;
    bottom: auto !important;
    width: calc((var(--video-landscape-rail) - 32px) / 3) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    border: 1px solid rgba(53,211,230,.28) !important;
    border-radius: 13px !important;
    background: rgba(2,15,20,.94) !important;
    transform: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    right:auto !important;left:calc(100% - var(--video-landscape-rail) + 12px) !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    right:auto !important;left:calc(100% - var(--video-landscape-rail) + ((var(--video-landscape-rail) - 32px) / 3) + 16px) !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric { right: 12px !important; left: auto !important; }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position: absolute !important;
    z-index: 80 !important;
    top: 114px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(var(--video-landscape-rail) - 24px) !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position: absolute !important;
    z-index: 190 !important;
    top: 114px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(var(--video-landscape-rail) - 24px) !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    position: absolute !important;
    z-index: 90 !important;
    top: 190px !important;
    right: 12px !important;
    bottom: 104px !important;
    left: auto !important;
    width: calc(var(--video-landscape-rail) - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 11px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
    position: absolute !important;
    z-index: 200 !important;
    top: auto !important;
    right: 12px !important;
    bottom: 56px !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    gap: 4px !important;
    width: calc(var(--video-landscape-rail) - 24px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-zone-selector .zone-legend-label {
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button,
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    position: absolute !important;
    z-index: 210 !important;
    top: auto !important;
    bottom: 12px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-training-pause-button {
    right: calc(var(--video-landscape-rail) / 2 + 4px) !important;
    left: auto !important;
    width: calc(var(--video-landscape-rail) / 2 - 16px) !important;
  }
  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenToggleTrainingBtn.is-training-active {
    right: 12px !important;
    left: auto !important;
    width: calc(var(--video-landscape-rail) / 2 - 16px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {
    z-index: 210 !important;
    right: calc(var(--video-landscape-rail) + 12px) !important;
    bottom: 12px !important;
  }
}


/* LANDSCAPE-VIDEO: verbindliche Endpositionen in der rechten Rail. */
@media (orientation: landscape) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    position:absolute !important;top:58px !important;right:auto !important;bottom:auto !important;
    left:calc(100% - var(--video-landscape-rail) + 12px) !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    position:absolute !important;top:58px !important;right:auto !important;bottom:auto !important;
    left:calc(100% - var(--video-landscape-rail) + ((var(--video-landscape-rail) - 32px)/3) + 16px) !important;
    display:flex !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    position:absolute !important;top:58px !important;right:12px !important;bottom:auto !important;left:auto !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:80 !important;top:114px !important;right:12px !important;bottom:auto !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;height:68px !important;min-height:68px !important;max-height:68px !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    position:absolute !important;z-index:190 !important;top:114px !important;right:12px !important;bottom:auto !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;height:68px !important;min-height:68px !important;max-height:68px !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    position:absolute !important;top:190px !important;right:12px !important;bottom:104px !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;height:auto !important;min-height:0 !important;max-height:none !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) > #heartRateZoneSelector,
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor .heart-rate-zone-selector {
    position:absolute !important;top:auto !important;right:12px !important;bottom:56px !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;
  }
}

/* Landscape mit Video: explizite Zielpositionen der drei Live-Elemente. */
@media (orientation: landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {
    position:absolute !important;z-index:230 !important;top:10px !important;bottom:auto !important;left:auto !important;
    width:36px !important;height:36px !important;margin:0 !important;transform:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenSettingsBtn {right:8px !important}
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-bluetooth-status {right:50px !important}
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenHudToggle {right:92px !important}
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-cast-btn {
    right:134px !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .pocket-mode-btn {right:176px !important}
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-btn {right:218px !important}
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay {
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
    margin:0 !important;padding:0 !important;transform:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-pulse-metric {
    position:absolute !important;z-index:220 !important;top:64px !important;
    right:calc((var(--video-landscape-rail) - 28px)/2 + 16px) !important;bottom:auto !important;left:auto !important;
    width:calc((var(--video-landscape-rail) - 28px)/2) !important;height:54px !important;
    min-width:0 !important;max-width:none !important;margin:0 !important;transform:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) #fullscreenTrainingDurationMetric {
    position:absolute !important;z-index:220 !important;top:64px !important;
    right:12px !important;bottom:auto !important;left:auto !important;
    width:calc((var(--video-landscape-rail) - 28px)/2) !important;height:54px !important;
    min-width:0 !important;max-width:none !important;margin:0 !important;transform:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .heart-rate-monitor,
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training):has(.virtual-coach-card:not([hidden])) .heart-rate-monitor {
    position:absolute !important;z-index:210 !important;top:128px !important;
    right:12px !important;bottom:auto !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;height:92px !important;
    min-width:0 !important;max-width:none !important;min-height:92px !important;max-height:92px !important;
    margin:0 !important;transform:none !important;overflow:hidden !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-zone-metric {
    display:none !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .virtual-coach-card:not([hidden]) {
    top:128px !important;right:12px !important;left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;height:92px !important;
    min-height:92px !important;max-height:92px !important;
  }
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .mission-training-overview {
    top:198px !important;
    bottom:112px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    position:absolute !important;
    z-index:9000000 !important;
    top:64px !important;
    right:12px !important;
    bottom:112px !important;
    left:auto !important;
    width:calc(var(--video-landscape-rail) - 24px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:16px !important;
    box-sizing:border-box !important;
    overflow:auto !important;
    transform:none !important;
    border:1px solid rgba(64,220,234,.72) !important;
    background:#061419 !important;
    box-shadow:0 18px 48px rgba(0,0,0,.72),inset 0 0 30px rgba(29,205,224,.06) !important;
    opacity:1 !important;
    backdrop-filter:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) .virtual-coach-face {
    width:72px !important;
    min-width:72px !important;
    height:72px !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) strong {
    font-size:clamp(.88rem,1.5vw,1.05rem) !important;
    line-height:1.3 !important;
  }
}

/* Finaler Landscape-Video-Override: Coachmeldung deckt die Rail vollständig ab. */
@media (orientation:landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden]) {
    top:58px !important;
    right:6px !important;
    bottom:106px !important;
    width:calc(var(--video-landscape-rail) - 12px) !important;
    isolation:isolate !important;
    background:#061419 !important;
    background-image:none !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    box-shadow:0 0 0 8px #061419,0 18px 48px rgba(0,0,0,.72) !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training) .fullscreen-overlay > .virtual-coach-card:not([hidden])::before {
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    inset:-8px !important;
    display:block !important;
    border-radius:inherit !important;
    background:#061419 !important;
    opacity:1 !important;
    pointer-events:none !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .fullscreen-overlay > .virtual-coach-card:not([hidden]) .virtual-coach-face {
    width:82px !important;
    min-width:82px !important;
    height:82px !important;
  }
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .fullscreen-overlay > .virtual-coach-card:not([hidden]) strong {
    font-size:clamp(.95rem,1.7vw,1.18rem) !important;
    line-height:1.32 !important;
  }
}

/* LETZTE REGEL: Bluetooth-Dialog scrollt innerhalb der sichtbaren Shell. */
@media (orientation:landscape) {
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview {
    top:190px !important;
    bottom:104px !important;
  }
}
.player-shell > .startup-gate.is-player-bluetooth-gate {
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card {
  flex:0 1 auto !important;
  width:min(100%,420px) !important;
  height:calc(100% - 24px) !important;
  min-height:0 !important;
  max-height:calc(100% - 24px) !important;
  margin:0 !important;
  padding-bottom:24px !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  overflow-y:scroll !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  pointer-events:auto !important;
  scrollbar-width:auto !important;
  scrollbar-color:#35cfe0 rgba(255,255,255,.08) !important;
  -webkit-overflow-scrolling:touch !important;
}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar {width:10px}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar-thumb {border:2px solid transparent;border-radius:999px;background:#35cfe0;background-clip:padding-box}
.player-shell > .startup-gate.is-player-bluetooth-gate > .startup-gate-card::-webkit-scrollbar-track {background:rgba(255,255,255,.06)}

/* ABSCHLIESSEND freigegeben: Portrait-Fullscreen ohne Video. */
@media (orientation: portrait) and (max-width: 700px) {
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    position:absolute !important; z-index:10000001 !important; top:auto !important;
    width:42px !important; height:42px !important; margin:0 !important; transform:none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {
    bottom:max(14px,env(safe-area-inset-bottom)) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenSettingsBtn {right:62px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-bluetooth-status {right:12px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn {
    bottom:max(64px,calc(env(safe-area-inset-bottom) + 50px)) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-cast-btn {right:62px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .pocket-mode-btn {right:12px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {
    bottom:max(114px,calc(env(safe-area-inset-bottom) + 100px)) !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) #fullscreenHudToggle {right:62px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-btn {right:12px !important}
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
    width:100% !important; height:100% !important; min-height:0 !important;
    transform:none !important; transform-origin:center !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector {
    position:fixed !important;
    z-index:10000002 !important;
    top:auto !important;
    right:auto !important;
    bottom:max(126px,calc(env(safe-area-inset-bottom) + 112px)) !important;
    left:max(12px,env(safe-area-inset-left)) !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    pointer-events:auto !important;
    touch-action:pan-x !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector::before {
    content:none !important;
    display:none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > #heartRateZoneSelector .zone-legend-label {
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    pointer-events:auto !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .training-countdown-overlay:not([hidden]) {
    z-index:2147483647 !important;
  }

  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .no-video-live-panel {
    display:none !important;
  }
  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen) .mission-training-overview,
  body .player-shell.is-no-video-training.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):has(.virtual-coach-card:not([hidden])) .mission-training-overview {
    position:absolute !important;
    top:278px !important;
    right:12px !important;
    bottom:auto !important;
    left:12px !important;
    width:auto !important;
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
    margin:0 !important;
    transform:none !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]),
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > .virtual-coach-card:not([hidden]) {
    position:absolute !important;
    z-index:7000000 !important;
    top:478px !important;
    right:12px !important;
    bottom:auto !important;
    left:12px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:213px !important;
    min-height:213px !important;
    max-height:213px !important;
    margin:0 !important;
    padding:16px !important;
    transform:none !important;
    overflow:auto !important;
    align-items:flex-start !important;
    gap:14px !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) .virtual-coach-face,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > .virtual-coach-card:not([hidden]) .virtual-coach-face {
    flex:0 0 62px !important;
    width:62px !important;
    min-width:62px !important;
    height:62px !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) > div:last-child,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > .virtual-coach-card:not([hidden]) > div:last-child {
    min-width:0 !important;
    padding-top:3px !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) small,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > .virtual-coach-card:not([hidden]) small {
    font-size:.72rem !important;
    letter-spacing:.12em !important;
  }
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) .fullscreen-overlay > .virtual-coach-card:not([hidden]) strong,
  body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen) > .virtual-coach-card:not([hidden]) strong {
    margin-top:7px !important;
    font-size:clamp(1rem, 4vw, 1.24rem) !important;
    line-height:1.35 !important;
  }
}

/* Die Mechanik braucht lesbare Karten; Trophäen stehen als eigener Bereich darunter. */
.coaching-usp-content .gamification-guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coaching-usp-content .gamification-guide-grid article {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 112px;
  box-sizing: border-box;
}

.gamification-trophy-entry {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.gamification-trophy-entry .gamification-trophy-button {
  min-height: 76px;
  padding: 14px 18px;
  border-color: rgba(244, 197, 80, .5);
  background: radial-gradient(circle at 0 50%, rgba(244, 197, 80, .15), transparent 34%), linear-gradient(120deg, rgba(28, 37, 30, .96), rgba(7, 25, 30, .96));
  box-shadow: inset 3px 0 #f4c550, 0 12px 28px rgba(0, 0, 0, .2);
}

@media (max-width: 560px) {
  .coaching-usp-content .gamification-guide-grid {
    grid-template-columns: 1fr;
  }

  .coaching-usp-content .gamification-guide-grid article {
    min-height: 0;
  }
}

#activationPrimaryCta {
  width: min(330px, 100%);
}

/* Die beiden primären Trainingswege bilden optisch und geometrisch ein Paar. */
.app > .primary-training-navigation-card {
  --primary-navigation-accent: var(--color-primary);
  box-sizing: border-box;
  gap: 0;
  border-color: color-mix(in srgb, var(--primary-navigation-accent) 30%, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary-navigation-accent) 11%, transparent), transparent 34%),
    linear-gradient(155deg, rgba(6, 28, 34, 0.98), rgba(5, 16, 21, 0.98));
}

.app > .primary-training-navigation-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
}

.app > .primary-training-navigation-card > summary > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.app > .primary-training-navigation-card > summary .cockpit-card-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--primary-navigation-accent) 70%, #baf7f5);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.13em;
}

.app > .primary-training-navigation-card > summary h2 {
  margin: 0 !important;
  color: #f4ffff;
  font-size: clamp(1.55rem, 4.2vw, 2rem) !important;
  font-weight: 820;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
}

.app > .primary-training-navigation-card > summary .cockpit-card-toggle-icon,
.app > .primary-training-navigation-card > summary .training-history-toggle-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(55, 213, 226, 0.08);
  border-radius: 14px;
  background: rgba(0, 188, 245, 0.12);
  color: var(--primary-navigation-accent);
  font-size: 0.9rem;
}

.app > .primary-training-navigation-card:not([open]) > summary .cockpit-card-toggle-icon,
.app > .primary-training-navigation-card:not([open]) > summary .training-history-toggle-icon {
  transform: rotate(-90deg);
}

.app > .primary-training-navigation-card[open] > summary {
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-navigation-accent) 20%, transparent);
}

.app > .primary-training-navigation-card > .cockpit-card-content,
.app > .primary-training-navigation-card > .training-history-content {
  margin-top: 18px;
}

@media (max-width: 430px) {
  .app > .primary-training-navigation-card > summary {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
  }

  .app > .primary-training-navigation-card > summary h2 {
    font-size: clamp(1.35rem, 7vw, 1.7rem) !important;
  }

  .app > .primary-training-navigation-card > summary .cockpit-card-toggle-icon,
  .app > .primary-training-navigation-card > summary .training-history-toggle-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* Die HF-Zoomstufe entsteht in der Canvas-Zeichenlogik. Das Canvas selbst
   bleibt in jeder Fullscreen-Shell vollständig sichtbar. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen) .heart-rate-line {
  display:block !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
}

/* Live-Zielzonentreue bleibt bei Trainings mit und ohne Video sichtbar. */
.fullscreen-zone-metric .fullscreen-live-adherence {
  margin-top:5px;
  color:#b8c9ce;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.fullscreen-zone-metric .fullscreen-live-adherence strong {
  display:inline;
  color:#63e6a8;
  font-size:12px;
  font-weight:900;
}

/* Definitive letzte Portrait-Regel: Mission und Coach teilen den verfügbaren
   Raum; die Coachkarte darf nicht auf die alte 62-px-Zeile zurückfallen. */
@media (orientation: portrait) and (max-width: 700px) {
  html body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen)
    #fullscreenOverlay > #virtualCoachCard.virtual-coach-card:not([hidden]) {
    height:213px !important;
    min-height:213px !important;
    max-height:213px !important;
    overflow:auto !important;
  }

  html body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen)
    #fullscreenPulseValue {
    /* Exakt 70 % der bisherigen Portrait-Werte: 4.2rem / 24vw / 6.2rem. */
    font-size:clamp(2.94rem, 16.8vw, 4.34rem) !important;
  }
}

/* Fokusmodus: Video und der Schalter zum Wiedereinblenden bleiben allein. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen).is-hud-hidden
  > :not(#player):not(#localCastPoster):not(#fullscreenHudToggle) {
  display:none !important;
}
.player-shell:is(:fullscreen, .is-simulated-fullscreen).is-hud-hidden::before,
.player-shell:is(:fullscreen, .is-simulated-fullscreen).is-hud-hidden::after {
  display:none !important;
  content:none !important;
}

/* Ohne Video im Querformat: Trainingszeit proportional um 20 % verkleinern. */
@media (orientation: landscape) {
  html body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen)
    #fullscreenTrainingDurationMetric span {
    font-size:clamp(1.44rem, 3.2vw, 2.16rem) !important;
  }

  html body .player-shell.is-no-video-training:is(:fullscreen, .is-simulated-fullscreen)
    #fullscreenToggleTrainingBtn.is-training-active {
    /* 140 % der bisherigen Querformat-Werte. */
    font-size:clamp(.868rem, 1.47vw, 1.092rem) !important;
  }
}

/* Angenommene Freundes-Challenges bleiben im Challenge-Bereich sichtbar und
   werden im Trainingssetup als bewusst übernehmbares Ziel angeboten. */
.accepted-training-challenges {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(248, 196, 55, .38);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(248, 196, 55, .10), rgba(5, 24, 29, .92) 48%);
}
.accepted-training-challenges[hidden],
.accepted-challenge-training-suggestion[hidden] { display: none !important; }
.accepted-training-challenges > header { display: grid; gap: 3px; margin-bottom: 12px; }
.accepted-training-challenges > header strong { color: #f7fbfc; font-size: 1.02rem; }
.accepted-training-challenge-list { display: grid; gap: 10px; }
.accepted-training-challenge-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(91, 220, 229, .22);
  border-radius: 14px;
  background: rgba(3, 18, 22, .72);
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.accepted-training-challenge-card:hover,
.accepted-training-challenge-card:focus-visible {
  border-color: rgba(248, 205, 72, .82);
  background: rgba(13, 36, 39, .96);
  box-shadow: 0 0 0 3px rgba(248, 205, 72, .12);
  outline: none;
}
.accepted-training-challenge-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #171408;
  font-size: 1.15rem;
  background: linear-gradient(145deg, #ffe26f, #e5ad22);
  border-radius: 13px;
}
.accepted-training-challenge-card div { display: grid; min-width: 0; gap: 2px; }
.accepted-training-challenge-card small { color: #f4ca51; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.accepted-training-challenge-card strong { color: #f7fbfc; font-size: .98rem; }
.accepted-training-challenge-card p { margin: 2px 0 0; color: #a9bcc0; font-size: .78rem; line-height: 1.4; }
.accepted-training-challenge-chevron { color: #f5cb4d; font-size: 1.55rem; line-height: 1; }

.accepted-challenge-detail-card { width: min(500px, 100%); padding: 24px; border-color: rgba(248, 203, 67, .5); background: linear-gradient(145deg, #09232a, #06171b 62%); }
.accepted-challenge-detail-card > h2 { margin: 7px 48px 4px 0; color: #f8fcfd; }
.accepted-challenge-detail-opponent { margin: 0 0 16px; color: #b7c8cc; }
.accepted-challenge-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.accepted-challenge-detail-facts > div { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(72, 205, 218, .2); border-radius: 13px; background: rgba(3, 17, 21, .68); }
.accepted-challenge-detail-facts dt { color: #8ea9ae; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.accepted-challenge-detail-facts dd { margin: 0; color: #f7ca46; font-size: 1rem; font-weight: 900; }
.accepted-challenge-detail-rule { margin: 14px 0; padding: 12px; color: #c1d1d4; font-size: .84rem; line-height: 1.5; border-left: 3px solid #42d7e6; background: rgba(50, 188, 203, .07); }
.accepted-challenge-detail-actions { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(0, 1.35fr); gap: 10px; }
.accepted-challenge-detail-actions > button { min-height: 48px; border-radius: 13px; font-weight: 850; }
#startAcceptedChallengeTrainingButton { color: #06191d; border: 0; background: linear-gradient(135deg, #57e1ed, #20bdd4); cursor: pointer; }

.accepted-challenge-training-suggestion {
  display: grid;
  gap: 9px;
  margin: 12px 0 18px;
  padding: 15px;
  border: 1px solid rgba(248, 196, 55, .48);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(61, 50, 11, .48), rgba(4, 24, 29, .96) 55%);
  box-shadow: inset 3px 0 0 #f5c43a;
}
.accepted-challenge-training-suggestion.is-applied { border-color: rgba(58, 222, 196, .7); box-shadow: inset 3px 0 0 #39dec4, 0 0 18px rgba(57, 222, 196, .10); }
.accepted-challenge-training-suggestion > small { color: #f5ca4b; font-size: .69rem; font-weight: 900; letter-spacing: .11em; }
.accepted-challenge-training-suggestion > strong { color: #f8fcfd; font-size: 1.03rem; }
.accepted-challenge-training-suggestion > p { margin: 0; color: #b7c8cc; font-size: .82rem; line-height: 1.45; }
.accepted-challenge-training-suggestion > label { color: #dce8ea; font-size: .78rem; font-weight: 800; }
.accepted-challenge-training-suggestion > select { width: 100%; min-width: 0; }
.accepted-challenge-training-suggestion > button {
  min-height: 46px;
  padding: 10px 14px;
  color: #06191d;
  font-weight: 900;
  background: linear-gradient(135deg, #f8d85c, #e7af28);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.accepted-challenge-training-suggestion > button[data-applied="true"] {
  color: #031916;
  background: linear-gradient(135deg, #78f0d5, #35d2b2);
  box-shadow: 0 0 0 3px rgba(66, 224, 194, .16), 0 0 22px rgba(66, 224, 194, .24);
}
.training-goal-choice label.challenge-zone-confirmed > span {
  border-color: #55e5c9;
  box-shadow: 0 0 0 3px rgba(68, 224, 194, .18), 0 0 24px rgba(68, 224, 194, .18);
}
#acceptedChallengeTrainingStatus { min-height: 1.2em; color: #73ebd1; font-size: .76rem; font-weight: 750; line-height: 1.4; }

@media (max-width: 430px) {
  .accepted-training-challenges,
  .accepted-challenge-training-suggestion { padding: 13px; }
  .accepted-training-challenge-card { grid-template-columns: 38px minmax(0, 1fr) 18px; }
  .accepted-training-challenge-icon { width: 38px; height: 38px; }
  .accepted-challenge-detail-facts { grid-template-columns: 1fr 1fr; }
  .accepted-challenge-detail-actions { grid-template-columns: 1fr; }
}

/* VIDEO-PORTRAIT: Die wichtigste Abschlussaktion sitzt daumennah direkt
   über dem Zonenkarussell. Die Live-Zieltreue bleibt in der Zonenkarte auch
   bei kleinen Displays als klarer Prozentwert lesbar. */
@media (orientation: portrait) and (max-width: 700px) {
  html body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    #fullscreenToggleTrainingBtn.is-training-active {
    position: fixed !important;
    z-index: 10000000 !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 72px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    font-size: clamp(.76rem, 3.2vw, .9rem) !important;
    line-height: 1.1 !important;
    transform: none !important;
  }

  html body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .fullscreen-zone-metric .fullscreen-live-adherence {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    color: #f4fbfd !important;
    font-size: clamp(.62rem, 2.5vw, .74rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px #000 !important;
  }

  html body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .fullscreen-zone-metric .fullscreen-live-adherence strong {
    display: inline !important;
    color: #63e6a8 !important;
    font-size: clamp(.92rem, 3.8vw, 1.12rem) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }
}

/* Finale Kaskade für den dreistufigen Aktivierungsablauf. */
.activation-step-grid { gap: 16px; }
.activation-step-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  min-height: 244px;
  padding: 24px;
  overflow: visible;
  border-color: rgba(41, 211, 234, .28);
  background: radial-gradient(circle at 100% 0, rgba(35,216,238,.08), transparent 42%), linear-gradient(155deg,#0b1c20,#071518);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 36px rgba(0,0,0,.2);
}
.activation-step-grid article > b {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg,#16414a,#0c2a31);
  box-shadow: inset 0 0 0 1px rgba(65,225,241,.12);
  font-size: 1rem;
}
.activation-step-grid article > div { display:flex; min-width:0; flex-direction:column; align-items:stretch; }
.activation-step-grid article div > span { line-height:1.2; }
.activation-step-grid h3 { margin:7px 0 10px; color:#f7fcfd; font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.18; }
.activation-step-grid p { margin:0 0 20px; color:#a9bec2; line-height:1.5; }
.activation-step-grid article > div > button { width:100%; margin-top:auto; }
.activation-goals { display:grid; grid-template-columns:1fr; gap:8px; margin-top:auto; }
.activation-goals button {
  position:relative;
  width:100%;
  min-height:38px;
  padding:7px 38px 7px 14px;
  border-color:rgba(42,210,230,.24);
  border-radius:12px;
  color:#cde1e4;
  background:rgba(3,17,21,.66);
  text-align:left;
  line-height:1.15;
}
.activation-goals button::after {
  position:absolute;
  top:50%;
  right:14px;
  width:9px;
  height:9px;
  border:1px solid rgba(109,225,237,.48);
  border-radius:50%;
  content:"";
  transform:translateY(-50%);
}
.activation-goals button.is-active {
  border-color:#45deed;
  color:#fff;
  background:linear-gradient(135deg,rgba(24,91,101,.92),rgba(12,55,63,.94));
  box-shadow:inset 3px 0 #4be5f2,0 8px 18px rgba(17,174,195,.12);
}
.activation-goals button.is-active::after { border-color:#72f3ff; background:#50e5f2; box-shadow:0 0 0 4px rgba(80,229,242,.12); }
@media (min-width:801px) {
  .activation-step-grid article:not(:last-child)::after {
    position:absolute;
    z-index:2;
    top:50%;
    right:-25px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid rgba(44,218,237,.3);
    border-radius:50%;
    color:#62e7f3;
    background:#07171a;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    content:"›";
    font-size:1.35rem;
    transform:translateY(-50%);
  }
}
@media (max-width:800px) {
  .activation-step-grid article { min-height:0; padding:20px; }
  .activation-step-grid article > div > button,
  .activation-goals { margin-top:14px; }
}
/* ===== PROFILMENÜ · RUHIGE CHECKPULSE-HIERARCHIE ===== */
.settings-panel[data-panel-mode="profile"] {
  width: min(430px, calc(100vw - 24px));
  padding: 0 18px 20px;
  border-color: rgba(68, 220, 229, .28);
  background:
    radial-gradient(circle at 78% -8%, rgba(38, 211, 221, .13), transparent 31%),
    linear-gradient(180deg, #0d181c 0%, #0a1115 100%);
  box-shadow: 0 28px 85px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .035);
  scrollbar-color: rgba(71, 216, 225, .42) transparent;
}

.settings-panel[data-panel-mode="profile"] > .settings-panel-title {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 -18px 18px;
  padding: 19px 62px 16px 20px;
  border-bottom: 1px solid rgba(72, 207, 219, .17);
  background: rgba(9, 20, 24, .9);
  backdrop-filter: blur(18px);
}

.settings-panel[data-panel-mode="profile"] > .settings-panel-title::after {
  position: absolute;
  right: 62px;
  bottom: -1px;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent 72%);
  content: "";
  opacity: .58;
}

.settings-panel[data-panel-mode="profile"] > .settings-panel-title h2 {
  font-size: 1.45rem;
  letter-spacing: -.025em;
}

.settings-panel[data-panel-mode="profile"] > .modal-close-btn {
  position: sticky;
  top: 12px;
  z-index: 10;
  float: right;
  width: 42px;
  height: 42px;
  margin: 7px 0 -49px;
  border: 1px solid rgba(114, 228, 235, .2);
  border-radius: 14px;
  background: rgba(17, 38, 43, .9);
}

.settings-panel[data-panel-mode="profile"] #publicAthleteProfile {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: none;
}

.settings-panel[data-panel-mode="profile"] #publicAthleteProfile > .settings-eyebrow {
  display: none;
}

.settings-panel[data-panel-mode="profile"] .athlete-account-card {
  min-height: 104px;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border-color: rgba(67, 220, 229, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 28%, rgba(42, 220, 229, .18), transparent 34%),
    linear-gradient(135deg, rgba(17, 54, 61, .86), rgba(9, 26, 31, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .2);
}

.settings-panel[data-panel-mode="profile"] .athlete-avatar {
  width: 78px;
  height: 78px;
  border-color: rgba(222, 252, 255, .92);
  box-shadow: 0 0 0 4px rgba(57, 213, 223, .12), 0 8px 24px rgba(0, 0, 0, .42);
}

.settings-panel[data-panel-mode="profile"] .athlete-account-identity h3 {
  padding-right: 56px;
  font-size: 1.25rem;
}

.settings-panel[data-panel-mode="profile"] .athlete-account-identity .auth-status {
  margin: 5px 0 0;
  color: #b5c9cb;
  font-size: .72rem;
  line-height: 1.45;
}

.settings-panel[data-panel-mode="profile"] .athlete-account-mode {
  top: 15px;
  right: 15px;
  border: 1px solid rgba(108, 232, 221, .18);
  background: rgba(4, 18, 22, .58);
}

.settings-panel[data-panel-mode="profile"] .athlete-username-edit-button {
  grid-column: 2;
  justify-self: start;
  margin: -8px 0 0;
  padding: 4px 9px;
  border: 1px solid rgba(65, 214, 224, .18);
  border-radius: 999px;
  background: rgba(43, 198, 208, .065);
  font-size: .64rem;
  line-height: 1.2;
}

.settings-panel[data-panel-mode="profile"] .athlete-account-card > .athlete-username-form {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  border-color: rgba(67, 220, 229, .22);
  background: rgba(3, 18, 22, .48);
}

.settings-panel[data-panel-mode="profile"] .coach-mood-card {
  margin-top: 0;
  padding: 15px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--coach-mood-color) 13%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(19, 39, 44, .9), rgba(10, 24, 29, .9));
}

.settings-panel[data-panel-mode="profile"] .athlete-progression-card {
  gap: 9px;
}

.settings-panel[data-panel-mode="profile"] .athlete-progression-tile {
  min-height: 91px;
  display: grid;
  align-content: center;
  padding: 11px 8px;
  border-color: rgba(104, 207, 215, .14);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(25, 49, 55, .8), rgba(12, 28, 33, .82));
}

.settings-panel[data-panel-mode="profile"] .athlete-progression-tile > span {
  color: #8da8ab;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.settings-panel[data-panel-mode="profile"] .athlete-progression-tile > strong {
  margin-top: 3px;
  color: #edffff;
  font-size: 1rem;
}

.settings-panel[data-panel-mode="profile"] .trophy-collection-card,
.settings-panel[data-panel-mode="profile"] #friendsSettingsCard,
.settings-panel[data-panel-mode="profile"] #liveTrainingSharingSettings {
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.settings-panel[data-panel-mode="profile"] #friendsSettingsCard,
.settings-panel[data-panel-mode="profile"] #liveTrainingSharingSettings {
  margin-bottom: 12px;
  padding: 0;
  border-color: rgba(66, 204, 214, .18);
  background: linear-gradient(145deg, rgba(20, 42, 48, .72), rgba(10, 25, 30, .72));
}

.settings-panel[data-panel-mode="profile"] #friendsSettingsCard > .private-account-heading,
.settings-panel[data-panel-mode="profile"] #liveTrainingSharingSettings > .private-account-heading {
  min-height: 72px;
  padding: 12px 16px;
}

.settings-panel[data-panel-mode="profile"] #friendsSettingsContent,
.settings-panel[data-panel-mode="profile"] #privacyCenterContent {
  padding: 2px 16px 16px;
  border-top: 1px solid rgba(77, 205, 215, .12);
}

.settings-panel[data-panel-mode="profile"] .settings-account-actions {
  gap: 9px;
  margin-top: 20px;
  padding: 18px 2px 2px;
}

.settings-panel[data-panel-mode="profile"] #profileDeleteAccountButton {
  border-color: rgba(167, 139, 250, .42);
  background: linear-gradient(145deg, rgba(113, 79, 190, .18), rgba(67, 43, 126, .12));
  color: #c9b8ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 0 20px rgba(139, 92, 246, .07);
}

.settings-panel[data-panel-mode="profile"] #profileDeleteAccountButton:hover,
.settings-panel[data-panel-mode="profile"] #profileDeleteAccountButton:focus-visible {
  border-color: rgba(190, 165, 255, .72);
  background: linear-gradient(145deg, rgba(126, 87, 211, .3), rgba(78, 48, 145, .22));
  color: #eee9ff;
}

@media (max-width: 520px) {
  .settings-panel[data-panel-mode="profile"] {
    top: 0;
    right: 0;
    width: 100vw;
    max-height: calc(100dvh - 74px);
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
  }

  .settings-panel[data-panel-mode="profile"] .athlete-account-card {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 15px;
  }

  .settings-panel[data-panel-mode="profile"] .athlete-avatar {
    width: 68px;
    height: 68px;
  }
}
/* ===== ENDE PROFILMENÜ ===== */

/* Freundesavatars innerhalb des Profil-Panels werden durch dessen generelle
   78px-Avatarregel vergrößert. Die eigene feste Spalte verhindert, dass der
   Username unter dieses Profilbild rutscht. */
.settings-panel[data-panel-mode="profile"] .friend-profile-trigger {
  grid-template-columns: 90px minmax(0, 1fr) auto;
  column-gap: 12px;
  min-height: 100px;
}

.settings-panel[data-panel-mode="profile"] .friend-profile-trigger > .friend-list-avatar {
  width: 78px;
  height: 78px;
  min-width: 78px;
  padding: 0;
  justify-self: start;
}

@media (max-width: 520px) {
  .settings-panel[data-panel-mode="profile"] .friend-profile-trigger {
    grid-template-columns: 80px minmax(0, 1fr) auto;
  }

  .settings-panel[data-panel-mode="profile"] .friend-profile-trigger > .friend-list-avatar {
    width: 68px;
    height: 68px;
    min-width: 68px;
  }
}
.avatar-person-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.avatar-person-preset-grid > button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 10px;
  min-width: 0;
  padding: 9px;
  color: #effcff;
  text-align: left;
  background: rgba(7, 24, 28, 0.88);
  border: 1px solid rgba(69, 208, 224, 0.24);
  border-radius: 14px;
  cursor: pointer;
}

.avatar-person-preset-grid > button:hover,
.avatar-person-preset-grid > button.is-selected {
  border-color: #28d4ee;
  background: linear-gradient(135deg, rgba(22, 98, 108, 0.44), rgba(8, 29, 34, 0.96));
  box-shadow: 0 0 0 2px rgba(40, 212, 238, 0.13);
}

.avatar-person-preset-portrait {
  grid-row: 1 / 3;
  width: 54px;
  aspect-ratio: 1;
  background: #061317 center 10% / 145% auto no-repeat;
  border: 1px solid rgba(84, 228, 242, 0.42);
  border-radius: 50%;
}

.avatar-person-preset-grid strong,
.avatar-person-preset-grid small { min-width: 0; }
.avatar-person-preset-grid strong { font-size: 0.82rem; }
.avatar-person-preset-grid small { color: #99adb2; font-size: 0.68rem; }
.avatar-person-preset-note { margin: 10px 0 0; color: #8ea5aa; font-size: 0.72rem; line-height: 1.45; }

@media (max-width: 420px) {
  .avatar-person-preset-grid { grid-template-columns: 1fr; }
}

/* Nur der Chevron rotiert beim Öffnen – Logo und Beschriftung bleiben stabil. */
.training-history-share-menu[open] > summary > .training-history-share-mark,
.training-history-share-menu[open] > summary > .training-history-share-heading {
  transform: none !important;
}
.training-history-share-menu[open] > summary > .training-history-share-chevron {
  transform: rotate(180deg) !important;
}

/* Trainingshistorie: Jede Einheit startet platzsparend geschlossen. Datum,
   Dauer und Zielzone bleiben im Akkordeonkopf jederzeit sichtbar. */
details.training-history-card {
  padding: 0;
}

details.training-history-card > summary.training-history-card-header {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

details.training-history-card > summary.training-history-card-header::-webkit-details-marker {
  display: none;
}

details.training-history-card > summary.training-history-card-header:focus-visible {
  outline: 2px solid rgba(58, 220, 234, .78);
  outline-offset: -3px;
  border-radius: 17px;
}

.training-history-compact-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  width: min(48%, 220px);
  min-width: 0;
  margin-left: auto;
}

.training-history-compact-meta .training-history-duration {
  grid-column: 1;
  grid-row: 1;
}

.training-history-compact-zone {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  color: rgba(255, 255, 255, .68);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-history-card-chevron {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--color-primary);
  font-size: 1.2rem;
  text-align: center;
  transition: transform 180ms ease;
}

details.training-history-card[open] .training-history-card-chevron {
  transform: rotate(180deg);
}

.training-history-expanded {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  animation: training-history-expand 180ms ease-out;
}

.training-history-expanded > .training-history-card-actions {
  margin: 0 0 12px;
}

@keyframes training-history-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 430px) {
  details.training-history-card { padding: 0; }
  details.training-history-card > summary.training-history-card-header { padding: 13px 14px; }
  .training-history-date-block { gap: 9px; }
  .training-history-compact-meta { width: min(52%, 175px); }
  .training-history-compact-zone { font-size: .62rem; }
  .training-history-expanded { padding: 12px 14px 14px; }
}

/* Newsfeed: Beiträge sind beim Öffnen der Seite kompakte Akkordeons. */
details.activity-feed-item.newsfeed-item {
  display: block;
  padding: 0;
  overflow: hidden;
}

.newsfeed-item-summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.newsfeed-item-summary::-webkit-details-marker { display: none; }
.newsfeed-item-summary:focus-visible {
  outline: 2px solid rgba(58, 220, 234, .78);
  outline-offset: -3px;
  border-radius: 14px;
}

.newsfeed-item-summary-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.newsfeed-item-summary-copy .newsfeed-category-label {
  margin: 0 !important;
}

.newsfeed-item-summary-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f4f8f9;
  font-size: .84rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.newsfeed-item-summary-copy > time {
  color: rgba(148, 163, 184, .72);
  font-size: .66rem;
}

.newsfeed-item-chevron {
  color: var(--color-primary);
  font-size: 1.2rem;
  text-align: center;
  transition: transform 180ms ease;
}

details.newsfeed-item[open] .newsfeed-item-chevron { transform: rotate(180deg); }

.newsfeed-item-expanded {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  animation: newsfeed-item-expand 180ms ease-out;
}

.newsfeed-item-expanded > .newsfeed-summary {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
}

.newsfeed-item-expanded > .newsfeed-meta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 11px;
}

@keyframes newsfeed-item-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .newsfeed-modal-box details.activity-feed-item.newsfeed-item { padding: 0; }
  .newsfeed-item-summary { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 9px; padding: 11px; }
  .newsfeed-item-summary-copy > strong { font-size: .8rem; }
  .newsfeed-item-expanded { padding: 11px; }
}

/* Gear: Sensoren starten als kompakte Produktakkordeons. */
details.gear-product-card {
  display: block;
  height: auto;
  padding: 0;
  overflow: hidden;
}

.gear-product-summary-toggle {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.gear-product-summary-toggle::-webkit-details-marker { display: none; }
.gear-product-summary-toggle:focus-visible {
  outline: 2px solid rgba(58, 220, 234, .78);
  outline-offset: -3px;
  border-radius: 17px;
}

.gear-product-summary-toggle > .gear-product-visual {
  width: 76px;
  height: 76px;
  min-height: 76px;
  margin: 0;
  padding: 5px;
  border-radius: 13px;
}

.gear-product-summary-toggle > .gear-product-visual img {
  width: 100%;
  height: 62px;
  object-fit: contain;
}

.gear-product-summary-toggle > .gear-product-visual figcaption { display: none; }
.gear-product-summary-toggle > .gear-product-heading { align-items: center; }
.gear-product-summary-toggle > .gear-product-heading h3 { margin: 3px 0 0; }

.gear-product-chevron {
  color: var(--color-primary);
  font-size: 1.2rem;
  text-align: center;
  transition: transform 180ms ease;
}

details.gear-product-card[open] .gear-product-chevron { transform: rotate(180deg); }

.gear-product-expanded {
  padding: 12px;
  border-top: 1px solid rgba(148, 163, 184, .14);
  animation: gear-product-expand 180ms ease-out;
}

.gear-product-expanded > .gear-product-summary { margin: 0; }

@keyframes gear-product-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .gear-product-summary-toggle { grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 9px; padding: 10px; }
  .gear-product-summary-toggle > .gear-product-visual { width: 64px; height: 64px; min-height: 64px; }
  .gear-product-summary-toggle > .gear-product-visual img { height: 52px; }
  .gear-product-expanded { padding: 11px; }
}

/* Landscape mit Video: sichtbare HUD-Bedienelemente behalten immer die
   oberste Touch-Ebene. Die Missionskarte ist reine Anzeige; nur ihr X und
   die Wiederöffnen-Schaltfläche dürfen Pointer-Ereignisse annehmen. */
@media (orientation: landscape) {
  body .player-shell:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    :is(#fullscreenSettingsBtn, #fullscreenBluetoothStatus, #fullscreenHudToggle,
      #fullscreenCastTrainingBtn, #pocketModeBtn, #fullscreenBtn,
      #fullscreenPauseTrainingBtn, #fullscreenToggleTrainingBtn) {
    z-index: 10000020 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(58, 220, 234, .22);
    isolation: isolate !important;
  }

  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview {
    pointer-events: none !important;
  }

  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview-close,
  body .player-shell.is-mission-training:is(:fullscreen, .is-simulated-fullscreen):not(.is-no-video-training)
    .mission-training-overview-reopen:not([hidden]) {
    z-index: 10000021 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}
.activation-video-poster video{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:filter .2s ease,transform .25s ease}
.activation-video-poster:hover video,.activation-video-poster:focus-visible video{filter:brightness(.78);transform:scale(1.015)}
.activation-demo-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.activation-demo-stage[data-state=low] .activation-demo-video video,.activation-demo-stage[data-state=high] .activation-demo-video video{filter:grayscale(.45) brightness(.55)}
.activation-demo-video.is-complete video{filter:brightness(.26) saturate(.65);transition:filter .7s ease}