/* ==========================================================================
   TouchTo — AssistUK Redesign Layer
   Loaded LAST. Bridges the original design tokens to the AssistUK foundation
   (blue accent, Oswald headings, glass shell) and adds the new shared
   components used by the redesigned screens. Existing screens automatically
   pick up the new palette and fonts via the remapped color and font tokens.
   ========================================================================== */

/* ── Token bridge: remap original tokens + add AssistUK design vars ── */
:root {
  /* AssistUK foundation palette */
  --c-bg:           #f5f5f7;
  --c-bg-primary:   #ffffff;
  --c-bg-secondary: #f0f1f4;
  --c-bg-tertiary:  #e3e6ec;
  --c-bg-glass:        rgba(255,255,255,0.72);
  --c-bg-glass-heavy:  rgba(255,255,255,0.92);
  --c-fg1: #1d1d1f;
  --c-fg2: #555e6e;
  --c-fg3: #818a99;
  --c-fg-on-dark:      #f5f5f7;

  --c-accent:        #4b698c;
  --c-accent-2:      #3a5a7c;
  --c-brand-blue:    #1a3a6a;
  --c-orange:        #f97316;

  --c-success: #1f8a5b;
  --c-warning: #f59e0b;
  --c-info:    #5ac8fa;
  --c-danger:  #d32f2f;
  --c-focus:   #4b698c;

  --c-border:        rgba(0,0,0,0.08);
  --c-border-strong: rgba(0,0,0,0.14);
  --c-shadow:        rgba(0,0,0,0.05);
  --c-shadow-md:     rgba(0,0,0,0.09);
  --c-shadow-lg:     rgba(0,0,0,0.16);

  --gradient-hero:   linear-gradient(135deg,#1a3a6a 0%,#3a5a7c 50%,#4b698c 100%);
  --gradient-brand:  linear-gradient(135deg,#1a3a6a 0%,#4b698c 100%);
  --gradient-accent: linear-gradient(135deg,#4b698c,#5ac8fa);

  /* Stufen — Regenbogen */
  --stufe-1: #ec4899; --stufe-2: #f97316; --stufe-3: #eab308;
  --stufe-4: #22c55e; --stufe-5: #06b6d4; --stufe-6: #6366f1;
  --stufe-7: #a855f7; --stufe-vsd: #4b698c;

  --f-display: 'Merriweather', Georgia, serif;
  --f-heading: 'Oswald', 'DM Sans', Helvetica, sans-serif;
  --f-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --blur: 20px;

  /* ── Remap ORIGINAL tokens so every existing screen reskins instantly ── */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-bg:     #eef2f7;

  --color-secondary:       #f97316;
  --color-secondary-light: #fb923c;
  --color-secondary-dark:  #ea580c;

  --color-bg:             #f5f5f7;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f0f1f4;
  --color-border:         #e4e7ee;
  --color-border-strong:  #c7ccd6;

  --color-text:           #1d1d1f;
  --color-text-secondary: #555e6e;
  --color-text-muted:     #5b6573;
  --color-text-inverse:   #ffffff;

  --color-stufe-1: #ec4899; --color-stufe-2: #f97316; --color-stufe-3: #eab308;
  --color-stufe-4: #22c55e; --color-stufe-5: #06b6d4; --color-stufe-6: #6366f1;
  --color-stufe-7: #a855f7;

  --color-success: #1f8a5b;
  --color-warning: #d97706;
  --color-error:   #d32f2f;
  --color-info:    #2563eb;

  /* Oswald available for condensed labels/eyebrows */
  --font-heading-condensed: 'Oswald', 'DM Sans', sans-serif;
  /* h1-h4 stay Merriweather serif → matches mockup's big serif titles */
  --font-headline: 'Merriweather', Georgia, 'Times New Roman', serif;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 18px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(75,105,140,0.3);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --c-bg: #0f1116; --c-bg-primary: #1a1d24; --c-bg-secondary: #14171d; --c-bg-tertiary: #232831;
  --c-bg-glass: rgba(20,23,29,0.72); --c-bg-glass-heavy: rgba(20,23,29,0.92);
  --c-fg1: #f5f5f7; --c-fg2: #c5cad4; --c-fg3: #8a909c;
  --c-accent: #7ea7d4; --c-accent-2: #a3c0e0;
  --c-border: rgba(255,255,255,0.08); --c-border-strong: rgba(255,255,255,0.18);
  --c-shadow: rgba(0,0,0,0.5); --c-shadow-md: rgba(0,0,0,0.6); --c-shadow-lg: rgba(0,0,0,0.8);

  --color-bg: #0f1116; --color-surface: #1a1d24; --color-surface-alt: #14171d;
  --color-border: #2a2f3a; --color-border-strong: #3a414d;
  --color-text: #f5f5f7; --color-text-secondary: #c5cad4; --color-text-muted: #9aa1ad;
  --color-primary: #7ea7d4; --color-primary-dark: #6391c4; --color-primary-light: #a3c0e0;
  --color-primary-bg: #1c2530;
  --shadow-md: 0 4px 18px rgba(0,0,0,0.5); --shadow-lg: 0 12px 36px rgba(0,0,0,0.7);
}

/* ── High-contrast theme (WCAG AAA) — also honours legacy .high-contrast ── */
[data-theme="contrast"], .high-contrast {
  --c-bg: #000; --c-bg-primary: #000; --c-bg-secondary: #0a0a0a; --c-bg-tertiary: #1a1a1a;
  --c-bg-glass: rgba(0,0,0,0.92); --c-bg-glass-heavy: rgba(0,0,0,0.96);
  --c-fg1: #fff; --c-fg2: #fff; --c-fg3: #ffd60a;
  --c-accent: #ffd60a; --c-accent-2: #ffe566; --c-focus: #ffd60a;
  --c-border: #fff; --c-border-strong: #ffd60a;

  --color-bg: #000; --color-surface: #000; --color-surface-alt: #0a0a0a;
  --color-border: #ffffff; --color-border-strong: #ffd60a;
  --color-text: #fff; --color-text-secondary: #fff; --color-text-muted: #e8e8e8;
  --color-primary: #ffd60a; --color-primary-dark: #ffd60a; --color-primary-light: #ffe566;
  --color-primary-bg: #1a1a1a; --color-text-inverse: #000;
  --gradient-brand: #ffd60a; --gradient-hero: #000;
}
[data-theme="contrast"] .btn--primary,
.high-contrast .btn--primary { background: #ffd60a !important; color: #000 !important; }

/* ── High-contrast: force ALL stufe/accent colors to the single AAA yellow ── */
[data-theme="contrast"], .high-contrast {
  --stufe-1:#ffd60a; --stufe-2:#ffd60a; --stufe-3:#ffd60a; --stufe-4:#ffd60a;
  --stufe-5:#ffd60a; --stufe-6:#ffd60a; --stufe-7:#ffd60a; --stufe-vsd:#ffd60a;
  --color-stufe-1:#ffd60a; --color-stufe-2:#ffd60a; --color-stufe-3:#ffd60a; --color-stufe-4:#ffd60a;
  --color-stufe-5:#ffd60a; --color-stufe-6:#ffd60a; --color-stufe-7:#ffd60a;
  --c-orange:#ffd60a; --color-secondary:#ffd60a; --color-secondary-dark:#ffd60a; --color-secondary-light:#ffe566;
  --c-success:#ffd60a; --c-warning:#ffd60a; --c-info:#ffd60a;
}
/* High-contrast: filled chips/badges/numbers → black text on yellow */
[data-theme="contrast"] .stufe-chip, .high-contrast .stufe-chip,
[data-theme="contrast"] .act-tile__chip, .high-contrast .act-tile__chip,
[data-theme="contrast"] .plan-card__badge, .high-contrast .plan-card__badge,
[data-theme="contrast"] .cycle-step__num, .high-contrast .cycle-step__num,
[data-theme="contrast"] .stufe-tab.is-active, .high-contrast .stufe-tab.is-active {
  background:#ffd60a !important; color:#000 !important; border-color:#ffd60a !important;
}
[data-theme="contrast"] .stufe-tab.is-active .stufe-tab__count,
.high-contrast .stufe-tab.is-active .stufe-tab__count { color:#000 !important; }
/* High-contrast: cards on solid black with a visible white border */
[data-theme="contrast"] .hero-card, .high-contrast .hero-card,
[data-theme="contrast"] .plan-card, .high-contrast .plan-card,
[data-theme="contrast"] .stat-card, .high-contrast .stat-card,
[data-theme="contrast"] .cycle-step, .high-contrast .cycle-step,
[data-theme="contrast"] .stufe-tab, .high-contrast .stufe-tab {
  background:#000 !important; border:2px solid #fff !important; box-shadow:none !important;
}
/* High-contrast: buttons */
[data-theme="contrast"] .btn-primary-blue, .high-contrast .btn-primary-blue {
  background:#ffd60a !important; color:#000 !important; box-shadow:none !important;
}
[data-theme="contrast"] .btn-ghost-pill, .high-contrast .btn-ghost-pill {
  background:#000 !important; color:#fff !important; border:2px solid #fff !important;
}
/* High-contrast: yellow text accents stay yellow on black */
[data-theme="contrast"] .plan-card__day, .high-contrast .plan-card__day,
[data-theme="contrast"] .stat-card__value, .high-contrast .stat-card__value,
[data-theme="contrast"] .accent-text, .high-contrast .accent-text,
[data-theme="contrast"] .orange-text, .high-contrast .orange-text { color:#ffd60a !important; }
/* High-contrast: statusbar active + bottom-nav active */
[data-theme="contrast"] .statusbar__btn--active, .high-contrast .statusbar__btn--active {
  background:#ffd60a !important; color:#000 !important;
}
[data-theme="contrast"] .bottom-nav__item.active, .high-contrast .bottom-nav__item.active { color:#ffd60a !important; }
[data-theme="contrast"] .bottom-nav__item.active::before, .high-contrast .bottom-nav__item.active::before { background:#ffd60a !important; }
[data-theme="contrast"] .statusbar__pill, .high-contrast .statusbar__pill { color:#ffd60a !important; border-color:#ffd60a !important; }

/* ==========================================================================
   APPEARANCE AXIS B — Stufen-Stil (rainbow default / mono / muted)
   Sets BOTH --stufe-* (redesign components) AND --color-stufe-* (the app's
   original stufe tokens, used widely across screens). Rainbow = no attr.
   High-contrast still overrides these (its rules appear later in source via
   !important + later definition order is preserved by the contrast block).
   ========================================================================== */
[data-stufe-style="mono"] {
  --stufe-1: #1a3a6a; --stufe-2: #2c4d80; --stufe-3: #3e6196;
  --stufe-4: #4b698c; --stufe-5: #6388ad; --stufe-6: #7ea0c0;
  --stufe-7: #9bb7d1; --stufe-vsd: #4b698c;
  --color-stufe-1: #1a3a6a; --color-stufe-2: #2c4d80; --color-stufe-3: #3e6196;
  --color-stufe-4: #4b698c; --color-stufe-5: #6388ad; --color-stufe-6: #7ea0c0;
  --color-stufe-7: #9bb7d1;
}
[data-stufe-style="muted"] {
  --stufe-1: #c47291; --stufe-2: #c98561; --stufe-3: #b59854;
  --stufe-4: #6da57e; --stufe-5: #5c95a8; --stufe-6: #6e7bc4;
  --stufe-7: #9b7eb5; --stufe-vsd: #4b698c;
  --color-stufe-1: #c47291; --color-stufe-2: #c98561; --color-stufe-3: #b59854;
  --color-stufe-4: #6da57e; --color-stufe-5: #5c95a8; --color-stufe-6: #6e7bc4;
  --color-stufe-7: #9b7eb5;
}

/* ==========================================================================
   APPEARANCE AXIS C — Karten-Stil (shadow default / glass / outline)
   Ported from the design template and EXTENDED to the redesign card classes
   so the choice actually affects the new surfaces. High-contrast card rules
   (above) use !important and win, so contrast mode stays AAA regardless.
   ========================================================================== */
[data-card-style="shadow"] .card,
[data-card-style="shadow"] .plan-card,
[data-card-style="shadow"] .hero-card,
[data-card-style="shadow"] .stat-card,
[data-card-style="shadow"] .cycle-step,
[data-card-style="shadow"] .act-tile {
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow);
}
[data-card-style="shadow"] .card:hover,
[data-card-style="shadow"] .plan-card:hover,
[data-card-style="shadow"] .hero-card:hover,
[data-card-style="shadow"] .stat-card:hover,
[data-card-style="shadow"] .cycle-step:hover,
[data-card-style="shadow"] .act-tile:hover {
  box-shadow: 0 12px 36px var(--c-shadow-lg);
  transform: translateY(-4px);
}

[data-card-style="glass"] .card,
[data-card-style="glass"] .plan-card,
[data-card-style="glass"] .hero-card,
[data-card-style="glass"] .stat-card,
[data-card-style="glass"] .cycle-step,
[data-card-style="glass"] .act-tile {
  background: var(--c-bg-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 1px 4px var(--c-shadow);
}

[data-card-style="outline"] .card,
[data-card-style="outline"] .plan-card,
[data-card-style="outline"] .hero-card,
[data-card-style="outline"] .stat-card,
[data-card-style="outline"] .cycle-step,
[data-card-style="outline"] .act-tile {
  background: transparent;
  border: 2px solid var(--c-border-strong);
  box-shadow: none;
}
[data-card-style="outline"] .card:hover,
[data-card-style="outline"] .plan-card:hover,
[data-card-style="outline"] .hero-card:hover,
[data-card-style="outline"] .stat-card:hover,
[data-card-style="outline"] .cycle-step:hover,
[data-card-style="outline"] .act-tile:hover {
  border-color: var(--c-accent);
  transform: none;
}

[data-card-style="flat"] .card,
[data-card-style="flat"] .plan-card,
[data-card-style="flat"] .hero-card,
[data-card-style="flat"] .stat-card,
[data-card-style="flat"] .cycle-step,
[data-card-style="flat"] .act-tile {
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border-strong);
  box-shadow: none;
}
[data-card-style="flat"] .card:hover,
[data-card-style="flat"] .plan-card:hover,
[data-card-style="flat"] .hero-card:hover,
[data-card-style="flat"] .stat-card:hover,
[data-card-style="flat"] .cycle-step:hover,
[data-card-style="flat"] .act-tile:hover {
  border-color: var(--c-accent);
  transform: none;
}

/* ── Font scaling (statusbar A- / A+) ── */
html[data-font-scale="s"]  { font-size: 15px; }
html[data-font-scale="m"]  { font-size: 16px; }
html[data-font-scale="l"]  { font-size: 17.5px; }
html[data-font-scale="xl"] { font-size: 19px; }

/* ── Base typography refinements ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-heading-condensed);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg3);
  display: block;
  margin: 0 0 8px;
}
.display-serif { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; }
.accent-text { color: var(--c-accent); }
.orange-text { color: var(--c-orange); }

/* =========================================================================
   SHELL — Top statusbar
   ========================================================================= */
.statusbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--c-bg-glass-heavy);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 2px 14px rgba(26,58,106,0.07);
  font-size: 14px;
  color: var(--c-fg2);
  flex-shrink: 0;
}
.statusbar__brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--f-heading);
  font-weight: 600; font-size: 19px; letter-spacing: 0.06em;
  color: var(--c-fg1);
  text-transform: uppercase;
  background: none; border: 0; cursor: pointer;
  min-height: 48px;
}
.statusbar__brand-logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: #fff; font-family: var(--f-heading); font-weight: 700; font-size: 18px;
  overflow: hidden;
}
.statusbar__brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.statusbar__spacer { flex: 1; }
.statusbar__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 980px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  color: var(--c-fg2); background: transparent; border: 1px solid transparent;
  transition: background var(--transition-base), color var(--transition-base);
  min-height: 48px; min-width: 48px; justify-content: center;
}
.statusbar__btn:hover { background: var(--c-bg-tertiary); color: var(--c-fg1); }
.statusbar__btn--active { background: var(--c-accent); color: #fff; }
.statusbar__btn--active:hover { background: var(--c-accent-2); color: #fff; }
.statusbar__btn svg, .statusbar__btn i { width: 20px; height: 20px; }

/* ── Sponsor / "Powered by" slot (managed via js/sponsor.js) ── */
.statusbar__sponsor { display: inline-flex; align-items: center; }
.gz-sponsor {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; border-radius: 980px;
  padding: 5px 12px; min-height: 40px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  color: var(--c-fg3); transition: background var(--transition-base), border-color var(--transition-base);
}
.gz-sponsor:hover { background: var(--c-bg-tertiary); border-color: var(--c-border-strong); }
.gz-sponsor__label {
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
}
.gz-sponsor__logo { height: 20px; width: auto; display: block; }
.gz-sponsor__name { font-weight: 700; color: var(--c-accent); font-size: 13px; }
.gz-sponsor--footer { background: none; border: 0; padding: 0; min-height: 0; color: var(--c-fg2); }
.gz-sponsor--footer .gz-sponsor__logo { height: 18px; }
/* Logo-PNGs sind weiß auf transparent → auf hellen Flächen (bar, footer) schwarz einfarben */
.gz-sponsor--bar .gz-sponsor__logo,
.gz-sponsor--footer .gz-sponsor__logo { filter: brightness(0); opacity: 0.65; }
/* Im Hochkontrast-Mode (dunkler Hintergrund): weißes Logo direkt sichtbar, kein Filter */
.high-contrast .gz-sponsor--bar .gz-sponsor__logo,
.high-contrast .gz-sponsor--footer .gz-sponsor__logo { filter: none; opacity: 1; }
.gz-sponsor--splash .gz-sponsor__label { color: rgba(255,255,255,0.85); }
/* Splash sits on a DARK gradient. The base .gz-sponsor is a WHITE pill, but the
   splash label + logo are white → an empty white pill (the "blank button" at the
   bottom of the splash). Make the splash variant transparent like the footer so
   the white AssistUK logo + "Entwickelt von" label show. */
.gz-sponsor--splash { background: none; border: 0; padding: 0; min-height: 0; }
.gz-sponsor--splash:hover { background: none; border-color: transparent; }
.gz-sponsor--splash .gz-sponsor__name { color: #fff; }

/* Brand row = AssistUK (maker, always) + optional sponsors */
.gz-brandrow { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gz-brandrow__sep { width: 1px; height: 18px; background: var(--c-border); display: inline-block; }
.gz-brandrow__sponsorlabel { font-size: 12px; font-weight: 600; color: var(--c-fg3); white-space: nowrap; }
.gz-brandrow--footer { gap: 8px; }
.gz-brandrow--splash { flex-direction: column; gap: 7px; }
.gz-brandrow--splash .gz-brandrow__sep { width: 40px; height: 1px; }
.statusbar__btn--font { font-family: var(--f-display); font-weight: 700; }
.statusbar__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 980px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  font-size: 12px; font-weight: 600; color: var(--c-success);
}
.statusbar__pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 0 currentColor;
  animation: sb-pulse 2s ease-out infinite;
}
.statusbar__pill--off { color: var(--c-fg3); }
.statusbar__pill--off::before { animation: none; }
@keyframes sb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,138,91,0.4); }
  100% { box-shadow: 0 0 0 9px rgba(31,138,91,0); }
}
.statusbar__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-heading); font-weight: 700; font-size: 18px;
  border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  background: var(--c-accent); background-size: cover; background-position: center;
  cursor: pointer; flex-shrink: 0;
}
@media (max-width: 700px) {
  .statusbar { gap: 8px; padding: 10px 12px; }
  .statusbar__btn-label, .statusbar__pill, .gz-sponsor__label { display: none; }
  .statusbar__sponsor { display: none; }
}

/* =========================================================================
   SHELL — Bottom nav (overrides existing .bottom-nav markup)
   ========================================================================= */
.bottom-nav {
  background: var(--c-bg-glass-heavy);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border-top: 1px solid var(--c-border);
  box-shadow: none;
}
.bottom-nav__item {
  border-radius: 18px;
  color: var(--c-fg2);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  transition: all var(--transition-base);
  position: relative;
}
.bottom-nav__item:hover { color: var(--c-fg1); background: var(--c-bg-tertiary); }
.bottom-nav__item.active { color: var(--c-accent); background: transparent; }
.bottom-nav__item.active::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 3px; background: var(--c-accent); border-radius: 2px;
}
.bottom-nav__item i, .bottom-nav__item svg { width: 24px; height: 24px; }

/* =========================================================================
   COMPONENTS
   ========================================================================= */

/* Eyebrow + big serif page title pattern */
.page-head { margin-bottom: 28px; }
.page-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--c-fg1);
  margin: 0 0 12px;
  text-wrap: balance;
}
.page-lead {
  font-size: 1.05rem; line-height: 1.5; color: var(--c-fg2);
  max-width: 64ch; margin: 0;
}

/* Buttons (augment existing .btn) */
.btn--pill { border-radius: 980px; }
.btn-primary-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px; border-radius: 980px;
  background: var(--c-accent-2); color: #fff;
  font-family: var(--f-body); font-weight: 700; font-size: 17px;
  border: 0; cursor: pointer; min-height: 56px;
  transition: all var(--transition-base);
  box-shadow: 0 8px 24px rgba(26,58,106,0.28);
}
.btn-primary-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,58,106,0.4); }
.btn-ghost-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 980px;
  background: var(--c-bg-primary); color: var(--c-fg1);
  font-family: var(--f-body); font-weight: 600; font-size: 17px;
  border: 1.5px solid var(--c-border-strong); cursor: pointer; min-height: 56px;
  transition: all var(--transition-base);
}
.btn-ghost-pill:hover { background: var(--c-bg-tertiary); border-color: var(--c-fg2); }
.btn-primary-blue svg, .btn-primary-blue i, .btn-ghost-pill svg, .btn-ghost-pill i { width: 22px; height: 22px; }

/* Stufe chip */
.stufe-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 980px;
  font-family: var(--f-heading); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.stufe-chip--dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Stat cards (progress) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat-card {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow-md);
}
.stat-card__label {
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-fg3); margin: 0 0 8px;
}
.stat-card__value {
  font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1;
  color: var(--c-orange); margin: 0;
}
.stat-card__value--blue { color: var(--c-accent-2); }
.stat-card__value--amber { color: var(--c-warning); }
.stat-card__sub { font-size: 13px; color: var(--c-fg2); margin: 6px 0 0; }

/* Plan cards (home 3-day plan) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.plan-card {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; padding: 20px; box-shadow: var(--shadow-md);
  transition: all var(--transition-base); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card__head { display: flex; align-items: center; justify-content: space-between; }
.plan-card__day { font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; color: var(--stufe-2); }
.plan-card__badge {
  font-family: var(--font-heading-condensed); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: var(--c-accent-2); padding: 4px 10px; border-radius: 980px;
}
.plan-card__thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: var(--c-bg-tertiary); object-fit: cover;
}
.plan-card__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.15rem; color: var(--c-fg1); margin: 0; }

/* Plan card — therapeutic framing (goal / reason / duration / inline start) */
.plan-card__goal {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-accent-2); background: rgba(43, 108, 176, 0.10);
  padding: 4px 10px; border-radius: 980px;
}
.plan-card__goal i { width: 14px; height: 14px; }
.plan-card__reason { font-size: 14px; line-height: 1.45; color: var(--c-fg2); margin: 0; }
.plan-card__reason b { color: var(--c-fg1); font-weight: 700; }
.plan-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.plan-card__dur { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--c-fg2); }
.plan-card__dur i { width: 15px; height: 15px; }
.plan-card__start {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff;
  background: var(--c-accent-2); border: none; border-radius: 980px;
  padding: 9px 16px; min-height: 44px; cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}
.plan-card__start:hover { filter: brightness(1.06); transform: translateY(-1px); }
.plan-card__start i { width: 16px; height: 16px; }

/* Focus-chip row under the plan header */
.home-focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 18px; }
.home-focus-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--c-fg1);
  background: var(--c-bg-tertiary); border: 1px solid var(--c-border);
  padding: 6px 12px; border-radius: 980px;
}
.home-focus-chip i { width: 14px; height: 14px; color: var(--c-accent-2); }
.home-focus-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-fg2); background: none; border: none;
  cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.home-focus-hint i { width: 15px; height: 15px; }

/* Big continue / hero card (home) */
.hero-card {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg); padding: 14px;
}
.hero-card__media { width: 100%; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; background: var(--c-bg-tertiary); position: relative; }
.hero-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }

/* Clickable hero tile (continue-mode) — large tap/dwell target = the CTA */
.hero-card--clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.hero-card--clickable:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(26,58,106,0.20); }
.hero-card--clickable:hover .hero-card__media img { transform: scale(1.03); }
.hero-card--clickable:focus-visible { outline: 3px solid var(--c-accent, #4b698c); outline-offset: 3px; }
/* Play affordance overlay on hover/focus */
.hero-card--clickable .hero-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.0), rgba(0,0,0,0.0));
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.hero-card--clickable:hover .hero-card__media::after,
.hero-card--clickable:focus-visible .hero-card__media::after { opacity: 1; }
.hero-card--clickable .hero-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(75,105,140,0.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.hero-card--clickable .hero-card__play i, .hero-card--clickable .hero-card__play svg { width: 30px; height: 30px; }
.hero-card--clickable:hover .hero-card__play,
.hero-card--clickable:focus-visible .hero-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.high-contrast .hero-card--clickable .hero-card__play { background: #000; border: 2px solid #fff; }

/* Audio-unlock hint (autoplay policy) — prompts the support person to tap once */
.audio-hint-banner {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 8500;
  display: flex; align-items: center; gap: 10px;
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 12px 10px 16px;
  background: var(--c-accent, #4b698c); color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(26,58,106,0.30);
  font-size: 14px; font-weight: 600;
  animation: audioHintIn .25s ease;
}
.audio-hint-banner > i, .audio-hint-banner > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.audio-hint-banner > span { line-height: 1.35; }
.audio-hint-banner__close {
  flex: 0 0 auto; margin-left: 2px;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.audio-hint-banner__close:hover { background: rgba(255,255,255,0.32); }
.audio-hint-banner__close i, .audio-hint-banner__close svg { width: 16px; height: 16px; }
@keyframes audioHintIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.high-contrast .audio-hint-banner { background: #000; border: 2px solid #fff; }
.hero-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px; gap: 12px; }
.hero-streak { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--c-fg2); }
.hero-streak__num { font-family: var(--f-display); font-weight: 900; font-size: 1.1rem; color: var(--c-fg1); }

/* Stufe tabs (activities) */
.stufe-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.stufe-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 980px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--c-fg1);
  cursor: pointer; transition: all var(--transition-base); min-height: 44px;
}
.stufe-tab:hover { background: var(--c-bg-tertiary); }
.stufe-tab__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stufe-tab__count { color: var(--c-fg3); font-size: 12px; font-weight: 600; }
.stufe-tab.is-active { color: #fff; border-color: transparent; background: var(--c-accent); }
.stufe-tab.is-active .stufe-tab__dot { background: #fff !important; }
.stufe-tab.is-active .stufe-tab__count { color: rgba(255,255,255,0.85); }

/* Stufe banner (activities) */
.stufe-banner {
  display: grid; grid-template-columns: 1fr minmax(0, 42%);
  border-radius: 24px; overflow: hidden; margin-bottom: 28px;
  min-height: 230px; color: #fff; box-shadow: var(--shadow-md);
}
.stufe-banner__text { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.stufe-banner__eyebrow { font-family: var(--font-heading-condensed); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.stufe-banner__title { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1.05; margin: 2px 0; }
.stufe-banner__subtitle { font-family: var(--font-headline); font-style: italic; font-size: 1.2rem; opacity: 0.92; }
.stufe-banner__desc { font-size: 1rem; line-height: 1.5; opacity: 0.92; margin-top: 8px; max-width: 52ch; }
.stufe-banner__media { background-size: cover; background-position: center; }
@media (max-width: 720px) { .stufe-banner { grid-template-columns: 1fr; } .stufe-banner__media { min-height: 160px; } }

/* Per-stufe "Eigene Inhalte" tool hint — a glassy clickable row inside the
   banner that points to the AAC content tool fitting this stufe. */
.stufe-banner__tool {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 12px 16px; border-radius: 14px; text-align: left; cursor: pointer;
  color: #fff; max-width: 52ch;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
  transition: background 0.18s, transform 0.18s;
}
.stufe-banner__tool:hover { background: rgba(255,255,255,0.20); transform: translateY(-1px); }
.stufe-banner__tool-icon { width: 22px; height: 22px; flex-shrink: 0; }
.stufe-banner__tool-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stufe-banner__tool-eyebrow { font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.stufe-banner__tool-desc { font-size: 0.92rem; line-height: 1.4; opacity: 0.96; }
.stufe-banner__tool-arrow { display: inline-flex; flex-shrink: 0; opacity: 0.9; }
.stufe-banner__tool-arrow svg { width: 20px; height: 20px; }

/* Full-bleed photo banner — the illustration spans the whole banner (no narrow
   panel crop), behind a left→right dark scrim that keeps white text legible on
   any stufe colour or artwork. */
.stufe-banner--photo { position: relative; display: block; }
.stufe-banner--photo .stufe-banner__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.stufe-banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(13,20,34,0.92) 0%,
    rgba(13,20,34,0.80) 36%,
    rgba(13,20,34,0.38) 66%,
    rgba(13,20,34,0.08) 100%);
}
.stufe-banner--photo .stufe-banner__text { position: relative; z-index: 2; max-width: 62%; }
@media (max-width: 720px) {
  .stufe-banner--photo .stufe-banner__text { max-width: 100%; }
  .stufe-banner__scrim { background: linear-gradient(180deg, rgba(13,20,34,0.45) 0%, rgba(13,20,34,0.88) 100%); }
}

/* Friendly empty state for the Szenenbilder tab */
.r-act-vsd-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 40px 24px; background: var(--color-surface, #fff);
  border: 2px dashed var(--color-border, #d6dbe3); border-radius: 18px;
}
.r-act-vsd-empty__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(75,105,140,0.12); color: #4b698c;
}
.r-act-vsd-empty__icon svg { width: 28px; height: 28px; }
.r-act-vsd-empty__text { margin: 0; max-width: 42ch; color: var(--color-text-muted, #6b7280); line-height: 1.5; }
.r-act-vsd-empty__btn { padding: 12px 22px; font-weight: 600; border-radius: 12px; }

/* Activity tile (grid) */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.act-tile {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md);
  cursor: pointer; transition: all var(--transition-base); text-align: left;
  display: flex; flex-direction: column;
}
.act-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.act-tile__media { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--c-bg-tertiary); overflow: hidden; }
.act-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-tile__chip {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--f-heading); font-size: 11px; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 980px; letter-spacing: 0.04em;
}
.act-tile__body { padding: 14px 16px 18px; }
.act-tile__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.1rem; color: var(--c-fg1); margin: 0 0 3px; }
.act-tile__focus { font-size: 13px; color: var(--c-fg2); margin: 0; }

/* Therapy cycle (progress) */
.cycle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cycle-step {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 18px; padding: 20px; position: relative;
}
.cycle-step--active { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(75,105,140,0.12); background: var(--c-primary-bg, #f3f6fa); }
.cycle-step__num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 14px;
}
.cycle-step__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.2rem; margin: 0 0 8px; color: var(--c-fg1); }
.cycle-step__desc { font-size: 14px; line-height: 1.45; color: var(--c-fg2); margin: 0 0 14px; }
.cycle-step__when { font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-fg3); }

/* Section heading pattern */
.section { margin-top: 44px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section__title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--c-fg1); margin: 0; }

/* Wider content area for the redesigned screens */
.page-wide { max-width: 1480px; margin: 0 auto; width: 100%; }

/* Home hero layout */
.home-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-top: 18px;
}
.home-hero__text { min-width: 0; }
.home-hero__title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.03em; color: var(--c-fg1); margin: 6px 0 18px; text-wrap: balance;
}
.home-hero__title .accent-text { color: var(--c-accent); display: block; }
.home-hero__lead { font-size: 1.12rem; line-height: 1.55; color: var(--c-fg2); margin: 0 0 30px; max-width: 56ch; }
.home-hero__lead strong { color: var(--c-fg1); font-weight: 700; }
.home-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 28px; }
}
.hero-card__chip-row { display: flex; align-items: center; gap: 16px; }

/* ── Favourites strip (home) ──────────────────────────────────────────── */
.fav-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.fav-card {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16/10; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  background: var(--c-bg-tertiary);
}
.fav-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.fav-card__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.fav-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.72) 100%);
}
.fav-card__caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
}
.fav-card__stufe {
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 3px;
}
.fav-card__name {
  font-family: var(--f-heading); font-weight: 700; font-size: 1.25rem;
  color: #fff; line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.fav-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 32px 20px;
  background: var(--c-bg-secondary); border: 2px dashed var(--c-border);
  border-radius: 18px; color: var(--c-fg2);
}
.fav-empty__title { font-family: var(--f-heading); font-weight: 700; font-size: 1rem; color: var(--c-fg1); margin: 0; }
.fav-empty__desc { font-size: 14px; line-height: 1.5; margin: 0; max-width: 38ch; }

/* ── Stufen row (home) ───────────────────────────────────────────────── */
.stufen-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.stufen-row__item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; border-radius: 16px;
  background: var(--c-bg-primary); border: 1.5px solid var(--c-border);
  cursor: pointer; text-align: left;
  transition: all var(--transition-base); min-height: 60px;
}
.stufen-row__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--st-color, var(--c-border));
}
.stufen-row__item.is-active {
  border-color: var(--st-color, var(--c-accent));
  background: linear-gradient(180deg, var(--c-bg-primary), rgba(0,0,0,0.03));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-color, var(--c-accent)) 18%, transparent);
}
.stufen-row__num {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 700; font-size: 1.1rem; color: #fff;
}
.stufen-row__label { min-width: 0; }
.stufen-row__name {
  font-family: var(--f-heading); font-weight: 700; font-size: 0.92rem;
  color: var(--c-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stufen-row__sub {
  font-size: 11px; color: var(--c-fg3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .stufen-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .stufen-row { grid-template-columns: repeat(2, 1fr); }
  .fav-scroll { grid-template-columns: repeat(2, 1fr); }
}

/* ── Intervention cycle (home) ───────────────────────────────────────────── */
.home-cycle {
  margin: 28px 0 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 22px;
  background: var(--c-bg-card, #fff);
}
.home-cycle__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--c-fg1, #1a3a6a); }
.home-cycle__sub { margin: 0 0 18px; font-size: 14px; color: var(--c-fg2, #51607a); }
.home-cycle__ring {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; flex-wrap: nowrap;
}
.home-cycle__step {
  flex: 1 1 0; min-width: 0; max-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; text-align: center;
  border: 1px solid var(--c-border, #e4e7ee); border-radius: 18px;
  background: var(--c-bg-subtle, #f6f8fc); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.home-cycle__step:hover, .home-cycle__step:focus-visible {
  transform: translateY(-3px); outline: none;
  box-shadow: 0 10px 26px rgba(26,58,106,0.12);
}
.home-cycle__disc {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 2px;
}
.home-cycle__disc i, .home-cycle__disc svg { width: 28px; height: 28px; }
.home-cycle__step.is-assess { border-color: rgba(214,64,154,0.35); }
.home-cycle__step.is-assess .home-cycle__disc { background: #d6409a; }
.home-cycle__step.is-foster { border-color: rgba(75,105,140,0.40); }
.home-cycle__step.is-foster .home-cycle__disc { background: var(--c-accent, #4b698c); }
.home-cycle__step.is-review { border-color: rgba(46,158,107,0.38); }
.home-cycle__step.is-review .home-cycle__disc { background: #2e9e6b; }
.home-cycle__label { font-weight: 700; font-size: 16px; color: var(--c-fg1, #1a3a6a); }
.home-cycle__steptext { font-size: 13px; color: var(--c-fg2, #51607a); line-height: 1.3; }
.home-cycle__arrow {
  flex: 0 0 auto; align-self: center; color: var(--c-fg3, #94a3b8);
}
.home-cycle__arrow i, .home-cycle__arrow svg { width: 22px; height: 22px; }
.home-cycle__loop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--c-accent, #4b698c);
}
.home-cycle__loop i, .home-cycle__loop svg { width: 16px; height: 16px; }
.high-contrast .home-cycle, .high-contrast .home-cycle__step { border-color: #000; }
@media (max-width: 720px) {
  .home-cycle__ring { flex-direction: column; align-items: stretch; }
  .home-cycle__step { max-width: none; flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; }
  .home-cycle__disc { margin-bottom: 0; }
  .home-cycle__arrow { transform: rotate(90deg); }
}