/* Universum-Atem dark-to-light theme
   Palette: dark cosmic hero (black, gold-orange particles) → warm earth tones in content
   Primary: Gold #D4A03C (particle color), Sage green kept as secondary/nature accent
   Typography: Cormorant Garamond (display, warm humanist serif) + DM Sans (body, clean readable)
   Density: spacious — generous whitespace, meditative, cosmic → organic */

/* =============================================
   DESIGN TOKENS
   ============================================= */

:root {
  /* Type Scale — fluid with clamp() */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* 4px Spacing System */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Font Families — Kanon v1.9: nur Hanken Grotesk und JetBrains Mono, Serif verbannt.
     Die alten Werte 'Cormorant Garamond' (display) und 'DM Sans' (body) sind entfernt.
     Alle .kurs-*- und Alt-Regeln, die --font-display oder --font-body lesen,
     bekommen dadurch automatisch die neuen Fonts. Die eigenen --mech-font-body
     und --mech-font-mono unten (Zeile 20066f.) sind identisch definiert und
     bleiben unveraendert. */
  --font-display: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Custom Warm Palette — shiihaa Universum-Atem */
  /* Surfaces — deep cosmic blue night mode */
  --color-bg:             #0C1220;
  --color-surface:        #151D2E;
  --color-surface-2:      #1A2538;
  --color-surface-active: #1E2A3E;
  --color-surface-offset: #222F44;
  --color-surface-offset-2: #283650;
  --color-surface-dynamic: #2E3D58;
  --color-divider:        #2A3650;
  --color-border:         #2E3A55;
  --color-card:           var(--color-surface);
  --tab-bar-bg:            rgba(12, 18, 32, 0.96); /* cosmic blue, translucent */

  /* Legacy dark aliases (for cosmic hero section) */
  --color-dark-bg:        #0C1220;
  --color-dark-surface:   #151D2E;
  --color-dark-surface-2: #1A2538;
  --color-dark-earth:     #222F44;
  --color-dark-warm:      #2E3D58;

  /* Breath Phase Colors */
  --color-inhale:         #C49A6C;
  --color-exhale:         #4A8A72;
  --color-hold:           #8B7355;

  /* Text — light on dark */
  --color-text:           #E0E4EC;
  --color-text-muted:     #8A95AA;
  --color-text-faint:     #5A6578;
  --color-text-dim:       #8A95AA; /* alias for inline styles */

  /* Legacy aliases */
  --sage: var(--color-sage);
  --warm-500: var(--color-text-muted);
  --warm-600: var(--color-text-muted);
  --clr-give: var(--color-primary);
  --color-surface-alt: var(--color-surface-2);
  --color-text-inverse:   #0C1220;
  --color-text-dark:      #FAF5EA;
  --color-text-dark-muted: rgba(250,245,234,0.6);

  /* Primary Accent — Gold on dark blue */
  --color-primary:        #D4A03C;
  --color-primary-hover:  #E0B050;
  --color-primary-active: #C89030;
  --color-primary-highlight: #2A2518;
  --color-primary-light:  #1E1C14;

  /* Sage Green — brighter on dark bg */
  --color-sage:           #5FA882;
  --color-sage-hover:     #6DB890;
  --color-sage-dark:      #4A8A6A;
  --color-sage-light:     #1A2E25;
  --color-sage-lighter:   #152520;

  /* Secondary Accent — Terracotta (earth, warmth) */
  --color-secondary:      #A8746A;
  --color-secondary-hover: #956358;
  --color-secondary-active: #7D5249;
  --color-secondary-highlight: #E8D5D0;

  /* Cosmic Accent */
  --color-gold-glow:      rgba(212,160,60,0.15);
  --color-orange-warmth:  #E8853C;
  --color-deep-orange:    #CC5500;

  /* Success */
  --color-success:        #6B9B5A;
  --color-success-hover:  #5A8549;
  --color-success-highlight: #D8E8D2;

  /* Error */
  --color-error:          #B8645A;
  --color-error-hover:    #A05348;
  --color-error-highlight: #ECDAD6;

  /* Warning */
  --color-warning:        #C4913D;
  --color-warning-highlight: #F0E2C8;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px oklch(0.25 0.02 60 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.25 0.02 60 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.25 0.02 60 / 0.12);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* Alias for backward compatibility */
  --color-gold: var(--color-primary);
  --color-text-on-dark: var(--color-text-dark);
  --color-text-on-dark-muted: var(--color-text-dark-muted);
  --color-text-on-dark-faint: rgba(250,245,234,0.35);
}

/* =============================================
   GLOBAL STYLES
   ============================================= */

body {
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}
/* Cormorant Garamond ONLY for pillar-hero display moments
   ---------------------------------------------------------
   .breath-text bewusst NICHT hier: Blatt 12 (12-atmen-session)
   verlangt fuer den Session-Phasentext Hanken Grotesk sans in
   var(--font-body), nicht --font-display. Kanon v1.9: Serif verbannt. */
.hero-title, .hero-claim, .pillar-title, .header-logo,
.pillar-card h3, .home-pillar-card h3,
.mood-picker-heading,
.coverflow-heading {
  font-family: var(--font-display);
}

/* Coverflow-Archiv-Überschrift: im Universum-Theme dezenter halten
   (kleiner als generische h3, um die Archiv-Rolle visuell zu signalisieren
   und dem primären Mood-Picker/Featured Vorrang zu lassen). */
.coverflow-heading {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Coverflow-Subtitle: im Universum ohne p-Defaults zu groß und zu hell.
   Hier explizit zurückgenommen: kleiner, gedämpfter, kürzere Line-Height. */
.coverflow-sub {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-muted, rgba(255,255,255,0.6));
  opacity: 0.85;
  margin: 0 0 var(--space-3, 0.75rem);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
a:hover {
  color: var(--color-primary-hover);
}

/* =============================================
   SKIP LINK
   ============================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 1000;
  font-size: var(--text-sm);
}
.skip-link:focus {
  top: var(--space-2);
}

/* =============================================
   NAVIGATION
   ============================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Border entfernt. Zuvor 1px solid #2A3650 (bzw. 0.35 opacity als
     Zwischenschritt) — traf gerade auf das Hero-Schwarz und wirkte
     als harte Trennlinie unter der Nav. */
  border-bottom: none;
  padding: var(--space-3) var(--space-4);
  transition: background var(--transition-slow),
              border-color var(--transition-slow);
}
/* Home-Anmeldeansicht: Header nimmt Hero-Schwarz. Der Body-Marker
   home-active wird in app.js handleRoute() gesetzt, wenn view === "home".
   Damit greift die Regel wirklich nur, wenn die Home-Ansicht aktiv ist —
   nicht auf allen SPA-Views, bei denen .home-hero--dark passiv im DOM liegt. */
body.home-active .site-header {
  background: #000;
}

/* Transparent header on dark hero */
.site-header--transparent {
  background: rgba(0,0,0,0);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header--transparent .header-logo {
  color: #FAF5EA;
}
.site-header--transparent .logo-dot {
  color: rgba(212,160,60,0.85);
}
.site-header--transparent .header-nav a {
  color: rgba(250,245,234,0.6);
}
.site-header--transparent .header-nav a:hover,
.site-header--transparent .header-nav a.active {
  color: #FAF5EA;
  border-bottom-color: rgba(212,160,60,0.6);
}
.site-header--transparent .btn-login {
  color: rgba(250,245,234,0.65);
}
.site-header--transparent .btn-login:hover {
  color: #FAF5EA;
  background: rgba(255,255,255,0.08);
}
.site-header--transparent .hamburger-btn svg {
  stroke: rgba(250,245,234,0.8);
}

/* On-dark header variant — transparent on the dark hero */
.site-header--on-dark {
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header--on-dark .header-logo { color: #FAF5EA !important; }
.site-header--on-dark .header-logo .logo-dot { color: var(--color-gold) !important; }
.site-header--on-dark .header-nav a { color: rgba(250,245,234,0.7) !important; }
.site-header--on-dark .header-nav a:hover,
.site-header--on-dark .header-nav a.active { color: var(--color-gold) !important; }
.site-header--on-dark .btn-login { color: #FAF5EA !important; border-color: rgba(250,245,234,0.3) !important; }
.site-header--on-dark .btn-login:hover { background: rgba(255,255,255,0.1) !important; }
.site-header--on-dark .hamburger-btn { color: #FAF5EA !important; }
.site-header--on-dark .nav-install-link { color: rgba(250,245,234,0.7) !important; }
.site-header--on-dark .btn-theme-switch { color: rgba(250,245,234,0.75) !important; }
.site-header--on-dark .btn-theme-switch:hover { color: var(--color-gold) !important; }

/* Scrolled header (solid, after user scrolls past dark hero) */
.site-header--scrolled {
  background: var(--color-bg) !important;
  border-bottom-color: var(--color-divider) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header--scrolled .header-logo { color: var(--color-text) !important; }
.site-header--scrolled .header-nav a { color: var(--color-text-muted) !important; }
.site-header--scrolled .btn-login { color: var(--color-text) !important; border-color: var(--color-border) !important; }
.site-header--scrolled .hamburger-btn { color: var(--color-text) !important; }
.site-header--scrolled .btn-login:hover {
  color: var(--color-text);
  background: rgba(44,24,16,0.06);
}
.site-header--scrolled .btn-theme-switch { color: var(--color-text-muted) !important; }
.site-header--scrolled .btn-theme-switch:hover { color: var(--color-primary) !important; }
.site-header--scrolled .lang-toggle {
  color: var(--color-text-muted) !important;
}
.site-header--scrolled .lang-toggle:hover {
  color: var(--color-text) !important;
}
.header-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-1);
}
.header-nav {
  margin-inline-start: var(--space-6);
  flex: 1;
}
.header-nav-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: auto;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.logo-dot {
  color: var(--color-primary);
  font-weight: 400;
  margin: 0 0.05em;
}
.header-logo:hover {
  color: var(--color-primary);
}
.header-logo:focus-visible {
  outline: 1px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: 4px;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
}
.header-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
/* Verschenken: entfarbt, wie die anderen Nav-Links.
   Wir entkoppeln bewusst von .nav-gift-link's frueheren Gold-Regeln —
   der Kanon erlaubt bis zu einem Gold-Anker pro Screen, aber die Nav
   ist dafuer der falsche Ort. Gold-Anker bleibt fuer Content reserviert. */
/* Pre-Launch ausgeblendet: setzt !important durch, gewinnt gegen
   das robuste inline-flex-Regel-Set unten. */
.hidden-pre-launch,
button.hidden-pre-launch,
.nav-install-link.hidden-pre-launch,
button.nav-install-link.hidden-pre-launch {
  display: none !important;
}

/* Nav-Header-Link (Blog-Button, ehemals Download): sieht aus wie ein
   normaler Nav-Link. Keine Icons, keine Sonderfarbe. */
.nav-header-link,
button.nav-header-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-sm);
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-1) 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.nav-header-link:hover,
.nav-header-link.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
.header-auth {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.btn-theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-interactive), background var(--transition-interactive);
  padding: 0;
  flex-shrink: 0;
}
.btn-theme-switch:hover {
  color: var(--color-primary);
  background: var(--color-surface);
}
.btn-login {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
}
.btn-login:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.user-avatar-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-interactive),
              transform var(--transition-interactive);
}
.user-avatar-btn:hover {
  background: var(--color-primary-hover);
  transform: scale(1.05);
}
.user-avatar-btn:active {
  transform: scale(0.98);
}
.hamburger-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}
.hamburger-btn:hover {
  background: var(--color-surface);
}
.hamburger-btn svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-text);
}

/* Mobile nav */
@media (max-width: 767px) {
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-2);
    box-shadow: var(--shadow-lg);
  }
  /* Fix: dropdown always readable — force light bg + dark text on mobile */
  .site-header--on-dark .header-nav {
    background: var(--color-bg) !important;
  }
  .site-header--on-dark .header-nav a {
    color: var(--color-text) !important;
  }
  .site-header--on-dark .header-nav a:hover,
  .site-header--on-dark .header-nav a.active {
    color: var(--color-gold) !important;
    background: var(--color-surface) !important;
  }
  .header-nav.open {
    display: flex;
  }
  .header-nav a {
    padding: var(--space-3) var(--space-4);
    border-bottom: none;
    border-radius: var(--radius-md);
    width: 100%;
  }
  .header-nav a:hover,
  .header-nav a.active {
    background: var(--color-surface);
    border-bottom-color: transparent;
  }
  .nav-header-link {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: var(--text-sm);
    width: 100%;
    text-align: left;
    border-bottom: none;
  }
  .nav-header-link:hover,
  .nav-header-link.active {
    background: var(--color-surface);
    border-bottom-color: transparent;
    color: var(--color-text);
  }
  .hamburger-btn {
    display: flex;
  }
  .header-auth {
    margin-right: var(--space-1);
  }
  .header-auth .btn-login {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transition-interactive),
              color var(--transition-interactive),
              box-shadow var(--transition-interactive),
              transform var(--transition-interactive);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--color-text-inverse);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-offset);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 52px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* =============================================
   FORMS
   ============================================= */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.form-input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  font-size: var(--text-base);
  min-height: 44px;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.form-input::placeholder {
  color: var(--color-text-faint);
}
.form-input.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-highlight);
}
.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}
.form-textarea {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  font-size: var(--text-base);
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--color-surface);
  border: 1px solid rgba(224,213,199,0.5);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
#app {
  flex: 1;
}
.view {
  display: none;
}
.view.active {
  display: block;
}

/* Container utility */
.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-wide {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* =============================================
   HOME VIEW — Redesigned Landing (Asymmetric)
   ============================================= */

/* --- Hero: split grid (legacy light variant) --- */
.home-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: var(--space-16) var(--space-6);
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(212,160,60,0.07), transparent 70%),
    radial-gradient(ellipse 40% 40% at 75% 55%, rgba(212,160,60,0.04), transparent 60%);
  pointer-events: none;
}

/* --- Hero: Dark cosmic variant (Universum-Atem) — split layout --- */
.home-hero--dark {
  background: #000;
  min-height: auto;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Kein oberer Fade — er ueberdeckte den Canvas.
   Statt dessen ist die Header-Border weg (siehe .site-header oben);
   der Farbwechsel #0C1220 -> #000 wirkt jetzt wie natuerliche Tiefe. */
.home-hero--dark::before { display: none; }
/* Unterer Fade: von #000 auf #0A0A0A, den Startton der Philosophie-Sektion. */
.home-hero--dark::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, transparent 0%, #0A0A0A 100%);
  z-index: 3;
  pointer-events: none;
}

/* =============================================
   HERO GUEST — Produkt-Fold für unregistrierte Besucher
   Zweispaltig auf Desktop, gestapelt auf Mobile.
   Adaptiv zu beiden Themes (klassisch hell / universum dunkel).
   ============================================= */
.home-hero-guest {
  /* Blatt 50 (v4-final): Marque oben, Kurve + Kennwerte-Grid darunter,
     Zutritts-Fakten zuunterst. Die drei Kinder stapeln vertikal, das
     zweispaltige Layout lebt im inneren Element .hero-guest-measure.
     flex-direction: column ist zwingend — ohne diese Zeile stehen Marque,
     Kurve und Zutritts-Fakten in einer Reihe nebeneinander (Live-Regression
     nach PR #232/#233). */
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-12) var(--space-6) var(--space-10);
  position: relative;
  overflow: hidden;
  /* Schwarz-zu-Blau-Kaskade als Auftakt zur Landing. Beginnt auf reinem
     Schwarz (analog Kopfzeile) und blendet nach unten in den ersten
     Blau-Ton der .home-flow-Kaskade (#101828), sodass Hero und Kaskade
     nahtlos ineinander uebergehen. */
  background: linear-gradient(
    180deg,
    #000000 0%,
    #000000 45%,
    #060A12 70%,
    #0C1220 90%,
    #101828 100%
  );
}
.home-hero-guest::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 55% at 75% 40%, rgba(212,160,60,0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(91,138,114,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Hero-Guest · v4-final · Blatt 50
   Marke, Kurve, Kennwerte. Kein Werbesatz, kein Knopf im Hero.
   Der eine Gold-Anker der Landing sitzt nach den Saeulen (Blatt 51). */
.hero-guest-marque {
  text-align: center;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto var(--space-12);
  position: relative;
  z-index: 1;
}
.hero-guest-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.hero-guest-brand {
  font-family: var(--font-body);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin: 0;
}
.hero-guest-brand .logo-dot {
  color: var(--color-primary);
  padding: 0 0.15em;
}

.hero-guest-measure {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-8);
  align-items: stretch;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.measure-viz {
  position: relative;
  min-height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(212,160,60,0.02), transparent 40%),
    var(--color-surface);
  overflow: hidden;
}
.measure-viz .measure-grid line {
  stroke: var(--color-border);
  stroke-width: 0.5;
  fill: none;
}
.measure-viz .measure-tick {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.measure-viz .measure-curve {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(212,160,60,0.35));
}
.measure-viz .measure-curve-fill {
  fill: url(#heroGuestCurveFill);
  opacity: 0.6;
}
.measure-viz .measure-dot {
  fill: var(--color-primary);
  filter: drop-shadow(0 0 4px rgba(212,160,60,0.6));
}
.measure-live {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.measure-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  animation: measurePulse 2.2s ease-in-out infinite;
}
.measure-phase {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
@keyframes measurePulse {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .measure-live-dot { animation: none; }
  .measure-viz .measure-dot animateMotion { display: none; }
}

.measure-values {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.measure-values-head {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.measure-values ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.measure-values li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.measure-values li b {
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.measure-values-source {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.hero-guest-access {
  /* Untere Marge freihalten fuer den absolut positionierten Gold-Pfeil
     .hero-guest-scroll (bottom: 1.5rem). Ohne diese Reserve klebt der
     Pfeil auf der Zeile 'Kein App-Store. Kein Google-Konto.'. */
  margin: var(--space-8) auto var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  max-width: 1080px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: center;
}

.hero-guest-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-primary);
  animation: scrollBounce 2.5s ease-in-out infinite;
  z-index: 2;
  opacity: 0.55;
}

/* Universum-Theme (dunkler Hero).
   Verwendet denselben Schwarz-zu-Blau-Verlauf wie die Basisregel oben,
   damit der Uebergang zur Kaskade nahtlos bleibt. Der frueher
   einheitliche #0F0E0C wuerde die Verlaufskaskade sofort abschneiden. */
.theme-universum .home-hero-guest,
.home-hero-guest.home-hero-guest--dark {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #000000 45%,
    #060A12 70%,
    #0C1220 90%,
    #101828 100%
  );
}
.theme-universum .hero-guest-brand,
.home-hero-guest--dark .hero-guest-brand {
  color: #FAF5EA;
}
.theme-universum .hero-guest-eyebrow,
.home-hero-guest--dark .hero-guest-eyebrow {
  color: rgba(250,245,234,0.55);
}

/* Guest CTA in the Universum theme. Universum SWAPS style.css out entirely
   (theme-switcher loads either style.css OR style-universum.css, never both),
   so the base .guest-cta button shape from style.css does NOT apply here. We
   define the full button here so the "Ohne Konto testen" entry renders as a
   real button in Universum, not a bare text link. Colours are lifted for the
   dark hero/auth surfaces with a warm gold hover that matches --color-primary. */
.guest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 11px 22px;
  border: 1.5px solid rgba(212,160,60,0.40);
  border-radius: 14px;
  background: transparent;
  color: rgba(250,245,234,0.78);
  font: 500 var(--text-sm) / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-interactive),
              border-color var(--transition-interactive),
              background var(--transition-interactive);
}
.guest-cta:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.guest-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.guest-cta--auth {
  display: inline-flex;
}
.guest-cta--hero {
  margin-top: var(--space-4);
}
/* Download page: centre the CTA under the subline, lift it off the hero copy. */
.guest-cta--download {
  margin-top: var(--space-5);
}
@media (max-width: 640px) {
  .guest-cta {
    width: 100%;
  }
}

/* Mobile: Marke + Kurve gestapelt, Kennwerte darunter */
@media (max-width: 768px) {
  .home-hero-guest {
    min-height: auto;
    padding: var(--space-8) var(--space-5) var(--space-10);
  }
  .hero-guest-brand {
    font-size: clamp(2.4rem, 12vw, 3.2rem);
  }
  .hero-guest-measure {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .measure-viz { min-height: 220px; }
  .measure-values li { grid-template-columns: 96px 1fr; }
  .hero-guest-scroll {
    display: none;
  }
}

/* Tablet: enger, Kurve behaelt Uebergewicht */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-guest-measure {
    grid-template-columns: 2fr 1.2fr;
    gap: var(--space-6);
  }
}

/* Zone 1: Animation — eigenständig, kein Text */
.hero-anim-zone {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 400px;
  overflow: hidden;
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Breath label overlay on animation */
.hero-breath-label {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: rgba(250, 245, 234, 0.85);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
  text-shadow: 0 0 20px rgba(212, 160, 60, 0.3);
}

/* Zone 2: Text — darunter, auf dunklem Grund */
.hero-text-zone {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

/* Keep legacy class for klassisch theme fallback */
.hero-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-6);
}
.hero-content-centered {
  text-align: center;
  max-width: 680px;
}
.hero-tag--light {
  color: var(--color-gold);
  opacity: 0.7;
}
.hero-title--light {
  color: var(--color-text-on-dark);
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.hero-title--light .logo-dot {
  color: var(--color-gold);
  opacity: 0.8;
}
.hero-claim--light {
  color: var(--color-text-on-dark-muted);
}
.hero-philosophy--light {
  color: var(--color-text-on-dark-muted);
  max-width: 52ch;
  margin-inline: auto;
}
.hero-actions--centered {
  justify-content: center;
}
.hero-secondary-link--light {
  color: var(--color-text-on-dark-faint);
}
.hero-secondary-link--light:hover {
  color: var(--color-gold);
}
.btn-glow {
  background: linear-gradient(135deg, var(--color-gold), var(--color-primary-hover));
  color: var(--color-dark-bg);
  font-weight: 600;
  border: none;
  box-shadow: 0 0 24px rgba(212,160,60,0.25), 0 4px 16px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.btn-glow:hover {
  background: linear-gradient(135deg, #E8B44E, var(--color-gold));
  box-shadow: 0 0 36px rgba(212,160,60,0.35), 0 6px 20px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(212,160,60,0.3);
  animation: heroScrollBounce 2.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.6; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-text {
  text-align: left;
}
.hero-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.hero-title .logo-dot {
  font-size: 0.65em;
  vertical-align: middle;
  margin: 0 0.06em;
}
.hero-claim {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 400;
  margin-bottom: var(--space-6);
}
.hero-philosophy {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 44ch;
  line-height: 1.75;
  margin-bottom: var(--space-8);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.hero-secondary-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.hero-secondary-link:hover {
  color: var(--color-primary);
}

/* --- Hero visual: breath orb --- */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.breath-orb {
  position: relative;
  width: clamp(200px, 22vw, 320px);
  height: clamp(200px, 22vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.breath-orb-inner {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,60,0.2) 0%, rgba(212,160,60,0.06) 60%, transparent 80%);
  animation: orb-pulse 10s cubic-bezier(0.4,0,0.6,1) infinite;
}
.breath-orb-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1.2px solid rgba(212,160,60,0.18);
  animation: orb-ring 10s cubic-bezier(0.4,0,0.6,1) infinite;
}
.breath-orb-ring--2 {
  inset: 0;
  border-color: rgba(212,160,60,0.08);
  animation-delay: -3s;
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.5; }
  35% { transform: scale(1.05); opacity: 0.85; }
  45% { transform: scale(1.02); opacity: 0.8; }
  90% { transform: scale(0.82); opacity: 0.5; }
}
@keyframes orb-ring {
  0%, 100% { transform: scale(0.9); opacity: 0.4; }
  35% { transform: scale(1.1); opacity: 0.8; }
  45% { transform: scale(1.08); opacity: 0.7; }
  90% { transform: scale(0.9); opacity: 0.4; }
}

/* --- Waitlist / newsletter form (reused) --- */
.waitlist-form {
  display: flex;
  gap: var(--space-3);
  max-width: 440px;
}
.waitlist-form--hero {
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  margin: 0 auto;
  gap: var(--space-3);
}
.waitlist-form--hero .form-input {
  width: 100%;
  text-align: center;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
}
.waitlist-form--hero .btn {
  width: 100%;
}
.waitlist-form .form-input {
  flex: 1;
}
.waitlist-message {
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  min-height: 1.5em;
}
.waitlist-message.success {
  color: var(--color-success);
}
.waitlist-message.error {
  color: var(--color-error);
}

/* =============================================
   AUTH VIEWS
   ============================================= */
.auth-container {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.auth-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.auth-header p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-inline: auto;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-form .btn {
  width: 100%;
  margin-top: var(--space-2);
}
.auth-footer {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.auth-footer a {
  color: var(--color-primary);
  font-weight: 500;
}
.auth-error-message {
  background: var(--color-error-highlight);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
  display: none;
}
.auth-error-message.visible {
  display: block;
}

/* =============================================
   BREATHWORK VIEW
   ============================================= */
.breathwork-container {
  min-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  position: relative;
  overflow: hidden;
}

/* Subtle organic background */
.breathwork-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(91,138,114,0.06), transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 60%, rgba(168,116,106,0.04), transparent 60%);
  pointer-events: none;
}

/* =============================================
   BREATH SCREEN NAVIGATION (SPA multi-step)
   ============================================= */
.breath-screen {
  position: relative;
  z-index: 1;
}
.breath-screen.hidden {
  display: none;
}

/* Back button */
.breath-nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  transition: background var(--transition-interactive);
}
.breath-nav-back:hover {
  background: var(--color-surface-offset);
}

/* SCREEN 1: Overview */
.breath-overview {
  /* width: 100% ist noetig, weil der Eltern .breathwork-container ein
     Flex-Container mit align-items: center und justify-content: center ist.
     Ohne explizite Breite schrumpft der Overview auf Content-Breite — was
     bei schmalem Content (Tagesuebersicht Blatt 17) sichtbar wird, waehrend
     die breiten Karten der Kurs-Startseite zufaellig genug Breite geben.
     Damit fuellt .breath-overview den verfuegbaren Raum und alle inneren
     max-width Grenzen (.kurs-entry-flow, .kurs-view, .ktag-shell) greifen
     wie vorgesehen. */
  width: 100%;
  text-align: center;
  padding-top: var(--space-2);
}
.breath-pill-panel {
  width: 100%;
}
.breath-pill-panel.hidden {
  display: none;
}
.breath-overview-inner {
  max-width: 480px;
  margin-inline: auto;
}
.breath-overview-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.breath-overview-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive),
              transform var(--transition-interactive);
}
.breath-overview-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.breath-overview-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}
.breath-overview-card-icon svg {
  width: 36px;
  height: 36px;
}
.breath-overview-card-body {
  flex: 1;
  min-width: 0;
}
.breath-overview-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breath-overview-card-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 200, 80, 0.9);
  background: rgba(255, 200, 80, 0.12);
  border: 1px solid rgba(255, 200, 80, 0.25);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 7px;
  line-height: 1.4;
  white-space: nowrap;
}
.breath-overview-card-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.breath-overview-card-arrow {
  flex-shrink: 0;
  color: var(--color-text-faint);
}
/* Warm-Up and Reise card accents */
.breath-overview-card[data-card="warmup"] .breath-overview-card-icon {
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
}
.breath-overview-card[data-card="reise"] .breath-overview-card-icon {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
/* Overview rescue button */
.breath-overview-rescue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-interactive),
              color var(--transition-interactive);
}
.breath-overview-rescue:hover {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
}
.breath-overview-rescue svg {
  width: 20px;
  height: 20px;
}

/* Mood Picker — Universum overrides */
.mood-picker {
  margin-bottom: var(--space-6);
  text-align: center;
}
.mood-picker-welcome {
  margin-bottom: var(--space-5);
}
.mood-picker-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.mood-picker-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}
.mood-picker-heading {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.mood-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.mood-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) var(--space-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  min-height: 120px;
  cursor: pointer;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive),
              transform var(--transition-interactive),
              background var(--transition-interactive);
}
.mood-tile:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(212, 160, 60, 0.12);
  transform: translateY(-1px);
}
.mood-tile:active {
  transform: scale(0.97);
}
.mood-tile-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.mood-tile-icon svg {
  width: 40px;
  height: 40px;
}
.mood-tile-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  text-align: center;
}
/* Mood tile accent colors per state */
.mood-tile[data-mood="stress"] .mood-tile-icon { color: var(--color-sage, #7B9E7B); }
.mood-tile[data-mood="schlaflos"] .mood-tile-icon { color: #8EA8C4; }
.mood-tile[data-mood="energie"] .mood-tile-icon { color: var(--color-warning, #D4A03C); }
.mood-tile[data-mood="fokus"] .mood-tile-icon { color: var(--color-primary); }
.mood-tile[data-mood="akutenot"] .mood-tile-icon { color: var(--color-secondary, #b07060); }
.mood-tile[data-mood="ruhe"] .mood-tile-icon { color: var(--color-sage, #7B9E7B); }

.mood-tile[data-mood="stress"]:hover { border-color: var(--color-sage, #7B9E7B); }
.mood-tile[data-mood="schlaflos"]:hover { border-color: #8EA8C4; }
.mood-tile[data-mood="energie"]:hover { border-color: var(--color-warning, #D4A03C); }
.mood-tile[data-mood="fokus"]:hover { border-color: var(--color-primary); }
.mood-tile[data-mood="akutenot"]:hover { border-color: var(--color-secondary, #b07060); }
.mood-tile[data-mood="ruhe"]:hover { border-color: var(--color-sage, #7B9E7B); }

/* 2-column on very small screens */
@media (max-width: 340px) {
  .mood-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SCREEN 2: Category Detail */
.breath-category {
  /* width: 100% ist noetig, weil der Eltern .breathwork-container ein
     Flex-Container mit align-items: center und justify-content: center ist.
     Ohne explizite Breite schrumpft der Screen auf Content-Breite. Weil
     Kinder wie .breath-cat-section-head white-space: nowrap haben, waechst
     die Content-Breite auf iPhone-Breite ueber den Viewport hinaus und der
     Screen laeuft beidseitig aus dem Padding raus. Siehe .breath-overview
     Zeile 1521 fuer den gleichen Fix an anderer Stelle. */
  width: 100%;
  padding-top: var(--space-2);
}
/* Gleicher Fix fuer den Settings-Screen — vorbeugend, weil er als
   .breath-screen im gleichen Flex-Container sitzt. */
.breath-screen.breath-settings {
  width: 100%;
}
.breath-category-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.breath-category-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.breath-category-header p {
  color: var(--color-text-muted);
  max-width: 440px;
  margin-inline: auto;
}
.breath-category-techniques {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.breath-cat-tech-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.breath-cat-tech-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.breath-cat-tech-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.breath-cat-tech-icon svg {
  width: 28px;
  height: 28px;
}
.breath-cat-tech-body {
  flex: 1;
  min-width: 0;
}
.breath-cat-tech-name {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 2px;
}
.breath-cat-tech-timing {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.breath-cat-tech-arrow {
  flex-shrink: 0;
  color: var(--color-text-faint);
}
.breath-cat-tech-info {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-interactive);
}
.breath-cat-tech-info:hover {
  background: var(--color-surface-offset);
}
.breath-add-pro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) auto;
  transition: opacity 0.2s;
}
.breath-add-pro.is-locked {
  opacity: 0.7;
}

/* Custom technique toast */
.breath-custom-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text, #1E2A22);
  color: var(--color-text-inverse, #F5F7F3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10001;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.breath-custom-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal overlay */
.breath-custom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: var(--space-4);
}
.breath-custom-overlay.visible {
  opacity: 1;
}
.breath-custom-modal {
  background: var(--color-bg, #0D0D1A);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: assessSlideUp 0.3s ease;
  position: relative;
}
.breath-custom-modal h3 {
  font-family: var(--font-display, var(--font-heading));
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.breath-custom-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.breath-custom-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.breath-custom-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.breath-custom-timings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 400px) {
  .breath-custom-timings { grid-template-columns: 1fr; }
}
.breath-custom-timing {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.breath-custom-timing label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}
.breath-custom-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--color-border, #333);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stepper-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, var(--color-bg));
  border: none;
  color: var(--color-text);
  font-size: 1.2em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.stepper-btn:hover { background: var(--color-primary-light, rgba(91,138,114,0.1)); }
.stepper-btn:active { background: var(--color-primary-highlight); }
.stepper-input {
  width: 48px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border, #333);
  border-right: 1px solid var(--color-border, #333);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  padding: var(--space-1) 0;
  -moz-appearance: textfield;
}
.stepper-input::-webkit-inner-spin-button,
.stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-unit {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-left: var(--space-2);
  align-self: center;
}
.breath-custom-preview {
  padding: var(--space-3);
  background: var(--color-surface, rgba(255,255,255,0.05));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
}
.preview-label {
  font-weight: 500;
  color: var(--color-text-muted);
}
.preview-bpm {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.breath-custom-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-2);
}
.custom-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 0.65em;
  font-weight: 600;
  background: var(--color-primary-light, rgba(91,138,114,0.1));
  color: var(--color-primary);
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.breath-cat-tech-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-faint);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.breath-cat-tech-delete:hover {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Close button for custom modal */
.breath-custom-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background 0.15s, color 0.15s;
}
.breath-custom-close:hover {
  background: var(--color-surface-offset, rgba(255,255,255,0.1));
  color: var(--color-text);
}

/* SCREEN 3: Settings header */
.breath-settings-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.breath-settings-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-1);
}
.breath-settings-header .breath-settings-timing {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* SCREEN 4: Session fullscreen */
body.breath-session-active .site-header,
body.breath-session-active .site-footer,
body.breath-session-active .mobile-nav,
body.breath-session-active .header-nav,
body.breath-session-active .breathwork-tabs,
body.breath-session-active .breath-section-eyebrow,
body.breath-session-active .breath-overview,
body.breath-session-active .breath-category,
body.breath-session-active .breath-settings,
body.breath-session-active .calendar-section,
body.breath-session-active .bottom-tab-bar {
  display: none !important;
}
body.breath-session-active {
  overflow: hidden !important;
  background: #0C1220 !important;
}
body.breath-session-active #main-content {
  overflow: hidden !important;
}
body.breath-session-active.native-app .view.active {
  padding-bottom: 0;
}
/* Native app: session covers entire screen via fixed positioning */
body.breath-session-active.native-app .breathwork-session {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  overflow: auto !important;
  padding: 0 var(--space-4) env(safe-area-inset-bottom, 20px) !important;
  box-sizing: border-box !important;
}
body.breath-session-active .breathwork-container {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  padding: 0 !important;
  box-sizing: border-box;
}
/* NACHT-MODUS (default) — Universum-Theme: dunkles Blau, NICHT bronze */
body.breath-session-active .breathwork-container {
  background: #0C1220;
}
body.breath-session-active.native-app .breathwork-session {
  background: #0C1220 !important;
}
body.breath-session-active.native-app {
  background: #0C1220 !important;
}
body.breath-session-active.native-app #main-content {
  background: #0C1220 !important;
}
body.breath-session-active.native-app .view.active {
  background: #0C1220 !important;
}
body.breath-session-active .breathwork-container::before {
  display: none;
}

/* 07.08.2026 (PR 30, Befund 05): Biofeedback-Deckblatt wirkt bis in den
   App-Rand. Solange bf-screen-select aktiv ist, setzt biofeedback.js den
   Marker body.bf-select-cover-active. App-Grund (var(--color-bg) = #0C1220,
   kosmisches Blau) wird lokal durch die warme Deckblatt-Farbe ersetzt, damit
   die Naht am Deckblatt-Rand verschwindet. Nur diese Wurzel und der Scroll-
   Container #main-content werden umgefaerbt — alle anderen App-Screens
   bleiben unberuehrt, weil der Marker beim Verlassen der View entfernt wird
   (app.js:navigate()) und beim Wechsel auf andere bf-screens ebenso
   (biofeedback.js:showScreen()). */
body.bf-select-cover-active {
  background: #0d0d10;
}
/* Uebergang Kopfzeile -> Deckblatt in voller Breite.
   Die Kopfzeile ist Universum-dunkelblau (#0C1220), das Deckblatt fast
   schwarz (#0d0d10). Ohne Uebergang liegt dazwischen eine sichtbare Kante,
   auch links und rechts vom Container. Ein Verlauf ueber die ersten ~96px
   der Deckblatt-Flaeche laesst die Header-Farbe in den Deckblatt-Grund
   ausklingen; ab 96px steht der volle Deckblatt-Ton. */
body.bf-select-cover-active #main-content {
  background:
    linear-gradient(to bottom, #0C1220 0%, #0d0d10 96px, #0d0d10 100%);
}
body.breath-session-active .breathwork-session {
  color: #e8ddd0;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--space-6) var(--space-4);
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 80px);
}
body.breath-session-active .breathwork-session .btn-ghost {
  color: #e8ddd0;
  border-color: rgba(232, 221, 208, 0.25);
}
body.breath-session-active .breathwork-session .btn-secondary {
  background: rgba(232, 221, 208, 0.12);
  color: #e8ddd0;
  border-color: rgba(232, 221, 208, 0.2);
}
body.breath-session-active .breath-text {
  color: #e8ddd0;
}
body.breath-session-active .breath-timer {
  color: rgba(232, 221, 208, 0.6);
}
body.breath-session-active .breathing-circle-inner {
  background: radial-gradient(circle at 40% 35%,
    rgba(91,138,114,0.7) 0%,
    rgba(91,138,114,0.4) 50%,
    rgba(91,138,114,0.2) 100%
  ) !important;
}
body.breath-session-active .breathing-circle-outer {
  border-color: rgba(91,138,114,0.35) !important;
}
body.breath-session-active .breathing-circle-ring {
  border-color: rgba(91,138,114,0.15) !important;
}
/* TAG-MODUS */
body.breath-session-active.session-day-mode {
  background: var(--color-bg) !important;
}
body.breath-session-active.session-day-mode .breathwork-container {
  background: var(--color-bg);
}
body.breath-session-active.session-day-mode.native-app .breathwork-session,
body.breath-session-active.session-day-mode.native-app,
body.breath-session-active.session-day-mode.native-app #main-content,
body.breath-session-active.session-day-mode.native-app .view.active {
  background: var(--color-bg) !important;
}
body.breath-session-active.session-day-mode .breathwork-session {
  color: var(--color-text);
}
body.breath-session-active.session-day-mode .breathwork-session .btn-ghost {
  color: var(--color-text);
  border-color: var(--color-border);
}
body.breath-session-active.session-day-mode .breathwork-session .btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
body.breath-session-active.session-day-mode .breath-text {
  color: var(--color-text);
}
body.breath-session-active.session-day-mode .breath-timer {
  color: var(--color-text-muted);
}

/* WARMUP Session fullscreen */
body.warmup-session-active .site-header,
body.warmup-session-active .site-footer,
body.warmup-session-active .mobile-nav,
body.warmup-session-active .header-nav,
body.warmup-session-active .breathwork-tabs,
body.warmup-session-active .breath-category,
body.warmup-session-active .breath-settings,
body.warmup-session-active .calendar-section,
body.warmup-session-active .bottom-tab-bar {
  display: none !important;
}
/* Keep .breath-overview visible so warmup content (nested inside pill panel) remains reachable */
body.warmup-session-active .breath-overview {
  display: block !important;
}
/* But hide the overview's own UI content */
body.warmup-session-active .breath-overview #pillUebungen,
body.warmup-session-active .breath-overview .breath-overview-inner,
body.warmup-session-active .breath-overview #overviewRescueSlot,
body.warmup-session-active .breath-overview #pillReise {
  display: none !important;
}
body.warmup-session-active {
  overflow: hidden !important;
}
body.warmup-session-active #main-content {
  overflow: hidden !important;
}
body.warmup-session-active.native-app .view.active {
  padding-bottom: 0;
}
/* Native app: warmup session covers entire screen */
body.warmup-session-active.native-app .warmup-session {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important; /* block statt flex: Scroll funktioniert in beide Richtungen */
  z-index: 9999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  /* Safe-Area: --safe-top wird auf Android von capacitor-bridge.js gesetzt,
     env(safe-area-inset-top) für iOS. Mindestens 44px als Notfall-Fallback. */
  padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top, 0px), 44px) !important;
  padding-right: var(--space-4) !important;
  padding-bottom: max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px), 20px) !important;
  padding-left: var(--space-4) !important;
  box-sizing: border-box !important;
  background: var(--color-bg) !important;
}
/* Inner wrapper: max-width damit auf Tablet nicht zu breit */
body.warmup-session-active.native-app .warmup-session > * {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
body.warmup-session-active .breathwork-container {
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
body.warmup-session-active .warmup-session {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  /* Safe-Area top-padding für Android-Statusleiste + iOS-Notch */
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-6));
  padding-right: var(--space-4);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-6));
  padding-left: var(--space-4);
  box-sizing: border-box;
}
/* Native-App Fallback über html.native-app-html (falls body-Klasse aus
   Timing-Gründen noch nicht gesetzt ist) */
html.native-app-html body.warmup-session-active .warmup-session,
html.is-native-app body.warmup-session-active .warmup-session {
  padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top, 0px), 48px) !important;
  padding-bottom: max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px), 24px) !important;
}

/* When breathwork exercise runs from Reise — breath-session-active must win */
body.breath-session-active.kurs-session-active .breath-overview {
  display: none !important;
}

/* REISE Session immersive — hide chrome when in step detail */
body.kurs-session-active .site-header,
body.kurs-session-active .site-footer,
body.kurs-session-active .mobile-nav,
body.kurs-session-active .header-nav,
body.kurs-session-active .breathwork-tabs,
body.kurs-session-active .breath-category,
body.kurs-session-active .breath-settings,
body.kurs-session-active .calendar-section,
body.kurs-session-active .bottom-tab-bar {
  display: none !important;
}
/* Keep .breath-overview visible so reiseSession (nested inside pill panel) remains reachable */
body.kurs-session-active .breath-overview {
  display: block !important;
}
/* But hide the overview's own UI content */
body.kurs-session-active .breath-overview #pillUebungen,
body.kurs-session-active .breath-overview .breath-overview-inner,
body.kurs-session-active .breath-overview #overviewRescueSlot,
body.kurs-session-active .calendar-section {
  display: none !important;
}
body.kurs-session-active {
  overflow-y: auto;
}
body.kurs-session-active #main-content {
  overflow: hidden !important;
}
body.kurs-session-active.native-app .view.active {
  padding-bottom: 0;
}
/* Native app: reise session covers entire screen */
body.kurs-session-active.native-app .kurs-session {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top, 20px) var(--space-4) env(safe-area-inset-bottom, 20px) !important;
  box-sizing: border-box !important;
  background: var(--color-bg) !important;
}
body.kurs-session-active .breathwork-container {
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
}
body.kurs-session-active .kurs-session {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  text-align: center;
}

/* Screen slide transitions */
.breath-screen {
  animation: breathScreenIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes breathScreenIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.breath-screen.slide-out-left {
  animation: breathScreenOutLeft 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes breathScreenOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}

/* Pre-session (duration selector) */
.breathwork-setup {
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.breathwork-setup h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.breathwork-setup p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  margin-inline: auto;
}
/* ═══ SESSION SETTINGS — REDESIGNED ═══ */
.ss-section {
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ss-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 4px;
}

/* Scroll Picker (horizontal drum roller) */
/* Drum-Roller Wheel Picker */
.ss-scroll-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ss-scroll-track {
  position: relative;
  height: 140px;
  width: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 4px;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  perspective: 300px;
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.3) 15%, black 35%, black 65%, rgba(0,0,0,0.3) 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.3) 15%, black 35%, black 65%, rgba(0,0,0,0.3) 85%, transparent 100%);
}
.ss-scroll-track::-webkit-scrollbar { display: none; }
.ss-scroll-track::before {
  content: '';
  position: sticky;
  top: 49px;
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
  margin-bottom: -42px;
}
.ss-scroll-item {
  scroll-snap-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: 600 18px var(--font-body);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
}
.ss-scroll-item:hover { color: var(--color-text); }
.ss-scroll-item.selected {
  color: var(--color-primary-text, #fff);
  font-weight: 700;
  font-size: 22px;
}
.ss-scroll-spacer {
  height: 49px;
  flex-shrink: 0;
}
.ss-scroll-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-faint);
  flex-shrink: 0;
  align-self: center;
}
.ss-scroll-custom {
  /* custom input in wheel */
}
.ss-custom-input {
  width: 32px;
  text-align: center;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.ss-custom-input::-webkit-inner-spin-button,
.ss-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Tempo Stepper */
.ss-tempo-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  min-width: 220px;
}
.ss-tempo-btn {
  width: 52px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s;
}
.ss-tempo-btn:hover { background: var(--color-surface-active); }
.ss-tempo-btn:active { background: var(--color-surface-offset); }
.ss-tempo-value {
  flex: 1;
  text-align: center;
  font: 600 18px var(--font-body);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.ss-tempo-labels {
  display: flex;
  justify-content: space-between;
  max-width: 220px;
  margin: 0 auto;
  padding: 4px 8px 0;
  font-size: 11px;
  color: var(--color-text-faint);
}

/* Switch Pill Group */
.ss-pill-group {
  display: inline-flex;
  gap: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 3px;
  max-width: 100%;
}
.ss-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: 500 13px var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ss-pill:hover { color: var(--color-text); }
.ss-pill.selected,
.ss-pill.visual-mode-option.selected {
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  border-color: var(--color-primary);
}
.ss-pill svg { flex-shrink: 0; }

/* ═══ LEGACY (kept for backward compat) ═══ */

.duration-options {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.duration-option {
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-bg);
  cursor: pointer;
  min-width: 80px;
  min-height: 44px;
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              color var(--transition-interactive),
              transform var(--transition-interactive);
}
.duration-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.duration-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Active session */
.breathwork-session {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.breathwork-session.active {
  display: flex;
}
.breathwork-setup.hidden {
  display: none;
}

/* ─── BREATHING CIRCLE — PLANET & ORBIT ─── */
.breathing-circle-wrapper {
  position: relative;
  width: clamp(220px, 55vw, 300px);
  height: clamp(220px, 55vw, 300px);
  max-height: 38vh;
  max-width: 38vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  overflow: visible;
  flex-shrink: 1;
}
.breathing-circle {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  position: relative;
  /* GPU-Layer-Promotion fuer Android WebView: erzwingt Compositor-Layer,
     damit Skalierung pro Frame nicht den Main-Thread blockiert. */
  will-change: transform;
  transform: translateZ(0);
}
.breath-orbit-moon,
.breath-orbit-glow,
.breath-rocket,
.breath-tube-fill {
  will-change: transform;
}

/* Atmospheric glow — the planet’s corona */
.breathing-circle::before {
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(91,138,114,0.18) 40%, rgba(91,138,114,0.06) 65%, transparent 80%);
  z-index: 0;
  transition: background 0.8s ease;
  pointer-events: none;
}
.breathing-circle-inner.phase-inhale ~ .breath-atmo,
.phase-inhale-active .breathing-circle::before {
  background: radial-gradient(circle, rgba(196,120,74,0.18) 40%, rgba(196,120,74,0.06) 65%, transparent 80%);
}

/* SVG orbit track + fill */
.breath-progress-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%) rotate(-90deg);
  z-index: 3;
  pointer-events: none;
  overflow: visible; /* Mond+Glow duerfen leicht ueber viewBox hinausragen */
}
.breath-tube-track {
  fill: none;
  stroke: rgba(74,122,101,0.06);
  stroke-width: 3.5;
}
.breath-tube-fill {
  fill: none;
  stroke: url(#tubeGradKlassisch);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 584.336;
  stroke-dashoffset: 584.336;
  filter: url(#glowSage);
}
/* Orbiting moon — bright dot at the leading edge of the fill */
.breath-orbit-moon {
  fill: rgba(200,235,215,0.95);
  r: 4;
  filter: url(#glowMoon);
  transition: fill 0.5s ease;
}

/* Universum orbit */
.theme-universum .breathing-circle::before {
  background: radial-gradient(circle, rgba(196,154,108,0.18) 40%, rgba(196,154,108,0.06) 65%, transparent 80%);
}
.theme-universum .breath-tube-track {
  stroke: rgba(196,154,108,0.06);
}
.theme-universum .breath-tube-fill {
  stroke: url(#tubeGradUniversum);
  filter: url(#glowGold);
}
.theme-universum .breath-orbit-moon {
  fill: rgba(255,225,170,0.95);
  filter: url(#glowMoonGold);
}

/* The planet — 3D sphere with atmosphere */
.breathing-circle-inner {
  position: absolute;
  inset: 10%;
  border-radius: var(--radius-full);
  z-index: 2;
  background:
    /* Specular highlight — sharp, brilliant */
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.0) 30%),
    /* Secondary diffuse light */
    radial-gradient(circle at 42% 36%, rgba(200,240,215,0.35) 0%, transparent 45%),
    /* Rim light — atmospheric scatter on right edge */
    radial-gradient(circle at 82% 30%, rgba(180,220,200,0.18) 0%, transparent 25%),
    /* Terminator — sharp day/night boundary */
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(20,45,32,0.50) 75%, rgba(8,22,15,0.75) 100%),
    /* Base color — rich, deep sage */
    radial-gradient(circle at 46% 44%, #6B9E82 0%, #4E8568 35%, #3A6B50 60%, #2A4D3C 85%, #1A3528 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.28),
    inset 0 8px 20px rgba(255,255,255,0.15),
    inset -6px 0 18px rgba(0,0,0,0.10),
    /* Atmospheric glow */
    0 0 20px rgba(91,138,114,0.25),
    0 0 50px rgba(91,138,114,0.15),
    0 0 100px rgba(91,138,114,0.06);
  transition: transform 0.15s ease-out, box-shadow 0.6s ease, background 0.8s ease;
}
/* Inhale — warm terracotta planet */
.breathing-circle-inner.phase-inhale {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(240,190,140,0.30) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(240,200,170,0.14) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(70,28,8,0.48) 75%, rgba(35,12,2,0.72) 100%),
    radial-gradient(circle at 46% 44%, #D4A070 0%, #C08A55 35%, #9A6A3A 60%, #7A4E25 85%, #5A3515 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.28),
    inset 0 8px 20px rgba(255,220,180,0.18),
    inset -6px 0 18px rgba(0,0,0,0.10),
    0 0 20px rgba(196,120,74,0.30),
    0 0 50px rgba(196,120,74,0.18),
    0 0 100px rgba(196,120,74,0.08);
}
/* Exhale — deep sage planet */
.breathing-circle-inner.phase-exhale {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(150,210,175,0.35) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(180,220,200,0.16) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(18,42,30,0.52) 75%, rgba(6,20,12,0.76) 100%),
    radial-gradient(circle at 46% 44%, #6B9E82 0%, #4E8568 35%, #3A6B50 60%, #2A4D3C 85%, #1A3528 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.28),
    inset 0 8px 20px rgba(255,255,255,0.16),
    inset -6px 0 18px rgba(0,0,0,0.10),
    0 0 20px rgba(74,122,101,0.28),
    0 0 50px rgba(74,122,101,0.16),
    0 0 100px rgba(74,122,101,0.06);
}
/* Hold — warm bronze planet */
.breathing-circle-inner.phase-hold {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(190,165,130,0.30) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(220,200,170,0.10) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(45,32,15,0.45) 75%, rgba(22,14,4,0.70) 100%),
    radial-gradient(circle at 46% 44%, #C0A578 0%, #A89060 35%, #887040 60%, #6A5228 85%, #4A3818 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.24),
    inset 0 8px 20px rgba(255,220,160,0.15),
    inset -6px 0 18px rgba(0,0,0,0.08),
    0 0 20px rgba(139,115,85,0.25),
    0 0 50px rgba(139,115,85,0.14),
    0 0 80px rgba(139,115,85,0.06);
}

/* ─── UNIVERSUM THEME — GOLDEN PLANET ─── */
.theme-universum .breathing-circle-inner {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,248,215,0.65) 0%, rgba(255,248,215,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(235,195,135,0.30) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(255,230,180,0.12) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(55,35,10,0.52) 75%, rgba(28,16,2,0.75) 100%),
    radial-gradient(circle at 46% 44%, #D4A86C 0%, #C09050 35%, #956A30 60%, #7A5220 85%, #5A3810 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.32),
    inset 0 8px 20px rgba(255,220,160,0.18),
    inset -6px 0 18px rgba(0,0,0,0.12),
    0 0 20px rgba(196,154,108,0.35),
    0 0 50px rgba(196,154,108,0.20),
    0 0 100px rgba(196,154,108,0.08);
}
.theme-universum .breathing-circle-inner.phase-inhale {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,250,220,0.65) 0%, rgba(255,250,220,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(250,210,140,0.30) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(255,240,200,0.12) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(70,42,8,0.50) 75%, rgba(38,20,2,0.72) 100%),
    radial-gradient(circle at 46% 44%, #E4B870 0%, #D0A055 35%, #AA7C35 60%, #886020 85%, #684510 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.32),
    inset 0 8px 20px rgba(255,235,175,0.20),
    inset -6px 0 18px rgba(0,0,0,0.12),
    0 0 20px rgba(220,170,100,0.40),
    0 0 50px rgba(220,170,100,0.22),
    0 0 100px rgba(220,170,100,0.10);
}
.theme-universum .breathing-circle-inner.phase-exhale {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,242,200,0.55) 0%, rgba(255,242,200,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(195,165,120,0.25) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(255,230,185,0.08) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(45,30,8,0.50) 75%, rgba(22,12,2,0.72) 100%),
    radial-gradient(circle at 46% 44%, #B89060 0%, #A07A45 35%, #7E5E2A 60%, #604518 85%, #44300C 100%);
  box-shadow:
    inset 0 -14px 35px rgba(0,0,0,0.30),
    inset 0 8px 20px rgba(255,220,160,0.14),
    inset -6px 0 18px rgba(0,0,0,0.10),
    0 0 20px rgba(160,140,110,0.28),
    0 0 50px rgba(160,140,110,0.16),
    0 0 80px rgba(160,140,110,0.06);
}

.breath-text {
  /* Blatt 12 (12-atmen-session): Sans-Font, 32px, kein Display-Serif.
     Kanon v1.9: nur Hanken Grotesk und JetBrains Mono, Serif verbannt. */
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 300;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}

.breath-timer {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-6);
}

.breath-controls {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

/* Ensure controls are always reachable during session */
body.breath-session-active .breath-controls {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: var(--space-3) var(--space-5);
  /* FIX 07.05.2026 Bronze-Streifen: rgba(42,34,24,0.85) = #2A2218 = bronze.
     War im Universum-Theme falsch (Klassisch-Erbe). DOM-Diagnose zeigte
     y=910-920 mit dieser Farbe als Streifen unten am Rand. Loesung:
     Theme-passende Surface-Farbe mit gleicher Transparenz. */
  background: rgba(21, 29, 46, 0.85);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.breath-session-active.session-day-mode .breath-controls {
  background: var(--color-surface);
}
body.platform-android.breath-session-active .breath-controls {
  bottom: calc(var(--safe-bottom, 0px) + 16px);
}

/* Visual Mode Selector */
/* Legacy visual-mode-option overrides removed — now uses ss-pill system */
.visual-mode-selector,
.kurs-viz-selector {
  margin-bottom: var(--space-6);
}
.kurs-viz-selector {
  margin-top: var(--space-6);
}

/* Lung Visualization */
.breathing-lung-wrapper {
  position: relative;
  width: clamp(200px, 50vw, 300px);
  height: clamp(250px, 63vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.breathing-lung-wrapper svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Universum breath visualization */
.breathing-universum-wrapper {
  position: relative;
  width: clamp(260px, 65vw, 400px);
  height: clamp(260px, 65vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.breathing-universum-wrapper canvas {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
}

/* I:E Ratio Display */
.breath-ie-ratio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  opacity: 0.6;
}

/* Completion message */
.breathwork-complete {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.breathwork-complete.active {
  display: flex;
}
.breathwork-complete h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.breathwork-complete p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  margin-inline: auto;
  max-width: 40ch;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================
   REFLECTION VIEW
   ============================================= */
.reflection-container {
  min-height: calc(100dvh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}
/* Flex-Item soll die verfuegbare Breite bis max-width fuellen, sonst
   schrumpft der Container auf die natuerliche Textbreite und die
   Textareas werden je nach Fragelaenge unterschiedlich schmal. */
.reflection-container > .container-narrow {
  width: 100%;
}
.reflection-card {
  width: 100%;
  max-width: 640px;
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reflection-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.reflection-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--transition-slow),
              transform var(--transition-slow);
}
.reflection-progress-dot.active {
  background: var(--color-primary);
  transform: scale(1.25);
}
.reflection-progress-dot.completed {
  background: var(--color-primary-highlight);
}
.reflection-progress-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.reflection-question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  line-height: 1.3;
}

.reflection-textarea {
  width: 100%;
  min-height: 200px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  font-size: var(--text-base);
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.reflection-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.reflection-textarea::placeholder {
  color: var(--color-text-faint);
}

.reflection-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  gap: var(--space-4);
}

/* Reflection Summary */
.reflection-summary {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reflection-summary h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-8);
  text-align: center;
}
.summary-item {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.summary-item:last-of-type {
  border-bottom: none;
}
.summary-question {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.summary-answer {
  color: var(--color-text-muted);
  line-height: 1.7;
  white-space: pre-wrap;
}
.summary-answer.empty {
  font-style: italic;
  color: var(--color-text-faint);
}
.summary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  text-align: center;
}
.summary-invitation {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 40ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* =============================================
   PROFILE VIEW
   ============================================= */
/* Profil-Layout — orientiert am Kanon-Blatt 04-atmen-uebersicht:
   schmaler zentrierter Content, Head-Zeile mit Border-Bottom,
   Sektionen einspaltig als Karten mit Border und Padding. */
.profile-container {
  padding: var(--space-8) var(--space-6) var(--space-16);
  max-width: var(--content-narrow);
  margin-inline: auto;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 600;
  flex-shrink: 0;
}
.profile-info h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.profile-info p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  margin-top: var(--space-1);
}
.profile-section {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.profile-section h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--color-text);
  letter-spacing: -0.005em;
}
/* Collapsible profile sections */
.profile-collapse-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}
.profile-collapse-toggle:hover {
  opacity: 0.8;
}
.collapse-count {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}
.collapse-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.profile-collapse-toggle.open .collapse-chevron {
  transform: rotate(180deg);
}
.profile-collapse-body {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0;
}
.session-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(224,213,199,0.4);
}
.session-item-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.session-item-duration {
  font-size: var(--text-sm);
  font-weight: 500;
}
.session-item-status {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.session-item-status.completed {
  background: var(--color-success-highlight);
  color: var(--color-success);
}

.profile-empty {
  text-align: center;
  padding: var(--space-10);
  color: var(--color-text-muted);
}
.profile-empty p {
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* Reflection history in profile */
.reflection-history-item {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(224,213,199,0.4);
  margin-bottom: var(--space-3);
}
.reflection-history-q {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.reflection-history-a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Newsletter toggle in profile */
.newsletter-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(224,213,199,0.4);
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(224,213,199,0.5);
  border-radius: 26px;
  transition: background-color 0.3s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: wait;
}
.newsletter-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}
.newsletter-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-left: var(--space-1);
}
.profile-actions {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* =============================================
   FAQ / HILFE (Profil)
   ============================================= */
.faq-category {
  margin-bottom: var(--space-4);
}
.faq-category:last-child {
  margin-bottom: 0;
}
.faq-cat-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
}
.faq-item {
  border-bottom: 1px solid var(--color-divider);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  line-height: 1.4;
  gap: var(--space-2);
}
.faq-q:hover {
  color: var(--color-accent, #a78bfa);
}
.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-text-muted);
}
.faq-q-open .faq-chevron {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 0 var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.faq-a a {
  color: var(--color-accent, #a78bfa);
  text-decoration: underline;
}
.faq-tier-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.faq-tier-plus {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}
.faq-tier-pro {
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
}
.faq-contact {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}
.faq-contact p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* =============================================
   COMING SOON
   ============================================= */
.coming-soon {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-4);
}
.coming-soon h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.coming-soon p {
  color: var(--color-text-muted);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* =============================================
   BOTTOM TAB BAR
   ============================================= */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-dark-surface);
  border-top: 1px solid rgba(212,160,60,0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--space-2) 0;
  padding-bottom: env(safe-area-inset-bottom, var(--space-2));
}
.bottom-tab-bar .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  transition: color var(--transition-interactive);
}
.bottom-tab-bar .tab-item.active,
.bottom-tab-bar .tab-item:hover {
  color: var(--color-gold);
}
.bottom-tab-bar .tab-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* =============================================
   NATIVE APP — Android/iOS WebView scroll fix
   Core idea: body is locked, #main-content is the sole scroll container.
   This avoids Android WebView's broken body-scroll behavior.
   ============================================= */
html.native-app-html {
  height: 100% !important;
  overflow: hidden !important;
  background: var(--color-bg, #0A0A0A) !important;
}
body.native-app {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-bg, #0A0A0A) !important;
}
/* Header stays at top, not scrollable */
body.native-app .site-header {
  position: relative;
  flex-shrink: 0;
  z-index: 100;
}
/* Main content is the SOLE scroll container */
body.native-app #main-content {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* crucial for flex child scroll */
  /* Prevent iOS overscroll from showing wrong background */
  background: var(--color-bg);
}
body.native-app #app {
  min-height: auto;
}
/* Minimal clearance so content isn't hidden behind the fixed tab bar.
   Tab bar height = ~48px buttons + padding + safe-area. */
body.native-app .view.active {
  min-height: auto;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}
/* Footer hidden in native app — tab bar replaces it */
body.native-app .site-footer {
  display: none !important;
}
/* Reduce excessive bottom padding on home sections in app */
body.native-app .home-cta-section {
  padding-bottom: var(--space-4);
}
/* Bottom tab bar — fixed at very bottom, includes safe area */
body.native-app .bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-bg);
  border-top: 1px solid rgba(212,160,60,0.1);
  padding-top: 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: center;
}
/* Compact tab items in native app */
body.native-app .bottom-tab-bar .tab-item {
  padding: 2px 0;
  gap: 2px;
  font-size: 0.6875rem;
  min-width: 0;
  flex: 1;
}
body.native-app .bottom-tab-bar .tab-item .tab-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.native-app .bottom-tab-bar .tab-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
/* Hero must not clip content in native app */
body.native-app .home-hero,
body.native-app .home-hero--dark {
  overflow: visible;
  min-height: auto;
}
body.native-app .home-hero .hero-anim-zone {
  height: 50vh;
  min-height: 280px;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  /* Border entfernt. home-flow endet jetzt weich auf #0C1220, was mit
     der Body-Grundfarbe (und damit dem Footer-Bg) identisch ist.
     Zuvor lag hier eine harte Linie in #2A3650. */
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.footer-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.06em;
}
.footer-claim {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}
.footer-attr {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer-attr a {
  color: var(--color-text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-attr a:hover {
  color: var(--color-text-muted);
}
.footer-kontakt {
  font-size: var(--text-sm);
}
.footer-kontakt a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.footer-kontakt a:hover {
  color: var(--color-primary);
}

/* =============================================
   KONTAKT PAGE
   ============================================= */
.kontakt-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4);
}
.kontakt-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-4);
}
.kontakt-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-10);
  line-height: 1.6;
}
/* Contact Form */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.kontakt-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.kontakt-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.kontakt-field input,
.kontakt-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.kontakt-field input:focus,
.kontakt-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.kontakt-field textarea {
  resize: vertical;
  min-height: 120px;
}
.kontakt-submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.kontakt-status {
  font-size: var(--text-sm);
  line-height: 1.5;
  min-height: 1.5em;
}
.kontakt-status--success {
  color: #27ae60;
}
.kontakt-status--error {
  color: #e74c3c;
}
.kontakt-note {
  text-align: center;
}
.kontakt-note p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.6;
  font-style: italic;
}

@media (max-width: 640px) {
  .kontakt-page {
    padding: var(--space-12) var(--space-4);
  }
  .kontakt-title {
    font-size: var(--text-xl);
  }
  .kontakt-submit {
    align-self: stretch;
  }
}

/* =============================================
   UTILITY ANIMATIONS
   ============================================= */
.fade-in {
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* =============================================
   TECHNIQUE SELECTION GRID
   ============================================= */
.technique-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* Category tabs — Receive / Hold / Give */
.category-tabs {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}
.category-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive);
  font-family: var(--font-body);
}
.category-tab:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface);
}
.category-tab.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.category-tab-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.category-tab.active .category-tab-label {
  color: var(--color-primary-active);
}
.category-tab-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.category-tab.active .category-tab-sub {
  color: var(--color-primary);
}
.category-tab-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 200, 80, 0.9);
  background: rgba(255, 200, 80, 0.12);
  border: 1px solid rgba(255, 200, 80, 0.25);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 6px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.category-tab.active .category-tab-badge {
  color: rgba(255, 220, 120, 1);
  background: rgba(255, 200, 80, 0.2);
  border-color: rgba(255, 200, 80, 0.4);
}

/* Category section: description + card grid */
.category-section {
  width: 100%;
}
.category-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.technique-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 1;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.technique-card:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.technique-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.technique-card.selected:hover {
  background: var(--color-primary-light);
}

/* Locked technique card (e.g. Resonanz before RF measurement) */
.technique-card.technique-card-locked {
  opacity: 0.65;
  border-style: dashed;
}
.technique-card.technique-card-locked:hover {
  opacity: 0.85;
  transform: none;
  box-shadow: none;
  border-color: var(--color-primary-highlight);
}
.technique-card .technique-lock-icon {
  pointer-events: none;
}
.breath-cat-tech-card.breath-cat-tech-card-locked {
  opacity: 0.7;
  border-style: dashed;
}
.breath-cat-tech-card.breath-cat-tech-card-locked .breath-cat-tech-name {
  color: var(--color-text-muted, #7a6e60);
}

/* Technique icon */
.technique-icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  transition: color var(--transition-interactive);
}
.technique-icon svg {
  width: 100%;
  height: 100%;
}
.technique-card.selected .technique-icon {
  color: var(--color-primary);
}
.technique-card:hover .technique-icon {
  color: var(--color-text);
}
.technique-card.selected:hover .technique-icon {
  color: var(--color-primary);
}

/* Technique timing label */
.technique-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  transition: color var(--transition-interactive);
}
.technique-card.selected .technique-label {
  color: var(--color-primary-active);
}

/* Info button (right side, vertically centered) */
.technique-info-btn {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
  z-index: 2;
  padding: 0;
  border: none;
}
.technique-info-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.technique-card.selected .technique-info-btn {
  color: var(--color-primary);
}
.technique-info-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Rescue button — compact red pill */
.rescue-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.rescue-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1.5px solid rgba(196, 96, 74, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.rescue-btn-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4604A;
}
.rescue-btn-icon svg {
  width: 100%;
  height: 100%;
}
.rescue-btn-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: #C4604A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rescue-btn:hover {
  border-color: #C4604A;
  background: rgba(196, 96, 74, 0.08);
}
.rescue-btn.selected {
  border-color: #C4604A;
  background: rgba(196, 96, 74, 0.12);
  box-shadow: 0 0 0 2px rgba(196, 96, 74, 0.15);
}
.rescue-btn.selected .rescue-btn-icon,
.rescue-btn.selected .rescue-btn-label {
  color: #b8503e;
}
.rescue-info-btn {
  color: var(--color-text-faint);
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 2px;
}
.rescue-info-btn:hover {
  color: var(--color-text-muted);
}

/* Study reference in info modal */
.info-modal-study {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
}

/* Responsive: mobile */
@media (max-width: 480px) {
  .technique-grid {
    max-width: 340px;
    gap: var(--space-3);
  }
  .category-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .technique-card {
    padding: var(--space-3);
  }
  .rescue-btn {
    padding: var(--space-2) var(--space-3);
  }
  .technique-icon {
    width: 34px;
    height: 34px;
  }
  .category-tab {
    padding: var(--space-2) var(--space-1);
  }
  .category-tab-sub {
    display: none;
  }
}

/* =============================================
   INFO MODAL
   ============================================= */
.info-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* WURZEL des Bronze-Streifens (07.05.2026): rgba(44,24,16,0.35) hier
     als Default-background fuehrte trotz display:none zu GPU-Compositing-
     Layer im iOS WKWebView, der Safe-Area-Bottom bronze faerbte.
     Loesung: background NUR bei .open setzen, sonst transparent. */
  background: transparent;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  padding-bottom: env(safe-area-inset-bottom, var(--space-4));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: none;
}
.info-modal-backdrop.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  background: rgba(44, 24, 16, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.info-modal-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
  max-width: 440px;
  width: 100%;
  /* No max-height — backdrop scrolls instead */
  flex-shrink: 0;
  margin: auto;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.info-modal-backdrop.open .info-modal-card {
  transform: translateY(0) scale(1);
}

.info-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--transition-interactive),
              color var(--transition-interactive);
}
.info-modal-close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.info-modal-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.info-modal-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-right: var(--space-8);
}

.info-modal-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.info-modal-cycle {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  text-align: center;
  letter-spacing: 0.02em;
}

/* =============================================
   HRV INFO MODAL (Eliane-Feature, 06.05.2026)
   ============================================= */
.hrv-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
  vertical-align: middle;
  border-radius: 50%;
}
.hrv-info-btn:hover,
.hrv-info-btn:focus-visible {
  opacity: 1;
  color: var(--color-primary);
  transform: scale(1.1);
  outline: none;
}
.hrv-info-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hrv-info-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin: 24px 0 8px;
  background: rgba(255,255,255,0.06);
}
.hrv-info-seg {
  height: 100%;
  flex: 0 0 auto;
  transition: filter 0.15s ease;
}

.hrv-info-bands {
  position: relative;
  margin-bottom: 16px;
}
.hrv-info-marker-wrap {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.hrv-info-marker {
  width: 3px;
  height: 22px;
  background: var(--color-text);
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--color-bg);
}
.hrv-info-marker-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.hrv-info-marker-label strong {
  font-weight: 600;
  color: var(--color-primary);
}
.hrv-info-scale {
  position: relative;
  height: 14px;
  margin-top: 32px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.hrv-info-scale > span:first-child {
  position: absolute;
  left: 0;
}

.hrv-info-band-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 12px;
  display: grid;
  gap: 6px;
}
.hrv-info-band-list li {
  display: grid;
  grid-template-columns: 14px 90px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--color-text);
}
.hrv-info-band-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.hrv-info-band-range {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-size: 12px;
}
.hrv-info-band-label {
  color: var(--color-text);
  font-weight: 500;
}

.hrv-info-note {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.6;
  margin: 16px 0 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}
.hrv-info-disclaimer {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* =============================================
   SESSION TOP BAR (technique icon + audio)
   ============================================= */
.session-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--space-4);
}

.session-tech-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  opacity: 0.6;
}
.session-tech-icon svg {
  width: 100%;
  height: 100%;
}

/* Audio controls */
.session-audio-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.audio-toggle-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
}
.audio-toggle-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.audio-toggle-btn.active {
  color: var(--color-primary);
}
.audio-toggle-btn.active:hover {
  color: var(--color-primary-hover);
}

/* Audio wave lines: hidden when muted */
.audio-toggle-btn .audio-wave-1,
.audio-toggle-btn .audio-wave-2 {
  opacity: 0.3;
  transition: opacity var(--transition-interactive);
}
.audio-toggle-btn.active .audio-wave-1,
.audio-toggle-btn.active .audio-wave-2 {
  opacity: 1;
}

/* Volume slider */
.audio-volume-slider {
  width: 0;
  opacity: 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  accent-color: var(--color-primary);
  cursor: pointer;
  height: 4px;
  pointer-events: none;
}
.session-audio-controls.expanded .audio-volume-slider {
  width: 80px;
  opacity: 1;
  pointer-events: auto;
}

/* Custom range slider track */
.audio-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}
.audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  margin-top: -5px;
  cursor: pointer;
}
.audio-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  border: none;
}
.audio-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: none;
  cursor: pointer;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-page {
  padding-bottom: var(--space-8);
}

.about-hero {
  text-align: center;
  padding: var(--space-20) var(--space-4) var(--space-12);
  position: relative;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(91,138,114,0.06), transparent 60%);
  pointer-events: none;
}
.about-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  position: relative;
}
.about-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-style: italic;
  position: relative;
}

.about-section {
  padding: var(--space-12) var(--space-4);
}
.about-section-alt {
  background: var(--color-surface);
}
.about-section p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
  max-width: 60ch;
}
.about-section p:last-child {
  margin-bottom: 0;
}
.about-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.about-quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.5;
  padding: var(--space-6) var(--space-8);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: var(--space-8);
  max-width: 60ch;
}

/* Pillars grid */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.about-pillar {
  text-align: center;
}
.about-pillar-icon {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}
.about-pillar-icon svg {
  width: 100%;
  height: 100%;
}
.about-pillar h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.about-pillar p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: none;
}

@media (max-width: 640px) {
  .about-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    max-width: 360px;
    margin-inline: auto;
  }
}

/* CTA section */
.about-cta {
  text-align: center;
  padding: var(--space-16) var(--space-4);
}
.about-cta-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  max-width: none;
}
.about-gift-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-gift-link:hover {
  color: var(--color-secondary);
}

/* =============================================
   GIFT PAGE — Sender creates gift (Universum)
   ============================================= */
.gift-page {
  padding: var(--space-12) var(--space-4) var(--space-16);
}

.gift-hero {
  margin-bottom: var(--space-8);
}
.gift-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.gift-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.gift-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.gift-section-h {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 var(--space-3);
}
.gift-section-h-optional {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.gift-section-optional {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Login prompt */
.gift-login-prompt {
  text-align: center;
  padding: var(--space-10) var(--space-4);
}
.gift-login-prompt p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

/* Gift type selection cards (Radio-Style, Blatt 30) */
.gift-type-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.gift-type-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
  width: 100%;
}
.gift-type-card:hover {
  border-color: var(--color-text-muted);
}
.gift-type-card.active {
  border-color: var(--color-text);
}
.gift-radio {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: 4px;
  position: relative;
}
.gift-type-card.active .gift-radio {
  border-color: var(--color-text);
}
.gift-type-card.active .gift-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-text);
}
.gift-type-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}
.gift-type-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gift-type-tier {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
}
.gift-type-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Kurs-Panel (nur sichtbar bei gift_type=kurs). Portiert aus Blatt 30,
   Zeilen 152–206 (blaetter-v4-final/30-verschenken-uebersicht). Farb-
   und Radius-Variablen folgen der Konvention der .gift-type-card oberhalb. */
.kurs-panel {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.kurs-panel[hidden] { display: none; }
.kurs-panel-h {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.kurs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kurs-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.kurs-card:hover:not(.disabled) {
  border-color: var(--color-text-muted);
}
.kurs-card.active {
  border-color: var(--color-text);
}
.kurs-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kurs-mark {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 50%;
  position: relative;
}
.kurs-card.active .kurs-mark { border-color: var(--color-text); }
.kurs-card.active .kurs-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-text);
}
.kurs-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.kurs-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}
.kurs-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Duration picker */
.gift-duration-picker {
  margin-bottom: var(--space-6);
}
.gift-duration-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.gift-duration-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gift-duration-btn {
  flex: 1;
  min-width: 100px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.gift-duration-btn:hover {
  border-color: var(--color-primary);
}
.gift-duration-btn.active {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.gift-save-badge { display: none; }

/* Zeitraum-Umschalter (Pro/Premium): Monat oder Jahr.
   Segmented-Switch, orientiert an Blatt 31 (.period-switch). */
.gift-period-switch {
  margin-bottom: var(--space-6);
}
.gift-period-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: 3px;
  background: var(--color-surface-alt, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.gift-period-btn {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary, var(--color-text));
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.gift-period-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.gift-period-val {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-family: var(--font-mono);
  margin-left: var(--space-2);
}

.form-input-required {
  border-color: var(--color-text) !important;
}

/* Reise goal picker in gift (Universum) */
.gift-reise-picker {
  margin-top: var(--space-4);
}
.gift-reise-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.gift-reise-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.gift-reise-goal:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.gift-reise-goal.active {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.gift-reise-goal-icon {
  font-size: 1.5rem;
}
.gift-reise-goal-name {
  font-size: var(--text-xs);
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}
.gift-reise-duration {
  margin-top: var(--space-3);
}
@media (max-width: 480px) {
  .gift-reise-goals {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Price display */
.gift-price-display {
  text-align: center;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}
.gift-price-amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.gift-price-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Steps */
.gift-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.gift-step { }
.gift-step #giftSenderName,
.gift-step #giftMessage {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.gift-step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Message form */
.gift-message-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-label-optional {
  font-weight: 400;
  color: var(--color-text-faint);
}
.form-char-count {
  display: block;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* Checkout section */
.gift-checkout-section {
  text-align: center;
  padding-top: var(--space-4);
}
.gift-checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
}
.gift-checkout-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}

/* =============================================
   GIFT — Sender Success Page (Universum)
   ============================================= */
.gift-success-full {
  text-align: center;
  padding: var(--space-12) 0 var(--space-8);
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gift-success-icon {
  width: 64px;
  height: 64px;
  color: var(--color-success);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.gift-success-full h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.gift-success-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Share box */
.gift-share-box {
  display: flex;
  gap: var(--space-3);
  max-width: 500px;
  margin: 0 auto var(--space-6);
}
.gift-link-input {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

/* Share buttons */
.gift-share-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.gift-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Success footer */
.gift-success-footer {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* =============================================
   GIFT — Recipient Redeem Page (Universum)
   ============================================= */
.gift-redeem-loading {
  text-align: center;
  padding: var(--space-16) 0;
}
.gift-loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.gift-redeem-loading p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.gift-redeem-page {
  text-align: center;
  padding: var(--space-12) 0;
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gift-redeem-visual {
  margin-bottom: var(--space-8);
}
/* 2026-08-13: Herz-SVG entfernt (Kanon R3, §11.26). Klasse bleibt zur
   Sicherheit im DOM-Fallback verborgen. */
.gift-redeem-heart { display: none; }

/* Ersetzt das Herz: kleine Vorspann-Zeile ueber dem Titel. */
.gift-redeem-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.gift-redeem-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.gift-redeem-what {
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: 500;
}

/* Sender message */
.gift-redeem-message {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin: 0 auto var(--space-8);
  max-width: 440px;
}
.gift-redeem-msg-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.gift-redeem-msg-from {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Redeem action */
.gift-redeem-action {
  margin-bottom: var(--space-6);
}
.gift-redeem-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}

/* Redeemed/done state */
.gift-redeem-done {
  text-align: center;
  padding: var(--space-4) 0;
  animation: fadeIn 0.5s ease;
}
.gift-redeem-done svg {
  color: var(--color-success);
  margin-bottom: var(--space-4);
}

/* Erfolgs-Haken in eigenem Rahmen (dezenter als die grossen Legacy-Icons). */
.gift-redeem-check {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin: 0 auto var(--space-4);
}
.gift-redeem-check svg {
  margin: 0;
  color: inherit;
}

/* Status-Zustand "schon eingeloest": Text traegt, kein Icon. */
.gift-redeem-status-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.gift-redeem-status-body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Pending-Gift-Kontext-Banner auf Login und Register. */
.pending-gift-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.pending-gift-banner .pending-gift-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
.pending-gift-banner .pending-gift-body {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}

/* Fehler-Zustand: Vorspann-Zeile statt Kreuz-Icon. */
.gift-error-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.gift-redeem-done h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.gift-redeem-done p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Error state */
.gift-error {
  text-align: center;
  padding: var(--space-16) 0;
}
.gift-error svg {
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.gift-error h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.gift-error p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

/* =============================================
   GIFT — My Gifts (Sender list, Universum)
   ============================================= */
.gift-my-section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.gift-my-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.gift-my-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.gift-my-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.gift-my-plan {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.gift-my-status {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.gift-status-active {
  color: var(--color-success);
  background: rgba(74, 222, 128, 0.12);
}
.gift-status-redeemed {
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.gift-my-card-link {
  display: flex;
  gap: var(--space-2);
}
.gift-my-card-link .gift-link-input {
  flex: 1;
  font-size: var(--text-xs);
}
.gift-copy-btn {
  flex-shrink: 0;
}

/* =============================================
   BREATHWORK TAB TOGGLE
   ============================================= */
.breathwork-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 3px;
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 2;
}
.breathwork-tab {
  padding: 8px 16px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all 0.2s ease;
}
.breathwork-tab:hover {
  color: var(--color-text);
}
.breathwork-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  box-shadow: var(--shadow-sm);
}
/* Die Reise — visuell hervorgehoben */
.breathwork-tab[data-tab="reise"] {
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
}
.breathwork-tab[data-tab="reise"]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4956a;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.breathwork-tab[data-tab="reise"].active::after {
  opacity: 0;
}
.breathwork-tab[data-tab="reise"].active {
  background: linear-gradient(135deg, #c4956a 0%, #a8744e 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(168, 116, 78, 0.5);
  font-weight: 700;
}

.breathwork-tab-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.breathwork-tab-panel.hidden {
  display: none;
}

/* =============================================
   REISE ENTRY FLOW — Goal Selection, Day Picker, Preview
   ============================================= */
.kurs-entry-flow {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kurs-entry-flow.hidden {
  display: none;
}

.kurs-entry {
  padding: var(--space-4) 0;
}
.kurs-entry-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.kurs-entry-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.kurs-entry-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.kurs-goals {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kurs-goal-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  font: inherit;
  color: inherit;
  backdrop-filter: blur(10px);
}
.kurs-goal-card:hover:not([disabled]) {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  background: var(--color-surface-2);
}
.kurs-goal-card:active:not([disabled]) {
  transform: translateY(0);
}
.kurs-goal-icon {
  /* v4 Blatt 13: 44x44 Container, 1px Rahmen, gerundet. Signal-Kurven-Icons
     bringen ihre Farben selbst mit (kein currentColor mehr). */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  flex-shrink: 0;
}
.kurs-goal-info {
  flex: 1;
  min-width: 0;
}
.kurs-goal-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 2px;
}
.kurs-goal-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.kurs-goal-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* Bald-Status — Ruhe und Energie bis Curriculum steht */
.kurs-goal-card.kurs-goal-coming {
  opacity: 0.65;
  cursor: default;
}
.kurs-goal-card.kurs-goal-coming:hover {
  transform: none;
  border-color: var(--line, #2A3452);
}
.kurs-goal-coming-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E0B860;
  flex-shrink: 0;
  margin-left: auto;
}

/* Auf schmalen Viewports (iPhone-Breite) reicht der horizontale Platz nicht
   fuer Icon + mehrzeilige Beschreibung + monospaced Status-Label. Die Karte
   stapelt dann vertikal, das Label rutscht unter die Info-Spalte und sitzt
   linksbuendig mit Text unter der Beschreibung. */
@media (max-width: 640px) {
  .kurs-goal-card.kurs-goal-coming {
    flex-wrap: wrap;
  }
  .kurs-goal-card.kurs-goal-coming .kurs-goal-coming-label {
    flex-basis: 100%;
    margin-left: calc(44px + var(--space-4));
    margin-top: var(--space-2);
  }
}

.kurs-day-picker {
  padding: var(--space-4) 0;
}
.kurs-dp-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-top: var(--space-4);
}
.kurs-dp-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-surface-offset);
}
.kurs-dp-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.kurs-dp-question {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.5;
  font-style: italic;
}
.kurs-dp-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.kurs-dp-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font: inherit;
  color: inherit;
  position: relative;
  backdrop-filter: blur(10px);
}
.kurs-dp-option:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.kurs-dp-recommended {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.08);
}
.kurs-dp-days {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.kurs-dp-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.kurs-dp-sublabel {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.kurs-dp-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 14px;
  background: var(--color-primary, #6366f1);
  color: #fff;
}

.kurs-preview {
  padding: var(--space-4) 0;
  text-align: center;
}
.kurs-preview-hero {
  padding: var(--space-8) var(--space-4);
  margin-bottom: var(--space-6);
}
.kurs-preview-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-surface-offset);
  color: var(--goal-color, var(--color-primary));
}
.kurs-preview-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.kurs-preview-days {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kurs-preview-phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  margin-bottom: var(--space-6);
}
.kurs-preview-phase {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border);
}
.kurs-preview-phase-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-offset);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.kurs-preview-phase-info {
  flex: 1;
}
.kurs-preview-phase-name {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.kurs-preview-phase-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.kurs-preview-phase-days {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-top: 2px;
}
.kurs-preview-philosophy {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

.kurs-overview-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

/* --- Fortsetzen-Banner (Kurs-Screen v4) ---
   Blatt 13 v4: Gold-Rand 0.5px als einziger Anker (§11.26), Eyebrow
   „Fortsetzen“ über dem Kurs-Namen, Zeile „Tag X von Y“ ohne Prozent,
   ohne Fortschrittsbalken. */
.kurs-continue-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 0.5px solid var(--u-accent, #E0B860);
  border-radius: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
}
.kurs-continue-banner:hover {
  background: var(--color-surface-2);
  box-shadow: 0 2px 12px rgba(224, 184, 96, 0.12);
}
.kurs-continue-banner:active {
  transform: scale(0.99);
}
.kurs-continue-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.kurs-continue-info {
  flex: 1;
  min-width: 0;
}
.kurs-continue-eyebrow {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
  margin-bottom: 2px;
}
.kurs-continue-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.kurs-continue-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.kurs-continue-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

/* Journal-Zeile auf Kurs-Startseite
   Erscheint innerhalb der .kurs-active-card unter dem Banner. Basiswerte
   werden für den Karten-Kontext neutralisiert (siehe .kurs-active-card). */
.kurs-journal-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
}
.kurs-journal-row:hover {
  background: var(--color-surface-2);
  border-color: var(--color-text-muted);
}
.kurs-journal-row:active {
  transform: scale(0.99);
}
.kurs-journal-row-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text-muted);
}
.kurs-journal-row-info {
  flex: 1;
  min-width: 0;
}
.kurs-journal-row-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.kurs-journal-row-meta {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.kurs-journal-row-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

/* Kurs-Karte — gemeinsamer Container für Banner + Journal-Zeile.
   Koppelt das Journal optisch an den Kurs. Nur der äußere Rahmen ist
   sichtbar; innere Kinder werden entkleidet (kein eigener Rand, kein
   eigener margin, kein eigenes Hintergrund-Panel). */
.kurs-active-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 0.5px solid var(--u-accent, #E0B860);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.kurs-active-card:hover {
  box-shadow: 0 2px 12px rgba(224, 184, 96, 0.12);
}
.kurs-active-card > .kurs-continue-banner,
.kurs-active-card > .kurs-done-banner {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
}
.kurs-active-card > .kurs-continue-banner:hover {
  background: var(--color-surface-2);
  box-shadow: none;
}
.kurs-active-card-divider {
  height: 0.5px;
  background: var(--color-border);
  margin: 0 var(--space-4);
}
.kurs-active-card > .kurs-journal-row {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
}
.kurs-active-card > .kurs-journal-row:hover {
  background: var(--color-surface-2);
  border-color: transparent;
}

/* =============================================
   REISE VIEW — JOURNEY CURRICULUM
   ============================================= */
.kurs-view {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kurs-view.hidden {
  display: none;
}
/* Blatt 17: Kurs-Tag-Detail. Ohne diese Regel bleibt der Container sichtbar
   und rendert seinen statischen Inhalt unter der Kurs-Auswahl. */
.kurs-tag-detail.hidden {
  display: none;
}
.kurs-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.kurs-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.kurs-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 360px;
  margin-inline: auto;
}

/* Progress Bar */
.kurs-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-surface-offset);
  border-radius: 2px;
  margin-top: var(--space-5);
  overflow: hidden;
}
.kurs-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}
.kurs-progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

/* Phase Groups */
.kurs-phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-10);
}
.kurs-phase {
  display: flex;
  flex-direction: column;
}
.kurs-phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: 16px;
  background: var(--color-surface);
}
.kurs-phase-header.kurs-phase-current {
  background: var(--color-primary-light);
}
.kurs-phase-header.kurs-phase-done {
  background: var(--color-primary-highlight);
}
.kurs-phase-indicator {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-offset-2);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}
.kurs-phase-current .kurs-phase-indicator {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.kurs-phase-done .kurs-phase-indicator {
  background: var(--color-primary-active);
  color: var(--color-text-inverse);
}
.kurs-phase-info {
  flex: 1;
  min-width: 0;
}
.kurs-phase-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.kurs-phase-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* Day Cards */
.kurs-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-4);
}
.kurs-day {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.kurs-day:hover {
  background: var(--color-surface);
}
.kurs-day:active {
  background: var(--color-surface-2);
}

/* Day states */
.kurs-day--locked {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.kurs-day--locked:hover {
  background: transparent;
}
.kurs-day--current {
  background: var(--color-primary-light);
}
.kurs-day--current:hover {
  background: var(--color-primary-highlight);
}
.kurs-day--completed .kurs-day-marker {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.kurs-day--current .kurs-day-marker {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  animation: reisePulse 2s ease-in-out infinite;
}

@keyframes reisePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 138, 114, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(91, 138, 114, 0); }
}

/* Day marker (circle) */
.kurs-day-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.kurs-day-num {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.kurs-day--current .kurs-day-num {
  color: var(--color-text-inverse);
}

/* Day content */
.kurs-day-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kurs-day-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kurs-day--completed .kurs-day-title {
  color: var(--color-text-muted);
}
.kurs-day--locked .kurs-day-title {
  color: var(--color-text-faint);
}
.kurs-day-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.kurs-day-arrow {
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.kurs-day--current .kurs-day-arrow {
  color: var(--color-primary);
}

/* =============================================
   REISE SESSION DETAIL VIEW
   ============================================= */
.kurs-session {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kurs-session.hidden {
  display: none;
}
.kurs-session-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.kurs-journal-icon-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.kurs-journal-icon-btn:hover,
.kurs-journal-icon-btn:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-gold-glow);
  outline: none;
}

/* --- Kurs-Journal (Blatt 19) ---------------------------------------- */
.kurs-journal-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kurs-journal-view.hidden { display: none; }
.kurs-journal-topbar {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}
.journal-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}
.journal-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.journal-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}
.journal-pos {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.journal-pos .n { color: var(--color-text); }
.journal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  padding-bottom: var(--space-1);
}
.journal-section-hint {
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
}
.journal-empty-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

/* Meilenstein-Karten */
.meilen-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.meilen-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.meilen-einheit {
  font-size: var(--text-2xs, 11px);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}
.meilen-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.meilen-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  background: var(--color-surface-2);
  border-radius: 10px;
  min-height: 56px;
  justify-content: space-between;
}
.meilen-tag {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-2xs, 11px);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.meilen-wert {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-base, 16px);
  color: var(--color-text);
  min-height: 1.4em;
  display: flex;
  align-items: flex-end;
}
.meilen-wert-inner {
  color: var(--color-primary);
}
.meilen-slot.leer .meilen-wert::before {
  content: "—";
  color: var(--color-text-faint);
  opacity: 0.6;
}
.meilen-delta {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.meilen-delta-ref {
  color: var(--color-text-faint);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.06em;
}

/* Metrik-Karten (Bogen-Verlauf) */
.metrik-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.metrik-titel {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.metrik-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.metrik-zeile .k {
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.metrik-zeile .v {
  color: var(--color-text);
  text-align: right;
  max-width: 60%;
  overflow-wrap: anywhere;
}
.metrik-zeile .v.gold {
  color: var(--color-primary);
}
.metrik-zeile.leer .v {
  color: var(--color-text-faint);
  opacity: 0.6;
}

/* --- Kurs-Journal · Editier-Modell (PR C3) --- */
.metrik-zeile .v.editable {
  cursor: text;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 1px;
}
.metrik-zeile .v.editable:hover,
.metrik-zeile .v.editable:focus {
  border-bottom-color: var(--ink);
  outline: none;
}
.metrik-zeile.invalid .v,
.meilen-slot.invalid .meilen-wert-inner {
  text-decoration: line-through;
  color: var(--color-text-faint);
}
button.invalid-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  line-height: 0;
  border-radius: 3px;
}
button.invalid-toggle:hover,
button.invalid-toggle:focus {
  color: var(--ink);
  background: var(--surface-2);
  outline: none;
}
button.invalid-toggle[aria-pressed="true"] {
  color: var(--ink);
}
input.journal-edit-input {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font: inherit;
  padding: 0 2px;
  width: 12ch;
  min-width: 8ch;
  text-align: right;
  outline: none;
}

/* --- Kurs-Journal · Aktionen und Import-Dialog (PR C2) --- */
.journal-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.journal-aktion {
  appearance: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.journal-aktion:hover,
.journal-aktion:focus-visible {
  background: var(--surface-2);
  border-color: var(--ink);
  outline: none;
}
.journal-aktion.primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.journal-aktion.primary:hover,
.journal-aktion.primary:focus-visible {
  background: var(--ink);
  color: var(--paper);
  opacity: 0.9;
}

.journal-import-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: var(--space-4);
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-4));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4));
}
.journal-import-dialog.hidden { display: none; }
.import-dialog-inner {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  max-width: 460px;
  width: 100%;
  padding: var(--space-5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.import-titel {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.import-text {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.import-bilanz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4) 0;
}
.import-bilanz > div {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--space-2);
  text-align: center;
}
.import-bilanz dt {
  font-family: var(--font-mono);
  font-size: var(--text-xxs, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px 0;
}
.import-bilanz dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
}
.import-warnungen {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted);
}
.import-aktionen {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Wenn das Journal offen ist, verstecken wir alle Session-Inhalte ausser
   Header und Journal-View. Damit landet man beim Schliessen wieder an
   genau der Kachel, aus der man kam — der DOM-Zustand bleibt erhalten. */
body.kurs-journal-open #reiseSession > :not(.kurs-session-header):not(#reiseJournal) {
  display: none !important;
}
.kurs-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.kurs-session-day {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kurs-session-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

/* Theory Section */
.kurs-theory {
  background: var(--color-surface);
  border-radius: 16px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.kurs-theory.hidden {
  display: none;
}
.kurs-theory-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.kurs-theory-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Warmup Section */
.kurs-warmup {
  margin-bottom: var(--space-6);
}
.kurs-warmup-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.kurs-warmup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kurs-warmup-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.kurs-warmup-item:hover {
  background: var(--color-surface-2);
}
.kurs-warmup-item.done {
  opacity: 0.5;
}
.kurs-warmup-item.done .kurs-warmup-checkbox {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.kurs-warmup-item.done .kurs-warmup-checkbox::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  border: solid var(--color-text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}
.kurs-warmup-check {
  flex-shrink: 0;
  padding-top: 2px;
}
.kurs-warmup-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.kurs-warmup-info {
  flex: 1;
  min-width: 0;
}
.kurs-warmup-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.kurs-warmup-instruction {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.kurs-warmup-duration {
  display: block;
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* Session Description */
.kurs-session-desc {
  background: var(--color-surface);
  border-radius: 16px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.kurs-session-desc.hidden {
  display: none;
}
.kurs-session-desc-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.kurs-session-desc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kurs-desc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kurs-desc-icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}
.kurs-desc-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.kurs-desc-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}
.kurs-desc-rounds {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kurs-desc-round {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  background: var(--color-bg);
}
.kurs-desc-round-num,
.kurs-desc-step-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.kurs-desc-round-detail {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}
.kurs-desc-step {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  line-height: 1.5;
}

/* Audio Toggle */
.kurs-audio-row {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.kurs-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kurs-audio-toggle:hover {
  background: var(--color-surface);
}
.kurs-audio-toggle.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.kurs-audio-toggle:not(.active) .kurs-audio-wave {
  display: none;
}
.kurs-audio-icon {
  flex-shrink: 0;
}
.kurs-audio-label {
  font-weight: 500;
}

/* Reflection Section */
.kurs-reflection {
  text-align: center;
  padding: var(--space-4) 0;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kurs-reflection.hidden {
  display: none;
}

/* Hidden utility for reise step flow elements */
.kurs-warmup.hidden {
  display: none;
}
.kurs-audio-row.hidden {
  display: none;
}
#reiseStartSession.hidden {
  display: none;
}
#reiseNextStep.hidden {
  display: none;
}
#reiseVizSelector.hidden,
.kurs-viz-selector.hidden {
  display: none !important;
}
#reiseSessionModeSelector.hidden {
  display: none !important;
}
#reiseNextStep {
  position: fixed;
  bottom: calc(var(--safe-bottom, 0px) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-8));
  max-width: 480px;
  z-index: 100;
}
.kurs-speed-control {
  margin: var(--space-4) 0;
}
.kurs-speed-control.hidden {
  display: none;
}

/* =============================================
   STANDALONE WARMUP TAB
   ============================================= */
.warmup-standalone {
  padding: var(--space-4) 0;
}
.warmup-standalone h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.warmup-intro {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}
.warmup-intro.hidden { display: none; }
.warmup-standalone .hidden { display: none; }
.warmup-standalone h2.hidden { display: none; }

/* Category filter pills */
.warmup-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.warmup-categories.hidden { display: none; }
.warmup-cat-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.warmup-cat-btn:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}
.warmup-cat-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Exercise card list */
.warmup-exercise-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.warmup-exercise-list.hidden { display: none; }
.warmup-ex-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius, 12px);
  border: 1px solid var(--color-border);
  transition: background 0.2s, border-color 0.2s;
}
.warmup-ex-card:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}
.warmup-ex-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-primary);
}
.warmup-ex-illus {
  flex-shrink: 0;
  width: 88px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-surface-alt, var(--color-bg));
  color: var(--color-primary);
}
.warmup-ex-illus svg {
  width: 80px;
  height: 52px;
}
.warmup-ex-body {
  flex: 1;
  min-width: 0;
}
.warmup-ex-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.warmup-ex-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.warmup-ex-meta {
  display: block;
  font-size: 10px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.warmup-ex-play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  margin-top: var(--space-1);
}
.warmup-ex-play:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Guided warmup active view */
.warmup-active {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.warmup-active.hidden { display: none; }
.warmup-active-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}
.warmup-active-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.warmup-active-exercise {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  margin-bottom: var(--space-6);
}
.warmup-active-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.warmup-active-instruction {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  line-height: 1.5;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}
.warmup-active-timer {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.warmup-active-progress {
  width: 100%;
  max-width: 280px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}
.warmup-active-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  width: 0%;
  transition: width 1s linear;
}
.warmup-active .btn-secondary {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

/* ===== Warm-Up Module (warmup.js) — Standard + Intensiv Programmwaehler ===== */
.warmup-view { width: 100%; }
.warmup-view.hidden { display: none; }

.warmup-overview {
  /* Gleiche Content-Spalte wie der Atmen-Reiter (.breath-overview-inner:
   * max-width 480px, mittig). Blatt 10 haelt den Hero linksbuendig innerhalb
   * dieser Spalte. */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.warmup-header {
  text-align: left;
  margin-bottom: var(--space-6);
}
/* === Warm-Up-Uebersicht (Blatt 10 v4) ================================
 * Titel gross und leicht, Programmwaehler mit Marker-Strich statt Fill,
 * drei getrennte Meta-Items (Dauer/Bloecke/Uebungen) in Mono,
 * nummerierte Sequenz 01-05 ohne Icons.
 */
.warmup-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.warmup-subtitle {
  padding: 2px 4px 20px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

/* Meta-Zeile: drei getrennte Items in Mono, kein Icon, Dauer/Bloecke/Uebungen */
.warmup-meta {
  display: flex;
  gap: 20px;
  padding: 16px 4px 0;
  margin: 0;
  justify-content: flex-start;
}
.warmup-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.warmup-meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.warmup-meta-value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.warmup-meta-unit {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 12px;
}

/* Programme Picker: zwei Tiles nebeneinander, Marker-Strich links im Aktiv-Zustand */
.warmup-programme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.warmup-programme-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.warmup-programme-btn:hover {
  border-color: rgba(224, 184, 96, 0.3);
  color: var(--color-text);
}
.warmup-programme-btn.active {
  border-color: var(--color-accent, #E0B860);
  color: var(--color-accent, #E0B860);
  background: rgba(224, 184, 96, 0.05);
}
.warmup-programme-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--color-accent, #E0B860);
  border-radius: 0 2px 2px 0;
}
.warmup-programme-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warmup-programme-icon svg {
  stroke: currentColor;
}
.warmup-programme-label {
  flex: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.warmup-programme-external {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: auto;
}

/* Bloecke-Sektion: 'Sequenz'-Label + nummerierte Karten */
.warmup-blocks-section {
  padding: 28px 0 8px;
}
.warmup-blocks-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 4px;
  margin-bottom: 12px;
}
.warmup-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.warmup-block-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease;
  width: 100%;
}
.warmup-block-card:hover {
  border-color: rgba(224, 184, 96, 0.25);
  transform: none;
}
.warmup-block-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent, #E0B860);
  letter-spacing: 0.14em;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.warmup-block-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.warmup-block-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.warmup-block-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
}
.warmup-block-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.warmup-block-count {
  /* uppercase-Meta wie im Blatt */
}
.warmup-block-dur {
  font-size: 12px;
  color: var(--color-text);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Aktions-Leiste unten: eine Aktion + Mono-Hinweis */
.warmup-actions-bar {
  padding: 20px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(42, 52, 82, 0.4);
  margin-top: 16px;
}
.warmup-start-btn {
  width: 100%;
  margin: 0;
}
.warmup-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin: 6px 0 0;
}

/* ===== Session View ===== */
.warmup-session {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-4) 0;
}

/* Progress bar */
.warmup-progress-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
}
.warmup-progress-block {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  color: var(--color-text-faint);
}
.warmup-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-interactive);
}
.warmup-progress-block.active .warmup-progress-dot {
  background: var(--color-primary);
}
.warmup-progress-block.done .warmup-progress-dot {
  background: var(--color-primary);
  opacity: 0.5;
}
.warmup-progress-block.active {
  color: var(--color-primary);
  font-weight: 600;
}
.warmup-progress-label {
  display: none;
}
@media (min-width: 480px) {
  .warmup-progress-label {
    display: inline;
  }
}

/* Exercise Card */
.warmup-exercise-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .warmup-exercise-card {
    padding: var(--space-8) var(--space-6);
    margin-bottom: var(--space-4);
  }
}
.warmup-exercise-block-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
  text-align: left;
}
.warmup-exercise-block-tag-num {
  color: var(--color-primary);
  font-weight: 600;
}
.warmup-exercise-block-tag-ex {
  color: var(--color-primary);
  font-weight: 500;
  flex-shrink: 0;
}
.warmup-exercise-illus {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 220 / 140;
  margin: 0 auto var(--space-4);
  color: var(--color-accent, #E8C87A);
  opacity: 0.75;
}
.warmup-exercise-illus svg {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .warmup-exercise-illus {
    max-width: 440px;
  }
}
@media (min-width: 1024px) {
  .warmup-exercise-illus {
    max-width: 520px;
  }
}

/* Iyengar PNG illustrations (Yoga-Sequenz) — override aspect-ratio, cap by height */
.warmup-exercise-illus:has(.warmup-illus-img),
.warmup-exercise-illus:has(.warmup-atem-iframe) {
  aspect-ratio: auto;
  max-height: 32dvh;
  max-width: 320px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.warmup-illus-img {
  max-width: 100%;
  max-height: 32dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  /* Brighten brown PNGs toward gold on dark Universum background */
  filter: brightness(1.35) sepia(0.25) hue-rotate(-8deg) saturate(1.15);
}
@media (min-width: 768px) {
  .warmup-exercise-illus:has(.warmup-illus-img),
  .warmup-exercise-illus:has(.warmup-atem-iframe) {
    max-width: 380px;
    max-height: 36dvh;
  }
  .warmup-illus-img {
    max-height: 36dvh;
  }
}
.warmup-atem-iframe {
  width: 100%;
  max-width: 320px;
  height: 32dvh;
  border: 0;
  background: transparent;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .warmup-atem-iframe {
    max-width: 380px;
    height: 36dvh;
  }
}

.warmup-exercise-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
  .warmup-exercise-name {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }
}
/* Sub-Zeile: Deutsche Uebersetzung des Sanskrit-Namens (Blatt 11 Kanon).
 * Wenn vorhanden, entfaellt der Bottom-Margin des Sanskrit-Namens, damit
 * Name und Uebersetzung als Einheit lesen. */
.warmup-exercise-name:has(+ .warmup-exercise-name-sub) {
  margin-bottom: 0;
}
.warmup-exercise-name-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  .warmup-exercise-name-sub {
    margin-bottom: var(--space-4);
  }
}
.warmup-exercise-instruction {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  letter-spacing: 0.005em;
}
/* Cue-Panel im Blatt-v2-Stil: eigener Kasten mit Modus-Chip und Cue-Text.
 * Fuenf Modi (Anweisung, Prinzip, Rhythmus, Erforschen, Hinweis) sind visuell
 * identisch — der Chip informiert, ohne zu dramatisieren. */
.warmup-exercise-cue {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  background: var(--color-surface-offset, var(--color-primary-subtle));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  margin: 0 auto var(--space-3);
  max-width: 460px;
  text-align: left;
}
.warmup-exercise-cue-tag {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.85;
  line-height: 1.4;
}
.warmup-exercise-cue-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-style: italic;
  line-height: 1.55;
  font-weight: 500;
}
.warmup-exercise-meta-row {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .warmup-exercise-meta-row {
    margin-bottom: var(--space-6);
  }
}

/* Timer */
.warmup-timer-area {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.warmup-timer-ring {
  position: relative;
  width: 100px;
  height: 100px;
}
@media (min-width: 768px) {
  .warmup-timer-ring {
    width: 140px;
    height: 140px;
  }
  .warmup-timer-area {
    margin-bottom: var(--space-4);
  }
}
.warmup-timer-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}
.warmup-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* Timer controls */
.warmup-timer-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
  .warmup-timer-controls {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
}
.warmup-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.warmup-btn-icon:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.warmup-btn-skip {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.warmup-btn-skip:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Navigation row */
.warmup-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}
.warmup-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.warmup-nav-btn:hover {
  color: var(--color-text);
}
.warmup-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.warmup-nav-counter {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-weight: 500;
}

/* End button */
.warmup-end-btn {
  display: block;
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.warmup-end-btn:hover {
  color: var(--color-text-muted);
}

/* ===== Complete Screen ===== */
.warmup-complete {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.warmup-complete-icon {
  margin-bottom: var(--space-4);
}
.warmup-complete-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.warmup-complete-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}
.warmup-complete-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.warmup-complete-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.warmup-complete-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
}
.warmup-complete-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.warmup-complete-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.warmup-complete-actions .btn-primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Reise Step Indicator */
.kurs-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-3) 0;
}
.kurs-step-dot {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-faint);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  white-space: nowrap;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.kurs-step-dot.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.kurs-step-dot.completed {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.kurs-step-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  min-width: 8px;
}

/* --- Reflexion Card (Universum) --- */
.kurs-reflection-card {
  background: linear-gradient(135deg, rgba(184, 147, 106, 0.08) 0%, rgba(139, 111, 71, 0.12) 100%);
  border-radius: 14px;
  padding: var(--space-6) var(--space-5);
  margin: 0 auto var(--space-5);
  max-width: 400px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(184, 147, 106, 0.1);
}
.kurs-reflection-icon {
  color: #c4a87a;
  margin-bottom: var(--space-3);
}
.kurs-reflection-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.kurs-reflection-prompt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  font-style: italic;
  margin: 0;
  max-width: 340px;
  margin-inline: auto;
}

/* --- Wann geht es weiter? — Verbindlichkeits-Einladung (Universum) --- */
.kurs-next-session {
  background: linear-gradient(135deg, rgba(184, 147, 106, 0.06) 0%, rgba(139, 111, 71, 0.10) 100%);
  border: 1px solid rgba(184, 147, 106, 0.1);
  border-radius: 14px;
  padding: var(--space-5);
  margin: 0 auto var(--space-5);
  max-width: 400px;
  text-align: left;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.kurs-next-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.kurs-next-icon {
  color: #c4a87a;
  flex-shrink: 0;
  margin-top: 2px;
}
.kurs-next-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
}
.kurs-next-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.kurs-next-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kurs-next-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.kurs-next-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kurs-next-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kurs-next-input {
  font-size: var(--text-sm);
  padding: 10px 12px;
  border: 1px solid rgba(184, 147, 106, 0.25);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}
/* iOS native date/time inputs — force visible text */
.kurs-next-input::-webkit-date-and-time-value {
  color: var(--color-text, #2C1810);
  text-align: left;
}
.kurs-next-input:focus {
  outline: none;
  border-color: #c4a87a;
  box-shadow: 0 0 0 3px rgba(196, 168, 122, 0.15);
}
.kurs-next-actions {
  display: flex;
  gap: var(--space-2);
}
.kurs-next-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid rgba(184, 147, 106, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kurs-next-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: rgba(184, 147, 106, 0.25);
}
.kurs-reflection-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  margin: 0 auto;
}

/* =============================================
   MILESTONE CELEBRATION
   ============================================= */
.kurs-milestone {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  animation: fadeIn 0.3s ease;
}
.kurs-milestone.hidden {
  display: none;
}
.kurs-milestone-content {
  background: var(--color-bg);
  border-radius: var(--radius-l, 16px);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 360px;
  width: 100%;
  animation: milestoneIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes milestoneIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.kurs-milestone-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  line-height: 1;
}
.kurs-milestone-title {
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.kurs-milestone-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}

/* =============================================
   REISE EVALUATION OVERLAY
   ============================================= */
.kurs-eval-overlay,
.kurs-stagnation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  padding: var(--space-4);
}
.kurs-eval-overlay.hidden,
.kurs-stagnation-overlay.hidden { display: none; }

.kurs-eval-card,
.kurs-stagnation-card {
  background: rgba(20,18,25,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6) var(--space-5);
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  text-align: center;
}
.kurs-eval-title,
.kurs-stagnation-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: rgba(255,255,255,0.95);
}
.kurs-eval-question {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
.kurs-eval-slider-wrap {
  margin-bottom: var(--space-4);
}
.kurs-eval-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-2);
}
.kurs-eval-slider {
  width: 100%;
  accent-color: var(--color-primary, #c9a84c);
  height: 6px;
}
.kurs-eval-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary, #c9a84c);
  margin-top: var(--space-2);
}
.kurs-eval-note {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: 0.85rem;
  resize: none;
  margin-bottom: var(--space-4);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
}
.kurs-eval-note:focus {
  outline: none;
  border-color: var(--color-primary, #c9a84c);
}

/* Stagnation dialog */
.kurs-stagnation-icon {
  color: #e67e22;
  margin-bottom: var(--space-3);
}
.kurs-stagnation-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.kurs-stagnation-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kurs-stagnation-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: #27ae60;
  margin-top: var(--space-3);
}
.kurs-stagnation-sent.hidden { display: none; }

/* Praxis: Evaluation Badge */
.praxis-eval-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}

/* Praxis: Evaluation list & detail */
.praxis-eval-card {
  cursor: pointer;
}
.praxis-card-left {
  flex: 1;
  min-width: 0;
}
.praxis-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.praxis-eval-avg {
  font-weight: 700;
  font-size: 1.1rem;
}
.praxis-eval-spark {
  vertical-align: middle;
}
.praxis-eval-status--pending {
  background: rgba(230,126,34,0.15);
  color: #e67e22;
}
.praxis-eval-status--reviewed {
  background: rgba(39,174,96,0.15);
  color: #27ae60;
}
.praxis-eval-detail-header {
  margin-bottom: var(--space-4);
}
.praxis-eval-detail-header h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.95);
}
.praxis-eval-detail-meta {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.praxis-eval-chart {
  margin: var(--space-4) 0;
  overflow-x: auto;
}
.praxis-eval-entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.praxis-eval-entry {
  padding: var(--space-3);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md, 8px);
  border-left: 3px solid rgba(255,255,255,0.1);
}
.praxis-eval-entry--stagnation {
  border-left-color: #e74c3c;
  background: rgba(231,76,60,0.08);
}
.praxis-eval-entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.praxis-eval-entry-day {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
}
.praxis-eval-entry-score {
  font-weight: 700;
  font-size: 0.9rem;
}
.praxis-eval-entry-flag {
  font-size: 0.7rem;
  color: #e74c3c;
  font-weight: 600;
}
.praxis-eval-entry-note {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin: 4px 0;
  line-height: 1.4;
}
.praxis-eval-entry-date {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}
.praxis-eval-review {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.praxis-eval-review-note {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: 0.85rem;
  resize: none;
  margin-bottom: var(--space-3);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
}
.praxis-eval-reviewed-msg {
  font-size: 0.9rem;
  color: #27ae60;
}
.praxis-eval-arzt-note {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  margin-top: var(--space-2);
}

/* =============================================
   CUSTOM DURATION INPUT
   ============================================= */
.duration-custom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
}
.duration-custom-input {
  width: 36px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
  font-family: inherit;
  outline: none;
  padding: 0;
}
.duration-custom-input::placeholder {
  color: var(--color-text-faint);
  opacity: 1;
}
.duration-custom.selected .duration-custom-input::placeholder {
  color: var(--color-text-inverse);
  opacity: 0.6;
}
.duration-custom-input::-webkit-inner-spin-button,
.duration-custom-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.duration-custom-input[type="number"] {
  -moz-appearance: textfield;
}
.duration-custom-label {
  font-size: var(--text-xs);
  opacity: 0.7;
  pointer-events: none;
}

/* =============================================
   SPEED SLIDER
   ============================================= */
.speed-control {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.speed-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.speed-label span {
  font-weight: 600;
  color: var(--color-text);
}
.speed-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  outline: none;
  transition: background var(--transition-interactive);
}
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  cursor: pointer;
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), background var(--transition-interactive);
}
.speed-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--color-secondary-hover);
}
.speed-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  cursor: pointer;
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.speed-marks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  padding: 0 2px;
}

/* =============================================
   SOUND SELECTOR
   ============================================= */
.sound-selector {
  margin-top: 1.5rem;
}
.sound-selector-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary, #7A6B5D);
  margin-bottom: 0.75rem;
  text-align: center;
  letter-spacing: 0.02em;
}
/* Legacy sound-option overrides removed — now uses ss-pill system */
.sound-option.ss-pill { /* inherits from .ss-pill */ }

/* =============================================
   ROUND-BASED SETTINGS
   ============================================= */
.round-settings {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.round-info-card {
  background: rgba(44,24,16,0.03);
  border: 1px solid rgba(139,115,85,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.round-info-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.round-info-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
.round-info-card-steps {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: var(--space-1) 0;
  padding-left: var(--space-5);
  line-height: 1.7;
}
.round-info-card-steps li {
  margin-bottom: 2px;
}
.round-info-card-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.round-recommendation {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-highlight);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.round-recommendation p {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}

.round-recommendation-btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  align-self: flex-start;
}

.round-recommendation-btn:hover {
  background: var(--color-primary-hover);
}

.round-count-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.round-count-control label {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}

.round-count-control .round-count-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.round-count-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
  line-height: 1;
}

.round-count-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
}

.round-count-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  min-width: 1.5rem;
  text-align: center;
}

.round-hold-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.round-hold-inputs .round-hold-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.round-hold-inputs .round-hold-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 6rem;
}

.round-duration-input {
  width: 5rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.round-duration-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.round-hold-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.round-settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.round-settings-row label {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}

/* =============================================
   ROUND PHASE INDICATOR (session screen)
   ============================================= */
.round-phase-indicator {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-1) 0;
  margin-bottom: var(--space-3);
  align-self: center;
}

body.session-day-mode .round-phase-indicator {
  color: rgba(30, 42, 34, 0.4);
}

/* =============================================
   BREATH COUNT DISPLAY (session screen)
   ============================================= */
.breath-count-display {
  font-size: var(--text-base);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: calc(-1 * var(--space-2));
  letter-spacing: 0.04em;
}

body.session-day-mode .breath-count-display {
  color: rgba(30, 42, 34, 0.5);
}

/* =============================================
   APNOE TIMER
   ============================================= */
.apnoe-container {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.apnoe-container.hidden {
  display: none;
}
.apnoe-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.apnoe-description {
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 45ch;
  margin-inline: auto;
}
.apnoe-setup {
  text-align: center;
}
.apnoe-setup.hidden {
  display: none;
}

/* Apnoe Mode Buttons */
.apnoe-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.apnoe-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              transform var(--transition-interactive);
}
.apnoe-mode-btn:hover {
  border-color: var(--color-primary-highlight);
  transform: translateY(-2px);
}
.apnoe-mode-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.apnoe-mode-icon {
  color: var(--color-text-muted);
}
.apnoe-mode-btn.selected .apnoe-mode-icon {
  color: var(--color-primary);
}
.apnoe-mode-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.apnoe-mode-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* STA Config */
.sta-config {
  margin-bottom: var(--space-6);
  text-align: center;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sta-config.hidden {
  display: none;
}
.sta-config .form-label {
  display: block;
  margin-bottom: var(--space-3);
  text-align: center;
}
.sta-target-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.sta-target-select {
  width: 80px;
  text-align: center;
}
.sta-target-sep {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Apnoe Active Timer */
.apnoe-active {
  text-align: center;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.apnoe-active.hidden {
  display: none;
}
.apnoe-round-indicator {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}
.apnoe-phase-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  letter-spacing: 0.06em;
  transition: color 1s ease;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apnoe-phase-label.hold-phase {
  color: var(--color-secondary);
}
.apnoe-timer-display {
  font-family: var(--font-body);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  transition: color 1s ease;
  line-height: 1;
}
.apnoe-timer-display.hold-phase {
  color: var(--color-secondary);
}
.apnoe-timer-tenth {
  font-size: 0.5em;
  opacity: 0.5;
}

/* Progress Ring */
.apnoe-progress-ring-wrapper {
  width: clamp(140px, 35vw, 200px);
  height: clamp(140px, 35vw, 200px);
  margin: 0 auto var(--space-8);
}
.apnoe-progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.apnoe-ring-bg {
  fill: none;
  stroke: var(--color-surface-offset);
  stroke-width: 6;
}
.apnoe-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 565.5;
  stroke-dashoffset: 565.5;
  transition: stroke 1s ease;
}
.apnoe-ring-fill.hold-phase {
  stroke: var(--color-secondary);
}

.apnoe-controls {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* Apnoe Results */
.apnoe-results {
  text-align: center;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.apnoe-results.hidden {
  display: none;
}
.apnoe-results-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-8);
}
.apnoe-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.apnoe-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
}
.apnoe-result-value {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.apnoe-result-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.apnoe-results-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

/* =============================================
   APNOE SAFETY MODAL
   ============================================= */
.apnoe-safety-card {
  max-width: 480px;
}
.apnoe-safety-content {
  margin-bottom: var(--space-6);
}
.apnoe-safety-content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.apnoe-safety-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.apnoe-safety-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-highlight);
  border-radius: var(--radius-md);
}
.apnoe-safety-list li::before {
  content: '\26A0';
  flex-shrink: 0;
  font-size: var(--text-base);
}
.apnoe-safety-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: var(--space-6);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}
.apnoe-safety-checkbox-label:hover {
  background: var(--color-surface);
}
.apnoe-safety-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.apnoe-safety-card .btn {
  width: 100%;
}

/* =============================================
   CALENDAR SCHEDULING SECTION
   ============================================= */
.calendar-section {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  position: relative;
  z-index: 1;
}
.calendar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive),
              color var(--transition-interactive);
}
.calendar-toggle-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-primary-highlight);
  color: var(--color-text);
}
.calendar-toggle-btn svg {
  flex-shrink: 0;
}

.calendar-form-wrapper {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: var(--space-4);
}
.calendar-form-wrapper.hidden {
  display: none;
}
.calendar-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.calendar-form .form-group:nth-child(1),
.calendar-form .form-group:nth-child(2) {
  grid-column: span 1;
}
.calendar-form .form-group:nth-child(3),
.calendar-form .form-group:nth-child(4) {
  grid-column: span 1;
}
.calendar-export-btns {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.calendar-export-btns .btn {
  flex: 1;
  font-size: var(--text-sm);
}

@media (max-width: 480px) {
  .calendar-form {
    grid-template-columns: 1fr;
  }
  .calendar-form .form-group:nth-child(1),
  .calendar-form .form-group:nth-child(2),
  .calendar-form .form-group:nth-child(3),
  .calendar-form .form-group:nth-child(4) {
    grid-column: span 1;
  }
  .calendar-export-btns {
    flex-direction: column;
  }
  .apnoe-modes {
    grid-template-columns: 1fr;
  }
  .kurs-timeline {
    padding-left: var(--space-8);
  }
  .kurs-stage-dot {
    left: calc(-1 * var(--space-8) + 3px);
  }
  .kurs-timeline::before {
    left: 12px;
  }
}

/* =============================================
   WISSEN (KNOWLEDGE) MODULE
   ============================================= */

/* Page wrapper */
.wissen-page {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: var(--space-16) var(--space-4) var(--space-20);
}

/* Hero (v4-Kanon Blatt 02: Eyebrow + Titel links, keine Byline, keine Autoren-Zeile) */
.wissen-hero {
  text-align: left;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

.wissen-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.wissen-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}

/* Byline/Author-Klassen bleiben für Kompatibilität bestehen, werden aber ausgeblendet */
.wissen-subtitle,
.wissen-author {
  display: none;
}

/* Chapters container */
.wissen-chapters {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual chapter */
.wissen-chapter {
  border-bottom: 1px solid var(--color-divider);
}

.wissen-chapter:first-child {
  border-top: 1px solid var(--color-divider);
}

/* Chapter header (v4-Kanon Blatt 02: Listen-Zeile, ganze Zeile klickbar) */
.wissen-chapter-header {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
  transition: color var(--transition-interactive);
}

.wissen-chapter-header:hover {
  color: var(--color-text);
  background: none;
}

.wissen-chapter-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Chapter number — Mono, dezent grau, wird auf Hover golden (Gold-Anker nur bei Interaktion) */
.wissen-chapter-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  min-width: 0;
  line-height: 1;
  transition: color var(--transition-interactive);
}

.wissen-chapter-header:hover .wissen-chapter-number {
  color: var(--color-primary);
}

/* Chapter title */
.wissen-chapter-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: inherit;
}

/* Chevron (bleibt als Akkordeon-Indikator, dezent) */
.wissen-chapter-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-faint);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color var(--transition-interactive);
}

.wissen-chapter-header:hover .wissen-chapter-chevron {
  color: var(--color-primary);
}

.wissen-chapter.open .wissen-chapter-chevron {
  transform: rotate(180deg);
}

/* Chapter content (accordion body) */
.wissen-chapter-content {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 var(--space-2);
}

.wissen-chapter.open .wissen-chapter-content {
  padding: 0 var(--space-2) var(--space-8);
}

/* Content typography */
.wissen-chapter-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.wissen-chapter-content h4:first-child {
  margin-top: var(--space-2);
}

.wissen-chapter-content p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Key terms */
.wissen-term {
  font-weight: 600;
  background: var(--color-primary-light);
  padding: 0.05em 0.35em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Callout boxes */
.wissen-callout {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.wissen-callout-warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-highlight);
}

.wissen-callout-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

.wissen-callout-warning .wissen-callout-label {
  color: var(--color-warning);
}

.wissen-callout p {
  font-size: var(--text-sm);
  margin-bottom: 0;
  line-height: 1.65;
}

/* SVG diagram containers */
.wissen-svg-container {
  margin: var(--space-8) auto;
  max-width: 420px;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.wissen-svg {
  width: 100%;
  height: auto;
  display: block;
}

.wissen-svg-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-style: italic;
}

/* Bridge text (practice connection) */
.wissen-bridge {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
}

.wissen-bridge strong {
  color: var(--color-primary);
}

/* CTA at bottom (v4-Kanon: kein zweiter Divider, letzter Chapter-Header traegt bereits die untere Linie) */
.wissen-cta {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: 0;
  border-top: 0;
}

.wissen-cta-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

/* =============================================
   WISSEN — KAPITEL-DETAIL (Blatt 03 · v4-Kanon)
   Detail-Screen mit Chevron-Trigger → Panel-Grammatik:
   Rückweg · Kopf · Body · Callout · Figure · Bridge · Ende · Nav.
   ============================================= */

/* Detail-View Container */
.wissen-detail-view {
  padding: 0;
}

/* Hidden-Guard: nativer [hidden] soll unabhängig von Layout-Regeln wirken */
.wissen-chapters[hidden],
.wissen-detail-view[hidden],
.wissen-detail-panel[hidden] {
  display: none !important;
}

/* Detail-Panel (Kapitel-Seite) */
.wissen-detail-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-2) var(--space-12);
}

/* Rückweg */
.kap-back {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color var(--transition-interactive, 120ms linear);
}
.kap-back:hover { color: var(--color-primary); }
.kap-back .arrow { font-size: 13px; }

/* Kapitel-Kopf */
.kap-head {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-12);
}
.kap-head .k-pos {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.kap-head .k-pos b {
  color: var(--color-primary);
  font-weight: 500;
  margin-right: var(--space-1);
}
.kap-head h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.1;
}

/* Fließtext-Grammatik */
.kap-body h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-3);
  line-height: 1.3;
}
.kap-body h4:first-child { margin-top: 0; }
.kap-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}
.kap-body strong {
  font-weight: 600;
  color: var(--color-text);
}
.kap-body a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive, 120ms linear);
}
.kap-body a:hover { border-bottom-color: var(--color-primary); }

/* Klinischer Callout */
.kap-callout {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: rgba(212, 160, 60, 0.03);
}
.kap-callout .c-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.kap-callout p {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.65;
  max-width: 68ch;
}

/* Warnungs-Callout (Ch7 Sicherheitshinweis) */
.kap-callout.kap-callout--warning {
  border-left-color: var(--color-warning);
  background: rgba(196, 145, 61, 0.05);
}
.kap-callout.kap-callout--warning .c-label {
  color: var(--color-warning);
}

/* Figure — SVG-Illustration mit Caption */
.kap-figure {
  margin: var(--space-12) 0;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: rgba(21, 29, 46, 0.5);
}
.kap-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 540px;
  margin: 0 auto var(--space-4);
}
.kap-figure figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
  margin: 0;
}
.kap-figure figcaption b {
  color: var(--color-primary);
  font-weight: 500;
  margin-right: var(--space-2);
}

/* Bridge „Für die Praxis“ */
.kap-bridge {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.kap-bridge .b-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.kap-bridge p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  max-width: 68ch;
}

/* Ende-Marker */
.kap-end {
  margin: var(--space-16) 0 var(--space-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Weiter/Zurück-Navigation */
.kap-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.kap-nav a {
  display: block;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--transition-interactive, 120ms linear);
}
.kap-nav a:hover { color: var(--color-text); }
.kap-nav .n-dir {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
  transition: color var(--transition-interactive, 120ms linear);
}
.kap-nav a:hover .n-dir { color: var(--color-primary); }
.kap-nav .n-title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  line-height: 1.3;
}
.kap-nav .n-title .n-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-faint);
  margin-right: var(--space-1);
}
.kap-nav .n-prev { text-align: left; }
.kap-nav .n-next { text-align: right; }
.kap-nav .n-empty { pointer-events: none; }

/* Responsive Feinschliff Kapitel-Detail */
@media (max-width: 640px) {
  .wissen-detail-panel {
    padding: var(--space-6) var(--space-1) var(--space-10);
  }
  .kap-head { padding-bottom: var(--space-6); margin-bottom: var(--space-8); }
  .kap-head h1 { font-size: clamp(26px, 8vw, 34px); }
  .kap-body h4 { font-size: 18px; margin-top: var(--space-8); }
  .kap-body p { font-size: 15px; }
  .kap-callout { padding: var(--space-4); margin: var(--space-6) 0; }
  .kap-figure { padding: var(--space-4) var(--space-3); margin: var(--space-8) 0; }
  .kap-bridge { margin-top: var(--space-8); padding-top: var(--space-6); }
  .kap-nav { grid-template-columns: 1fr; gap: var(--space-3); }
  .kap-nav .n-prev,
  .kap-nav .n-next { text-align: left; }
  .kap-nav .n-empty { display: none; }
}

/* =============================================
   WISSEN — RESPONSIVE
   ============================================= */

@media (max-width: 640px) {
  .wissen-page {
    padding: var(--space-10) var(--space-4) var(--space-16);
  }

  .wissen-hero {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
  }

  .wissen-title {
    font-size: clamp(32px, 9vw, 40px);
  }

  .wissen-chapter-header {
    grid-template-columns: 40px 1fr auto;
    gap: var(--space-4);
    padding: var(--space-4) 0;
  }

  .wissen-chapter-number {
    font-size: 11px;
  }

  .wissen-chapter-title {
    font-size: 17px;
  }

  .wissen-chapter.open .wissen-chapter-content {
    padding: 0 var(--space-1) var(--space-6);
  }

  .wissen-chapter-content h4 {
    font-size: var(--text-sm);
    margin-top: var(--space-5);
  }

  .wissen-chapter-content p {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .wissen-callout {
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
  }

  .wissen-svg-container {
    max-width: 100%;
    padding: var(--space-3);
    margin: var(--space-6) 0;
  }

  .wissen-bridge {
    padding: var(--space-3) var(--space-4);
  }

  .wissen-term {
    white-space: normal;
  }

  .wissen-cta {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
  }

  .wissen-cta-text {
    font-size: var(--text-lg);
  }
}

/* =============================================
   PILLAR PAGES — Empfangen, Gestalten, Loslassen
   ============================================= */

.pillar-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-20);
}

.pillar-hero {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  margin-bottom: var(--space-12);
  background: var(--color-surface);
  border-radius: 16px;
}

.pillar-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--color-text-faint);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  letter-spacing: -0.01em;
}

/* Subview-Titel — eine Stufe unter .pillar-title.
   Fuer Werkzeuge und Unterbereiche, die innerhalb einer Pillar geoeffnet
   werden (Reflexion, Patientenverfuegung, Ein voller Atemzug). Der Eyebrow
   darueber traegt die Verortung, der Titel ordnet sich ein. */
.subview-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.005em;
}

.pillar-philosophy {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* Pillar Cards */
.pillar-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.pillar-card {
  display: block;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pillar-card:hover,
.pillar-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(44, 24, 16, 0.08);
  border-color: var(--color-primary);
}

.pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.pillar-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Mobile: stack cards */
@media (max-width: 600px) {
  .pillar-page {
    padding: var(--space-10) var(--space-4) var(--space-16);
  }

  .pillar-hero {
    padding: var(--space-8) var(--space-4);
    margin-bottom: var(--space-8);
  }

  .pillar-cards {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   PILLAR PAGE V4 — Empfangen, Gestalten, Loslassen
   Gemeinsamer Kanon fuer die drei Saeulen-Hero-Blaetter:
   linksbuendige Eyebrow, grosse Ueberschrift, kurze
   Philosophiezeile, duenne Trennlinie darunter.
   Quelle: blaetter-v4-final/01-gestalten-pillar
   ============================================= */

.pillar-page.pillar-page--v4 {
  max-width: 1080px;
  padding: var(--space-16) var(--space-8) var(--space-20);
}

.pillar-page--v4 .pillar-hero {
  text-align: left;
  padding: 0 0 var(--space-12);
  margin-bottom: var(--space-12);
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--color-divider);
}

.pillar-page--v4 .pillar-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.pillar-page--v4 .pillar-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.pillar-page--v4 .pillar-philosophy {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: none;
  margin: 0;
}

.pillar-page--v4 .pillar-cards {
  align-items: stretch;
}

.pillar-page--v4 .pillar-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-surface);
  min-height: 260px;
  transition: border-color 120ms linear, background 120ms linear;
}

.pillar-page--v4 .pillar-card:hover,
.pillar-page--v4 .pillar-card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
  background: var(--color-surface-2);
}

.pillar-page--v4 .pillar-card .c-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-6);
}

.pillar-page--v4 .pillar-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.pillar-page--v4 .pillar-card .c-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
}

.pillar-page--v4 .pillar-card .c-subs {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.pillar-page--v4 .pillar-card .c-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text-faint);
  transition: color 120ms linear, transform 120ms linear;
}

.pillar-page--v4 .pillar-card:hover .c-arrow,
.pillar-page--v4 .pillar-card:focus-visible .c-arrow {
  color: var(--color-gold);
  transform: translateX(2px);
}

@media (max-width: 600px) {
  .pillar-page.pillar-page--v4 {
    padding: var(--space-10) var(--space-4) var(--space-16);
  }
  .pillar-page--v4 .pillar-hero {
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .pillar-page--v4 .pillar-card {
    min-height: 200px;
    padding: var(--space-6);
  }
}

/* Featured pillar card (essay) */
.pillar-card-featured {
  border-left: 3px solid var(--color-primary);
}

.pillar-card-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Auf pillar-page--v4 (Empfangen ab Blatt 01) wird der Featured-Eyebrow
   in denselben ruhigen Mono-Stil ueberfuehrt wie .c-num auf Gestalten
   und Loslassen: dezent grau, Mono-Font, kleiner Buchstabenabstand,
   duenner Unterstrich. Erfuellt zugleich Kanon-Regel 11.26 — hoechstens
   ein Gold-Anker pro Screen — indem die vielen goldenen Eyebrows
   auf Empfangen wegfallen. Der Gold-Akzent bleibt auf dem Border-Left
   der Featured-Karten und dem Gift-Icon erhalten. */
.pillar-page--v4 .pillar-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-6);
}

/* Gift featured card in Empfangen (Universum) */
.pillar-card-gift {
  border-left-color: var(--color-primary);
  position: relative;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}
.pillar-card-gift-icon {
  display: block;
  color: var(--color-primary);
  opacity: 0.5;
  margin-bottom: var(--space-2);
}
.pillar-card-gift:hover .pillar-card-gift-icon {
  opacity: 0.8;
}

/* =============================================
   EIN VOLLER ATEMZUG — Universum Theme Overrides
   ============================================= */

.va-container {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
}

.va-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* .va-title entfernt — siehe .subview-title */

.va-intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
}

.va-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.va-visual-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
}

/* On mobile, SVG and avatar share the container width equally.
   flex: 1 1 0 + min-width: 0 lets them shrink below their natural size;
   aspect-ratio keeps them proportional. */
.va-visual {
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  aspect-ratio: 320 / 420;
  position: relative;
}

.va-avatar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  aspect-ratio: 320 / 420;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
}

.va-avatar-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

.va-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.va-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.va-steps {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.va-step-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}

.va-step-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-warm, var(--color-surface-2));
}

.va-step-btn--current {
  border-color: var(--color-primary);
  background: var(--color-surface-warm, var(--color-surface-2));
  font-weight: 600;
}

.va-step-btn--active {
  border-color: var(--color-primary-muted, var(--color-primary));
}

.va-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.va-step-btn--active .va-dot {
  background: var(--color-primary);
}

.va-step-btn--current .va-dot {
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

.va-dot--exp {
  background: var(--color-muted);
}

.va-step-btn--current .va-dot--exp {
  background: #b07060;
  box-shadow: 0 0 8px #b07060;
}

.va-info {
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
}

.va-info-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
  transition: all 0.3s ease;
}

.va-info-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.va-info-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

.va-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.va-btn {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}

.va-btn:hover {
  border-color: var(--color-primary);
}

.va-btn--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

@media (min-width: 640px) {
  /* Visual pair stays a row (SVG + avatar side-by-side).
     Controls (steps, info, actions) sit BELOW the pair with full width. */
  .va-visual-group {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-5);
    width: 100%;
    max-width: none;
  }
  .va-visual {
    flex-shrink: 0;
    width: 240px;
    max-width: 240px;
  }
  .va-avatar {
    flex-shrink: 0;
    width: 240px;
    max-width: 240px;
  }
  /* Controls below: row layout for steps + info + actions.
     Steps become a horizontal row again since we have full width. */
  .va-controls {
    width: 100%;
  }
  .va-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}

/* SVG anatomy colors are handled by theme-aware JS in voller-atemzug.js */

.va-breath-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  text-shadow: 0 0 20px rgba(var(--color-primary-rgb, 120,180,255), 0.3);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  text-align: center;
}

.va-breath-label--visible {
  opacity: 0.85;
  transform: translateX(-50%) translateY(-4px);
}

/* ── Selected phase indicator (Universum) ── */
.va-step-btn--selected .va-dot {
  box-shadow: 0 0 0 2px var(--color-primary, #78b4ff);
}

@media (max-width: 600px) {
  .va-container {
    margin: 0 var(--space-2) var(--space-8);
  }
}

/* =============================================
   ESSAY READING VIEW
   ============================================= */

.essay-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
}

.essay-nav {
  margin-bottom: var(--space-8);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.essay-back-link--blog {
  cursor: pointer;
}

.essay-back-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.essay-back-link:hover {
  color: var(--color-primary);
}

.essay-article {
  /* Long-form reading styles */
}

.essay-header {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.essay-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.essay-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
}

.essay-byline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

.essay-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text);
}

.essay-body p {
  margin: 0 0 var(--space-5) 0;
}

.essay-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-6) 0;
  line-height: 1.3;
}

.essay-lead {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
}

.essay-emphasis {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-4) 0;
}

.essay-breath-pair {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
}

.essay-coda {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.essay-coda p {
  margin-bottom: var(--space-3);
}

.essay-tagline {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.essay-footer-nav {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .essay-page {
    padding: var(--space-8) var(--space-4) var(--space-16);
  }

  .essay-title {
    font-size: 1.5rem;
  }

  .essay-footer-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .essay-footer-nav .btn {
    text-align: center;
  }
}

/* =============================================
   HOMEPAGE — Three-Pillar Cards
   ============================================= */

.home-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-4);
}

.home-pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-pillar-card:hover,
.home-pillar-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(44, 24, 16, 0.08);
  border-color: var(--color-primary);
}

.home-pillar-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text-faint);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.home-pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.home-pillar-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Mobile: stack home pillar cards */
@media (max-width: 600px) {
  .home-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-8);
    max-width: 360px;
  }

  .home-pillar-card {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }
}

/* =============================================
   PATIENTENVERFÜGUNG (PV) WIZARD
   ============================================= */

.pv-wizard {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wizard header: mode toggle + progress */
.pv-wizard-header {
  margin-bottom: var(--space-8);
}

/* Mode toggle */
.pv-mode-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  margin-bottom: var(--space-5);
  max-width: 360px;
  margin-inline: auto;
}

.pv-mode-btn {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
}

.pv-mode-btn:hover {
  color: var(--color-text);
}

.pv-mode-btn.active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Progress bar */
.pv-progress {
  text-align: center;
}

.pv-progress-bar {
  height: 3px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.pv-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv-progress-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Step content */
.pv-wizard-body {
  min-height: 300px;
}

.pv-step {
  animation: pvFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pvFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step titles */
.pv-step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

.pv-step-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.pv-step-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  margin-bottom: var(--space-6);
}

.pv-subsection-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.pv-subsection-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pv-question-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* Form grid */
.pv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.pv-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pv-form-grid .pv-input-group {
  margin-bottom: 0;
}

.pv-input-full {
  grid-column: 1 / -1;
}

.pv-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

.pv-required {
  color: var(--color-secondary);
  font-weight: 600;
}

.pv-optional {
  font-weight: 400;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.pv-error-message {
  background: var(--color-error-highlight);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-error);
}

/* Fachpersonen extra fields */
.pv-fach-extra {
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

/* Radio & card selections */
.pv-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.pv-radio-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pv-radio-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-interactive);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pv-radio-label:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface);
}

.pv-radio-label input:checked + span {
  color: var(--color-primary-active);
  font-weight: 500;
}

.pv-radio-label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.pv-radio-label input[type="radio"],
.pv-radio-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Selectable cards (befugnisse, etc.) */
.pv-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-interactive);
}

.pv-card:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pv-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.pv-card-radio {
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.pv-card-content {
  flex: 1;
}

.pv-card-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.pv-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Goal cards (A/B/C) — large visual cards */
.pv-goal-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.pv-goal-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-interactive);
  position: relative;
}

.pv-goal-card:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pv-goal-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.pv-goal-card .pv-card-radio {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.pv-goal-letter {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}

.pv-goal-card.selected .pv-goal-letter {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.pv-goal-content {
  flex: 1;
  padding-right: var(--space-8);
}

.pv-goal-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.pv-goal-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.pv-goal-subs {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.pv-goal-card.selected .pv-goal-subs {
  display: block;
}

/* Checkbox labels */
.pv-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.5;
}

.pv-checkbox-label input {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Scenarios */
.pv-scenarios-title {
  margin-top: var(--space-10);
}

.pv-scenario {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
}

.pv-scenario:nth-child(odd) {
  background: var(--color-surface);
}

.pv-scenario:nth-child(even) {
  background: var(--color-surface-2);
}

.pv-scenario-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.pv-scenario-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  font-style: italic;
}

.pv-scenario-measures {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pv-measure-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.pv-measure-row:last-child {
  border-bottom: none;
}

.pv-measure-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.pv-measure-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pv-measure-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
}

.pv-measure-option:hover {
  border-color: var(--color-primary-highlight);
}

.pv-measure-option:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  font-weight: 500;
}

.pv-measure-option input {
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
}

.pv-measure-fach-info {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  padding: var(--space-1) 0 var(--space-2);
  line-height: 1.5;
}

/* Info expand */
.pv-info-expand {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.pv-info-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-primary);
  cursor: pointer;
  transition: color var(--transition-interactive);
}

.pv-info-toggle:hover {
  color: var(--color-primary-hover);
}

.pv-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.pv-info-arrow {
  font-size: 10px;
  transition: transform var(--transition-interactive);
}

.pv-info-expand.open .pv-info-arrow {
  transform: rotate(180deg);
}

.pv-info-content {
  display: none;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-primary-highlight);
}

.pv-info-expand.open .pv-info-content {
  display: block;
  animation: pvFadeIn 0.3s ease;
}

.pv-info-content p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Legal notes / callout boxes */
.pv-legal-note {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pv-legal-note p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.pv-legal-note p:last-child {
  margin-bottom: 0;
}

.pv-legal-list {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text);
  padding-left: var(--space-5);
  margin: var(--space-2) 0 0;
}

.pv-legal-list li {
  margin-bottom: var(--space-2);
}

.pv-legal-list li:last-child {
  margin-bottom: 0;
}

.pv-privacy-note {
  border-left-color: var(--color-text-faint);
  background: var(--color-surface);
}

.pv-resume-note {
  border-left-color: var(--color-secondary);
  background: var(--color-secondary-highlight);
}

.pv-resume-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Organ details grid */
.pv-organ-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

/* Summary (Step 8) */
.pv-summary-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.pv-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pv-summary-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.pv-summary-edit {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-primary);
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  transition: all var(--transition-interactive);
}

.pv-summary-edit:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.pv-summary-content {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.pv-summary-content em {
  color: var(--color-text-faint);
}

/* Action buttons */
.pv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

/* Navigation */
.pv-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  margin-top: var(--space-4);
}

.pv-nav-btn {
  min-width: 120px;
}

/* Welcome page */
.pv-welcome {
  text-align: left;
}

/* =============================================
   PV WIZARD — RESPONSIVE
   ============================================= */

@media (max-width: 600px) {
  .pv-wizard {
    padding: var(--space-6) var(--space-3) var(--space-12);
  }

  .pv-form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .pv-mode-toggle {
    max-width: 100%;
  }

  .pv-mode-btn {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  .pv-goal-card {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .pv-goal-card .pv-card-radio {
    position: static;
    order: -1;
  }

  .pv-goal-content {
    padding-right: 0;
  }

  .pv-goal-letter {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .pv-measure-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .pv-measure-options {
    padding-left: 0;
  }

  .pv-scenario {
    padding: var(--space-4);
  }

  .pv-radio-inline {
    flex-direction: column;
  }

  .pv-actions {
    flex-direction: column;
  }

  .pv-actions .btn {
    width: 100%;
    text-align: center;
  }

  .pv-resume-actions {
    flex-direction: column;
  }

  .pv-organ-details {
    grid-template-columns: 1fr 1fr;
  }

  .pv-nav {
    padding-top: var(--space-6);
  }

  .pv-nav-btn {
    min-width: 100px;
  }
}

/* ==========================================================================
   ONBOARDING OVERLAY
   ========================================================================== */

/* Onboarding-Overlay (Universum, Redesign v4.1 · 4-Screens A-plus) */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.onboarding-overlay.visible {
  display: flex;
  opacity: 1;
}

.onboarding-overlay.closing {
  opacity: 0;
}

body.onboarding-active {
  overflow: hidden;
}

.onboarding-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Steps */
.onboarding-step {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  animation: onboardingFadeIn 0.5s ease;
}

.onboarding-step.active {
  display: flex;
}

@keyframes onboardingFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Breath circle on welcome step */
.onboarding-breath-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-surface-dynamic) 0%, var(--color-surface) 60%, transparent 100%);
  border: 1px solid var(--color-border);
  animation: onboardingBreathe 6s ease-in-out infinite;
  margin-bottom: var(--space-2);
}

@keyframes onboardingBreathe {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.onboarding-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.02em;
  margin: 0;
}

.onboarding-title .logo-dot {
  color: var(--color-primary);
}

.onboarding-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: lowercase;
  margin: 0;
}

.onboarding-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 340px;
  margin: 0;
}

.onboarding-name-line {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

.onboarding-name-line .name-part {
  color: var(--color-text);
}

/* Pillar steps */
.onboarding-pillar-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--color-text-faint);
  text-transform: uppercase;
  font-weight: 400;
}

.onboarding-pillar-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.01em;
  margin: calc(-1 * var(--space-1)) 0 0;
}

.onboarding-pillar-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 340px;
  margin: 0;
}

.onboarding-pillar-icon {
  color: var(--color-text-muted);
}

.onboarding-arzt-icon {
  color: var(--color-text-muted);
}

.onboarding-arzt-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  width: 100%;
  max-width: 280px;
}

.onboarding-arzt-hint {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin: var(--space-1) 0 0;
}

/* Progress dots */
.onboarding-progress {
  position: absolute;
  bottom: max(env(safe-area-inset-bottom, 24px), 60px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.onboarding-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.3s ease, transform 0.3s ease;
}

.onboarding-dot.active {
  background: var(--color-text);
  transform: scale(1.3);
}

/* Skip button */
.onboarding-skip {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 20px);
  right: var(--space-5);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  transition: color 0.2s ease;
}

.onboarding-skip:hover {
  color: var(--color-text);
}

/* ==========================================================================
   SANFTER PV-UEBERGANG (Bridge)
   ========================================================================== */

.pv-bridge {
  margin-top: var(--space-8);
  text-align: center;
  animation: pvBridgeFadeIn 1s ease 1.5s both;
}

@keyframes pvBridgeFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pv-bridge-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--color-border));
  margin: 0 auto var(--space-5);
}

.pv-bridge-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 340px;
  margin: 0 auto var(--space-4);
  font-style: italic;
}

.pv-bridge-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-terracotta, #B87A5E);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(184,122,94,0.25);
  border-radius: 8px;
  transition: all 0.25s ease;
  background: rgba(184,122,94,0.04);
}

.pv-bridge-link:hover {
  background: rgba(184,122,94,0.1);
  border-color: rgba(184,122,94,0.4);
  transform: translateY(-1px);
}

.pv-bridge-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pv-bridge-reassurance {
  font-size: 0.8rem;
  color: var(--color-text-faint, #aaa);
  margin-top: var(--space-3);
}

/* Reflection-specific bridge — slightly more prominent */
.pv-bridge-reflection {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
  animation-delay: 0.5s;
}

.pv-bridge-reflection .pv-bridge-line {
  display: none;
}

.pv-bridge-reflection .pv-bridge-text {
  max-width: 380px;
  font-style: normal;
  font-size: 0.95rem;
}

/* ==========================================================================
   WISSEN TAB SYSTEM
   ========================================================================== */

/* Tabs (v4-Kanon Blatt 02: nur Text, kein Icon, goldener Unterstrich für aktiven Tab) */
.wissen-tabs {
  display: flex;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
  padding: 0;
  border-bottom: 1px solid var(--color-divider);
  justify-content: flex-start;
  max-width: none;
}

.wissen-tab-btn {
  display: inline-block;
  padding: var(--space-3) 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--transition-interactive);
  white-space: nowrap;
  position: relative;
}

.wissen-tab-btn:hover {
  background: none;
  color: var(--color-text);
  border: none;
}

.wissen-tab-btn--active {
  background: none;
  color: var(--color-text);
  border: none;
}

.wissen-tab-btn--active:hover {
  background: none;
  color: var(--color-text);
  border: none;
}

.wissen-tab-btn--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-primary);
}

/* Icon-Klasse bleibt für Kompatibilität, wird aber im Wissen-Kontext nicht mehr benutzt */
.wissen-tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Tab Panels */
.wissen-tab-panel {
  display: none;
}

.wissen-tab-panel--active {
  display: block;
  animation: wissenTabFade 0.3s ease;
}

@keyframes wissenTabFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   LERNKARTEN (FLASHCARDS)
   ========================================================================== */

.lernkarten-container {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-4, 16px);
}

/* Progress Bar */
.lk-progress-bar {
  margin-bottom: var(--space-5, 20px);
}

.lk-progress-text {
  display: block;
  text-align: center;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  color: var(--color-text-muted, #7A6B5D);
  margin-bottom: 8px;
}

.lk-progress-track {
  width: 100%;
  height: 4px;
  background: var(--color-surface-offset, #EAE5DD);
  border-radius: 2px;
  overflow: hidden;
}

.lk-progress-fill {
  height: 100%;
  background: var(--color-primary, #5B8A72);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Card Wrapper */
.lk-card-wrapper {
  perspective: 800px;
  margin-bottom: var(--space-5, 20px);
}

/* Card */
.lk-card {
  position: relative;
  width: 100%;
  min-height: 320px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: 16px;
}

.lk-card--flipped {
  transform: rotateY(180deg);
}

.lk-card:focus-visible {
  outline: 2px solid var(--color-primary, #5B8A72);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Card Faces */
.lk-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px) var(--space-5, 20px);
  border-radius: 16px;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lk-card-front {
  background: var(--color-surface, #F5F1EC);
  border: 1.5px solid var(--color-border, #E0D5C7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
}

.lk-card-back {
  /* Dark-theme compatible: slightly lifted surface + gold accent border */
  background: linear-gradient(135deg, var(--color-surface-2, #1A2538), var(--color-surface-offset, #222F44));
  border: 1.5px solid var(--color-primary, #D4A03C);
  box-shadow: 0 4px 20px rgba(212, 160, 60, 0.18), 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: rotateY(180deg);
}

/* Category badge */
.lk-cat-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4, 16px);
}

.lk-question {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text, #2C1810);
  margin: 0;
}

.lk-answer {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text, #2C1810);
  margin: 0;
}

.lk-tap-hint {
  margin-top: auto;
  padding-top: var(--space-4, 16px);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  color: var(--color-text-faint, #B0A192);
  letter-spacing: 0.02em;
}

/* Action Buttons */
.lk-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
  min-height: 44px;
  align-items: center;
}

.lk-actions-hint {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  color: var(--color-text-faint, #B0A192);
  text-align: center;
}

.lk-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: none;
  border-radius: 24px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lk-btn--known {
  background: var(--color-primary, #5B8A72);
  color: var(--color-text-inverse, #FAF8F5);
}

.lk-btn--known:hover {
  background: var(--color-primary-hover, #4A7560);
  transform: translateY(-1px);
}

.lk-btn--retry {
  background: var(--color-surface-offset, #EAE5DD);
  color: var(--color-text, #2C1810);
}

.lk-btn--retry:hover {
  background: var(--color-surface-offset-2, #E4DED5);
  transform: translateY(-1px);
}

/* Answered badge */
.lk-answered-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 14px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
}

.lk-answered--known {
  background: var(--color-primary-light, #E8F0EB);
  color: var(--color-primary, #5B8A72);
}

.lk-answered--retry {
  background: #F5E6D8;
  color: #8B5E3C;
}

/* Navigation */
.lk-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}

.lk-nav-btn {
  padding: 10px 20px;
  border: 1.5px solid var(--color-border, #E0D5C7);
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted, #7A6B5D);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lk-nav-btn:hover:not(:disabled) {
  background: var(--color-surface, #F5F1EC);
  color: var(--color-text, #2C1810);
  border-color: var(--color-text-muted, #7A6B5D);
}

.lk-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lk-nav-btn--next {
  margin-left: auto;
  background: var(--color-text, #2C1810);
  color: var(--color-text-inverse, #FAF8F5);
  border-color: var(--color-text, #2C1810);
}

.lk-nav-btn--next:hover:not(:disabled) {
  background: #3D2A1E;
  color: var(--color-text-inverse, #FAF8F5);
  border-color: #3D2A1E;
}

/* Summary */
.lk-summary {
  text-align: center;
  padding: var(--space-6, 24px) var(--space-4, 16px);
}

.lk-summary-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3, 12px);
}

.lk-summary-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-5, 20px);
}

.lk-summary-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5, 20px);
  margin-bottom: var(--space-5, 20px);
}

.lk-score-ring {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.lk-ring-svg {
  width: 100%;
  height: 100%;
}

.lk-ring-progress {
  transition: stroke-dashoffset 1s ease;
}

.lk-score-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary, #5B8A72);
}

.lk-score-detail {
  text-align: left;
}

.lk-score-detail p {
  margin: 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text, #2C1810);
}

.lk-score-sub {
  color: var(--color-text-muted, #7A6B5D) !important;
  font-size: 0.85rem !important;
  margin-top: 2px !important;
}

.lk-summary-message {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text-muted, #7A6B5D);
  line-height: 1.6;
  margin: 0 0 var(--space-5, 20px);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.lk-summary-retry {
  text-align: left;
  background: var(--color-surface, #F5F1EC);
  border-radius: 12px;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  margin-bottom: var(--space-5, 20px);
}

.lk-summary-retry h4 {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-2, 8px);
}

.lk-summary-retry ul {
  margin: 0;
  padding-left: 20px;
}

.lk-summary-retry li {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  color: var(--color-text-muted, #7A6B5D);
  line-height: 1.6;
  margin-bottom: 4px;
}

.lk-summary-actions {
  display: flex;
  gap: var(--space-3, 12px);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   SCIENCE CORNER (STUDIEN)
   ========================================================================== */

.studien-container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4, 16px);
}

/* Filter Bar */
.sc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4, 16px);
  justify-content: center;
}

.sc-filter-btn {
  padding: 6px 16px;
  border: 1.5px solid var(--color-border, #E0D5C7);
  border-radius: 14px;
  background: transparent;
  color: var(--color-text-muted, #7A6B5D);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sc-filter-btn:hover {
  background: var(--color-surface, #F5F1EC);
  color: var(--color-text, #2C1810);
  border-color: var(--color-text-muted, #7A6B5D);
}

.sc-filter-btn--active {
  background: var(--color-text, #2C1810);
  color: var(--color-text-inverse, #FAF8F5);
  border-color: var(--color-text, #2C1810);
}

/* Info text */
.sc-info {
  text-align: center;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  color: var(--color-text-faint, #B0A192);
  margin-bottom: var(--space-5, 20px);
  line-height: 1.5;
}

/* Group */
.sc-group {
  margin-bottom: var(--space-6, 24px);
}

.sc-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 var(--space-3, 12px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border, #E0D5C7);
}

.sc-group-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Study Card */
.sc-card {
  background: var(--color-surface, #F5F1EC);
  border: 1px solid var(--color-border, #E0D5C7);
  border-radius: 12px;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  margin-bottom: var(--space-3, 12px);
  box-shadow: 0 1px 6px rgba(44, 24, 16, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sc-card:hover {
  box-shadow: 0 4px 16px rgba(44, 24, 16, 0.08);
  transform: translateY(-1px);
}

.sc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
}

.sc-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sc-year {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #7A6B5D);
  background: var(--color-surface-offset, #EAE5DD);
  padding: 2px 10px;
  border-radius: 8px;
}

.sc-key-finding {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-3, 12px);
}

/* Expandable details */
.sc-card-details {
  border-top: 1px solid var(--color-border, #E0D5C7);
  padding-top: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
  animation: scDetailsFade 0.25s ease;
}

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

.sc-summary {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-3, 12px);
}

.sc-citation {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted, #7A6B5D);
  margin: 0 0 var(--space-2, 8px);
  font-style: italic;
}

.sc-doi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary, #5B8A72);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-doi:hover {
  color: var(--color-primary-hover, #4A7560);
  text-decoration: underline;
}

.sc-doi svg {
  flex-shrink: 0;
}

.sc-card-toggle {
  display: block;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary, #5B8A72);
  cursor: pointer;
  transition: color 0.2s ease;
}

.sc-card-toggle:hover {
  color: var(--color-primary-hover, #4A7560);
  text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE: Wissen Tabs, Lernkarten, Science Corner
   ========================================================================== */

@media (max-width: 480px) {
  .wissen-tabs {
    gap: var(--space-6);
    padding: 0;
  }

  .wissen-tab-btn {
    padding: var(--space-3) 0;
    font-size: 14px;
  }

  .wissen-tab-icon {
    display: none;
  }

  .lk-card {
    min-height: 360px;
  }

  .lk-question {
    font-size: 1.15rem;
  }

  .lk-answer {
    font-size: 0.88rem;
  }

  .lk-card-face {
    padding: var(--space-5, 20px) var(--space-4, 16px);
  }

  .lk-summary-score {
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  .lk-score-detail {
    text-align: center;
  }

  .sc-filter-bar {
    gap: 6px;
  }

  .sc-filter-btn {
    padding: 5px 12px;
    font-size: 0.75rem;
  }

  .sc-card {
    padding: var(--space-3, 12px) var(--space-4, 16px);
  }
}

/* =============================================
   HRV BLUETOOTH MODULE
   ============================================= */

/* Connect button on setup screen */
.hrv-connect-area {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#startBreathwork,
#reiseStartSession {
  display: block;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.hrv-connect-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--color-border, #E0D5C7);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  text-align: left;
}

.hrv-connect-btn:hover {
  border-color: var(--color-accent, #C47A5A);
  background: rgba(196, 122, 90, 0.04);
}

.hrv-connect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(196, 122, 90, 0.1);
  color: var(--color-accent, #C47A5A);
  flex-shrink: 0;
}

.hrv-connect-label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text, #3D3229);
  display: block;
}

.hrv-connect-hint {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #7A6B5D);
  display: block;
  margin-top: 0.1rem;
}

.hrv-unsupported {
  padding: 0.5rem 0;
}
.hrv-unsupported-text {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #7A6B5D);
  text-align: center;
  margin: 0;
}

/* HRV connect status states */
.hrv-connect-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #3D3229);
}
.hrv-connect-status--active {
  background: rgba(91, 138, 114, 0.08);
  border: 1px solid rgba(91, 138, 114, 0.2);
}
.hrv-connect-status--connecting {
  background: rgba(196, 122, 90, 0.06);
  border: 1.5px solid var(--color-border, #E0D5C7);
}
.hrv-connect-status--unsupported {
  flex-wrap: wrap;
  background: rgba(196, 122, 90, 0.04);
  border: 1.5px solid var(--color-border, #E0D5C7);
}
.hrv-connect-status--unsupported .hrv-connect-hint {
  width: 100%;
  margin-top: 0.25rem;
  padding-left: 2.75rem;
}
/* BLE waiting state: compact centered card */
.hrv-connect-status--waiting {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  padding: 16px 20px;
}
.hrv-connect-status--waiting .hrv-connect-label {
  font-size: 14px;
  font-weight: 600;
}
.hrv-connect-status--waiting .hrv-connect-hint {
  font-size: 11px;
  color: var(--color-text-faint);
}
.hrv-connect-status--waiting .hrv-connect-btn {
  width: auto;
  margin-top: 4px;
  padding: 8px 24px;
  font-size: 13px;
}
/* HealthKit (iOS native) states */
.hrv-connect-status--healthkit {
  flex-wrap: wrap;
  background: rgba(91, 138, 114, 0.07);
  border: 1px solid rgba(91, 138, 114, 0.22);
  color: #3a6652;
}
.hrv-connect-status--healthkit.hrv-connect-status--waiting {
  background: rgba(82, 120, 168, 0.06);
  border: 1.5px solid rgba(82, 120, 168, 0.2);
  color: var(--color-text, #3D3229);
}
.hrv-connect-status--healthkit .hrv-connect-hint {
  width: 100%;
  margin-top: 0.25rem;
  padding-left: 2.75rem;
  color: var(--color-text-light, #7a6e60);
}
.hrv-connect-status--healthkit .hrv-connect-label {
  font-weight: 600;
}
.hrv-connect-icon--watch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(82, 120, 168, 0.1);
  color: #5278A8;
  flex-shrink: 0;
}
.hrv-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5B8A72;
  flex-shrink: 0;
  animation: hrv-pulse-dot 2s ease-in-out infinite;
}
@keyframes hrv-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hrv-status-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border, #E0D5C7);
  border-top-color: var(--color-accent, #C47A5A);
  border-radius: 50%;
  flex-shrink: 0;
  animation: hrv-spin 0.8s linear infinite;
}
@keyframes hrv-spin {
  to { transform: rotate(360deg); }
}
.hrv-connect-error {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(161, 44, 123, 0.08);
  color: #A12C7B;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Live panel during session */
.hrv-live-panel {
  display: none;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: rgba(91, 138, 114, 0.08);
  border: 1px solid rgba(91, 138, 114, 0.15);
  margin-bottom: 0.75rem;
}
.hrv-live-panel.hrv-live--visible {
  display: block;
  animation: fadeIn 0.4s ease;
}

.hrv-live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.hrv-device-name {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #7A6B5D);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hrv-disconnect-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary, #7A6B5D);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}
.hrv-disconnect-btn:hover {
  background: rgba(0,0,0,0.06);
}

.hrv-live-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  text-align: center;
}

.hrv-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.hrv-metric-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text, #3D3229);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.hrv-metric--hr .hrv-metric-value {
  color: var(--color-accent, #C47A5A);
  font-size: 1.3rem;
}

.hrv-metric-label {
  font-size: 0.6rem;
  color: var(--color-text-secondary, #7A6B5D);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Pulse animation */
.hrv-pulse-beat {
  animation: hrvPulse 0.3s ease;
}

@keyframes hrvPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* =============================================
   PWA INSTALL BANNER
   ============================================= */
/* iOS Install Guide Overlay */
.ios-install-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(44, 24, 16, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1rem;
  animation: ios-fade-in 0.3s ease both;
}
@keyframes ios-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ios-install-card {
  position: relative;
  background: var(--color-bg, #FAF8F5);
  border: 1px solid var(--color-border, #E0D5C7);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 -4px 32px rgba(61, 50, 41, 0.15);
  animation: ios-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ios-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ios-install-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #7A6B5D);
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
}
.ios-install-close:hover {
  background: var(--color-surface, #F5F0EB);
}
.ios-install-icon {
  margin-bottom: 0.75rem;
  color: var(--color-accent, #C47A5A);
}
.ios-install-card h3 {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-size: 1.25rem;
  color: var(--color-text, #3D3229);
  margin: 0 0 0.75rem;
}
.ios-install-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted, #7A6B5D);
  margin: 0;
}
.ios-install-card p strong {
  color: var(--color-text, #3D3229);
}
.install-subtitle {
  margin-bottom: 1.25rem !important;
  font-size: 0.85rem !important;
}
.install-steps {
  text-align: left;
  margin-bottom: 1rem;
}
.install-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.install-step:last-child {
  margin-bottom: 0;
}
.install-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent, #C47A5A);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.install-step p {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}
.install-hint {
  font-size: 0.78rem !important;
  text-align: center;
  opacity: 0.7;
  margin-top: 0.25rem !important;
}

.install-beta-info {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border, #E0D5C7);
}
.install-beta-info h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary, #3a3228);
}
.install-beta-info p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #6b5f52);
  margin-bottom: 0.75rem;
}

.pwa-install-banner {
  display: none;
  max-width: 420px;
  margin: 0.75rem auto;
  margin-inline: auto;
  padding: 0.65rem 1rem;
  width: calc(100% - 2rem);
  background: var(--color-surface, #FDFAF6);
  border: 1px solid var(--color-border, #E0D5C7);
  border-radius: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 2px 12px rgba(61, 50, 41, 0.08);
  animation: pwa-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pwa-install-banner.visible {
  display: flex;
}

@keyframes pwa-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.pwa-install-icon {
  border-radius: 10px;
  flex-shrink: 0;
}

.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pwa-install-text strong {
  font-size: 0.8rem;
  color: var(--color-text, #3D3229);
}

.pwa-install-text span {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #7A6B5D);
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pwa-install-btn {
  padding: 0.45rem 0.9rem;
  background: var(--color-accent, #C47A5A);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
}

.pwa-install-btn:hover {
  background: #B36A4A;
}

.pwa-install-dismiss {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--color-text-secondary, #7A6B5D);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Gift "Coming Soon" Overlay
   --------------------------------------------------------------------------- */
/* (gift-coming-soon-overlay removed — feature is live) */

/* ---------------------------------------------------------------------------
   Profile: Invitations
   --------------------------------------------------------------------------- */
.invite-desc {
  color: var(--color-text-secondary, #7A6B5D);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.invite-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.invite-form .form-textarea {
  resize: vertical;
  min-height: 80px;
}

.invite-status {
  font-size: 0.9rem;
  padding: 0.5rem 0;
  min-height: 1.5em;
}

.invite-status.success {
  color: var(--color-sage, #5B8A72);
}

.invite-status.error {
  color: #C55040;
}

.invite-history-title {
  font-family: var(--ff-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1.5rem 0 0.75rem 0;
  color: var(--color-text-primary, #2C1810);
}

.invite-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.invite-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 241, 236, 0.5);
  border-radius: 8px;
  font-size: 0.9rem;
}

.invite-item-name {
  font-weight: 500;
  color: var(--color-text-primary, #2C1810);
  min-width: 120px;
}

.invite-item-email {
  color: var(--color-text-secondary, #7A6B5D);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-item-date {
  color: var(--color-text-secondary, #7A6B5D);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* =============================================
   LEGAL PAGES (Impressum & Datenschutz)
   ============================================= */
.legal-page {
  padding: var(--space-16) var(--space-4) var(--space-20);
  max-width: 100%;
}
.legal-page .container-narrow {
  max-width: 680px;
  margin: 0 auto;
}
.legal-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.legal-intro {
  margin-bottom: var(--space-10);
}
.legal-intro p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.legal-section {
  margin-bottom: var(--space-10);
}
.legal-section h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.legal-section h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.legal-section p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.legal-section ul {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
}
.legal-section ul li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  padding-left: var(--space-5);
  position: relative;
  margin-bottom: var(--space-2);
}
.legal-section ul li::before {
  content: "\2022";
  position: absolute;
  left: var(--space-1);
  color: var(--color-primary);
  font-weight: 700;
}
.legal-section a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.legal-section a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.legal-meta {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.legal-meta p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

/* Footer legal links row */
.footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.footer-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.footer-legal a:hover {
  color: var(--color-primary);
}
.footer-sep {
  color: var(--color-text-faint);
  user-select: none;
}

@media (max-width: 640px) {
  .legal-page {
    padding: var(--space-12) var(--space-4) var(--space-16);
  }
  .legal-title {
    font-size: var(--text-xl);
  }
  .legal-section h3 {
    font-size: var(--text-base);
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }
}

/* =============================================
   GUEST NAV — hide app links, keep install btn
   ============================================= */
.header-nav.nav-guest a[data-nav] {
  display: none;
}

/* =============================================
   LANDING PAGE — Redesigned Sections
   ============================================= */

/* --- Section 2: Philosophy (editorial full-width) --- */
.home-philosophy {
  padding: var(--space-20) var(--space-6);
  background: linear-gradient(180deg, #0A0A0A 0%, #1E1A16 20%, #3D3228 50%, var(--color-bg) 100%);
}
.philosophy-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.philosophy-quote {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: var(--space-10);
  position: relative;
  padding: 0 var(--space-2);
}
.philosophy-quote-mark {
  font-size: 1.5em;
  color: rgba(212,160,60,0.3);
  opacity: 1;
  position: absolute;
  left: -0.6em;
  top: -0.15em;
}

.philosophy-pillars {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
.philosophy-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.pillar-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-on-dark);
  letter-spacing: 0.03em;
}
.pillar-dash {
  width: 24px;
  height: 1.5px;
  background: var(--color-gold);
  opacity: 0.6;
}
.pillar-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
}

.philosophy-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 54ch;
  margin: 0 auto;
}

/* --- Section 3: Säulen (staggered cards) --- */
/* Fliessender Verlauf ueber Saeulen, Team, CTA.
   Ersetzt drei einfarbige Sektions-Hintergruende (color-bg, color-surface,
   color-dark-surface-2), die stufig aneinander stiessen. Der Verlauf
   nimmt die gleichen drei Blautoene in derselben Reihenfolge, aber
   stufenlos ineinander uebergehend, sodass keine gerade Kante mehr
   sichtbar ist. Die Sektionen selbst sind transparent. */
.home-flow {
  /* Fliessender Verlauf ueber die drei Sektionen. Beginnt und endet auf
     der Body-Grundfarbe --color-bg (#0C1220), damit oben und unten keine
     harten Kanten zum Header bzw. Footer entstehen.

     Fuer die Landing (siehe .landing-guest-only im HTML): der Verlauf
     startet oben auf dem Blau-Ton #101828, in den der Hero am unteren
     Rand ueberblendet, damit die Naht Hero -> Kaskade unsichtbar
     bleibt. Der Home-Fold (angemeldete Nutzer) setzt den urspruenglichen
     Blau-Verlauf weiter unten wieder her. */
  background: linear-gradient(
    180deg,
    #101828 0%,
    #101828 8%,
    #151D2E 40%,
    #1A2538 65%,
    #151D2E 88%,
    #0C1220 100%
  );
}

/* Home-Fold (angemeldete Nutzer): setzt den urspruenglichen reinen
   Blau-Verlauf zurueck. */
.home-fold-loggedin .home-flow {
  background: linear-gradient(
    180deg,
    #0C1220 0%,
    #0C1220 6%,
    #101828 25%,
    #151D2E 50%,
    #1A2538 72%,
    #151D2E 88%,
    #0C1220 100%
  );
}

/* =====================================================================
   Landing Saeulen (Blatt 51). Drei Karten mit Nummer, Titel, Lede und
   Inhaltsliste. Kein Stagger, kein Gold-Border pro Karte — die Karten
   sind neutrale Fassungen; der einzige Gold-Anker der Landing sitzt
   darunter in .saeulen-cta.
   ===================================================================== */
.landing-saeulen {
  padding: var(--space-20) var(--space-6);
  background: transparent;
}
/* Landing-Achse: alle Sektionen (Kopf, Kartenraster, CTA, PWA) teilen
   sich denselben Rastertraeger — max-width: 1080px, margin: 0 auto,
   text-align: center. Dadurch steht jedes Element auf ein und derselben
   vertikalen Mittelachse. Kein padding-left-Hack zur optischen
   Kompensation — solche Verschiebungen brechen die Achse. */
.saeulen-head {
  max-width: 1080px;
  margin: 0 auto var(--space-16);
  text-align: center;
}
.saeulen-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
  margin: 0 0 var(--space-4);
}
.saeulen-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-on-dark);
  letter-spacing: -0.005em;
}

.saeulen-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.saeule-card {
  padding: var(--space-8) var(--space-6) var(--space-6);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: var(--radius-lg, 10px);
  background: var(--color-dark-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.saeule-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
  margin: 0;
}
.saeule-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--color-text-on-dark);
  letter-spacing: -0.005em;
}
.saeule-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
}
.saeule-list {
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.12));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.saeule-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}
.saeule-list li b {
  color: var(--color-text-on-dark);
  font-weight: 500;
  min-width: 96px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* Zugangs-Block nach den Saeulen — der eine Gold-Anker der Landing.
   Steht auf derselben 1080-px-Achse wie Kopf und Kartenraster.
   Der schmalere Text (Trennlinie 640 px) sitzt darin optisch als
   ruhiger Absatz, aber die Achse ist ueber die ganze Landing hinweg
   dieselbe. */
.saeulen-cta {
  max-width: 1080px;
  margin: var(--space-20) auto 0;
  padding-top: var(--space-12);
  text-align: center;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.12));
}
.cta-block {
  text-align: center;
}
.cta-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
  margin: 0 0 var(--space-6);
}
.cta-terms {
  margin: var(--space-6) auto 0;
  max-width: 640px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-on-dark-muted);
}
.cta-note {
  margin: var(--space-4) auto 0;
  max-width: 640px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-on-dark-faint);
}
.cta-note a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong, rgba(255,255,255,0.2));
  padding-bottom: 1px;
}
.cta-note a:hover {
  color: var(--color-text-on-dark);
}

/* =====================================================================
   Landing PWA-Zugang (Blatt 52). Drei Karten mit Geraete-Anleitung und
   Offline-Fakt. Kein Anker, kein Knopf.
   ===================================================================== */
.landing-pwa {
  padding: var(--space-20) var(--space-6);
  background: transparent;
}
.pwa-inner {
  /* Gleiche Referenzbreite wie Kopf, Kartenraster und CTA — eine
     Mittelachse fuer die ganze Landing. */
  max-width: 1080px;
  margin: 0 auto;
}
.pwa-head {
  text-align: center;
  margin-bottom: var(--space-16);
}
.pwa-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
  margin: 0 0 var(--space-4);
}
.pwa-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-on-dark);
  letter-spacing: -0.005em;
}
.pwa-reason {
  margin: 0 auto;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
}
.pwa-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.pwa-step {
  padding: var(--space-6);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: var(--radius-lg, 10px);
  background: var(--color-dark-surface);
}
.pwa-step-label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
}
.pwa-step-device {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-on-dark);
  letter-spacing: -0.005em;
}
.pwa-step ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.pwa-step ol li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.12));
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
  counter-increment: step;
  display: flex;
  gap: var(--space-3);
}
.pwa-step ol li::before {
  content: counter(step);
  color: var(--color-text-on-dark-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  min-width: 12px;
}
.pwa-offline {
  padding: var(--space-6);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: var(--radius-lg, 10px);
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
  margin: 0;
}
.pwa-offline b {
  color: var(--color-text-on-dark);
  font-weight: 500;
}

.newsletter-strip {
  border-top: 1px solid rgba(212,160,60,0.15);
  padding-top: var(--space-8);
  background: var(--color-dark-surface);
}
.newsletter-inner {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-4);
}
.newsletter-inner .waitlist-form {
  margin: 0 auto;
}

/* --- Scroll reveal animation --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Landing page responsive --- */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
  }
  .hero-text {
    text-align: center;
    order: 2;
  }
  .hero-visual {
    order: 1;
  }
  .hero-philosophy {
    margin-inline: auto;
    max-width: 100%;
  }
  .hero-actions {
    justify-content: center;
    flex-direction: column;
  }
  .breath-orb {
    width: clamp(160px, 40vw, 220px);
    height: clamp(160px, 40vw, 220px);
  }
  .home-hero {
    min-height: auto;
    padding: var(--space-12) var(--space-4);
  }
  .landing-saeulen {
    padding: var(--space-16) var(--space-4);
  }
  .saeulen-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .saeulen-cta {
    margin-top: var(--space-16);
  }
  .landing-pwa {
    padding: var(--space-16) var(--space-4);
  }
  .pwa-steps {
    grid-template-columns: 1fr;
  }
  .waitlist-form {
    flex-direction: column;
  }
  /* Dark hero mobile — split layout */
  .home-hero--dark { min-height: auto; }
  .hero-anim-zone { height: 50vh; min-height: 300px; }
  .hero-text-zone { padding: var(--space-8) var(--space-4) var(--space-12); }
  .hero-content-centered { padding: 0 var(--space-4); }
  .hero-philosophy--light { font-size: var(--text-sm); }
  .hero-scroll-hint { bottom: 1.5rem; }
}

/* =============================================
   FORGOT PASSWORD / RESET PASSWORD
   ============================================= */

.auth-forgot {
  text-align: center;
  margin-top: var(--space-3);
}

.auth-forgot a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-forgot a:hover {
  color: var(--color-sage);
}

.auth-success-message {
  background: rgba(139, 152, 127, 0.12);
  border: 1px solid rgba(139, 152, 127, 0.3);
  color: var(--color-sage-dark, #5a6b4f);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  display: none;
}

.auth-success-message.visible {
  display: block;
}

/* =============================================
   DANGER ZONE / DELETE ACCOUNT
   ============================================= */

.btn-danger {
  background: transparent;
  color: #c53030;
  border: 1.5px solid #c53030;
  padding: var(--space-2) var(--space-6);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #c53030;
  color: #fff;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger:disabled:hover {
  background: transparent;
  color: #c53030;
}

.profile-danger-zone {
  border-top: 1.5px solid rgba(197, 48, 48, 0.2);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.profile-danger-zone h3 {
  color: #c53030;
}

.danger-zone-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* Delete confirmation overlay */
.delete-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-4));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4));
}

.delete-confirm-overlay.visible {
  display: flex;
}

.delete-confirm-card {
  background: var(--color-bg);
  border-radius: 16px;
  padding: var(--space-8);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.delete-confirm-card h3 {
  color: #c53030;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.delete-confirm-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.delete-confirm-hint {
  color: var(--color-text) !important;
  margin-bottom: var(--space-2) !important;
}

.delete-confirm-card .form-input {
  margin-bottom: var(--space-4);
}

.delete-confirm-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* =========================================================================
   ABO / SUBSCRIPTION VIEW
   ========================================================================= */

.abo-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.abo-header {
  text-align: center;
  margin-bottom: 40px;
}

.abo-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
  /* Theme text var (light on the navy bg) — hardcoded dark brown #2C1810
     was unreadable on the universum dark page background. */
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.abo-subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0;
}

/* Success banner */
.abo-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EBF5EE;
  color: #1B5E32;
  border: 1px solid #A8D5BA;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 28px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.abo-success-banner svg {
  flex-shrink: 0;
  color: #2E7D47;
}

/* Current plan info */
.abo-current-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F5F1EC;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.abo-current-label {
  font-size: 0.8125rem;
  color: #7A6B5D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.abo-current-plan {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2C1810;
}

.abo-status {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.abo-status-active {
  background: #E0F2E9;
  color: #1B5E32;
}

.abo-status-past-due {
  background: #FFF3CD;
  color: #856404;
}

.abo-status-canceled {
  background: #F8D7DA;
  color: #721C24;
}

.abo-period {
  font-size: 0.8125rem;
  color: #7A6B5D;
  margin: 0;
  width: 100%;
  margin-top: 4px;
}

/* Pricing cards grid */
.abo-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .abo-plans {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.abo-card {
  position: relative;
  background: #fff;
  border: 1.5px solid #E8E0D8;
  border-radius: 16px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.abo-card:hover {
  border-color: #B0A192;
  box-shadow: 0 4px 20px rgba(44, 24, 16, 0.06);
}

.abo-card-highlight {
  border-color: #5B8A72;
  box-shadow: 0 4px 24px rgba(91, 138, 114, 0.12);
}

.abo-card-highlight:hover {
  border-color: #4A7A62;
  box-shadow: 0 6px 28px rgba(91, 138, 114, 0.18);
}

/* Dana card — warm red accent */
.abo-card-dana {
  border-color: #C4604A;
  box-shadow: 0 4px 24px rgba(196, 96, 74, 0.10);
  background: linear-gradient(180deg, #FDF8F6 0%, #fff 40%);
}

.abo-card-dana:hover {
  border-color: #A84B2F;
  box-shadow: 0 6px 28px rgba(196, 96, 74, 0.16);
}

.abo-card-ribbon {
  position: absolute;
  top: -1px;
  right: 20px;
  background: #5B8A72;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px 6px;
  border-radius: 0 0 8px 8px;
}

.abo-ribbon-dana {
  background: #C4604A;
  letter-spacing: 0.04em;
}

.abo-card-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #F0EBE5;
}

.abo-card-header h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #2C1810;
  margin: 0 0 12px;
}

.abo-price {
  font-size: 2rem;
  font-weight: 700;
  color: #2C1810;
  line-height: 1.1;
}

.abo-price-period {
  font-size: 0.875rem;
  font-weight: 400;
  color: #7A6B5D;
}

.abo-price-sub {
  font-size: 0.8125rem;
  color: #B0A192;
  margin-top: 4px;
}

/* Feature list */
.abo-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.abo-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.875rem;
  color: #3D2E24;
  line-height: 1.4;
}

.abo-features li svg {
  flex-shrink: 0;
  color: #5B8A72;
  margin-top: 1px;
}

/* Card footer */
.abo-card-footer {
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abo-card-footer .btn {
  width: 100%;
}

.abo-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 999px;
}

.abo-badge-current {
  background: #E0F2E9;
  color: #2E7D47;
}

/* Dana model — Pay What You Wish */
.dana-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.dana-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.625rem;
  font-weight: 600;
  color: #C4604A;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.dana-currency {
  font-size: 1rem;
  font-weight: 500;
  color: #7A6B5D;
  margin-right: 2px;
}

.dana-amount-input {
  width: 80px;
  font-size: 2rem;
  font-weight: 700;
  color: #2C1810;
  text-align: center;
  border: none;
  border-bottom: 2px solid #C4604A;
  background: transparent;
  outline: none;
  padding: 0 4px 2px;
  -moz-appearance: textfield;
  font-family: inherit;
}

.dana-amount-input::-webkit-outer-spin-button,
.dana-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dana-amount-input:focus {
  border-bottom-color: #A84B2F;
}

.dana-price-sub {
  font-style: italic;
  color: #C4604A;
}

.dana-interval-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 16px;
  background: #F9EFEB;
  border-radius: 999px;
  padding: 3px;
  max-width: 240px;
}

.dana-toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #7A6B5D;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.dana-toggle-btn.active {
  background: #fff;
  color: #2C1810;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(196, 96, 74, 0.12);
}

.dana-toggle-btn:hover:not(.active) {
  color: #2C1810;
}

/* Dana explainer box */
.dana-explainer {
  background: #FDF8F6;
  border-left: 3px solid #C4604A;
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 0 0 18px;
}

.dana-explainer-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #A84B2F;
  margin: 0 0 6px;
}

.dana-explainer-text {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #5A4A3E;
  margin: 0 0 6px;
}

.dana-explainer-text:last-child {
  margin-bottom: 0;
}

.dana-explainer-text em {
  color: #C4604A;
  font-style: normal;
  font-weight: 600;
}

/* Dana features — red checkmarks */
.dana-features li svg {
  color: #C4604A;
}

/* Dana button */
.btn-dana {
  background: #C4604A;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  font-family: inherit;
}

.btn-dana:hover {
  background: #A84B2F;
}

.btn-dana:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dana badge */
.abo-badge-dana {
  background: #FBEAE6;
  color: #A84B2F;
}

.dana-min-hint {
  display: block;
  font-size: 0.6875rem;
  color: #B0A192;
  margin-top: 6px;
}

.abo-card-footer {
  flex-direction: column;
}

/* Manage button */
.abo-manage {
  text-align: center;
  margin-bottom: 40px;
}

.abo-manage .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* FAQ section */
.abo-faq {
  max-width: 640px;
  margin: 0 auto;
}

.abo-faq h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 0 0 16px;
  text-align: center;
}

.abo-faq-item {
  border-bottom: 1px solid var(--color-divider);
  padding: 0;
}

.abo-faq-item summary {
  padding: 16px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.abo-faq-item summary::-webkit-details-marker {
  display: none;
}

.abo-faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

.abo-faq-item[open] summary::after {
  content: "\2212";
}

.abo-faq-item p {
  padding: 0 0 16px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Profile Abo link */
.abo-profile-desc {
  font-size: 0.875rem;
  color: #7A6B5D;
  margin: 0 0 12px;
}

/* =============================================
   FEATURE GATING — Lock overlays, badges, hints
   ============================================= */

/* Form hint below invite code field */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* Beta Badge (header) */
.beta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-warm));
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Locked tab style (breathwork tabs) */
.breathwork-tab.tab-locked {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.breathwork-tab.tab-locked .lock-icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 3px;
  opacity: 0.7;
}
.breathwork-tab.tab-locked .plus-hint {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: 1px;
}
.breathwork-tab.tab-locked:hover {
  opacity: 0.65;
}

/* Feature lock overlay (on cards like essays) */
.feature-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  z-index: 2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.feature-lock-overlay:hover {
  background: rgba(250, 248, 245, 0.75);
}
.feature-lock-overlay .lock-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}
.feature-lock-overlay span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

/* Card locked state */
.pillar-card.is-locked {
  position: relative;
  pointer-events: auto;
}

/* Abo beta banner */
.abo-beta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #E8F5E9, #FFF8E1);
  border: 1px solid #C5E1A5;
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.abo-beta-banner svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Trial banner */
.abo-trial-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(66,165,245,0.15), rgba(255,248,225,0.2));
  border: 1px solid rgba(144,202,249,0.4);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.abo-trial-banner svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
.abo-status-trial {
  background: linear-gradient(135deg, #42A5F5, var(--color-accent));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.abo-trial-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #aaa);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* Abo beta status tag */
.abo-status-beta {
  background: linear-gradient(135deg, var(--color-accent), #6B9080);
  color: #fff;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Abo beta hint text */
.abo-beta-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* Abo section wrapper (invite code) */
.abo-section {
  margin-top: var(--space-8);
}

/* =============================================
   INVITE CODE CARD
   ============================================= */
.invite-code-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-6) var(--space-8);
  text-align: center;
}
.invite-code-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.invite-code-card > p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}

.invite-code-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: 12px;
  padding: 12px 20px;
  margin: var(--space-4) 0;
}
.invite-code-value {
  font-family: 'DM Mono', 'Fira Code', 'Courier New', monospace;
  font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}
.invite-code-copy {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.invite-code-copy:hover {
  color: var(--color-accent);
  background: var(--color-surface-2);
}

.invite-code-stats {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-4);
}

.invite-code-actions {
  margin-bottom: var(--space-3);
}
.invite-code-actions .btn-sm {
  font-size: var(--text-sm);
  padding: 8px 20px;
}

.invite-code-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.invite-code-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
}

.loading-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
}

/* btn-icon utility */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--color-text-muted);
  transition: color 0.2s, background 0.2s;
}
.btn-icon:hover {
  color: var(--color-accent);
  background: var(--color-surface-2);
}

@media (max-width: 600px) {
  .invite-code-card {
    padding: var(--space-4) var(--space-4);
  }
  .invite-code-display {
    padding: 10px 14px;
  }
  .invite-code-value {
    font-size: 0.9rem;
  }
  .abo-beta-banner,
  .abo-trial-banner {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
}

/* Debug Plan Switcher (Beta testing) */
.abo-debug-section {
  margin-top: var(--space-6);
}
.abo-debug-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
}
.abo-debug-summary {
  padding: 12px 18px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.abo-debug-summary:hover {
  color: var(--color-text);
}
.abo-debug-buttons {
  display: flex;
  gap: 8px;
  padding: 0 18px 12px;
}
.abo-debug-btn {
  flex: 1;
  font-size: var(--text-sm) !important;
  padding: 8px 12px !important;
}
.abo-debug-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0 18px 14px;
  margin: 0;
  line-height: 1.4;
}

/* ===== LANDING PAGE: Über den Gründer ===== */
/* ===== GRÜNDER VIEW (in-app) ===== */
.gruender-article .gruender-header {
  text-align: center;
}
.gruender-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.gruender-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-surface-offset);
}
.gruender-avatar-placeholder svg {
  color: var(--color-text-faint);
}
.gruender-signoff {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text);
  margin-top: 8px;
}

/* Newsletter Archive */
.newsletter-archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.newsletter-entry {
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}
.newsletter-entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.newsletter-number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: 500;
}
.newsletter-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.newsletter-entry-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-6);
  color: var(--color-text);
}
.newsletter-entry-content {
  font-size: var(--text-base);
  line-height: 1.8;
}
.newsletter-entry-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-primary);
  margin: var(--space-8) 0 var(--space-3);
}
.newsletter-entry-content h4:first-child {
  margin-top: 0;
}
.newsletter-entry-content p {
  margin-bottom: var(--space-4);
}
.newsletter-entry-content ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}
.newsletter-entry-content li {
  margin-bottom: var(--space-2);
}
.newsletter-highlight {
  background: rgba(91,138,114,0.08);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.newsletter-highlight p {
  margin: 0;
}
.newsletter-ie-box {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  text-align: center;
  border: 1px solid var(--color-border);
}
.newsletter-ie-ratio {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.newsletter-ie-explain {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Gesprächsbox — Fachpersonen-Modus */
.pv-gespraechs-box {
  background: linear-gradient(135deg, #F0EDE8 0%, #E8E4DD 100%);
  border-left: 3px solid var(--sage, #7A8B6F);
  border-radius: 0 12px 12px 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.pv-gespraechs-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.pv-gespraechs-icon {
  font-size: 1.1em;
}
.pv-gespraechs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pv-gespraechs-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary, #5C4F42);
  line-height: 1.6;
}
.pv-gespraechs-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--sage, #7A8B6F);
  font-weight: 600;
}
.pv-gespraechs-list li + li {
  border-top: 1px solid rgba(0,0,0,0.06);
}

.newsletter-philosophy {
  font-style: italic;
  color: var(--warm-600, #7A6B5D);
  text-align: center;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.newsletter-sign {
  margin-top: var(--space-8);
  font-style: italic;
  color: var(--color-text-muted);
}/* Step pill progress bar *//* Card container *//* Options list (checkboxes & radios) *//* Compact option (duration pills) *//* Checkbox check mark *//* Radio dot *//* Option text *//* Sub-title (Präferenzen sections) *//* Privacy badge *//* Freitext *//* Medical detail (intention step) *//* Summary rows *//* Contra banner *//* Sync toggle row *//* Completion screen *//* Recommended Techniques *//* Profile Card *//* Status Badge *//* Onboarding Prompt *//* ====================================================================
   ARZT PV-INFO MODAL
   ==================================================================== */
.arzt-pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: var(--space-4);
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-4));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4));
}
.arzt-pv-overlay.visible {
  opacity: 1;
}
.arzt-pv-modal {
  max-width: 500px;
  width: 100%;
  background: var(--color-surface, #1A1A2E);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  animation: assessSlideUp 0.4s ease;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
}
.arzt-pv-icon {
  margin-bottom: var(--space-3);
  color: var(--color-primary, #C9A84C);
}
.arzt-pv-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.35rem;
  margin-bottom: var(--space-3);
  color: var(--color-text, #E8E0D0);
}
.arzt-pv-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted, #A0977D);
  margin-bottom: var(--space-5);
}
.arzt-pv-points {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.arzt-pv-point {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.arzt-pv-point-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary, #C9A84C);
  color: #0D0D1A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 2px;
}
.arzt-pv-point strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--color-text, #E8E0D0);
}
.arzt-pv-point p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted, #A0977D);
  margin: 0;
}
.arzt-pv-close {
  margin-bottom: var(--space-3);
}
.arzt-pv-footer {
  font-size: 0.8rem;
  color: var(--color-text-muted, #A0977D);
  opacity: 0.7;
}

/* Onboarding Arzt step */
.onboarding-arzt-icon {
  margin-bottom: var(--space-3);
  color: var(--color-primary, #C9A84C);
}
.onboarding-arzt-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.onboarding-arzt-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted, #A0977D);
  opacity: 0.6;
  margin-top: var(--space-3);
}

/* Profile: small button variant */
.btn-sm {
  font-size: 0.8rem;
  padding: 6px 14px;
  margin-top: var(--space-2);
}

/* Avatar status dots */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
}/* ===========================================================================
   PRAXIS MODULE — Arzt-Dashboard (Redesigned)
   =========================================================================== */
.praxis-container {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--space-8) + 80px);
  background: var(--color-dark-earth, #2A2218);
  color: #e8ddd0;
  border-radius: var(--radius-lg, 16px);
}

/* Loading / Empty */
.praxis-loading, .praxis-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.praxis-empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: var(--space-2) 0 0;
  color: var(--color-text);
}
.praxis-empty svg { opacity: 0.3; }

.praxis-spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: praxisSpin 0.7s linear infinite;
}
.praxis-spinner--sm { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes praxisSpin { to { transform: rotate(360deg); } }

/* ---- LIST HEADER ---- */
.praxis-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.praxis-list-title h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin: 0;
}
.praxis-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}
.praxis-stats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.praxis-stat {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 14px;
  white-space: nowrap;
}
.praxis-stat--pending { background: #e67e2218; color: #e67e22; }
.praxis-stat--review  { background: #3498db18; color: #3498db; }
.praxis-stat--done    { background: #27ae6018; color: #27ae60; }

/* ---- ASSESSMENT CARDS ---- */
.praxis-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.praxis-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  width: 100%;
}
.praxis-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.praxis-card--erstellt { border-left: 3px solid #e67e22; }
.praxis-card--in_beurteilung { border-left: 3px solid #3498db; }
.praxis-card--freigegeben, .praxis-card--angepasst { border-left: 3px solid #27ae60; }

.praxis-card-row { display: flex; align-items: center; }
.praxis-card-head { justify-content: space-between; gap: var(--space-3); }
.praxis-card-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.praxis-card-avatar, .praxis-patient-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.praxis-card-user-info { min-width: 0; }
.praxis-card-email {
  font-weight: 600;
  font-size: var(--text-sm);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.praxis-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  display: block;
}
.praxis-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.praxis-unread {
  background: var(--color-accent, #C47A5A);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.praxis-card-body { flex-wrap: wrap; }
.praxis-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tags */
.praxis-tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 14px;
  white-space: nowrap;
}
.praxis-tag--intention { background: var(--color-primary-light, #34887810); color: var(--color-primary); font-weight: 500; }
.praxis-tag--condition { background: #e74c3c12; color: #c0392b; font-weight: 500; }

/* Status badges */
.praxis-status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.praxis-status--erstellt { background: #e67e2218; color: #e67e22; }
.praxis-status--in_beurteilung { background: #3498db18; color: #3498db; }
.praxis-status--freigegeben, .praxis-status--angepasst { background: #27ae6018; color: #27ae60; }

/* ---- DETAIL VIEW ---- */
.praxis-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-4);
  transition: color 0.15s;
}
.praxis-back:hover { color: var(--color-text); }

.praxis-detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.praxis-detail-card--chat {
  padding-bottom: var(--space-3);
}

/* Patient header */
.praxis-patient-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.praxis-patient-id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.praxis-patient-email {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0;
  line-height: 1.3;
  word-break: break-all;
}
.praxis-patient-since {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Progress bar */
.praxis-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.praxis-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.praxis-progress-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg);
  transition: all 0.2s;
}
.praxis-progress-step.active .praxis-progress-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}
.praxis-progress-step.done .praxis-progress-dot {
  border-color: #27ae60;
  background: #27ae60;
  color: white;
}
.praxis-progress-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.praxis-progress-step.active .praxis-progress-label { color: var(--color-primary); font-weight: 600; }
.praxis-progress-step.done .praxis-progress-label { color: #27ae60; }
.praxis-progress-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 8px;
  margin-bottom: 22px;
}
.praxis-progress-line.done { background: #27ae60; }

/* Assessment data fields */
.praxis-assessment-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.praxis-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.05));
}
.praxis-field:last-child { border-bottom: none; }
.praxis-field--alert {
  background: #e74c3c08;
  border-radius: 8px;
  padding: var(--space-3);
  margin: var(--space-1) calc(var(--space-3) * -1);
  border-bottom: none;
}
.praxis-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.praxis-field-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.praxis-field-note {
  font-style: italic;
  color: var(--color-text-muted);
}
.praxis-field-none {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Section heads inside detail cards */
.praxis-card-section-head {
  margin-bottom: var(--space-4);
}
.praxis-card-section-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0 0 4px;
}
.praxis-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ---- TECHNIQUE SELECTION ---- */
.praxis-tech-category {
  margin-bottom: var(--space-4);
}
.praxis-tech-category:last-of-type { margin-bottom: var(--space-2); }
.praxis-tech-cat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  padding-left: 2px;
}
.praxis-tech-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.praxis-tech-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-bg);
}
.praxis-tech-row:hover { border-color: var(--color-primary); }
.praxis-tech-row.selected {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 52, 136, 120), 0.06);
}
.praxis-tech-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.praxis-tech-check {
  width: 22px; height: 22px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  color: transparent;
}
.praxis-tech-row.selected .praxis-tech-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.praxis-tech-info { min-width: 0; }
.praxis-tech-name {
  font-size: var(--text-sm);
  font-weight: 500;
  display: block;
}
.praxis-tech-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  display: block;
}
.praxis-tech-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.praxis-link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.praxis-link-btn:hover { opacity: 0.8; }

/* ---- NOTE & ACTIONS ---- */
.praxis-note-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
  min-height: 70px;
  margin-bottom: var(--space-4);
}
.praxis-note-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.praxis-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Buttons */
.praxis-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s;
}
.praxis-btn--primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.praxis-btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.praxis-btn--primary:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }
.praxis-btn--secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
.praxis-btn--secondary:hover { border-color: var(--color-primary); }
.praxis-btn--secondary:disabled { opacity: 0.6; cursor: not-allowed; }
.praxis-btn--sm { padding: 8px 14px; }

/* ---- CHAT ---- */
.praxis-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: var(--space-3);
}
.praxis-chat-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4);
}
.praxis-msg {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.praxis-msg-mine {
  align-self: flex-end;
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: 4px;
}
.praxis-msg-theirs {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.praxis-msg-time {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 2px;
}
.praxis-chat-input {
  display: flex;
  gap: var(--space-2);
}
.praxis-chat-input input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
}
.praxis-chat-input input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
  .praxis-container { padding: var(--space-3) var(--space-3) calc(var(--space-6) + 80px); }
  .praxis-detail-card { padding: var(--space-4); }
  .praxis-patient-header { flex-direction: column; align-items: flex-start; }
  .praxis-progress { overflow-x: auto; }
  .praxis-card-head { flex-wrap: wrap; }
  .praxis-field--alert { margin: var(--space-1) 0; }
}

/* User Chat Overlay Modal */
.user-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  padding: var(--space-4);
  padding-top: max(env(safe-area-inset-top, 0px), var(--space-4));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--space-4));
}
.user-chat-overlay.visible { opacity: 1; }
.user-chat-modal {
  background: var(--color-bg);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.3s;
  overflow: hidden;
}
.user-chat-overlay.visible .user-chat-modal {
  transform: translateY(0);
}
.user-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.user-chat-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0;
}
.user-chat-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 4px;
}
.user-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 200px;
  max-height: 50vh;
}
.user-chat-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-6) var(--space-4);
}
.user-chat-input-wrap {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.user-chat-input-wrap input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.user-chat-input-wrap input:focus {
  outline: none;
  border-color: var(--color-primary);
}/* ============================================================
   Analytics Dashboard — Universum
   ============================================================ */

/* Sub-navigation (Assessments / Analytics toggle) */
.praxis-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
}
.praxis-subnav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-width: 0;
}
.praxis-subnav-btn:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.04);
}
.praxis-subnav-btn.active {
  color: #e8ddd0;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.praxis-subnav-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Section labels */
.analytics-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: var(--space-4) 0 var(--space-2);
  padding-left: 2px;
}

/* Section-Label-Reihe: Label links, Aktionsknopf rechts (etwa Nutzerliste exportieren) */
.analytics-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
.analytics-section-label-row .analytics-section-label {
  margin: 0;
}

/* Praxis-Admin Export-Knopf (Nutzerliste als CSV) */
.praxis-users-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.praxis-users-export-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.2);
}
.praxis-users-export-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.praxis-users-export-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* KPI Grid */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.analytics-kpi-card {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: var(--space-3);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.analytics-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.07);
}
.analytics-kpi--warn {
  border-color: rgba(230, 126, 34, 0.4);
  background: rgba(230, 126, 34, 0.08);
}
.analytics-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: #e8ddd0;
  line-height: 1.2;
}
.analytics-kpi--warn .analytics-kpi-value {
  color: #f0a050;
}
.analytics-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  line-height: 1.3;
}

/* Analytics cards */
.analytics-card {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid rgba(255,255,255,0.06);
}
.analytics-card-head {
  font-size: 15px;
  font-weight: 700;
  color: #e8ddd0;
  margin-bottom: var(--space-3);
}

/* Bar chart */
.analytics-chart {
  min-height: 160px;
}
.analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  padding-top: 20px;
}
.analytics-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.analytics-bar-count {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-bottom: 3px;
  line-height: 1;
}
.analytics-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(197, 160, 94, 0.8) 0%, rgba(163, 145, 110, 0.6) 100%);
  transition: height 0.3s ease;
}
.analytics-bar-label {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
  white-space: nowrap;
}

/* Plan distribution */
.analytics-plan-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.analytics-plan-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.analytics-plan-label {
  font-size: 13px;
  font-weight: 600;
  color: #e8ddd0;
  min-width: 80px;
}
.analytics-plan-bar-bg {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
}
.analytics-plan-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.analytics-plan-count {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  min-width: 70px;
  text-align: right;
}

/* User list */
.analytics-user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analytics-user-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 4px;
  border-radius: 8px;
}
.analytics-user-row:hover {
  background: rgba(255,255,255,0.04);
}
.analytics-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #e8ddd0;
  flex-shrink: 0;
}
.analytics-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.analytics-user-email {
  font-size: 13px;
  font-weight: 600;
  color: #e8ddd0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-user-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .analytics-kpi-value { font-size: 20px; }
  .analytics-bar-label { font-size: 8px; }
  .analytics-plan-label { min-width: 65px; font-size: 12px; }
  .analytics-plan-count { min-width: 55px; font-size: 11px; }
}
@media (max-width: 380px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .analytics-kpi-card { padding: var(--space-2); }
  .analytics-kpi-value { font-size: 18px; }
  .analytics-kpi-label { font-size: 10px; }
}

/* ==========================================================================
   Eigene Gestaltung — Custom Section + Configurator + Favorites (Universum)
   ========================================================================== */

/* --- Custom section on goal overview --- */
/* shiihaa Hub Absprung (statisch, in Vorbereitung) */
.kurs-hub-hint {
  margin-top: var(--space-5, 24px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  background: var(--color-surface-2, rgba(255,255,255,0.02));
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-left: 2px solid var(--u-accent-dim, #8A6D3B);
  border-radius: var(--radius-md, 10px);
  font: inherit;
}
.kurs-hub-hint-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text, #2C1810);
}
.kurs-hub-hint-strong {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.kurs-hub-hint-status {
  margin: var(--space-2, 8px) 0 0 0;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-accent-dim, #8A6D3B);
}

.kurs-custom-section {
  margin-top: var(--space-5, 24px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid rgba(139,115,85,0.12);
}
.kurs-custom-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-3, 12px) 0;
  letter-spacing: 0.01em;
}

/* New session card */
.kurs-custom-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(44,24,16,0.03);
  border: 1.5px solid rgba(139,115,85,0.15);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: left;
}
.kurs-custom-card:active {
  border-color: var(--color-primary, #5B8A72);
  box-shadow: 0 0 0 2px rgba(212,160,106,0.2);
}
.kurs-custom-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,160,106,0.4) 0%, rgba(184,134,11,0.5) 100%);
  color: #fff;
}
.kurs-custom-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kurs-custom-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
}
.kurs-custom-desc {
  font-size: 0.8125rem;
  color: var(--color-text-faint, #B0A192);
  line-height: 1.35;
}
.kurs-custom-locked {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.kurs-custom-locked .kurs-custom-icon {
  background: rgba(44,24,16,0.06);
}

/* --- Favorites list --- */
.kurs-favs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
}
.kurs-fav-item {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(139,115,85,0.15);
  background: rgba(44,24,16,0.03);
}
.kurs-fav-play {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.kurs-fav-play:active {
  background: rgba(212,160,106,0.1);
}
.kurs-fav-play-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,160,106,0.5) 0%, rgba(184,134,11,0.6) 100%);
  color: #fff;
}
.kurs-fav-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kurs-fav-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kurs-fav-meta {
  font-size: 0.75rem;
  color: var(--color-text-faint, #B0A192);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kurs-fav-delete {
  flex-shrink: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid rgba(139,115,85,0.12);
  color: var(--color-text-faint, #B0A192);
  cursor: pointer;
  padding: var(--space-2, 8px) 0;
}
.kurs-fav-delete:active {
  background: rgba(220,38,38,0.12);
  color: #f87171;
}

/* --- Configurator (3-step wizard) --- */
.kurs-config {
  padding: var(--space-2, 8px) 0;
}
.kurs-config-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}
.kurs-config-back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(139,115,85,0.15);
  background: rgba(44,24,16,0.04);
  color: var(--color-text, #2C1810);
  cursor: pointer;
}
.kurs-config-back:active {
  background: rgba(44,24,16,0.08);
}
.kurs-config-title {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
  margin: 0;
}
.kurs-config-step {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-faint, #B0A192);
  background: rgba(44,24,16,0.04);
  border-radius: 8px;
  padding: 2px 10px;
}
.kurs-config-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, #7A6B5D);
  margin: 0 0 var(--space-3, 12px) 0;
  line-height: 1.45;
}

/* Warmup chips */
.kurs-config-warmups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-4, 16px);
}
.kurs-config-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(139,115,85,0.18);
  background: rgba(44,24,16,0.03);
  color: var(--color-text, #2C1810);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.kurs-config-chip:active,
.kurs-config-chip.selected {
  border-color: var(--color-primary, #5B8A72);
  background: rgba(212,160,106,0.12);
  color: var(--color-primary, #5B8A72);
}
.kurs-config-chip-name {
  white-space: nowrap;
}
.kurs-config-chip-time {
  font-size: 0.6875rem;
  opacity: 0.5;
}

/* Technique categories */
.kurs-config-cat {
  margin-bottom: var(--space-4, 16px);
}
.kurs-config-cat-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
  margin: 0 0 var(--space-2, 8px) 0;
}
.kurs-config-cat-desc {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-text-faint, #B0A192);
  margin-left: 6px;
}

/* Technique card */
.kurs-config-tech {
  padding: var(--space-3, 12px);
  border-radius: 12px;
  border: 1.5px solid rgba(139,115,85,0.12);
  background: rgba(44,24,16,0.03);
  margin-bottom: var(--space-2, 8px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.kurs-config-tech:active,
.kurs-config-tech.selected {
  border-color: var(--color-primary, #5B8A72);
  background: rgba(212,160,106,0.08);
}
.kurs-config-tech-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kurs-config-tech-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
}
.kurs-config-tech-label {
  font-size: 0.75rem;
  color: var(--color-text-faint, #B0A192);
  font-weight: 500;
}

/* Duration slider */
.kurs-config-dur {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
}
.kurs-config-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(44,24,16,0.08);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.kurs-config-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary, #5B8A72);
  border: 2px solid rgba(0,0,0,0.3);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.kurs-config-dur-val {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary, #5B8A72);
  min-width: 55px;
  text-align: right;
}

/* Apnoe config selects */
.kurs-config-apnoe-cfg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
}
.kurs-config-apnoe-cfg label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text, #2C1810);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kurs-config-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(139,115,85,0.18);
  background: rgba(44,24,16,0.04);
  font-size: 0.8125rem;
  color: var(--color-text, #2C1810);
}

/* Actions row */
.kurs-config-actions {
  display: flex;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
}
.kurs-config-actions .btn {
  flex: 1;
}
.kurs-config-actions .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* Summary (step 3) */
.kurs-config-summary {
  border-radius: 12px;
  background: rgba(44,24,16,0.04);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}
.kurs-config-sum-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.kurs-config-sum-section + .kurs-config-sum-section {
  border-top: 1px solid rgba(139,115,85,0.12);
}
.kurs-config-sum-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted, #7A6B5D);
}
.kurs-config-sum-val {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  text-align: right;
}
.kurs-config-sum-total {
  margin-top: 4px;
  padding-top: 8px;
}
.kurs-config-sum-total .kurs-config-sum-label {
  font-weight: 700;
  color: var(--color-text, #2C1810);
}
.kurs-config-sum-total .kurs-config-sum-val {
  font-weight: 700;
  color: var(--color-primary, #5B8A72);
}

/* Name input (step 3) */
.kurs-config-name {
  margin-bottom: var(--space-4, 16px);
}
.kurs-config-name-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted, #7A6B5D);
  margin-bottom: 6px;
}
.kurs-config-name-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(139,115,85,0.18);
  border-radius: 10px;
  background: rgba(44,24,16,0.04);
  font-size: 0.9375rem;
  color: var(--color-text, #2C1810);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.kurs-config-name-input:focus {
  border-color: var(--color-primary, #5B8A72);
}
.kurs-config-name-input::placeholder {
  color: var(--color-text-faint, #B0A192);
}

/* ==========================================================================
   Bhastrika Protocol Settings — Presets, Flow, Recovery Info, Safety (Universum)
   ========================================================================== */

/* Protocol flow visualization */
.round-protocol-info {
  margin-bottom: var(--space-3, 12px);
}
.round-protocol-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-3, 12px);
  background: var(--color-surface, rgba(255,255,255,0.7));
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-radius: 12px;
  margin: 0;
}
.round-flow-step {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  background: var(--color-bg, #FAF5EA);
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
}
.round-flow-arrow {
  font-size: 0.75rem;
  color: var(--color-text-faint, #B0A192);
}

/* Settings heading */
.round-settings-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
  margin: var(--space-3, 12px) 0 var(--space-2, 8px) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Presets */
.round-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}
.round-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border, rgba(139,115,85,0.15));
  background: var(--color-surface, rgba(255,255,255,0.7));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.round-preset-btn:active,
.round-preset-btn.selected {
  border-color: var(--color-primary, #5B8A72);
  background: rgba(91,138,114,0.08);
}
.round-preset-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
}
.round-preset-desc {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #7A6B5D);
}

/* Safety warning */
.round-safety-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  background: rgba(254,243,205,0.25);
  border: 1px solid rgba(200,170,60,0.35);
  border-radius: 10px;
  margin-top: var(--space-3, 12px);
  color: #8a6d10;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.round-safety-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #8a6d10;
}

/* Recovery info box */
.round-recovery-info {
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(91,138,114,0.05);
  border-radius: 12px;
  border-left: 3px solid var(--color-primary, #5B8A72);
}
.round-recovery-info p {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #7A6B5D);
  line-height: 1.5;
  margin: 0 0 var(--space-2, 8px) 0;
}
.round-recovery-info p:last-child {
  margin-bottom: 0;
}
.round-recovery-steps {
  font-size: 0.8125rem;
  color: var(--color-text, #2C1810);
  line-height: 1.6;
  margin: var(--space-2, 8px) 0;
  padding-left: 20px;
}
.round-recovery-steps li {
  margin-bottom: 2px;
}

/* ---- Kapalabhati Toggle + Pull-up Hint ---- */
.round-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.round-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.round-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.round-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(44,24,16,0.12);
  border-radius: 24px;
  transition: background 0.25s ease;
}
.round-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.round-toggle input:checked + .round-toggle-slider {
  background: var(--color-primary, #5B8A72);
}
.round-toggle input:checked + .round-toggle-slider::before {
  transform: translateX(20px);
}
.round-pullup-hint {
  background: rgba(91,138,114,0.06);
  border-left: 3px solid var(--color-primary, #5B8A72);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted, #7A6B5D);
}
.round-pullup-hint p {
  margin: 0;
}

/* ---- Skill Chips ---- */
.skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(91,138,114,0.06);
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-radius: 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text, #2C1810);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.skill-chip:active {
  background: rgba(91,138,114,0.1);
  border-color: var(--color-primary, #5B8A72);
}
.skill-chip-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ---- Skill Modal ---- */
.skill-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: max(env(safe-area-inset-top, 0px), 20px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.skill-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.skill-modal-card {
  background: var(--color-bg, #FAF5EA);
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.skill-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-muted, #7A6B5D);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}
.skill-modal-badge {
  display: inline-block;
  background: var(--color-primary, #5B8A72);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.skill-modal-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
  margin: 0 0 4px;
}
.skill-modal-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted, #7A6B5D);
  font-style: italic;
  margin: 0 0 14px;
}
.skill-modal-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text, #2C1810);
  margin: 0 0 16px;
}
.skill-modal-safety {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(91,138,114,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.skill-modal-safety svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary, #5B8A72);
}
.skill-modal-safety-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted, #7A6B5D);
  margin: 0;
}

/* ---- Skills Section (Overview) ---- */
/* Skills Page (full screen) */
.breath-skills-page {
  /* width: 100% wie bei .breath-category, damit der Flex-Elternteil
     .breathwork-container den Screen nicht auf Content-Breite schrumpft. */
  width: 100%;
  padding: 0 16px 32px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.breath-skills-page .breath-nav-back {
  margin-bottom: 8px;
}
.skills-page-header {
  margin-bottom: 20px;
}
.skills-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
  margin: 0 0 6px;
}
.skills-page-intro {
  font-size: 0.875rem;
  color: var(--color-text-muted, #7A6B5D);
  margin: 0;
  line-height: 1.5;
}
.skills-page-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skills-page-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-surface, rgba(255,255,255,0.7));
  border: 1px solid var(--color-border, rgba(139,115,85,0.15));
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.skills-page-card:active {
  background: var(--color-border, rgba(139,115,85,0.15));
  border-color: var(--color-primary, #5B8A72);
  transform: scale(0.98);
}
.skills-page-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.skills-page-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #2C1810);
}
.skills-page-card-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted, #7A6B5D);
  font-style: italic;
}
.skills-page-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #7A6B5D);
  line-height: 1.55;
  margin: 0;
}
/* Skills overview card — visually distinct */
.breath-overview-card--skills {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(91,138,114,0.08) 0%, rgba(91,138,114,0.02) 100%);
  border-color: rgba(91,138,114,0.3);
  border-style: solid;
}
.breath-overview-card--skills:hover {
  border-color: var(--color-primary, #5B8A72);
  border-style: solid;
}
.breath-overview-card--skills .breath-overview-card-icon {
  background: rgba(91,138,114,0.12);
  color: var(--color-primary, #5B8A72);
}
.breath-overview-card--skills .breath-overview-card-title {
  color: var(--color-primary, #5B8A72);
}

/* ---- STA Featured Card (Molchanovs Move) ---- */
.sta-featured-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 12px 0 16px;
  background: linear-gradient(135deg, rgba(14,162,199,0.08) 0%, rgba(14,162,199,0.03) 100%);
  border: 1.5px solid rgba(14,162,199,0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.sta-featured-card:active,
.sta-featured-card.selected {
  border-color: #0EA2C7;
  box-shadow: 0 0 0 3px rgba(14,162,199,0.12);
  transform: scale(0.98);
}
.sta-featured-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14,162,199,0.15) 0%, rgba(14,162,199,0.25) 100%);
  color: #0EA2C7;
}
.sta-featured-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sta-featured-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0EA2C7;
  background: rgba(14,162,199,0.1);
  padding: 1px 8px;
  border-radius: 6px;
  align-self: flex-start;
}
.sta-featured-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #2C1810);
}
.sta-featured-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted, #7A6B5D);
}
.sta-featured-info {
  flex-shrink: 0;
  color: var(--color-text-faint, #B0A192);
  cursor: pointer;
  padding: 4px;
}
.sta-featured-info:hover {
  color: #0EA2C7;
}

/* ---- STA Category Page ---- */
.sta-category-title {
  color: #0EA2C7 !important;
}
.sta-category-desc {
  color: var(--color-text-muted);
}
.sta-tech-card {
  border-color: rgba(14,162,199,0.2) !important;
  background: linear-gradient(135deg, rgba(14,162,199,0.04) 0%, rgba(14,162,199,0.01) 100%) !important;
}
.sta-tech-card:active,
.sta-tech-card:hover {
  border-color: #0EA2C7 !important;
  box-shadow: 0 2px 12px rgba(14,162,199,0.1);
}
.sta-tech-card .breath-cat-tech-icon {
  color: #0EA2C7;
  background: rgba(14,162,199,0.1);
}

/* ---- Apnoe Programme Button (Warmup tab, Blatt 10 v4) ----
 * Keine Sonderfarbe mehr - Kacheln folgen dem einheitlichen Programmwaehler-Stil.
 * Externer Pfeil signalisiert den Sprung in den Atmen-Reiter (STA-Kategorie).
 */
/* ─── Drag & Drop Tech List ─── */
.praxis-tech-sortable {
  list-style: none;
  padding: 0;
  margin: 0;
}
.praxis-tech-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e0dcd4);
  border-radius: 8px;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.praxis-tech-item:active { cursor: grabbing; }
.praxis-tech-dragging {
  opacity: 0.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.praxis-tech-grip {
  color: var(--color-text-muted, #999);
  font-size: 14px;
  user-select: none;
}
.praxis-tech-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  font-size: 14px;
}
.praxis-tech-cb { margin: 0; }
.praxis-tech-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary, #5B8A72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.praxis-tech-item input:not(:checked) ~ .praxis-tech-num {
  background: var(--color-text-muted, #999);
  opacity: 0.5;
}
.praxis-section-desc {
  font-size: 13px;
  color: var(--color-text-muted, #888);
  margin: 4px 0 12px;
}
/* Drag & Drop Tech Items */
.praxis-tech-sortable {
  list-style: none;
  padding: 0;
  margin: 0;
}
.praxis-tech-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e0ddd5);
  border-radius: 12px;
  cursor: default;
  transition: box-shadow 0.2s, opacity 0.2s;
}
.praxis-tech-item.dragging {
  opacity: 0.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.praxis-tech-grip {
  cursor: grab;
  padding: 4px 8px 4px 0;
  color: var(--color-text-muted, #999);
  font-size: 18px;
  user-select: none;
}
.praxis-tech-grip:active {
  cursor: grabbing;
}
.praxis-tech-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary, #5B8A72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 12px;
}
.praxis-tech-label {
  display: flex;
  align-items: center;
  flex: 1;
  cursor: pointer;
  gap: 8px;
}
.praxis-tech-info {
  display: flex;
  flex-direction: column;
}
.praxis-tech-name {
  font-weight: 600;
  font-size: 15px;
}
.praxis-tech-desc {
  font-size: 13px;
  color: var(--color-text-muted, #888);
}
.praxis-tech-item:has(.praxis-tech-cb:not(:checked)) {
  opacity: 0.45;
  order: 999;
}
.praxis-tech-placeholder {
  height: 52px;
  margin-bottom: 8px;
  border: 1.5px solid var(--color-primary, #5B8A72);
  border-radius: 12px;
  background: transparent;
}
/* Meine Empfehlungen */
.recommendations-card {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e0ddd5);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.recommendations-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--color-primary, #5B8A72);
}
.recommendations-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recommendation-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--color-primary, #5B8A72);
  background: rgba(91, 138, 114, 0.08);
  color: var(--color-text, #2c2c2c);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.recommendation-chip:hover,
.recommendation-chip.selected {
  background: var(--color-primary, #5B8A72);
  color: #fff;
}
.recommendation-chip .technique-icon {
  width: 20px;
  height: 20px;
}
.recommendation-chip.not-recommended {
  opacity: 0.4;
  border-color: var(--color-border, #ccc);
  background: transparent;
}
.recommendation-chip.not-recommended:hover {
  opacity: 0.7;
}
.recommendations-notrec-label {
  font-size: 12px;
  color: var(--color-text-muted, #999);
  margin: 12px 0 6px 0;
}
.breath-overview-card--recs {
  background: linear-gradient(135deg, rgba(91, 138, 114, 0.08), rgba(91, 138, 114, 0.02));
  border: 1.5px solid var(--color-primary, #5B8A72);
}
.breath-overview-card--recs .breath-overview-card-icon svg {
  color: var(--color-primary, #5B8A72);
}
.breath-cat-tech-card.not-recommended {
  opacity: 0.4;
}
.breath-cat-tech-card.not-recommended:hover,
.breath-cat-tech-card.not-recommended:active {
  opacity: 0.7;
}
body.kurs-session-active .kurs-day-content,
body.kurs-session-active .kurs-warmup-overview {
  display: none !important;
}
body.kurs-session-active #apnoeContainer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background: var(--color-bg, #F7F5F0) !important;
  overflow-y: auto !important;
}/* Trial Banner */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(91, 138, 114, 0.15);
  border-bottom: 1px solid rgba(91, 138, 114, 0.2);
  font-size: var(--text-xs);
  color: var(--color-text);
}
.trial-banner-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Trial-Ende Overlay (einmalig nach Trial-Ablauf, nur Web) */
.trial-end-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(12, 18, 32, 0.72);
}
.trial-end-card {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: var(--color-text);
}
.trial-end-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
}
.trial-end-plan {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.trial-end-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.trial-end-head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.trial-end-list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.trial-end-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .trial-end-cols {
    grid-template-columns: 1fr;
  }
}

/* Abo Nudge on completion screen */
.abo-nudge {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: rgba(91, 138, 114, 0.12);
  border: 1px solid rgba(91, 138, 114, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}
.abo-nudge-text {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.abo-nudge-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.abo-nudge-btn {
  font-size: var(--text-sm);
}

/* ====================================================================
   FIRST BREATH — 60s Mini-Session after Onboarding
   ==================================================================== */

.first-breath-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #FAF8F4);
  opacity: 0;
  transition: opacity 0.6s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.first-breath-overlay.visible {
  opacity: 1;
}

.first-breath-content {
  width: 100%;
  max-width: 420px;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

/* --- Intro Screen --- */
.first-breath-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  animation: fbFadeIn 0.6s ease;
}
.first-breath-intro.hidden { display: none; }

.first-breath-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0;
}
.first-breath-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 320px;
  margin: 0;
}
.first-breath-start {
  margin-top: var(--space-4);
  min-width: 160px;
}

/* --- Session Screen --- */
.first-breath-session {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  animation: fbFadeIn 0.5s ease;
}
.first-breath-session.hidden { display: none; }

/* Circle system — three concentric layers (gold-tinted for Universum) */
.first-breath-circle-wrap {
  position: relative;
  width: clamp(200px, 52vw, 280px);
  height: clamp(200px, 52vw, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-breath-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.first-breath-inner {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(212,160,60,0.4) 0%,
    rgba(212,160,60,0.2) 50%,
    rgba(212,160,60,0.08) 100%
  );
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}
.first-breath-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212,160,60,0.2);
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}
.first-breath-ring {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(212,160,60,0.08);
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}

/* Breath cue text */
.first-breath-text {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0.06em;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Countdown timer */
.first-breath-timer {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* Animation */
@keyframes fbFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================================================
   STREAK COUNTER + WEEK OVERVIEW
   ==================================================================== */

.streak-section {
  padding: var(--space-5) var(--space-4);
}
.streak-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.streak-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.streak-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
}
.streak-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.streak-week {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md, 12px);
}
.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.streak-day-name {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.streak-day-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.3s ease, transform 0.3s ease;
}
.streak-day.practiced .streak-day-dot {
  background: var(--color-primary);
  transform: scale(1.2);
}
.streak-day.today .streak-day-name {
  color: var(--color-text);
  font-weight: 600;
}
.streak-day.today .streak-day-dot {
  box-shadow: 0 0 0 3px rgba(212,160,60,0.2);
}

/* ====================================================================
   BREATHHOLD TIMER — fullscreen stopwatch
   ==================================================================== */

.breathhold-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.4s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.breathhold-overlay.visible {
  opacity: 1;
}
.bh-content {
  width: 100%;
  max-width: 420px;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bh-close {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 20px);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: 50%;
  transition: color 0.2s;
  z-index: 2;
}
.bh-close:hover { color: var(--color-text); }

.bh-screen { width: 100%; }
.bh-screen.hidden { display: none; }

/* Ready */
.bh-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.bh-pb {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.bh-pb strong {
  font-size: var(--text-lg);
}
.bh-hint {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.bh-recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md, 12px);
}
.bh-recent-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}
.bh-recent-entry {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.bh-start-btn {
  min-width: 180px;
}

/* Running */
.bh-running {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bh-running:not(.hidden) {
  display: flex;
}
.bh-timer-display {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bh-timer-ms {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.bh-running-hint {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-top: var(--space-6);
}
.bh-stop-area {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

/* Result */
.bh-result {
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  animation: fbFadeIn 0.5s ease;
}
.bh-result:not(.hidden) {
  display: flex;
}
.bh-result-time {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 300;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.bh-result-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.bh-result-label.bh-pb-new {
  color: var(--color-primary);
  font-weight: 600;
}
.bh-result-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Prep options (duration chooser) */
.bh-prep-options {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-4);
}
.bh-prep-btn {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.bh-prep-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Preparation & Recovery screens */
.bh-prep, .bh-recovery {
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.bh-prep:not(.hidden), .bh-recovery:not(.hidden) {
  display: flex;
}
.bh-prep-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bh-breath-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0.04em;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-prep-countdown {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* BH Circle (gold-tinted for Universum) */
.bh-circle-wrap {
  position: relative;
  width: clamp(180px, 48vw, 260px);
  height: clamp(180px, 48vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.bh-circle-inner {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(212,160,60,0.4) 0%,
    rgba(212,160,60,0.2) 50%,
    rgba(212,160,60,0.08) 100%
  );
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}
.bh-circle-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212,160,60,0.2);
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}
.bh-circle-ring {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(212,160,60,0.08);
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}

/* Hold label */
.bh-hold-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

/* Recovery */
.bh-recovery-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.bh-recovery-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-text);
}
.bh-recovery-countdown {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
   REISE DONE BANNER (journey completed)
   ==================================================================== */

.kurs-done-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 0.5px solid var(--u-accent, #E0B860);
  border-radius: 16px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.kurs-done-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.kurs-done-info {
  flex: 1;
  text-align: left;
}
.kurs-done-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.kurs-done-meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-top: var(--space-1);
}
.kurs-new-journey-btn {
  margin-bottom: var(--space-2);
}
.kurs-done-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  width: 100%;
}
.kurs-dp-level {
  font-size: 0.7em;
  color: var(--color-primary);
  font-weight: 400;
  display: block;
  margin-top: var(--space-1);
}

/* ==========================================================================
   Coming Soon View (Universum)
   ========================================================================== */
/* Intro Video Screen */
.cs-intro-view {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.cs-intro-view.active {
  display: flex;
}
.cs-intro-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  z-index: 0;
}
.cs-intro-skip {
  position: absolute;
  bottom: max(2rem, env(safe-area-inset-bottom, 2rem));
  right: 1.5rem;
  z-index: 2;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
.cs-intro-skip.visible {
  opacity: 1;
  pointer-events: auto;
}
.cs-intro-skip:hover {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}

/* Coming Soon Waitlist Screen */
.coming-soon-view {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  background: #050510;
}
.coming-soon-view.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #e8ddd0;
  margin-bottom: var(--space-2);
}
.cs-logo .logo-dot {
  color: var(--color-primary);
}
.cs-tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  color: rgba(232,221,208,0.5);
  margin-bottom: var(--space-8);
}
.cs-waitlist {
  width: 100%;
  margin-bottom: var(--space-6);
}
.cs-desc {
  font-size: var(--text-sm);
  color: rgba(232,221,208,0.55);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.cs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.cs-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  background: rgba(255,255,255,0.06);
  color: #e8ddd0;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.cs-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(212,160,60,0.15);
}
.cs-input::placeholder {
  color: rgba(232,221,208,0.35);
}
.cs-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #1a1000;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.cs-btn:hover {
  background: #e0b040;
}
.cs-btn:active {
  transform: scale(0.98);
}
.cs-message {
  font-size: var(--text-sm);
  min-height: 1.4em;
  margin-top: var(--space-2);
}
.cs-message.success {
  color: var(--color-primary);
}
.cs-message.error {
  color: #e74c3c;
}
.cs-divider {
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: var(--space-2) 0 var(--space-6);
}
.cs-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.cs-login-text {
  font-size: var(--text-sm);
  color: rgba(232,221,208,0.45);
}
.cs-login-btn {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  color: #e8ddd0;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
}
.cs-login-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
}

/* Hide chrome on coming-soon view */
body.cs-active .site-header,
body.cs-active .mobile-nav,
body.cs-active footer {
  display: none !important;
}

/* Coming Soon: Social links */
.cs-social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.cs-social-link {
  color: rgba(232,221,208,0.4);
  transition: opacity 0.2s, color 0.2s;
}
.cs-social-link:hover {
  color: #FF0000;
}

/* Volume slider hidden — users control via hardware buttons */
.audio-volume-slider {
  display: none !important;
}

/* Push session top-bar below notch/status bar */
body.breath-session-active.native-app .session-top-bar {
  padding-top: env(safe-area-inset-top, 20px);
}

/* Language toggle button — Universum theme needs good contrast on both light and dark headers */
.lang-toggle {
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.lang-toggle:hover {
  color: var(--color-text);
}
/* On dark hero */
.site-header--on-dark .lang-toggle {
  color: rgba(250,245,234,0.7) !important;
  border-color: transparent !important;
  background: none !important;
}
.site-header--on-dark .lang-toggle:hover {
  color: #FAF5EA !important;
  background: none !important;
}
.site-header--transparent .lang-toggle {
  color: rgba(250,245,234,0.7) !important;
  border-color: transparent !important;
  background: none !important;
}
.site-header--transparent .lang-toggle:hover {
  color: #FAF5EA !important;
  background: none !important;
}

/* ──────────────────────────────────────────
   Loslassen Disclaimer (Sucht-Modul)
   ────────────────────────────────────────── */
.kurs-disclaimer {
  padding: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.kurs-disclaimer-icon {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.kurs-disclaimer-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.kurs-disclaimer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.kurs-disclaimer-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-bottom: 1px solid rgba(128,128,128,0.15);
}
.kurs-disclaimer-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ec4899;
  font-weight: bold;
}
.kurs-disclaimer-list li.kurs-disclaimer-emergency {
  font-weight: 600;
  color: #ef4444;
  border-bottom: none;
  padding-top: 1rem;
}
.kurs-disclaimer-list li.kurs-disclaimer-emergency::before {
  content: "⚠";
  color: #ef4444;
}
.kurs-disclaimer-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.2rem 0;
  padding: 0.8rem;
  background: rgba(128,128,128,0.08);
  border-radius: 0.5rem;
  cursor: pointer;
}
.kurs-disclaimer-check input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #ec4899;
  flex-shrink: 0;
}
.kurs-disclaimer-check label {
  font-size: 0.9rem;
  cursor: pointer;
}
.kurs-disclaimer-btn {
  display: block;
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  background: #ec4899;
  color: #fff;
  cursor: pointer;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s;
}
.kurs-disclaimer-btn.active {
  opacity: 1;
  pointer-events: auto;
}
.kurs-disclaimer-back {
  margin-bottom: 1rem;
}

/* Craving Reflection Card */
.craving-reflection {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(236,72,153,0.08);
  border: 1px solid rgba(236,72,153,0.2);
  border-radius: var(--radius-lg, 0.75rem);
  text-align: left;
}
.craving-reflection-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.craving-reflection-icon {
  font-size: 1.3rem;
}
.craving-reflection-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #e8ddd0;
}
.craving-reflection-question {
  font-size: 0.95rem;
  font-weight: 500;
  color: #e8ddd0;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.craving-reflection-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md, 0.5rem);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: rgba(255,255,255,0.06);
  color: #e8ddd0;
  resize: vertical;
  box-sizing: border-box;
  min-height: 80px;
}
.craving-reflection-input:focus {
  outline: none;
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.15);
}
.craving-reflection-input::placeholder {
  color: rgba(232,221,208,0.4);
}
.craving-reflection-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.craving-prompt-chip {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border: 1px solid rgba(236,72,153,0.3);
  border-radius: 999px;
  background: rgba(236,72,153,0.1);
  color: #f9a8d4;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.craving-prompt-chip:hover {
  background: rgba(236,72,153,0.2);
  border-color: #ec4899;
}
.craving-reflection-cta {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(236,72,153,0.15);
}
.craving-kurs-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f472b6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.craving-kurs-link:hover {
  text-decoration: underline;
}

/* =============================================
   WELCOME / LANDING PAGE (always Universum dark)
   ============================================= */
#view-welcome {
  padding: 0;
  background: #0D0F14;
  color: #D4D0C8;
}
.welcome-page {
  --w-bg: #0D0F14;
  --w-bg-section: #12141A;
  --w-text: #D4D0C8;
  --w-text-muted: #8A8680;
  --w-text-faint: #5A5650;
  --w-accent: #D4A03C;
  --w-accent-hover: #E0B455;
  --w-accent-glow: rgba(212, 160, 60, 0.15);
  --w-card-bg: rgba(255, 255, 255, 0.04);
  --w-card-border: rgba(212, 160, 60, 0.12);
  --w-breath: rgba(212, 160, 60, 0.06);
  --w-divider: rgba(212, 160, 60, 0.08);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
}
.welcome-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  position: relative;
}
.welcome-hero { text-align: center; }
.welcome-breath-circle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--w-breath);
  animation: welcomeBreath 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes welcomeBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.4; }
  40% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}
.welcome-logo {
  font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300; letter-spacing: 0.15em;
  color: var(--w-accent); margin-bottom: 60px;
  position: relative; z-index: 1;
}
.welcome-hero-text { position: relative; z-index: 1; max-width: 640px; }
.welcome-hero-text p {
  font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 400; line-height: 1.5; color: var(--w-text);
  margin-bottom: 24px; opacity: 0; transform: translateY(20px);
}
.welcome-fade { animation: welcomeFadeUp 1s ease forwards; }
@keyframes welcomeFadeUp { to { opacity: 1; transform: translateY(0); } }
.welcome-hero-text p em { font-style: italic; color: var(--w-text-muted); }
.welcome-scroll-hint {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%); opacity: 0.4;
  animation: welcomeScrollBounce 2s ease-in-out infinite; color: var(--w-text-muted);
}
@keyframes welcomeScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.welcome-esatmet { padding: 120px 24px; }
.welcome-esatmet-list { max-width: 580px; display: flex; flex-direction: column; gap: 32px; }
.welcome-reveal {
  font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 400; line-height: 1.5; color: var(--w-text);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.welcome-reveal.visible { opacity: 1; transform: translateY(0); }
.welcome-accent { font-style: italic; color: var(--w-accent); display: block; margin-top: 4px; }
.welcome-einladung { text-align: center; }
.welcome-einladung-text { max-width: 600px; }
.welcome-einladung-text p {
  font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 400; line-height: 1.6; color: var(--w-text); margin-bottom: 20px;
}
.welcome-atme {
  font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 600; color: var(--w-accent); display: block;
  margin: 40px 0; letter-spacing: 0.04em;
}
.welcome-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 48px; padding: 18px 48px;
  background: var(--w-accent); color: #fff;
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 600;
  border: none; border-radius: 99px; cursor: pointer;
  text-decoration: none; transition: all 0.3s ease;
  box-shadow: 0 4px 24px var(--w-accent-glow);
}
.welcome-cta:hover { background: var(--w-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 32px var(--w-accent-glow); }
.welcome-cta svg { transition: transform 0.3s ease; }
.welcome-cta:hover svg { transform: translateX(4px); }
.welcome-warum { min-height: auto; padding: 100px 24px; background: var(--w-bg-section); }
.welcome-warum-grid { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .welcome-warum-grid { grid-template-columns: 1fr; } }
.welcome-card {
  background: var(--w-card-bg); border: 1px solid var(--w-card-border);
  border-radius: 14px; padding: 32px; backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.welcome-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px var(--w-accent-glow); }
.welcome-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 10px; color: var(--w-accent); }
.welcome-card p { font-size: 0.95rem; line-height: 1.6; color: var(--w-text-muted); }
.welcome-trial { text-align: center; margin-top: 48px; font-size: 1rem; color: var(--w-text-muted); }
.welcome-trial strong { color: var(--w-text); }
.welcome-footer { padding: 48px 24px; text-align: center; border-top: 1px solid var(--w-divider); }
.welcome-footer p { font-family: var(--font-display); font-size: 1rem; color: var(--w-text-faint); letter-spacing: 0.04em; }
body.welcome-active .site-header,
body.welcome-active .bottom-tab-bar,
body.welcome-active #mainNav { display: none !important; }

/* Protocol Intro Overlay */
.protocol-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.protocol-intro-overlay.visible { opacity: 1; }
.protocol-intro {
  max-width: 360px;
  padding: 40px 32px;
  text-align: center;
  color: #D4D0C8;
}
.protocol-intro-icon { width: 64px; height: 64px; margin: 0 auto 20px; color: #D4A03C; }
.protocol-intro-icon svg { width: 64px; height: 64px; }
.protocol-intro-title {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 500;
  margin-bottom: 8px; color: #D4A03C;
}
.protocol-intro-desc { font-size: 1rem; color: rgba(212,208,200,0.6); margin-bottom: 32px; }
.protocol-intro-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.protocol-step-item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 12px 16px; background: rgba(255,255,255,0.04);
  border-radius: 12px; border: 1px solid rgba(212,160,60,0.12);
}
.protocol-step-num {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #D4A03C; color: #0D0F14;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.protocol-step-name { flex: 1; font-weight: 500; font-size: 0.95rem; }
.protocol-step-dur { font-size: 0.85rem; color: rgba(212,208,200,0.4); }
.protocol-intro-actions {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.protocol-intro-btn {
  display: inline-block; padding: 16px 48px; background: #D4A03C; color: #0D0F14;
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 600;
  border: none; border-radius: 99px; cursor: pointer; transition: all 0.3s ease;
}
.protocol-intro-btn:hover { background: #E0B455; transform: translateY(-2px); }
.protocol-intro-cancel {
  display: inline-block; padding: 10px 28px; background: transparent;
  color: rgba(212,208,200,0.55); font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 500; border: none; border-radius: 99px;
  cursor: pointer; transition: color 0.2s ease;
}
.protocol-intro-cancel:hover { color: rgba(212,208,200,0.85); }

/* =============================================
   BIOFEEDBACK VIEW (copied from style.css)
   ============================================= */
#view-biofeedback {
  --inhale: #C4784A;
  --hold:   #5278A8;
  --exhale: #5B8A72;
  --pause:  #A89078;
  --active: #C4784A;
  --silent: #5278A8;
  /* Card surface — uses Klassisch palette */
  --bf-card: var(--color-card, #FFFFFF);
  --bf-card-border: var(--color-border, #E0D5C7);
  --bf-bg: var(--color-bg, #FAF5EA);
  --bf-text: var(--color-text, #3D3229);
  --bf-text-dim: var(--color-text-muted, #7a6e60);
  --bf-text-muted: var(--color-text-faint, #a89a88);
  --bf-accent: var(--color-primary, #5B8A72);
  /* Ensure the view has height for absolute-positioned screens */
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* Container — mirrors the original .app layout */
.bf-app {
  width: 100%;
  max-width: 500px;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
}

/* Screens — internal navigation within the biofeedback view */
.bf-screen {
  display: none;
  flex-direction: column;
  padding: 24px 20px;
}
.bf-screen.active {
  display: flex;
}
/* Fullscreen BF screens (session, guided, resonance-live) need absolute positioning */
.bf-screen-fullscreen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Header-Höhe ~72-84px inkl. Logo, EN-Switch, Avatar, Burger.
     Vorher 24px — Mood-Check/Kalibrierung-Title rutschte hinter Header (Bug 06.05.2026). */
  padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  background: var(--color-bg);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
  z-index: 1;
}
/* 06.05.2026: Wenn Biofeedback-Session aktiv ist, Inhalt zentriert verteilen. */
body.breath-session-active.bf-session .bf-screen-fullscreen {
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  justify-content: center;
}
body.breath-session-active.bf-session,
body.breath-session-active.bf-session #main-content,
body.breath-session-active.bf-session #view-biofeedback,
body.breath-session-active.bf-session #view-biofeedback.view.active,
body.breath-session-active.bf-session .view.active,
body.breath-session-active.bf-session .breathwork-container {
  background: var(--color-bg) !important;
}
/* KEIN ::after-Schild mehr 07.05.2026:
   Pseudo-Element-Schild rendert auf iOS WKWebView immer bronze
   (egal welcher z-index, egal welche Hoehe). Quelle des Streifens
   muss in echtem DOM gefunden werden. */
body.breath-session-active.bf-session #bf-screen-session > div:has(> .bf-btn.bf-btn-secondary) {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  margin: 0;
  z-index: 10;
}
.bf-screen::-webkit-scrollbar { width: 4px; }
.bf-screen::-webkit-scrollbar-track { background: transparent; }
.bf-screen::-webkit-scrollbar-thumb { background: var(--bf-card-border); border-radius: 2px; }

/* Typography */
.bf-screen-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  color: var(--bf-text);
}
.bf-screen-subtitle {
  font-size: 14px;
  color: var(--bf-text-dim);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Buttons */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  width: 100%;
}
.bf-btn:active { transform: scale(0.97); }
.bf-btn:disabled { opacity: 0.4; pointer-events: none; }
.bf-btn-secondary {
  background: var(--bf-card);
  color: var(--bf-text);
  border: 1px solid var(--bf-card-border);
}
/* base.css setzt `color: inherit` auf Formularelemente, laesst aber den hellen
   UA-Hintergrund stehen. Beide Themes sind dunkel, also stand helle Schrift auf
   weissem Grund. Die Flaeche muss deshalb explizit gesetzt werden — option
   mitgestylt, damit auch das native Aufklappmenue lesbar bleibt. */
.bf-select {
  background: var(--bf-bg, #fff);
  color: var(--bf-text, #3D3229);
  border: 1px solid var(--bf-card-border, #E0D5C7);
  border-radius: 8px;
  padding: 6px;
}
.bf-select option {
  background: var(--bf-bg, #fff);
  color: var(--bf-text, #3D3229);
}
.bf-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* Runden-Selektor für geführte Session — 14.05.2026 */
.bf-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bf-card-border, #2a2f3a);
  background: var(--bf-card, rgba(255,255,255,0.04));
  color: var(--bf-text, #e9e6df);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-width: 52px;
}
.bf-chip:active { transform: scale(0.97); }
.bf-chip[aria-checked="true"] {
  background: var(--color-primary, #C49A6B);
  border-color: var(--color-primary, #C49A6B);
  color: var(--color-primary-text, #1a1410);
}

/* HR panels (BLE / Watch) */
.bf-hr-panel {
  background: var(--bf-card);
  border: 1.5px solid var(--bf-card-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Technique cards */
.bf-techniques-grid { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bf-tech-card {
  background: var(--bf-card);
  border: 1.5px solid var(--bf-card-border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bf-tech-card:active { transform: scale(0.98); }
.bf-tech-card:hover { border-color: var(--inhale); }
.bf-tech-card-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--bf-text); }
.bf-tech-card-desc { font-size: 13px; color: var(--bf-text-dim); margin-bottom: 10px; }
.bf-tech-card-ratio { display: flex; gap: 6px; flex-wrap: wrap; }

/* Ratio chips */
.bf-ratio-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 500;
}
.bf-ratio-chip.ein   { background: rgba(196,120,74,0.2);  color: var(--inhale); }
.bf-ratio-chip.halten{ background: rgba(82,120,168,0.2);  color: var(--hold); }
.bf-ratio-chip.aus   { background: rgba(91,138,114,0.2);  color: var(--exhale); }
.bf-ratio-chip.pause { background: rgba(168,144,120,0.2); color: var(--pause); }
.bf-ratio-chip.einplus { background: rgba(196,120,74,0.15); color: var(--inhale); }

/* Mood check card */
.bf-mood-check-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.bf-mood-check-card:active { transform: scale(0.98); background: var(--color-surface-active); }
.bf-mood-check-card h3 { font-size: 17px; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.bf-mood-check-card p  { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.bf-mc-icon { font-size: 22px; }

/* HK badge (top right HR display) */
.bf-hk-badge {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--bf-text-dim);
  background: var(--bf-card);
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid var(--bf-card-border);
  z-index: 10;
}

/* Calibration */
.bf-cal-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.bf-cal-circle {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid var(--inhale);
  transition: transform 1.2s ease, border-color 0.3s;
}
.bf-cal-circle.pulse { animation: bfCalPulse 2s ease-in-out infinite; }
@keyframes bfCalPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50%       { transform: scale(1.1); opacity: 1; }
}
.bf-cal-status { font-size: 18px; font-weight: 500; color: var(--bf-text); }
.bf-cal-sub    { font-size: 14px; color: var(--bf-text-dim); }
.bf-cal-warning {
  font-size: 13px;
  color: var(--inhale);
  background: rgba(196,120,74,0.1);
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 300px;
  line-height: 1.5;
}

/* Signal meter */
.bf-signal-meter {
  width: 100%; max-width: 280px; height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px; overflow: hidden; margin: 8px 0;
}
.bf-signal-meter-fill {
  height: 100%; border-radius: 4px;
  background: var(--exhale); transition: width 80ms linear; width: 0;
}
.bf-signal-meter-fill.low  { background: var(--inhale); }
.bf-signal-meter-fill.mid  { background: #c4a84a; }
.bf-signal-meter-fill.high { background: var(--exhale); }

/* Signal bar (mood check) */
.bf-signal-bar {
  width: 100%; height: 6px;
  background: var(--bf-card);
  border-radius: 3px; overflow: hidden; margin-bottom: 8px;
}
.bf-signal-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--exhale); transition: width 80ms; width: 0%;
}

/* Detection label */
.bf-detection-label { font-size: 14px; font-weight: 500; min-height: 22px; transition: color 0.2s; }
.bf-detection-label.aktiv { color: var(--active); }
.bf-detection-label.still { color: var(--silent); }

/* Sensitivity slider */
.bf-slider-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 280px; margin: 8px 0; }
.bf-slider-row label { font-size: 13px; color: var(--bf-text-dim); white-space: nowrap; }
.bf-slider-row input[type=range] { flex: 1; accent-color: var(--inhale); }
.bf-slider-row .val { font-size: 13px; font-weight: 600; min-width: 20px; text-align: center; }

/* Session */
.bf-session-header { text-align: center; margin-bottom: 8px; }
.bf-phase-glow {
  position: absolute; top: 40%; left: 50%;
  width: 200px; height: 200px; border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; filter: blur(70px);
  transition: background 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
.bf-phase-indicator {
  text-align: center; margin-top: 20px; margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}

/* Biofeedback planet wrappers */
.bf-mood-planet-wrap {
  width: 160px; height: 160px;
  position: relative;
}
.bf-session-planet-wrap {
  width: 140px; height: 140px;
  position: relative;
}
.bf-guided-planet-wrap {
  width: clamp(160px, 40vw, 220px);
  height: clamp(160px, 40vw, 220px);
  max-height: 28vh;
  max-width: 28vh;
  position: relative;
  margin: 0 auto 8px;
}
/* Warm gold overrides for mood check planet */
.bf-mood-planet {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,248,210,0.65) 0%, rgba(255,248,210,0.0) 30%),
    radial-gradient(circle at 42% 36%, rgba(220,185,120,0.35) 0%, transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(255,230,175,0.12) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(70,48,15,0.48) 75%, rgba(35,22,5,0.72) 100%),
    radial-gradient(circle at 46% 44%, #D4A868 0%, #C09050 35%, #9A7030 60%, #7A5420 85%, #5A3A10 100%) !important;
  box-shadow:
    inset 0 -10px 25px rgba(0,0,0,0.25),
    inset 0 6px 15px rgba(255,220,160,0.18),
    inset -4px 0 12px rgba(0,0,0,0.08),
    0 0 16px rgba(196,154,108,0.30),
    0 0 40px rgba(196,154,108,0.15) !important;
}
.bf-mood-tube-track { stroke: rgba(196,154,108,0.08) !important; }
.bf-mood-tube-fill { stroke: url(#tubeGradUniversum) !important; filter: url(#glowGold) !important; }
.bf-mood-orbit-moon { fill: rgba(255,225,170,0.95) !important; filter: url(#glowMoonGold) !important; }

/* Phase label */
.bf-phase-text { font-size: 20px; font-weight: 600; transition: color 0.3s; letter-spacing: -0.01em; }

/* Cycle indicator dots */
.bf-cycle-dots { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.bf-cycle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,0.08);
  border: 1.5px solid rgba(0,0,0,0.12);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.bf-cycle-dot.active-dot {
  background: var(--active); border-color: var(--active);
  box-shadow: 0 0 6px rgba(196,120,74,0.5); transform: scale(1.15);
}
.bf-cycle-dot.silent-dot {
  background: var(--silent); border-color: var(--silent);
  box-shadow: 0 0 6px rgba(82,120,168,0.4); transform: scale(1.1);
}
.bf-cycle-dot.done-dot { background: rgba(0,0,0,0.2); border-color: rgba(0,0,0,0.2); }

.bf-cycle-counter {
  font-size: 13px; color: var(--bf-text-muted); text-align: center;
  font-variant-numeric: tabular-nums;
}
.bf-session-ready {
  font-size: 14px; color: var(--exhale); text-align: center;
  font-weight: 500; margin-bottom: 8px;
}

/* Waveform — fluid ribbon */
.bf-waveform-container {
  width: 100%; height: 120px; margin: 12px 0 8px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.bf-waveform-container canvas { width: 100%; height: 100%; display: block; }

/* Mini signal bar */
.bf-mini-signal {
  width: 60px; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.06); overflow: hidden; margin: 0 auto;
}
.bf-mini-signal-fill {
  height: 100%; border-radius: 2px;
  background: var(--exhale); transition: width 80ms linear; width: 0;
}

/* Mood check */
.bf-mood-timer { font-size: 32px; font-weight: 600; color: var(--bf-text-muted, #9A9184); text-align: center; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.bf-mood-timer-label { font-size: 12px; color: var(--bf-text-dim); text-align: center; margin-bottom: 12px; }
.bf-mood-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
.bf-mood-metric { background: var(--bf-card); border-radius: 12px; padding: 12px 16px; }
.bf-mood-metric-label { font-size: 11px; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bf-mood-metric-val { font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--bf-text); }

.bf-mood-phase-bar {
  width: 100%; height: 6px; border-radius: 3px;
  overflow: hidden; margin-bottom: 8px; transition: background 0.3s ease;
  background: var(--bf-card);
}
.bf-mood-phase-bar.aktiv-bar  { background: var(--active); }
.bf-mood-phase-bar.pause-bar  { background: var(--silent); }

/* Mood result */
.bf-mood-result-emoji { font-size: 56px; text-align: center; margin: 16px 0 8px; }
.bf-mood-result-state { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--bf-text); }
.bf-mood-result-desc  { font-size: 14px; color: var(--bf-text-dim); text-align: center; line-height: 1.6; margin-bottom: 20px; max-width: 340px; align-self: center; }
.bf-mood-detail-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.bf-mood-detail { background: var(--bf-card); border-radius: 12px; padding: 12px 16px; }
.bf-mood-detail-label { font-size: 11px; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bf-mood-detail-val   { font-size: 16px; font-weight: 600; margin-top: 2px; color: var(--bf-text); }

/* Vorher/Nachher (31.07.2026) — rein numerisch und typografisch. Kein Icon,
   keine Richtungsfarbe: der Pfeil zeigt die Reihenfolge, nicht ein Urteil.
   Im Universum-Theme steht das Zahlenpaar monospaced, damit vorher und
   nachher stellenweise untereinander liegen. */
.bf-mood-compare { margin-bottom: 20px; }
.bf-mood-compare-title { font-size: 11px; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.bf-mood-compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bf-card-border); }
.bf-mood-compare-row:last-of-type { border-bottom: none; }
.bf-mood-compare-label { font-size: 13px; color: var(--bf-text-dim); }
.bf-mood-compare-pair { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--bf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-mood-compare-from { color: var(--bf-text-dim); font-weight: 400; }
.bf-mood-compare-arrow { margin: 0 6px; color: var(--bf-text-muted); font-weight: 400; }
.bf-mood-compare-to { color: var(--bf-text); }
.bf-mood-compare-note { font-size: 12px; color: var(--bf-text-muted); line-height: 1.5; margin: 10px 0 0; }

/* Angebot zur freiwilligen Nachmessung auf den Abschluss-Screens. */
.bf-mood-after { margin-top: 14px; }
.bf-mood-after-title { font-size: 14px; font-weight: 600; color: var(--bf-text); letter-spacing: 0.02em; margin-bottom: 6px; }
.bf-mood-after-desc { font-size: 13px; color: var(--bf-text-dim); line-height: 1.6; margin: 0 0 10px; }
.bf-mood-after-btn { font-size: 13px; }

.bf-mood-rec-card {
  background: var(--bf-card); border: 1.5px solid var(--exhale); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 16px; cursor: pointer; transition: transform 0.15s;
}
.bf-mood-rec-card:active { transform: scale(0.98); }
.bf-mood-rec-card h3 { font-size: 16px; font-weight: 600; color: var(--exhale); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.bf-mood-rec-card p  { font-size: 13px; color: var(--bf-text-dim); line-height: 1.5; }
.bf-mood-or { text-align: center; font-size: 13px; color: var(--bf-text-muted); margin-bottom: 16px; }

/* Analysis */
.bf-analysis-section { margin-bottom: 20px; }
.bf-analysis-section h3 { font-size: 14px; font-weight: 500; color: var(--bf-text-dim); margin-bottom: 10px; }
.bf-ratio-bar-group { display: flex; flex-direction: column; gap: 10px; }
.bf-ratio-bar-row { display: flex; flex-direction: column; gap: 4px; }
.bf-ratio-bar-label { font-size: 12px; color: var(--bf-text-dim); font-weight: 500; }
.bf-ratio-bar { display: flex; height: 32px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.04); }
.bf-ratio-bar .seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  transition: width 0.5s ease; min-width: 0;
  overflow: hidden; white-space: nowrap;
}
.bf-ratio-bar .seg.ein   { background: var(--inhale); }
.bf-ratio-bar .seg.halten{ background: var(--hold); }
.bf-ratio-bar .seg.aus   { background: var(--exhale); }
.bf-ratio-bar .seg.pause { background: var(--pause); }
.bf-ratio-bar .seg.einplus { background: rgba(196,120,74,0.7); }

/* Table */
.bf-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bf-data-table th {
  text-align: left; color: var(--bf-text-dim); font-weight: 500;
  padding: 8px 6px; border-bottom: 1px solid var(--bf-card-border); font-size: 12px;
}
.bf-data-table td { padding: 8px 6px; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--bf-text); }
.bf-phase-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bf-analysis-note { font-size: 12px; color: var(--bf-text-muted); font-style: italic; margin-top: 8px; line-height: 1.5; }

/* Feedback box */
.bf-feedback-box {
  background: var(--bf-card); border: 1px solid var(--bf-card-border);
  border-radius: 12px; padding: 16px;
  font-size: 14px; line-height: 1.6; margin-bottom: 16px;
  color: var(--bf-text);
}
.bf-feedback-box strong { color: var(--inhale); }

/* HRV metric cells */
.bf-hrv-cell { text-align: center; padding: 8px; background: var(--bf-bg); border-radius: 8px; }
.bf-hrv-val  { font-size: 20px; font-weight: 700; color: var(--bf-text); }
.bf-hrv-label{ font-size: 11px; color: var(--bf-text-dim); }

/* Guided Session */
.bf-guided-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.bf-breath-circle-wrap { position: relative; width: 200px; height: 200px; }
.bf-breath-circle {
  width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid var(--inhale);
  transition: transform 0.15s linear, border-color 0.3s, box-shadow 0.3s;
  transform: scale(0.5);
  display: flex; align-items: center; justify-content: center;
}
.bf-countdown { font-size: 28px; font-weight: 300; letter-spacing: -0.02em; color: var(--bf-text); }
.bf-guided-phase { font-size: 18px; font-weight: 600; transition: color 0.3s; }
.bf-guided-info { display: flex; gap: 20px; font-size: 13px; color: var(--bf-text-dim); }
.bf-guided-total { font-size: 13px; color: var(--bf-text-dim); margin-top: 4px; }

/* Umgebungszustand (30.07.2026) — eine Zeile im bestehenden Statusbereich.
   Leer heisst leer: kein Platzhalter, kein Rahmen, keine Auszeichnung. Der
   Uebergang ist weich, damit die Zeile nicht ins Blickfeld springt.
   Farbe und Schriftgroesse kommen aus den --bf-*-Tokens des Universum-Themes,
   damit die Zeile sich neben .bf-guided-total einordnet statt aufzufallen. */
.bf-env-line {
  font-size: 12px; line-height: 1.5; margin-top: 6px; min-height: 0;
  color: var(--bf-text-dim, #7a6e60); opacity: 0; transition: opacity 0.4s ease;
}
.bf-env-line:not(:empty) { opacity: 1; }

/* Resonanz-Finder — technische Details (31.07.2026).
   Fachsprache ist hier erlaubt, Schmuck nicht: monochrom, monospaced, keine
   Ampelfarben. Die Zahlen sollen vergleichbar sein, nicht bewertet aussehen. */
.bf-rf-tech {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: var(--bf-text, #3D3229);
}
.bf-rf-tech-table { width: 100%; border-collapse: collapse; }
.bf-rf-tech-table th,
.bf-rf-tech-table td {
  padding: 5px 4px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--bf-card-border, #E0D5C7);
}
.bf-rf-tech-table th { font-weight: 400; color: var(--bf-text-dim, #7a6e60); }
.bf-rf-tech-table th:first-child,
.bf-rf-tech-table td:first-child { text-align: left; }
.bf-rf-tech-row-picked td { font-weight: 600; }
.bf-rf-tech-row-dropped td { color: var(--bf-text-dim, #7a6e60); }
.bf-rf-tech-note { margin: 10px 0 0; color: var(--bf-text-dim, #7a6e60); }
.bf-rf-tech-scroll { overflow-x: auto; }

/* Resonanz-Finder — v5 (04.08.2026, Blätter 06b-j/-k/-l).
   Einladung: Spec-Liste + Instruktion + eine Handlung. Messung: Phase-Kopf,
   Freq-Hero, HR-Panel. Ergebnis: Hero + Panel + Tech-Toggle + drei Buttons.
   Farben über CSS-Tokens; keine Ampelfarben, keine Ausrufezeichen im Schriftbild. */
.bf-rf-spec {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 22px;
}
.bf-rf-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.55;
}
.bf-rf-spec-row:last-child { border-bottom: none; }
.bf-rf-spec-l { color: var(--color-text-muted); flex-shrink: 0; }
.bf-rf-spec-v { color: var(--color-text); }
.bf-rf-spec-v.ok { color: var(--color-text); }
.bf-rf-spec-v.miss { color: var(--color-text-muted); }

.bf-rf-instruct {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-left: 2px solid var(--color-border);
}
.bf-rf-instruct-l {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.bf-rf-instruct-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}

.bf-rf-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
}
.bf-rf-phase-header .v { color: var(--color-text); margin-left: 6px; }

.bf-rf-freq-hero {
  text-align: center;
  margin: 6px 0 4px;
}
.bf-rf-freq-hero .n {
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.02em;
}
.bf-rf-freq-hero .u {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.bf-rf-pace-cue {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  color: var(--color-text);
  margin: 4px 0 6px;
  min-height: 1.5em;
}
.bf-rf-pace-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.bf-rf-progress {
  height: 2px;
  background: var(--color-border);
  border-radius: 1px;
  overflow: hidden;
  margin: 4px 0 18px;
}
.bf-rf-progress > div {
  height: 100%;
  background: var(--color-text);
  transition: width 0.4s ease;
}

.bf-rf-hr-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0 4px;
}
.bf-rf-hr-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.bf-rf-hr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
}
.bf-rf-hr-row .k { color: var(--color-text-muted); }
.bf-rf-hr-row .v {
  color: var(--color-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.bf-rf-ble-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.bf-rf-result-hero {
  text-align: center;
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
}
.bf-rf-result-hero .n {
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.bf-rf-result-hero .u {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.bf-rf-result-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 20px;
}
.bf-rf-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.55;
}
.bf-rf-result-row:last-child { border-bottom: none; }
.bf-rf-result-row .k { color: var(--color-text-muted); flex-shrink: 0; }
.bf-rf-result-row .v {
  color: var(--color-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.bf-rf-tech-toggle {
  width: 100%;
  margin-bottom: 10px;
}
.bf-rf-tech-box {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
}

.bf-rf-no-signal {
  padding: 20px 16px;
  text-align: center;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--color-surface);
}
.bf-rf-no-signal-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--color-text);
}
.bf-rf-no-signal-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Session end */
.bf-session-end { text-align: center; }
.bf-session-end h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--bf-text); }
.bf-improvement-box {
  background: var(--bf-card); border: 1px solid var(--bf-card-border);
  border-radius: 12px; padding: 16px; margin: 16px 0;
  font-size: 14px; line-height: 1.6; color: var(--bf-text);
}

/* Responsive */
@media (max-width: 380px) {
  .bf-screen { padding: 20px 16px; }
  .bf-screen-title { font-size: 20px; }
}

/* Blog / Engineering post code blocks */
.essay-body pre {
  background: rgba(61, 50, 41, 0.06);
  border: 1px solid var(--color-border, #E0D5C7);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 0.8rem;
  line-height: 1.5;
}
.essay-body code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85em;
  background: rgba(61, 50, 41, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.essay-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* --- ML Status Panel (Profile) --- */
.ml-status-panel {
  margin-top: 8px;
}
.ml-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ml-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ml-stat-label {
  font-size: 0.75em;
  opacity: 0.6;
  margin-bottom: 4px;
}
.ml-stat-value {
  font-size: 0.95em;
  font-weight: 600;
}
.ml-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ml-progress-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
}
.ml-progress-row > span:first-child {
  opacity: 0.7;
}
.ml-progress-row > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  font-size: 0.85em;
}
.ml-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.ml-bar-fill {
  height: 100%;
  background: var(--color-primary, #C4A46C);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* =========================================================
   FIRST-BREATH OVERLAY — angepasst an Sessions-Style
   ========================================================= */
.first-breath-overlay {
  background: var(--color-bg, #2E3238) !important;
}
.first-breath-overlay,
.first-breath-overlay * {
  color: var(--color-text, #F2F7F3);
}
.first-breath-title {
  color: var(--color-text, #F2F7F3) !important;
}
.first-breath-sub {
  color: var(--color-text-muted, #C8DED0) !important;
}
.first-breath-stage {
  position: relative;
  width: min(82vw, 320px);
  height: min(82vw, 320px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-breath-halo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,168,130,0.14) 0%, rgba(94,168,130,0.04) 55%, transparent 80%);
  pointer-events: none;
}
.first-breath-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fb-tube-track {
  fill: none;
  stroke: rgba(94,168,130,0.10);
  stroke-width: 3.5;
}
.fb-tube-fill {
  fill: none;
  stroke: url(#fbTubeGradInhale);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 584.336;
  stroke-dashoffset: 584.336;
  filter: url(#fbGlow);
  transition: stroke 0.4s ease;
}
.fb-orbit-moon {
  fill: rgba(220,245,230,1);
  transition: fill 0.4s ease;
  pointer-events: none;
}
.fb-orbit-glow {
  fill: rgba(200,235,215,0.35);
  pointer-events: none;
}
.first-breath-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-text, #F2F7F3);
  text-align: center;
}
.first-breath-timer {
  margin-top: var(--space-4, 20px);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  color: var(--color-text-muted, #C8DED0);
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.7;
}

/* =========================================================
   ONBOARDING OVERLAY — Dark-Theme angleichen
   ========================================================= */
.onboarding-overlay {
  background: var(--color-bg, #2E3238) !important;
}
.onboarding-title,
.onboarding-pillar-title {
  color: var(--color-text, #F2F7F3) !important;
}
.onboarding-subtitle,
.onboarding-text,
.onboarding-pillar-text {
  color: var(--color-text-muted, #C8DED0) !important;
}
.onboarding-breath-circle {
  background: radial-gradient(circle, rgba(196,154,108,0.28) 0%, rgba(196,154,108,0.08) 70%, transparent 100%) !important;
  border-color: rgba(196,154,108,0.35) !important;
}
.onboarding-pillar-num {
  color: var(--color-terracotta, #D4A574) !important;
}
   BIOFEEDBACK INTRO VIEW — #view-biofeedback-intro
   Onboarding-Seite, einmal pro Gerät. Funktioniert in beiden Themes
   über die zentralen CSS-Variablen (--color-bg, --color-card,
   --color-text, --color-primary).
   ============================================= */
#view-biofeedback-intro {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0;
}
.bf-intro {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  line-height: 1.6;
}
.bf-intro-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.bf-intro-back:hover { opacity: 1; }
.bf-intro-hero {
  text-align: center;
  padding: 16px 0 28px;
  border-bottom: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.15)));
  margin-bottom: 28px;
}
.bf-intro-icon {
  font-size: 48px;
  margin-bottom: 14px;
  line-height: 1;
}
.bf-intro-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.bf-intro-lead {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 440px;
  line-height: 1.65;
}
.bf-intro-section {
  margin-bottom: 32px;
}
.bf-intro-h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.bf-intro-section p {
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 10px;
  color: var(--color-text);
}
.bf-intro-section p.bf-intro-note {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-card);
  border-left: 2px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  line-height: 1.55;
  font-style: normal;
  opacity: 0.92;
}
.bf-intro-list,
.bf-intro-steps {
  margin: 0;
  padding-left: 20px;
}
.bf-intro-list li,
.bf-intro-steps li {
  margin-bottom: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text);
}
.bf-intro-list li strong,
.bf-intro-steps li strong {
  color: var(--color-text);
  font-weight: 600;
}
.bf-intro-steps {
  counter-reset: bf-step;
  list-style: none;
  padding-left: 0;
}
.bf-intro-steps li {
  counter-increment: bf-step;
  position: relative;
  padding: 12px 14px 12px 46px;
  margin-bottom: 10px;
  background: var(--color-card);
  border-radius: 8px;
  border: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.12)));
}
.bf-intro-steps li::before {
  content: counter(bf-step);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-text, var(--color-text-inverse, #fff));
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body, system-ui, sans-serif);
}

/* Details / ausklappbare Technik-Erläuterung */
.bf-intro-details {
  margin-top: 14px;
  background: var(--color-card);
  border-radius: 8px;
  border: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.12)));
  padding: 0;
  overflow: hidden;
}
.bf-intro-details summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.bf-intro-details summary::-webkit-details-marker { display: none; }
.bf-intro-details summary::before {
  content: '›';
  display: inline-block;
  margin-right: 4px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  font-size: 16px;
  color: var(--color-text-muted);
}
.bf-intro-details[open] summary::before {
  transform: rotate(90deg);
}
.bf-intro-summary-hint {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 12.5px;
}
.bf-intro-tech {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.12)));
}
.bf-intro-tech p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 12px 0 10px;
}
.bf-intro-dl {
  margin: 10px 0 6px;
  font-size: 13px;
  line-height: 1.55;
}
.bf-intro-dl dt {
  font-weight: 700;
  color: var(--color-text);
  margin-top: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
}
.bf-intro-dl dd {
  margin: 2px 0 0;
  padding-left: 0;
  color: var(--color-text-muted);
}

/* Empfehlungs-Block */
.bf-intro-rec {
  background: var(--color-card);
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.12)));
}
.bf-intro-rec p {
  font-size: 14px;
  margin: 0 0 10px;
}
.bf-intro-rec p:last-child { margin-bottom: 0; }

/* ML-Pipeline: nummerierte Karten */
.bf-intro-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 8px;
}
.bf-intro-pipeline-step {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-card);
  border-radius: 8px;
  border: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.12)));
  font-size: 13.5px;
  line-height: 1.55;
}
.bf-intro-pipeline-step > div {
  flex: 1;
  color: var(--color-text);
}
.bf-intro-pipeline-step > div strong {
  color: var(--color-text);
  font-weight: 600;
}
.bf-intro-pipeline-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text, var(--color-text-inverse, #fff));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body, system-ui, sans-serif);
}

/* CTA am Ende */
.bf-intro-cta {
  margin-top: 36px;
  text-align: center;
  padding: 24px 16px 0;
  border-top: 1px solid var(--color-border, var(--color-divider, rgba(128,128,128,0.1)));
}
.bf-intro-cta .btn {
  min-width: 260px;
}
.bf-intro-skip {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.bf-intro-skip a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.bf-intro-skip a:hover { opacity: 0.8; }

/* =============================================
   Theme-Universum: feine Anpassungen
   Universum hat dunklen Hintergrund + goldenen Primary.
   Card-Hintergründe dürfen nicht heller wirken als im Klassisch.
   ============================================= */
.theme-universum #view-biofeedback-intro .bf-intro-steps li,
.theme-universum #view-biofeedback-intro .bf-intro-details,
.theme-universum #view-biofeedback-intro .bf-intro-rec,
.theme-universum #view-biofeedback-intro .bf-intro-pipeline-step {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
.theme-universum #view-biofeedback-intro .bf-intro-section p.bf-intro-note {
  background: rgba(255,255,255,0.03);
}
.theme-universum #view-biofeedback-intro .bf-intro-pipeline-num,
.theme-universum #view-biofeedback-intro .bf-intro-steps li::before {
  color: var(--color-bg);
}

/* =====================================================================
   Nativer Reader-App-Modus (Universum-Theme) — iOS + Android.
   28.05.2026 Build 138 wurde auf iPad abgelehnt (Apple 2.2) weil diese
   Hide-Liste 7 Selektoren weniger hatte als style.css. Der Universum-
   Theme ist Guest-Default, der Reviewer sah daher Newsletter-View mit
   "Beta-Phase" und "TestFlight"-Strings, Coming-Soon-View und Blog-
   Insight-Karten. Liste MUSS jetzt 1:1 mit style.css gespiegelt werden.
   31.05.2026: Selektoren auf html.is-native-app umgestellt (galt vorher
   nur fuer is-ios-app), damit auch der Android-Play-Build keine Abo-/
   Upgrade-/Preis-CTAs zeigt. ===================================================================== */
html.is-native-app .nav-gift-link,
html.is-native-app .about-gift-link,
html.is-native-app .pillar-card-gift,
html.is-native-app .pillar-card-newsletter,
html.is-native-app #view-gift,
html.is-native-app #view-newsletter,
html.is-native-app #view-blog-biofeedback,
html.is-native-app #view-blog-ml-biofeedback,
html.is-native-app #view-coming-soon,
html.is-native-app #view-cs-intro,
html.is-native-app .abo-nudge,
html.is-native-app .abo-nudge-btn,
html.is-native-app .abo-success-banner,
html.is-native-app .abo-faq,
html.is-native-app #aboPlans,
html.is-native-app .abo-upgrade-btn,
html.is-native-app .abo-trial-banner .trial-banner-link,
html.is-native-app .featured-badge,
html.is-native-app .biofeedback-badge,
html.is-native-app .badge-tier,
html.is-native-app .faq-tier-badge,
html.is-native-app .breath-add-pro,
html.is-native-app .native-hide,
html.is-native-app #view-download {
  display: none !important;
}

/* =====================================================================
   Download / Store-Badges + QR (nur Web/Browser)
   1:1-Spiegel der Layout-Regeln aus style.css, damit der Universum-Theme
   die Store-Badges/QR identisch sauber rendert (Theme nutzt eigene Tokens).
   ===================================================================== */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.store-badges--large {
  gap: 0.7rem;
  justify-content: center;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.store-badge:hover { transform: translateY(-1px); opacity: 0.92; }
.store-badge svg { display: block; width: auto; height: 40px; max-width: 100%; }
.store-badges--large .store-badge svg { height: 46px; }
.store-badge--soon {
  cursor: default;
}
.store-badge--soon:hover { transform: none; }
.store-badge--soon svg { pointer-events: none; filter: grayscale(0.9); opacity: 0.55; }
@media (max-width: 768px) {
  .store-badges { justify-content: center; }
}
.download-view { padding: clamp(2rem, 6vw, 5rem) 1rem; }
.download-page {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.download-tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0 0 0.4rem;
}
.download-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin: 0 0 0.6rem;
}
.download-subline {
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0 auto 1.6rem;
  max-width: 42ch;
}
.download-primary-hint {
  font-size: 0.95rem;
  margin: 0 0 0.9rem;
  opacity: 0.9;
}
.download-primary-hint--soon {
  background: var(--color-surface, #151D2E);
  border: 1px solid var(--color-border, #2E3A55);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.download-stores { margin-bottom: 2rem; }
/* Solider, dunkler QR-Block mit hohem Kontrast: weisser QR auf dunkler Karte,
   heller Text. Feste Innenabstände verhindern abgeschnittenen/überlagerten Text. */
.download-qr-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.6rem;
  border-radius: 16px;
  background: #0C1220;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.download-qr-code {
  width: 170px;
  height: 170px;
  max-width: 170px;
  max-height: 170px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.download-qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.download-qr-text {
  font-size: 0.95rem;
  max-width: 22ch;
  line-height: 1.4;
  margin: 0;
  color: #F3F0E8;
  opacity: 1;
  text-align: center;
}
.download-note {
  margin: 2rem auto 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.7;
  max-width: 44ch;
}
@media (max-width: 480px) {
  .download-qr-code { width: 150px; height: 150px; }
}

.theme-universum .abo-ios-current,
html.is-ios-app .abo-ios-current {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.theme-universum .abo-ios-current .abo-ios-plan {
  color: rgba(255, 255, 255, 0.95);
}
.theme-universum .abo-ios-current .abo-ios-status,
.theme-universum .abo-ios-current .abo-ios-note {
  color: rgba(255, 255, 255, 0.65);
}

/* BRONZE-STREIFEN-FIX 07.05.2026 (FINAL v2):
   Diagnose 4 mit rotem ::after bewies dass der untere Bildschirmrand
   DOM-erreichbar ist. Streifen erscheint in ALLEN Theme/Modus-Kombis
   (Universum-Nacht, Universum-Tag, Klassik-Tag) - nur im Klassik-Nacht
   wird er nicht sichtbar weil bronze=bronze.
   
   LÖSUNG: ::after-Layer mit theme-passender Farbe deckt unteren
   Safe-Area-Bereich ab. z-index NIEDRIG damit Buttons darüber liegen. */
body.breath-session-active::after {
  content: "";
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  background: var(--color-bg, #0C1220) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* ============================================================
   Crash-Telemetrie (Launch-Tab) — eigener crash-* Namespace
   Theme-unabhaengig durch eigene Token, Universum-Override
   ============================================================ */
.crash-wrap {
  --c-card: rgba(255,255,255,0.96);
  --c-border: rgba(0,0,0,0.14);
  --c-text: #2a2218;
  --c-muted: #6b6356;
  --c-chip: rgba(0,0,0,0.06);
  --c-pre: rgba(0,0,0,0.05);
  --c-accent: #5B8A72;
  --c-danger: #c05050;

  display: block;
  margin: 12px 0 20px;
  color: var(--c-text);
}
.theme-universum .crash-wrap {
  --c-card: rgba(255,255,255,0.08);
  --c-border: rgba(255,255,255,0.22);
  --c-text: #F2F7F3;
  --c-muted: #C8DED0;
  --c-chip: rgba(255,255,255,0.14);
  --c-pre: rgba(0,0,0,0.32);
  --c-accent: #6CB890;
}

/* Stats-Karten */
.crash-wrap .crash-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
}
.crash-wrap .crash-card {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px 14px !important;
  text-align: center !important;
  min-height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.crash-wrap .crash-card-label {
  font-size: 11px !important;
  color: var(--c-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}
.crash-wrap .crash-card-value {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  line-height: 1.1 !important;
}

/* Panel mit Tabelle + Listen-Wrapper */
.crash-wrap .crash-panel {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 0 0 16px !important;
  box-sizing: border-box !important;
}
.crash-wrap .crash-panel-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Verteilung-Tabelle */
.crash-wrap .crash-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  background: transparent !important;
}
.crash-wrap .crash-table th,
.crash-wrap .crash-table td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--c-border) !important;
  text-align: left !important;
  color: var(--c-text) !important;
  background: transparent !important;
}
.crash-wrap .crash-table tr:last-child td { border-bottom: none !important; }
.crash-wrap .crash-table th {
  font-weight: 600 !important;
  color: var(--c-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Action-Buttons */
.crash-wrap .crash-actions {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  flex-wrap: wrap !important;
}
.crash-wrap .crash-btn {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
.crash-wrap .crash-btn:hover {
  background: var(--c-chip) !important;
}

/* Liste der einzelnen Crashes */
.crash-wrap .crash-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.crash-wrap .crash-row {
  background: var(--c-chip) !important;
  border: 1px solid var(--c-border) !important;
  border-left: 3px solid var(--c-danger) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  box-sizing: border-box !important;
}
.crash-wrap .crash-row-head {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  color: var(--c-muted) !important;
}
.crash-wrap .crash-row-ts { font-family: ui-monospace, monospace !important; }
.crash-wrap .crash-row-platform {
  background: var(--c-chip) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  color: var(--c-text) !important;
}
.crash-wrap .crash-row-user {
  background: var(--c-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}
.crash-wrap .crash-row-msg {
  font-weight: 600 !important;
  color: var(--c-text) !important;
  word-break: break-word !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.crash-wrap .crash-row-url,
.crash-wrap .crash-row-ua {
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  color: var(--c-muted) !important;
  word-break: break-all !important;
  margin-top: 4px !important;
}
.crash-wrap .crash-row details { margin-top: 8px !important; }
.crash-wrap .crash-row details summary {
  cursor: pointer !important;
  font-size: 11px !important;
  color: var(--c-muted) !important;
  user-select: none !important;
}
.crash-wrap .crash-row details pre {
  margin: 6px 0 0 !important;
  background: var(--c-pre) !important;
  color: var(--c-text) !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-height: 240px !important;
  overflow: auto !important;
}
.crash-wrap .crash-muted {
  color: var(--c-muted) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* Mobile */
@media (max-width: 640px) {
  .crash-wrap .crash-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .crash-wrap .crash-card { min-height: 76px !important; padding: 12px 10px !important; }
  .crash-wrap .crash-card-value { font-size: 22px !important; }
  .crash-wrap .crash-card:nth-child(3) { grid-column: 1 / -1 !important; }
  .crash-wrap .crash-actions { flex-direction: column !important; }
  .crash-wrap .crash-btn { width: 100% !important; text-align: center !important; }
  .crash-wrap .crash-panel { padding: 12px !important; }
  .crash-wrap .crash-table { font-size: 12px !important; }
  .crash-wrap .crash-table th,
  .crash-wrap .crash-table td { padding: 6px 8px !important; }
}
@media (max-width: 380px) {
  .crash-wrap .crash-stats { grid-template-columns: 1fr !important; }
  .crash-wrap .crash-card:nth-child(3) { grid-column: auto !important; }
}

/* Killswitch / Wartungsmodus-Block — Theme-unabhaengige Token */
.praxis-killswitch {
  --ks-card: rgba(255,255,255,0.96);
  --ks-border: rgba(0,0,0,0.14);
  --ks-text: #2a2218;
  --ks-muted: #6b6356;
  --ks-input-bg: #ffffff;

  margin: 20px 0 !important;
  padding: 16px 18px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ks-border) !important;
  background: var(--ks-card) !important;
  color: var(--ks-text) !important;
  box-sizing: border-box !important;
}
.theme-universum .praxis-killswitch {
  --ks-card: rgba(255,255,255,0.08);
  --ks-border: rgba(255,255,255,0.22);
  --ks-text: #F2F7F3;
  --ks-muted: #C8DED0;
  --ks-input-bg: rgba(255,255,255,0.92);
}
.praxis-killswitch.ks-maint {
  border-color: #c05050 !important;
  background: rgba(192,80,80,0.18) !important;
}
.praxis-killswitch .ks-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.praxis-killswitch .ks-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #5B8A72 !important;
  flex: 0 0 auto !important;
}
.praxis-killswitch.ks-maint .ks-dot {
  background: #c05050 !important;
  animation: ksBlink 1.2s ease-in-out infinite;
}
@keyframes ksBlink { 50% { opacity: 0.3; } }
.praxis-killswitch .ks-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--ks-text) !important;
}
.praxis-killswitch .ks-status {
  margin-left: auto !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #5B8A72 !important;
  font-weight: 600 !important;
}
.praxis-killswitch.ks-maint .ks-status { color: #c05050 !important; }
.praxis-killswitch .ks-help {
  font-size: 12px !important;
  color: var(--ks-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.praxis-killswitch .ks-field {
  display: block !important;
  margin-bottom: 12px !important;
}
.praxis-killswitch .ks-field span {
  display: block !important;
  font-size: 11px !important;
  color: var(--ks-muted) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 500 !important;
}
.praxis-killswitch textarea {
  width: 100% !important;
  border: 1px solid var(--ks-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font: inherit !important;
  font-size: 13px !important;
  resize: vertical !important;
  background: var(--ks-input-bg) !important;
  color: #2a2218 !important;
  box-sizing: border-box !important;
}
.praxis-killswitch .ks-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.praxis-killswitch .ks-btn {
  border-radius: 999px !important;
  border: none !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  font-family: inherit !important;
}
.praxis-killswitch .ks-btn-danger { background: #c05050 !important; color: #fff !important; }
.praxis-killswitch .ks-btn-danger:hover { background: #a73c3c !important; }
.praxis-killswitch .ks-btn-go { background: #5B8A72 !important; color: #fff !important; }
.praxis-killswitch .ks-btn-go:hover { background: #466e58 !important; }
.praxis-killswitch .ks-updated {
  margin-top: 10px !important;
  font-size: 11px !important;
  color: var(--ks-muted) !important;
}
@media (max-width: 640px) {
  .praxis-killswitch .ks-actions { flex-direction: column !important; }
  .praxis-killswitch .ks-btn { width: 100% !important; }
}

/* Noise-Toggle (bekannte harmlose Fehler ein/aus) */
.crash-wrap .crash-noise-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--c-muted, #94a3b8) !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
}
.crash-wrap .crash-noise-toggle input[type="checkbox"] {
  margin: 0 !important;
  cursor: pointer !important;
}
.crash-wrap .crash-row-noise {
  display: inline-block !important;
  background: rgba(148, 163, 184, 0.18) !important;
  color: var(--c-muted, #94a3b8) !important;
  border-radius: 999px !important;
  padding: 1px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: lowercase !important;
}
.crash-wrap .crash-row-noise-row {
  opacity: 0.6 !important;
}
.crash-wrap .crash-row-noise-row:hover {
  opacity: 1 !important;
}

/* ============================================================================
 * Sicherung v5 (Blätter 06c-m/06c-n, 04.08.2026, überarbeitet 04.08.2026)
 * Kompakte Karte in der Atemmodell-Übersicht plus eigener Sub-Screen
 * bf-screen-backup mit Status-Panel, Spec-Liste und drei Aktionen.
 *
 * Farb-Anker: die v5-Blätter sitzen auf warmem Schwarz-Body, die lebende App
 * dagegen auf kaltem Nachtblau-Body (#0C1220). Panels und Ränder nutzen daher
 * die Universum-Tokens (--color-card, --color-border, --color-text) statt der
 * warmen Blatt-Hexes, damit sich der Screen in die Umgebung einfügt.
 * ============================================================================ */

/* Gemeinsame Textelemente (auch für Karte in der Übersicht) */
.bf-am-card-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.bf-am-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.55;
}
.bf-am-k {
  color: var(--color-text-muted);
}
.bf-am-v {
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
}
.bf-am-v-dim {
  color: var(--color-text-faint);
  font-weight: 400;
}
.bf-am-v-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--color-text);
  font-weight: 500;
}

/* Sub-Screen bf-screen-backup */
.bf-am-crumbs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  margin: 0 0 4px;
}
#bf-screen-backup .bf-screen-title {
  margin-top: 0;
  margin-bottom: 20px;
}
.bf-am-status-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.bf-am-status-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.bf-am-status-panel .bf-am-status-row {
  padding: 6px 0;
}
.bf-am-spec-list {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 22px;
}
.bf-am-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.55;
}
.bf-am-spec-row:last-child {
  border-bottom: none;
}
.bf-am-spec-row .bf-am-k {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.bf-am-spec-row .bf-am-v {
  color: var(--color-text);
}

.bf-am-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.bf-am-actions .bf-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 14px;
}
.bf-btn-tertiary {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  width: 100%;
  cursor: pointer;
}
.bf-btn-tertiary:hover {
  color: var(--color-text);
}

.bf-am-log {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  min-height: 16px;
}
.bf-am-intro {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}
.bf-am-manage {
  font-size: 11px;
  color: var(--color-text-faint);
  line-height: 1.5;
  margin: 0;
}
/* =============================================
   KACHEL-LEISTE UND OVERLAY (Mechanik-Kurs, Blatt 18)
   ============================================= */
.kurs-kachel-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.kurs-kachel-bar.hidden {
  display: none;
}
.kurs-kachel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(224, 184, 96, 0.06);
  border: 1px solid rgba(224, 184, 96, 0.20);
  color: var(--ink-1, #DDE3EF);
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.kurs-kachel-chip:hover,
.kurs-kachel-chip:focus-visible {
  background: rgba(224, 184, 96, 0.12);
  border-color: rgba(224, 184, 96, 0.40);
  outline: none;
}
.kurs-kachel-chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(224, 184, 96, 0.15);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--u-accent, #E0B860);
}
.kurs-kachel-chip-label {
  white-space: nowrap;
}

.kurs-kachel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 16, 36, 0.85);
  backdrop-filter: blur(6px);
  padding: 24px;
  padding-top: max(env(safe-area-inset-top, 0px), 24px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
}
.kurs-kachel-overlay.hidden {
  display: none;
}
.kurs-kachel-shell {
  background: var(--u-bg, #0B1024);
  border-radius: 16px;
  width: 100%;
  max-width: 1240px;
  height: min(90vh, 900px);
  height: min(90dvh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(224, 184, 96, 0.15);
}
.kurs-kachel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(42, 52, 82, 0.8);
  flex: 0 0 auto;
}
.kurs-kachel-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
}
.kurs-kachel-close {
  background: transparent;
  border: 0;
  color: var(--ink-1, #DDE3EF);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.kurs-kachel-close:hover,
.kurs-kachel-close:focus-visible {
  background: rgba(224, 184, 96, 0.12);
  outline: none;
}
.kurs-kachel-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: transparent;
}
body.kurs-kachel-open {
  overflow: hidden;
}

/* ============================================================================
 * Native Kachel-Renderung (PR 124)
 * Ersetzt schrittweise das iframe. Der Container #reiseKachelNative
 * traegt Kacheln, die vom Modul kachel-renderer.js aus
 * MECHANIK_KACHELN[day][slug] gebaut werden.
 * ==========================================================================*/

.kurs-kachel-native {
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  background: var(--u-bg, #0B1024);
  color: var(--ink-1, #DDE3EF);
}
.kurs-kachel-native.hidden {
  display: none;
}

.kachel-session {
  max-width: 460px;
  margin: 0 auto;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
}

.kachel-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 0 4px;
}
.kachel-progress-block {
  flex: 1;
  height: 4px;
  background: rgba(42, 52, 82, 0.6);
  border-radius: 2px;
}
.kachel-progress-block.done {
  background: var(--u-accent-dim, #8A6D3B);
}
.kachel-progress-block.active {
  background: var(--u-accent, #E0B860);
}

.kachel-card {
  display: flex;
  flex-direction: column;
  background: var(--u-panel, #131B3B);
  border-left: 2px solid var(--u-accent, #E0B860);
  border-radius: 0 16px 16px 0;
  padding: 20px 22px;
}

.kachel-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kachel-tag-num {
  color: var(--u-accent, #E0B860);
}

.kachel-instrument {
  width: 100%;
  height: 180px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--u-bg-2, #0F1530);
  border-radius: 12px;
  border: 1px solid var(--line, #2A3452);
}
.kachel-instrument svg {
  width: 140px;
  height: 140px;
  color: var(--u-accent, #E0B860);
}

/* Bild-Slot (WebP-Illustrationen) — Alternative zu .kachel-instrument.
   Bilder haben unterschiedliche Seitenverhaeltnisse (900x450, 900x600, 900x900),
   die volle Bild-Hoehe wird begrenzt damit die Kachel scrollbar bleibt. */
.kachel-image {
  width: 100%;
  margin: 0 auto 20px;
  background: var(--u-bg-2, #0F1530);
  border-radius: 12px;
  border: 1px solid var(--line, #2A3452);
  overflow: hidden;
}
.kachel-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
}

/* Illustration-Slot (Inline-SVG mit eigenem viewBox, z. B. Blatt-SVGs
   mit 460×300). Analog .kachel-image, aber fuer eingebettetes SVG:
   viewBox skaliert automatisch, Hoehe wird ueber aspect-ratio begrenzt. */
.kachel-illustration {
  width: 100%;
  margin: 0 auto 20px;
  background: var(--u-bg-2, #0F1530);
  border-radius: 12px;
  border: 1px solid var(--line, #2A3452);
  padding: 12px;
  overflow: hidden;
}
.kachel-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
}

.kachel-name {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-0, #F5F7FC);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}
.kachel-sub {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #98A2BA);
  margin: 0 0 16px;
}
.kachel-instr {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.6;
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}

/* Prose (mehrere Absaetze Fliesstext, Wissens-Kacheln ab Tag 8) */
.kachel-prose {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.65;
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.kachel-prose:last-of-type {
  margin-bottom: 18px;
}

/* Studie-Zitat (Autor Jahr · Journal Vol:Seite · DOI) */
.kachel-studie {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  margin: 14px 0 18px;
  border-left: 1px solid var(--line, rgba(221, 227, 239, 0.18));
  background: rgba(255, 255, 255, 0.02);
  border-radius: 2px;
}
.kachel-studie-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #7C89A6);
  flex-shrink: 0;
}
.kachel-studie-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.55;
  flex: 1;
}
.kachel-studie-doi {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--gold, #E0B860);
  text-decoration: none;
  border-bottom: 1px solid var(--gold, #E0B860);
  padding-bottom: 1px;
  flex-shrink: 0;
}
.kachel-studie-doi:hover {
  opacity: 0.85;
}

/* Transfer (Fuer den Tag - Instruktions-Block mit optionalen Punkten) */
.kachel-transfer {
  margin: 18px 0;
  padding: 14px 14px 12px;
  border-top: 1px solid var(--gold, #E0B860);
  background: rgba(224, 184, 96, 0.03);
  border-radius: 0 0 2px 2px;
}
.kachel-transfer-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #E0B860);
  margin-bottom: 10px;
}
.kachel-transfer-instr {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-0, #F5F7FC);
  line-height: 1.55;
  margin: 0 0 10px;
}
.kachel-transfer-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kachel-transfer-points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line, rgba(221, 227, 239, 0.10));
}
.kachel-transfer-points li:first-child {
  border-top: none;
  padding-top: 4px;
}
.kachel-transfer-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3, #7C89A6);
  padding-top: 2px;
}
.kachel-transfer-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
}

.kachel-measure {
  margin-bottom: 14px;
}
.kachel-measure:last-of-type {
  margin-bottom: 12px;
}
.kachel-measure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kachel-measure-title {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-0, #F5F7FC);
}
.kachel-measure-ref {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 4px;
}
.kachel-number-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--u-accent, #E0B860);
  border-radius: 8px;
  margin-bottom: 6px;
}
.kachel-number-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  color: var(--u-accent, #E0B860);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  padding: 0;
  min-width: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.kachel-number-value::-webkit-outer-spin-button,
.kachel-number-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kachel-number-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 10px;
}

/* Delta-Zeile unter einem Messblock (Referenz vs. aktueller Wert) */
.kachel-delta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.08em;
  min-height: 18px;
}
.kachel-delta-ref {
  color: var(--ink-3, #6A7492);
}
.kachel-delta-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, #98A2BA);
}
.kachel-delta-value.plus {
  color: var(--delta-plus, #7BC96F);
}
.kachel-delta-value.minus {
  color: var(--delta-minus, #E07A6B);
}
.kachel-delta-value.zero {
  color: var(--ink-2, #98A2BA);
}

.kachel-journal-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kachel-arr {
  color: var(--u-accent, #E0B860);
}

.kachel-cue {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.kachel-cue-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}
.kachel-cue-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--u-accent, #E0B860);
  line-height: 1.55;
}

/* Meta-Panel · Key-Value-Zeilen fuer Session-Parameter (Tag 9.2). */
.kachel-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 16px;
}
.kachel-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.kachel-meta-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kachel-meta-value {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
  font-variant-numeric: tabular-nums;
}

/* Alltags-Karten · vier Uebungs-Karten (Tag 13.7 Achtsamkeit). Herkunfts-Tag
   in Gold-Mono-Versalien, Uebungsname in Body, Kern-Parameter in Mono. */
.alltag-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.alltag-item {
  padding: 14px 16px 16px;
  background: var(--u-panel-2, #182349);
  border: 0.5px solid var(--line, #2A3650);
  border-radius: 10px;
  border-left: 2px solid var(--u-accent-dim, #8A6D3B);
}
.alltag-head {
  margin-bottom: 8px;
}
.alltag-tag {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.alltag-name {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-0, #F0F3FA);
  margin: 0;
  letter-spacing: -0.005em;
}
.alltag-params {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-2, #98A2BA);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* ---- Tag 13.5 · Breathhold-Modul (Kachel-Version) ----
 * Portiert 1:1 aus Blatt 18/kachel-t13-p5-breathhold.html. Die App-eigenen
 * Overlay-Klassen (.bh-close, .bh-content, .bh-prep als Screen-Klasse in
 * Overlay) sind hier NICHT wiederverwendet, weil der Kachel-Rahmen der
 * Standard-Renderer-Wrapper ist. Die gemeinsamen Klassen (.bh-title, .bh-pb,
 * .bh-hint, .bh-prep-options, .bh-circle-*, .bh-timer-display, .bh-timer-ms,
 * .bh-result-* usw.) bleiben in ihrer bestehenden Definition. */
.tag13-breathhold {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 0 8px;
}
.tag13-breathhold .bh-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tag13-breathhold .bh-screen.hidden { display: none; }

/* Buttons (Kachel-eigen, ersetzen die Overlay-`.btn.btn-primary`-Version) */
.bh-primary-btn {
  background: var(--u-accent, #E0B860);
  color: #0b0d13;
  border: none;
  padding: 10px 26px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 6px;
}
.bh-primary-btn:hover { opacity: 0.88; }
.bh-ghost-btn {
  background: none;
  border: 1px solid var(--line, #2A3650);
  color: var(--ink-1, #C7CFE0);
  padding: 10px 22px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.bh-ghost-btn:hover { border-color: var(--ink-2, #98A2BA); }

/* Hold-Bildschirm · Timer-Zeile (Ganzzahl + Zehntel nebeneinander) */
.bh-timer-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

/* Absprung-Link · Deep-Link-Button (Tag 9.2 zu Nadi-Shodhana-Session). */
.kachel-jump-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 4px 0 6px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 10px;
  color: var(--u-accent, #E0B860);
  text-decoration: none;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}
.kachel-jump-btn:hover,
.kachel-jump-btn:focus {
  background: var(--u-panel, #0F1735);
  outline: none;
}
.kachel-jump-arrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--u-accent, #E0B860);
}
.kachel-jump-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding: 0 2px;
}

/* Tag 4 Positions-Timer mit Halbzeit-Seitenwechsel (PR 179).
   Marker-Zeile ueber Timer-Anzeige, Progress-Tube mit Halbzeit-Tick. */
.kachel-position-timer-marker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
  text-align: center;
  margin: 14px 0 6px;
}
.kachel-position-timer-anzeige {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 42px;
  font-weight: 300;
  color: var(--u-ink-0, #F5F3EE);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 2px 0 14px;
}
.kachel-position-timer-tube {
  position: relative;
  height: 6px;
  background: var(--u-panel-2, #182349);
  border-radius: 3px;
  margin: 0 0 16px;
  overflow: visible;
}
.kachel-position-timer-tube-fill {
  height: 100%;
  background: var(--u-accent, #E0B860);
  border-radius: 3px;
  transition: width 300ms linear;
}
.kachel-position-timer-tube-tick {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 14px;
  background: var(--u-accent-dim, #8A6D3B);
  transform: translateX(-1px);
}

/* Anker-Overlay: kurze Text-Einblendung (3 s) beim Erreichen eines Ankers */
.kachel-position-timer-overlay {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
  text-align: center;
  padding: 10px 12px;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 8px;
  margin: 0 0 14px;
  min-height: 20px;
  opacity: 1;
  transition: opacity 400ms ease;
}
.kachel-position-timer-overlay[data-empty="true"] {
  opacity: 0;
  border-color: transparent;
}

/* Mehrfach-Anker-Kachel: N Journal-Bloecke uebereinander */
.kachel-mehrfach-anker-block {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 12px;
}
.kachel-mehrfach-anker-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.kachel-mehrfach-anker-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
}
.kachel-mehrfach-anker-min-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--u-accent-dim, #8A6D3B);
}
.kachel-mehrfach-anker-frage {
  font-size: 14px;
  color: var(--u-ink-1, #C9C5BB);
  margin: 0 0 10px;
}
.kachel-mehrfach-anker-input-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kachel-mehrfach-anker-input {
  flex: 1;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: var(--u-ink-0, #F5F3EE);
  background: var(--u-panel-1, #0F1836);
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 6px;
  outline: none;
}
.kachel-mehrfach-anker-input:focus {
  border-color: var(--u-accent, #E0B860);
}
.kachel-mehrfach-anker-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.06em;
}
.kachel-mehrfach-anker-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kachel-mehrfach-anker-chip {
  flex: 1 1 auto;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--u-ink-1, #C9C5BB);
  background: var(--u-panel-1, #0F1836);
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 6px;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.kachel-mehrfach-anker-chip:hover {
  border-color: var(--u-accent, #E0B860);
  color: var(--u-ink-0, #F5F3EE);
}
.kachel-mehrfach-anker-chip.active {
  color: var(--u-ink-inv, #0A0F1F);
  background: var(--u-accent, #E0B860);
  border-color: var(--u-accent, #E0B860);
}

.kachel-summary {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 18px;
}
.kachel-summary-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kachel-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(42, 52, 82, 0.5);
}
.kachel-summary-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.kachel-summary-min {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.1em;
  min-width: 72px;
}
.kachel-summary-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.4;
}
.kachel-summary-text b {
  color: var(--u-accent, #E0B860);
  font-weight: 500;
}

/* Result-Echo: spiegelt eine frueher gewaehlte Chip-Auswahl als Symbol + Text
   in der Achtsamkeits-Kachel wider (Nachtest -> Achtsamkeit). */
.kachel-result-echo {
  padding: 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 12px;
  margin-bottom: 22px;
}
.kachel-result-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kachel-result-value {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kachel-result-symbol {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  color: var(--u-accent, #E0B860);
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}
.kachel-result-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink-0, #F5F7FC);
  font-weight: 500;
}
.kachel-result-context {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-2, #98A2BA);
  margin-top: 8px;
  line-height: 1.5;
}

/* Delta-Zusammenfassung (mehrere Deltas in einer Karte, z.B. Tag 7.4) */
.kachel-delta-summary {
  padding: 16px 18px;
  background: var(--u-panel-2, #182349);
  border-radius: 12px;
  margin-bottom: 22px;
}
.kachel-delta-summary-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kachel-delta-summary-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: 0.5px solid var(--line, #2A3452);
}
.kachel-delta-summary-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.kachel-delta-summary-name {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-0, #F5F7FC);
  font-weight: 500;
}
.kachel-delta-summary-ref {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 4px;
}
.kachel-delta-summary-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, #98A2BA);
  text-align: right;
  min-width: 88px;
}
.kachel-delta-summary-value.plus {
  color: var(--delta-plus, #7BC96F);
}
.kachel-delta-summary-value.minus {
  color: var(--delta-minus, #E07A6B);
}
.kachel-delta-summary-value.zero {
  color: var(--ink-2, #98A2BA);
}

/* Verlauf (drei Balken aus dem Journal, z.B. Tag 14.4 BOLT Tag 1/7/14) */
.kachel-verlauf {
  padding: 16px 18px;
  background: var(--u-panel-2, #182349);
  border-radius: 12px;
  margin-bottom: 22px;
}
.kachel-verlauf-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kachel-verlauf-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kachel-verlauf-row {
  display: grid;
  grid-template-columns: 70px 1fr 72px;
  align-items: center;
  gap: 12px;
}
.kachel-verlauf-row-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-2, #98A2BA);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kachel-verlauf-row-track {
  display: block;
  height: 30px;
  background: var(--u-bg, #0B1024);
  border: 1px solid var(--line, #2A3452);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.kachel-verlauf-row-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(224,184,96,0.35), rgba(224,184,96,0.55));
  border-right: 2px solid var(--u-accent, #E0B860);
}
.kachel-verlauf-row-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-0, #F5F7FC);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.kachel-verlauf-row-value.empty {
  color: var(--ink-3, #6A7492);
  font-size: 11px;
}
.kachel-verlauf-delta {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--u-bg, #0B1024);
  border-radius: 10px;
  border-left: 2px solid var(--u-accent, #E0B860);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.kachel-verlauf-delta-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kachel-verlauf-delta-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: var(--u-accent, #E0B860);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kachel-verlauf-delta-value.plus {
  color: var(--delta-plus, #7BC96F);
}
.kachel-verlauf-delta-value.minus {
  color: var(--delta-minus, #E07A6B);
}
.kachel-verlauf-delta-value.zero {
  color: var(--ink-2, #98A2BA);
}
.kachel-verlauf-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #2A3452);
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-2, #98A2BA);
  line-height: 1.55;
}

.kachel-note {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-2, #98A2BA);
  line-height: 1.6;
  margin: 0 0 18px;
}

.kachel-choice {
  margin-bottom: 18px;
}
.kachel-choice-label {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.5;
  margin: 0 0 10px;
}
.kachel-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kachel-chip {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #98A2BA);
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--line, #2A3452);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  letter-spacing: 0.005em;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.kachel-chip:hover {
  color: var(--ink-0, #F5F7FC);
  border-color: var(--u-accent-dim, #8A6D3B);
}
.kachel-chip.selected {
  color: var(--u-accent, #E0B860);
  border-color: var(--u-accent, #E0B860);
  background: rgba(224, 184, 96, 0.06);
}
.kachel-chip:focus-visible {
  outline: 1px solid var(--u-accent, #E0B860);
  outline-offset: 2px;
}

.kachel-reflect-question {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink-0, #F5F7FC);
  line-height: 1.55;
  margin: 0 0 14px;
}
.kachel-notiz {
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--line, #2A3452);
  border-radius: 10px;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
  resize: vertical;
  margin-bottom: 6px;
}
.kachel-notiz::placeholder {
  color: var(--ink-3, #6A7492);
}
.kachel-notiz:focus {
  outline: none;
  border-color: var(--u-accent-dim, #8A6D3B);
}
.kachel-notiz-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.kachel-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 0.5px solid var(--line, #2A3452);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
}
.kachel-nav-btn {
  background: none;
  border: 0;
  color: var(--ink-2, #98A2BA);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  padding: 6px 2px;
}
.kachel-nav-btn:hover:not([disabled]) {
  color: var(--u-accent, #E0B860);
}
.kachel-nav-btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
}
.kachel-nav-next {
  color: var(--u-accent, #E0B860);
}
.kachel-nav-counter {
  color: var(--ink-1, #DDE3EF);
  font-variant-numeric: tabular-nums;
}

/* --- DOM-Kachel im Vollbild -----------------------------------------------
 * Wenn openKachel die DOM-gerenderte Kachel nutzt (statt iframe-Design-Blatt),
 * setzt kurs.js die Klasse .kachel-fullscreen auf #reiseKachelOverlay und
 * verschiebt das Overlay ans Body-Ende. Zusaetzlich setzt kurs.js
 * body.kurs-kachel-fullscreen, damit App-Header und Navigations-Pill
 * ausgeblendet werden. Ohne Body-Marker koennen sticky-Header oder
 * z-index-Fragmente durch das Overlay leuchten.
 *
 * Ergebnis: echtes Vollbild fuer das Tagesprogramm. Keine Topbar, keine
 * App-Navigation, nur die schmale Kachel-Karte zentriert und ein
 * schwebendes X-Schliessen. Der Iframe-Fallback (Design-Blatt Tag 2-14)
 * bleibt unveraendert.
 * ------------------------------------------------------------------------ */
.kurs-kachel-overlay.kachel-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--u-bg, #0B1024);
  backdrop-filter: none;
  padding: 0;
  display: block;
}
.kurs-kachel-overlay.kachel-fullscreen .kurs-kachel-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: block;
  overflow-y: auto;
}
.kurs-kachel-overlay.kachel-fullscreen .kurs-kachel-topbar {
  display: none;
}
.kurs-kachel-overlay.kachel-fullscreen .kurs-kachel-native {
  display: block;
  padding: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}
.kurs-kachel-overlay.kachel-fullscreen .kachel-session {
  padding: 56px 20px 40px;
  margin: 0 auto;
}

/* Schwebender X-Schliessen-Button, zeigt oben rechts nur im Vollbild.
 * Sichtbarkeit haengt an .kurs-kachel-overlay.kachel-fullscreen; ausserhalb
 * des Vollbilds ist der Button unsichtbar und nicht klickbar. */
.kachel-close-float {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 16px);
  right: max(env(safe-area-inset-right, 0px), 16px);
  z-index: 2100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(19, 27, 59, 0.85);
  border: 1px solid var(--line, #2A3452);
  color: var(--ink-1, #DDE3EF);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  display: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.kurs-kachel-overlay.kachel-fullscreen .kachel-close-float {
  display: inline-flex;
}
.kachel-close-float:hover,
.kachel-close-float:focus-visible {
  background: rgba(224, 184, 96, 0.14);
  color: var(--u-accent, #E0B860);
  outline: none;
}

/* Body-Marker: App-Header und Navigations-Pill unter dem Overlay ausblenden.
 * visibility statt display, damit kein Layout-Reflow beim Oeffnen/Schliessen
 * passiert. */
body.kurs-kachel-fullscreen .site-header,
body.kurs-kachel-fullscreen .breathwork-tabs {
  visibility: hidden;
}

@media (max-width: 720px) {
  .kurs-kachel-overlay {
    padding: 0;
  }
  .kurs-kachel-shell {
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
  }
}

/* ============================================================================
 * Technische Details v5 (Blatt 06d, 04.08.2026)
 * Eigener Sub-Screen bf-screen-tech mit sechs Diagnose-Panels.
 * Fach-Sprache in diesem Screen explizit erlaubt (Projekt-Kanon).
 *
 * Farb-Anker: Universum-Tokens statt Blatt-Hexes (--color-surface / -border /
 * -text*). Semantische Werte-Farben (ok/warn/dim) bleiben eigenständig, weil
 * das Panel eine Diagnose-Ampel braucht — sie werden aus Universum-Tokens
 * abgeleitet.
 * ============================================================================ */

.bf-tech-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(212, 184, 118, 0.06);
  border: 1px solid rgba(212, 184, 118, 0.25);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #d4b876;
  margin-bottom: 16px;
}
.bf-tech-chip .bf-tech-chip-l {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.bf-tech-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.bf-tech-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
}
.bf-tech-panel-head .bf-tech-panel-t {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.bf-tech-panel-head .bf-tech-panel-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--color-text-faint);
}

.bf-tech-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.bf-tech-row .bf-tech-k {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  color: var(--color-text-muted);
}
.bf-tech-row .bf-tech-v {
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
}
.bf-tech-row .bf-tech-v.ok   { color: #8ea88a; }
.bf-tech-row .bf-tech-v.warn { color: #d4b876; }
.bf-tech-row .bf-tech-v.dim  { color: var(--color-text-faint); }

.bf-tech-gate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.bf-tech-gate-row .bf-tech-k {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  color: var(--color-text-muted);
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.bf-tech-gate-row .bf-tech-mk-ok {
  color: #8ea88a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bf-tech-gate-row .bf-tech-mk-no {
  color: var(--color-text-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bf-tech-gate-row .bf-tech-v      { color: var(--color-text); font-weight: 500; }
.bf-tech-gate-row .bf-tech-v.ok   { color: #8ea88a; }
.bf-tech-gate-row .bf-tech-v.warn { color: #d4b876; }
.bf-tech-gate-hint {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  color: var(--color-text-faint);
  padding: 0 0 6px 18px;
  line-height: 1.5;
}

.bf-tech-note {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  color: var(--color-text-faint);
  line-height: 1.5;
  padding: 8px 0 0;
  margin: 0;
}

/* Stufe B (04.08.2026) — Umgebung je Aufnahme */
.bf-env-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.bf-env-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-text);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}
.bf-env-row:last-child { border-bottom: none; }
.bf-env-time { color: var(--color-text-faint); }
.bf-env-windows { color: var(--color-text-faint); }
.bf-env-label { color: var(--color-text); }
.bf-env-metric { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* Stufe B (04.08.2026) — Verteilung Technik x Phase */
.bf-tech-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
/* Distribution-Panel (bf-tech-list) wraps rows in ihrem eigenen Kontext.
   Selektor-Verschaerfung, damit die allgemeine .bf-tech-row-Regel (Panels
   1-3) nicht ueberschrieben wird. */
.bf-tech-list > .bf-tech-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: var(--color-text);
  padding-top: 6px;
  border-top: 1px solid var(--color-border-subtle, var(--color-border));
}
.bf-tech-list > .bf-tech-row:first-child { border-top: none; padding-top: 0; }
.bf-tech-list > .bf-tech-row .bf-tech-t { font-weight: 500; }
.bf-tech-list > .bf-tech-row .bf-tech-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.bf-tech-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--color-text-faint);
  padding-left: 0;
  margin-bottom: 2px;
}
.bf-tech-phase { white-space: nowrap; }

/* Titel-Abstand im Sub-Screen: Krümel liegt zwischen Zurück-Link und Titel */
#bf-screen-tech .bf-screen-title {
  margin-top: 0;
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------------
 * Umgebungspruefung — v5-Blaetter 06a-g / 06a-h / 06a-i (04.08.2026)
 *
 * Drei Sub-Views (Einladung, Aufnahme, Ergebnis) rendern in #bfEnvContent.
 * Farben ausschliesslich ueber var(--color-*). Layout knapp, monospace fuer
 * Zahlen und Labels.
 * ------------------------------------------------------------------------- */
#bf-screen-env-check .bf-screen-title {
  margin-top: 0;
  margin-bottom: 20px;
}

/* Einladung (g) */
.bf-env-spec {
  border: 1px solid var(--color-border-subtle, #1e1d17);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: transparent;
}
.bf-env-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--color-border-subtle, #1e1d17);
}
.bf-env-spec-row:first-child { border-top: 0; padding-top: 0; }
.bf-env-spec-row:last-child { padding-bottom: 0; }
.bf-env-spec-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.bf-env-spec-v {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}

.bf-env-instruct {
  border: 1px solid var(--color-border-subtle, #1e1d17);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bf-env-instruct-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 8px;
}
.bf-env-instruct-p {
  font-size: 13px;
  color: var(--color-text-dim);
  margin: 0;
  line-height: 1.6;
}

/* Aufnahme (h) */
.bf-env-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 64px;
  font-weight: 300;
  color: var(--color-text);
  text-align: center;
  line-height: 1;
  margin: 8px 0 6px;
  letter-spacing: 0.02em;
}
.bf-env-countdown-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
  margin: 0 0 20px;
}
.bf-env-live {
  border: 1px solid var(--color-border-subtle, #1e1d17);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.bf-env-live-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 12px;
}
.bf-env-live-hint {
  font-size: 12px;
  color: var(--color-text-dim);
  margin: 0 0 12px;
  line-height: 1.5;
}
.bf-env-progress {
  height: 3px;
  background: var(--color-border-subtle, #1e1d17);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0 4px;
}
.bf-env-progress i {
  display: block;
  height: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: width 0.25s linear;
}
.bf-env-live-counts {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle, #1e1d17);
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-text);
}
.bf-env-live-k { color: var(--color-text-faint); }
.bf-env-live-v { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Ergebnis (i) */
.bf-env-result-hero {
  text-align: center;
  padding: 8px 0 16px;
  margin-bottom: 16px;
}
.bf-env-result-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 10px;
}
.bf-env-result-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.bf-env-result-cap {
  font-size: 12px;
  color: var(--color-text-dim);
  margin: 0;
}

.bf-env-panel {
  border: 1px solid var(--color-border-subtle, #1e1d17);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.bf-env-panel-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 10px;
}
.bf-env-effect-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--color-border-subtle, #1e1d17);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.bf-env-effect-row:first-child { border-top: 0; padding-top: 0; }
.bf-env-effect-row:last-child { padding-bottom: 0; }
.bf-env-k {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: var(--color-text-dim);
}
.bf-env-v-from { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.bf-env-v-to { color: var(--color-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.bf-env-note {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 6px 0 12px;
}
.bf-env-note:empty { display: none; }
.bf-env-empty {
  font-size: 14px;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin: 0 0 12px;
}
.bf-env-error {
  font-size: 13px;
  color: #C4784A;
  line-height: 1.5;
  margin: 6px 0 10px;
}

/* Tertiary-Button-Variante (leise) */
#bf-screen-env-check .bf-btn-tertiary,
.bf-btn.bf-btn-tertiary {
  background: transparent;
  color: var(--color-text-faint);
  border: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
}

/* ===========================================================================
   Kurs Mechanik · Blatt 16 (Kurs-Detail) und Blatt 17 (Kurs-Tag-Detail)
   Kanon-konformer Neuaufbau. Klassen mit Praefix mech-* fuer Blatt 16,
   ktag-* fuer Blatt 17. Keine Kollision mit den alten .kurs-*-Regeln der
   Placeholder-Kurse.
   =========================================================================== */

/* Kanon-Farbtokens (--u- und --ink-) fuer die neuen Screens. Werte 1:1 aus den
   Blatt-Vorlagen unter blaetter-v4-final/16-kurs-detail-mechanik. Diese
   Tokens werden ausschliesslich von .mech- und .ktag- Regeln gelesen; die alten
   --color- Variablen bleiben fuer den Rest der App unangetastet. */
:root {
  --mech-ink-0: #F5F7FC;
  --mech-ink-1: #DDE3EF;
  --mech-ink-2: #98A2BA;
  --mech-ink-3: #6A7492;
  --mech-line: #2A3452;
  --mech-u-bg: #0B1024;
  --mech-u-panel: #131B3B;
  --mech-u-accent: #E0B860;
  --mech-u-accent-dim: #8A6D3B;
  --mech-font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mech-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
   Blatt 16 · Kurs-Detail Mechanik
   Wird in #reisePhases geschrieben. Da der bestehende .kurs-header darueber
   liegt (Titel/Progress), verstecken wir den mit body.mech-detail-open und
   rendern eine eigene Kopfleiste unterhalb des Zurueck-Knopfs.
   --------------------------------------------------------------------------- */

body.mech-detail-open .kurs-header { display: none; }

.mech-shell {
  font-family: var(--mech-font-body);
  color: var(--mech-ink-1);
  padding: 8px 4px 32px;
}
.mech-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--mech-ink-2);
  font-family: var(--mech-font-body);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 18px;
  letter-spacing: 0.005em;
}
.mech-back:hover { color: var(--mech-ink-0); }
.mech-back svg { width: 14px; height: 14px; }

.mech-goal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.mech-goal-journal-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--mech-ink-3);
  border: 1px solid var(--mech-ink-3);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.mech-goal-journal-btn:hover,
.mech-goal-journal-btn:focus-visible {
  color: var(--mech-ink-0);
  border-color: var(--mech-ink-1);
  outline: none;
}

/* Wenn das Journal in der Kurs-Detail offen ist, verstecken wir alle
   Kurs-Detail-Inhalte außer der Journal-View. */
body.mech-journal-open #reiseView > :not(#mechJournal) {
  display: none !important;
}
.mech-goal-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--mech-u-panel);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mech-goal-icon svg { width: 44px; height: 44px; }
.mech-goal-text { flex: 1; min-width: 0; }
.mech-goal-label {
  font-family: var(--mech-font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--mech-ink-0);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}
.mech-goal-meta {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.mech-progress { margin-bottom: 24px; }
.mech-progress-track {
  width: 100%;
  height: 1px;
  background: var(--mech-line);
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.mech-progress-fill {
  height: 100%;
  background: var(--mech-u-accent);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mech-progress-text {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mech-phasen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mech-phase { display: flex; flex-direction: column; }
.mech-phase-header {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 0 10px;
  margin-bottom: 6px;
  border-bottom: 0.5px solid var(--mech-line);
}
.mech-phase-num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mech-u-panel);
  border: 0.5px solid var(--mech-line);
  border-radius: 10px;
  font-family: var(--mech-font-body);
  font-weight: 400;
  font-size: 18px;
  color: var(--mech-ink-1);
  letter-spacing: -0.01em;
  line-height: 1;
}
.mech-phase-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mech-phase-name {
  font-family: var(--mech-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--mech-ink-0);
  margin: 0;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mech-phase-range {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}
.mech-phase.is-current .mech-phase-num {
  border-color: var(--mech-u-accent-dim);
  color: var(--mech-ink-0);
}
.mech-phase.is-done .mech-phase-num { color: var(--mech-ink-3); }
.mech-phase.is-locked .mech-phase-num,
.mech-phase.is-locked .mech-phase-name { color: var(--mech-ink-3); }

.mech-days { display: flex; flex-direction: column; padding: 6px 0 0; }
.mech-day {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 0.5px solid rgba(42, 52, 82, 0.4);
  cursor: pointer;
  transition: color 0.15s;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.mech-day:last-child { border-bottom: none; }
.mech-day-marker {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mech-day-marker svg { width: 14px; height: 14px; }
.mech-day-num {
  font-family: var(--mech-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.mech-day-title {
  font-family: var(--mech-font-body);
  font-size: 13.5px;
  color: var(--mech-ink-1);
  line-height: 1.4;
  letter-spacing: -0.003em;
}
.mech-day-arrow { color: var(--mech-ink-3); flex-shrink: 0; opacity: 0.5; }
.mech-day-arrow svg { width: 12px; height: 12px; display: block; }

.mech-day.is-done .mech-day-marker { color: var(--mech-ink-3); }
.mech-day.is-done .mech-day-num { display: none; }
.mech-day.is-done .mech-day-title { color: var(--mech-ink-3); }

.mech-day.is-current .mech-day-marker {
  background: var(--mech-u-accent);
  border-radius: 50%;
}
.mech-day.is-current .mech-day-marker .mech-day-num {
  color: var(--mech-u-bg);
  font-weight: 500;
}
.mech-day.is-current .mech-day-title { color: var(--mech-ink-0); font-weight: 500; }
.mech-day.is-current .mech-day-arrow { color: var(--mech-u-accent); opacity: 1; }

.mech-day.is-unlocked .mech-day-marker .mech-day-num { color: var(--mech-ink-2); }
.mech-day.is-unlocked .mech-day-title { color: var(--mech-ink-1); }

.mech-day.is-locked { cursor: default; }
.mech-day.is-locked .mech-day-marker .mech-day-num { color: var(--mech-ink-3); opacity: 0.6; }
.mech-day.is-locked .mech-day-title { color: var(--mech-ink-3); opacity: 0.6; }
.mech-day.is-locked .mech-day-arrow { opacity: 0.15; }
.mech-day.is-locked:hover .mech-day-title { color: var(--mech-ink-3); }

.mech-day:hover:not(.is-locked) .mech-day-title { color: var(--mech-ink-0); }

/* ---------------------------------------------------------------------------
   Blatt 17 · Kurs-Tag-Detail Mechanik
   Eigenstaendige Seite auf Panel-Ebene (kein Overlay). Die Blatt-17-Vorlage
   sagt: 'Blatt 17 ersetzt Step 0 aus dem alten openDay-Flow'. JS versteckt
   die Geschwister #reiseView/#reiseEntryFlow/#reiseSession beim Anzeigen.
   --------------------------------------------------------------------------- */

.kurs-tag-detail {
  /* width: 100% ist noetig, weil der Eltern-Container .breathwork-tab-panel
     ein Flex-Container mit align-items: center ist. Ohne explizite Breite
     schrumpft der Block auf Content-Breite und ignoriert die max-width der
     inneren .ktag-shell — genau das war der Grund, warum die Tagesuebersicht
     sichtbar schmaler wirkte als Kurs-Startseite und Kursuebersicht. */
  width: 100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(224, 184, 96, 0.03), transparent 50%),
    var(--mech-u-bg);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 4px 32px;
  font-family: var(--mech-font-body);
  color: var(--mech-ink-1);
  -webkit-font-smoothing: antialiased;
}

/* Alt-Klasse: .ktag-overlay wird nicht mehr geschrieben. Fallback-Regel
   erhaelt Vergleichbarkeit fuer Screens, die weiterhin auf die Klasse
   referenzieren koennten. */
.ktag-overlay {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(224, 184, 96, 0.03), transparent 50%),
    var(--mech-u-bg);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 4px 32px;
  font-family: var(--mech-font-body);
  color: var(--mech-ink-1);
  -webkit-font-smoothing: antialiased;
}
.ktag-shell {
  /* Auf 520px angehoben, damit Blatt 17 nicht schmaler wirkt als die
     Kurs-Startseite (.kurs-view = 520px) und Blatt 16, das im gleichen
     Container laeuft. Fruehere 420px erzeugten einen sichtbaren Sprung. */
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
}

.ktag-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--mech-ink-2);
  font-family: var(--mech-font-body);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 14px;
  letter-spacing: 0.005em;
  align-self: flex-start;
}
.ktag-back:hover { color: var(--mech-ink-0); }
.ktag-back svg { width: 14px; height: 14px; }

.ktag-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.ktag-context-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--mech-u-panel);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ktag-context-icon svg { width: 22px; height: 22px; }
.ktag-context-label {
  font-family: var(--mech-font-body);
  font-size: 13px;
  color: var(--mech-ink-2);
  margin: 0;
  letter-spacing: -0.003em;
}

.ktag-marker {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.ktag-marker-active { color: var(--mech-u-accent); }

.ktag-title {
  font-family: var(--mech-font-body);
  font-weight: 400;
  font-size: 22px;
  color: var(--mech-ink-0);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 24px;
}

.ktag-ablauf-eyebrow {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.ktag-ablauf {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.ktag-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border: none;
  border-bottom: 0.5px solid rgba(42, 52, 82, 0.5);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  width: 100%;
  border-radius: 0;
}
.ktag-step:last-child { border-bottom: none; }
.ktag-step:hover .ktag-step-name { color: var(--mech-u-accent); }

/* Abgeschlossene Kachel: Nummer wird zum Haken, Name gedaempft. */
.ktag-step.is-done .ktag-step-num {
  color: var(--mech-u-accent);
}
.ktag-step.is-done .ktag-step-name {
  color: var(--mech-ink-2);
}
.ktag-step.is-done .ktag-step-num::before {
  content: "\2713";
  display: inline-block;
  margin-right: 3px;
  color: var(--mech-u-accent);
}

/* Aktuelle Kachel: Nummer und Name gehen auf Gold. */
.ktag-step.is-current .ktag-step-num,
.ktag-step.is-current .ktag-step-name {
  color: var(--mech-u-accent);
}

.ktag-step-num {
  font-family: var(--mech-font-mono);
  font-size: 11px;
  color: var(--mech-ink-3);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  width: 18px;
  text-align: right;
}
.ktag-step-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ktag-step-name {
  font-family: var(--mech-font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--mech-ink-0);
  margin: 0;
  letter-spacing: -0.003em;
  transition: color 0.15s;
}
.ktag-step-desc {
  font-family: var(--mech-font-body);
  font-size: 12.5px;
  color: var(--mech-ink-2);
  margin: 0;
  line-height: 1.4;
}
.ktag-step-meta {
  font-family: var(--mech-font-mono);
  font-size: 10px;
  color: var(--mech-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ktag-bottom {
  margin-top: auto;
  padding-top: 20px;
}
.ktag-cta {
  width: 100%;
  padding: 14px 20px;
  background: var(--mech-u-accent);
  border: 0.5px solid var(--mech-u-accent);
  border-radius: 12px;
  color: var(--mech-u-bg);
  font-family: var(--mech-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.15s;
}
.ktag-cta:hover { background: #EAC475; }
.ktag-cta[disabled] { background: transparent; color: var(--mech-ink-3); border-color: var(--mech-line); cursor: default; }

/* ------------------------------------------------------------------ */
/* v5 · 06 Atemmodell Uebersicht (Blaetter 06-a Anfang, 06-b Eingespielt)
   PR 5 vom 04.08.2026. Klassen im Renderer renderAtemmodell und in den
   Helfern _renderEnvCheckCard/_renderResonanceCard/_renderBackupCard.
   Grundgerueste (Karten, Buttons, Titel) leihen wir von den bestehenden
   v5-Blockklassen; hier stehen die neuen v5-spezifischen Bausteine.       */
/* ------------------------------------------------------------------ */
.bf-am-progress {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}
.bf-am-progress p {
  margin: 0;
}
.bf-am-state-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bf-am-state-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
}
.bf-am-state-row:last-child {
  border-bottom: none;
}
.bf-am-state-row .bf-am-k {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.bf-am-state-row .bf-am-v {
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
}
.bf-am-state-row .bf-am-v-note {
  color: var(--color-text-faint);
  font-weight: 400;
  font-size: 11.5px;
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.bf-am-state-row .bf-am-v-warn {
  color: var(--color-text-warn, #C4A84A);
}
.bf-am-state-row .bf-am-v-ok {
  color: var(--color-text-ok, #5B8A72);
}
.bf-am-state-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.bf-am-state-hint b {
  color: var(--color-text);
  font-weight: 600;
}

/* =============================================================
 * PR 6 · 07 Auswertung v5 · Blatt oben · Session-Werkzeuge unten
 * Container: #bf-screen-analysis (freie Session Auswertung)
 * Weiche: bfAnGurtHint sichtbar wenn kein Brustgurt, sonst
 * bfAnHRVPanel + bfAnRSAPanel.
 * =============================================================*/
#bf-screen-analysis .bf-an-crumbs {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 20px;
  padding: 0 4px;
}
#bf-screen-analysis .bf-an-crumbs b {
  color: var(--color-primary);
  font-weight: 500;
}
#bf-screen-analysis .bf-an-head {
  padding: 0 4px;
  margin-bottom: 22px;
}
#bf-screen-analysis .bf-an-head h2 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
#bf-screen-analysis .bf-an-head .bf-an-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
#bf-screen-analysis .bf-an-panel {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  background: var(--color-surface);
  margin-bottom: 14px;
}
#bf-screen-analysis .bf-an-panel-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#bf-screen-analysis .bf-an-panel-label .bf-an-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Profil-Balken */
#bf-screen-analysis .bf-an-bars { margin: 8px 0; }
#bf-screen-analysis .bf-an-bar-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 4px;
}
#bf-screen-analysis .bf-an-bar {
  display: flex;
  height: 22px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--color-surface-2);
}
#bf-screen-analysis .bf-an-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
#bf-screen-analysis .bf-an-seg.ein,
#bf-screen-analysis .bf-an-seg.einplus { background: var(--color-inhale); }
#bf-screen-analysis .bf-an-seg.halten { background: var(--color-hold); }
#bf-screen-analysis .bf-an-seg.aus { background: var(--color-exhale); }
#bf-screen-analysis .bf-an-seg.pause { background: var(--color-surface-offset); }

/* Phase-Tabelle */
#bf-screen-analysis .bf-an-ptable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
}
#bf-screen-analysis .bf-an-ptable th {
  text-align: left;
  padding: 4px 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 400;
  border-bottom: 1px solid var(--color-border);
}
#bf-screen-analysis .bf-an-ptable th.n { text-align: right; }
#bf-screen-analysis .bf-an-ptable td {
  padding: 5px 0;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
#bf-screen-analysis .bf-an-ptable td.n {
  text-align: right;
  color: var(--color-text);
  font-weight: 500;
}
#bf-screen-analysis .bf-an-ptable tr:last-child td { border-bottom: 0; }
#bf-screen-analysis .bf-an-ptable td.phase {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot.ein,
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot.einplus { background: var(--color-inhale); }
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot.halten { background: var(--color-hold); }
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot.aus { background: var(--color-exhale); }
#bf-screen-analysis .bf-an-ptable td.phase .bf-an-dot.pause { background: var(--color-surface-offset); }
#bf-screen-analysis .bf-an-deviation {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}

/* Kohärenz */
#bf-screen-analysis .bf-an-coh-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
#bf-screen-analysis .bf-an-coh-ring {
  width: 72px; height: 72px;
  flex-shrink: 0;
  position: relative;
}
#bf-screen-analysis .bf-an-coh-ring svg {
  width: 72px; height: 72px;
  transform: rotate(-90deg);
}
#bf-screen-analysis .bf-an-coh-ring .bf-an-coh-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-primary);
}
#bf-screen-analysis .bf-an-coh-info .bf-an-coh-k {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
#bf-screen-analysis .bf-an-coh-info .bf-an-coh-rng {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--color-text-muted);
}
#bf-screen-analysis .bf-an-coh-info .bf-an-coh-cnt {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 3px;
}
#bf-screen-analysis .bf-an-coh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
#bf-screen-analysis .bf-an-coh-cell { text-align: center; }
#bf-screen-analysis .bf-an-coh-cell .bf-an-coh-v {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-text);
}
#bf-screen-analysis .bf-an-coh-cell .bf-an-coh-v.gold { color: var(--color-primary); }
#bf-screen-analysis .bf-an-coh-cell .bf-an-coh-l {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
}

/* HRV-Panel (nur mit Gurt) */
#bf-screen-analysis .bf-an-hrv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
#bf-screen-analysis .bf-an-hrv-row:last-of-type { border-bottom: 0; }
#bf-screen-analysis .bf-an-hrv-row .bf-an-hrv-k {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}
#bf-screen-analysis .bf-an-hrv-row .bf-an-hrv-k .bf-an-term {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text-faint);
  margin-left: 6px;
}
#bf-screen-analysis .bf-an-hrv-row .bf-an-hrv-v {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}
#bf-screen-analysis .bf-an-hrv-row .bf-an-hrv-v .bf-an-u {
  color: var(--color-text-faint);
  margin-left: 3px;
  font-weight: 400;
}
#bf-screen-analysis .bf-an-hrv-foot {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* RSA-Chart (SVG) */
#bf-screen-analysis .bf-an-rsa-chart {
  height: 140px;
  width: 100%;
  margin: 8px 0 4px;
  display: block;
}
#bf-screen-analysis .bf-an-rsa-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#bf-screen-analysis .bf-an-rsa-legend .bf-an-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#bf-screen-analysis .bf-an-rsa-legend .bf-an-dash {
  width: 8px; height: 2px;
}
#bf-screen-analysis .bf-an-rsa-legend .bf-an-dash.ein { background: var(--color-inhale); }
#bf-screen-analysis .bf-an-rsa-legend .bf-an-dash.halten { background: var(--color-hold); }
#bf-screen-analysis .bf-an-rsa-legend .bf-an-dash.aus { background: var(--color-exhale); }

/* Session-Werkzeuge (Weiter üben) — eigener Blatt-Block, sichtbar ohne Scrollen.
   Erklärt, welche Fortsetzung möglich ist, trägt Runden-Selektor und Absprung. */
#bf-screen-analysis .bf-an-tools {
  margin-top: 18px;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-text {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-cycles {
  margin-bottom: 16px;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-cycles-label {
  margin: 0 0 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#bf-screen-analysis .bf-an-tools .bf-guided-cycles {
  margin: 0;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-primary,
#bf-screen-analysis .bf-an-tools .bf-an-tools-secondary {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  border: 1px solid var(--color-primary);
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-primary:hover,
#bf-screen-analysis .bf-an-tools .bf-an-tools-primary:focus-visible {
  background: var(--color-primary-strong, var(--color-primary));
  outline: none;
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-secondary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
#bf-screen-analysis .bf-an-tools .bf-an-tools-secondary:hover,
#bf-screen-analysis .bf-an-tools .bf-an-tools-secondary:focus-visible {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  outline: none;
}

/* Foot */
#bf-screen-analysis .bf-an-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}
#bf-screen-analysis .bf-an-foot .bf-an-back-btn,
#bf-screen-analysis .bf-an-foot .bf-an-done-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
#bf-screen-analysis .bf-an-foot .bf-an-back-btn {
  color: var(--color-text-muted);
}
#bf-screen-analysis .bf-an-foot .bf-an-done-btn {
  color: var(--color-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Ende bf-an-* Block */

/* =========================================================
   v5-Blatt 05a Zustand a · Kalibrierung
   Rahmen ueber den bestehenden Kalibrier-Screen. Alle IDs
   bleiben, nur Struktur und Darstellung werden ausgetauscht.
   ========================================================= */
#bf-screen-calibrate.bf-cal-v5 {
  display: none;
  flex-direction: column;
  padding: 12px 20px 24px;
  gap: 0;
  align-items: center;
}
#bf-screen-calibrate.bf-cal-v5.active {
  display: flex;
}
/* Kinder auf Mobil-Breite kappen (Blatt-Referenz), aber horizontal ausfuellen */
#bf-screen-calibrate.bf-cal-v5 > * {
  width: 100%;
  max-width: 440px;
}

/* Kruemel */
#bf-screen-calibrate .bf-cal-crumbs {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 4px;
  margin-bottom: 18px;
}
#bf-screen-calibrate .bf-cal-crumbs b {
  color: var(--color-primary);
  font-weight: 500;
}

/* Signet */
#bf-screen-calibrate .bf-cal-signet {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
#bf-screen-calibrate .bf-cal-circle {
  width: 88px;
  height: 88px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform-origin: center;
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  #bf-screen-calibrate .bf-cal-circle.pulse {
    animation: bfCalV5Pulse 2.2s ease-in-out infinite;
  }
}
@keyframes bfCalV5Pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Kopf */
#bf-screen-calibrate .bf-cal-head {
  text-align: center;
  padding: 0 4px;
  margin-bottom: 22px;
}
#bf-screen-calibrate .bf-cal-kicker {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}
#bf-screen-calibrate .bf-cal-head .bf-screen-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
#bf-screen-calibrate .bf-cal-lede {
  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
  font-size: 13px;
  color: var(--color-text-dim);
  margin: 0 0 4px;
  line-height: 1.5;
}
#bf-screen-calibrate .bf-cal-sub-lede,
#bf-screen-calibrate .bf-cal-screen-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
  min-height: 14px;
}
#bf-screen-calibrate .bf-cal-sub-lede:empty,
#bf-screen-calibrate .bf-cal-screen-sub:empty {
  display: none;
}

/* Info-Panels */
#bf-screen-calibrate .bf-cal-panel {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 16px;
  background: var(--color-card, rgba(20,19,26,0.4));
  margin-bottom: 14px;
}
#bf-screen-calibrate .bf-cal-panel-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
#bf-screen-calibrate .bf-cal-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
  gap: 12px;
}
#bf-screen-calibrate .bf-cal-panel-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
#bf-screen-calibrate .bf-cal-panel-label {
  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
  font-size: 13px;
  color: var(--color-text-dim);
}
#bf-screen-calibrate .bf-cal-panel-value {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
}
#bf-screen-calibrate .bf-cal-panel-value:empty {
  display: none;
}
#bf-screen-calibrate .bf-cal-panel-value.bf-detection-label {
  min-height: 0;
}

/* Signal-Balken im Panel */
#bf-screen-calibrate .bf-cal-panel-bar.bf-signal-meter {
  display: block;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: 6px 0 0;
  overflow: hidden;
  max-width: none;
}
#bf-screen-calibrate .bf-cal-panel-bar .bf-signal-meter-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* Empfindlichkeits-Slider im Panel */
#bf-screen-calibrate .bf-cal-panel-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
  max-width: none;
}
#bf-screen-calibrate .bf-cal-panel-slider label {
  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
  font-size: 13px;
  color: var(--color-text-dim);
  white-space: nowrap;
}
#bf-screen-calibrate .bf-cal-panel-slider input[type=range] {
  flex: 1;
  accent-color: var(--color-primary);
}
#bf-screen-calibrate .bf-cal-panel-slider .val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 20px;
  text-align: center;
}

/* Warnung */
#bf-screen-calibrate .bf-cal-warn {
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(212, 184, 118, 0.08);
  color: var(--color-primary);
  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  text-align: center;
}

/* Foot */
#bf-screen-calibrate .bf-cal-foot {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
#bf-screen-calibrate .bf-cal-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-primary);
  color: var(--color-bg, #0a090c);
  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}
#bf-screen-calibrate .bf-cal-primary:hover,
#bf-screen-calibrate .bf-cal-primary:focus-visible {
  filter: brightness(1.06);
  outline: none;
}
#bf-screen-calibrate .bf-cal-tertiary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
#bf-screen-calibrate .bf-cal-tertiary:hover,
#bf-screen-calibrate .bf-cal-tertiary:focus-visible {
  color: var(--color-text);
  outline: none;
}
/* Ende bf-cal-v5 Block */

/* =========================================================
   PR 9 (04.08.2026) · v5 · 05a Zustand b · Session, Analyse laeuft
   Nur wenn #bf-screen-session .bf-sess-v5 traegt.
   ========================================================= */
#bf-screen-session.bf-sess-v5 {
  display: none;
  flex-direction: column;
  padding: 12px 20px 24px;
  gap: 0;
  align-items: center;
}
#bf-screen-session.bf-sess-v5.active {
  display: flex;
}
#bf-screen-session.bf-sess-v5 > * {
  width: 100%;
  max-width: 440px;
}

/* Alte v4-Elemente im v5-Modus verbergen. Engine schreibt weiter darauf. */
#bf-screen-session.bf-sess-v5 .bf-session-header,
#bf-screen-session.bf-sess-v5 .bf-phase-glow,
#bf-screen-session.bf-sess-v5 .bf-phase-indicator,
#bf-screen-session.bf-sess-v5 .bf-cycle-counter,
#bf-screen-session.bf-sess-v5 .bf-env-line,
#bf-screen-session.bf-sess-v5 .bf-waveform-container,
#bf-screen-session.bf-sess-v5 .bf-session-ready,
#bf-screen-session.bf-sess-v5 #bfCoherenceRing,
#bf-screen-session.bf-sess-v5 #bfSessionBtn,
#bf-screen-session.bf-sess-v5 #bfSessionMore {
  display: none !important;
}

/* Kruemel */
#bf-screen-session .bf-sess-crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 8px 0 20px;
  text-align: center;
  line-height: 1.5;
}
#bf-screen-session .bf-sess-crumbs b {
  font-weight: 500;
  color: var(--color-text);
}

/* Signet */
#bf-screen-session .bf-sess-signet {
  display: flex;
  justify-content: center;
  padding: 8px 0 20px;
}
#bf-screen-session .bf-sess-circle {
  width: 88px;
  height: 88px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  #bf-screen-session .bf-sess-circle {
    animation: bfSessV5Pulse 4s ease-in-out infinite;
  }
}
@keyframes bfSessV5Pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.03); opacity: 1; }
}

/* Kopf */
#bf-screen-session .bf-sess-head {
  text-align: center;
  padding: 0 0 24px;
}
#bf-screen-session .bf-sess-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}
#bf-screen-session .bf-sess-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
#bf-screen-session .bf-sess-lede {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Panel */
#bf-screen-session .bf-sess-panel {
  border: 0.5px solid var(--color-border-primary, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: transparent;
}
#bf-screen-session .bf-sess-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 0.5px solid var(--color-border-primary, rgba(255,255,255,0.08));
}
#bf-screen-session .bf-sess-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}
#bf-screen-session .bf-sess-panel-label {
  font-size: 13px;
  color: var(--color-text-muted);
}
#bf-screen-session .bf-sess-panel-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Foot */
#bf-screen-session .bf-sess-foot {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}
#bf-screen-session .bf-sess-tertiary {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  transition: color 0.15s ease;
}
#bf-screen-session .bf-sess-tertiary:hover,
#bf-screen-session .bf-sess-tertiary:focus-visible {
  color: var(--color-text);
  outline: none;
}

/* ===================================================================
 * 05.08.2026 PR 10 v5 · Zustand c · Warnung, Signal unterbrochen.
 * Zwei Karten-Container innerhalb `.bf-sess-v5`. Der Modus-Marker
 * `.bf-sess-mode-c` schaltet zwischen ihnen um. Ohne den Marker gilt
 * Zustand b (Standard).
 * =================================================================== */
#bf-screen-session.bf-sess-v5 .bf-sess-warn { display: none; }
#bf-screen-session.bf-sess-v5.bf-sess-mode-c .bf-sess-view { display: none; }
#bf-screen-session.bf-sess-v5.bf-sess-mode-c .bf-sess-warn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 440px;
  width: 100%;
}
#bf-screen-session.bf-sess-v5 .bf-sess-warn-icon {
  display: flex;
  justify-content: center;
  padding: 8px 0 20px;
}
#bf-screen-session.bf-sess-v5 .bf-sess-warn-icon svg {
  width: 48px;
  height: 48px;
}
/* Ende bf-sess-v5 Block */

/* ============================================================
   PR 11 (05a Zustand d, 05.08.2026) — Analyse-Ergebnis v5
   Alle alten Panels aus PR 6 innerhalb .bf-an-v5 verbergen und
   die neue Blatt-Struktur (Metadaten, Blueprint, 4 Kennzahlen,
   Tabelle, Diagnose, BLE, Rundenwahl, 3 Buttons) rendern.
   ============================================================ */
.bf-an-v5 .bf-an-crumbs,
.bf-an-v5 .bf-an-head,
.bf-an-v5 #bfAnProfilePanel,
.bf-an-v5 #bfAnHRVPanel,
.bf-an-v5 #bfAnRSAPanel,
.bf-an-v5 #bfAnCoherencePanel,
.bf-an-v5 #bfAnTools,
.bf-an-v5 .bf-an-foot {
  display: none;
}

.bf-an-v5 .bf-an-v5-frame {
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}

.bf-an-v5 .bf-an-v5-crumbs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8a8578);
  padding: 12px 6px 6px;
  margin-bottom: 8px;
}
.bf-an-v5 .bf-an-v5-crumbs b {
  color: var(--color-text-primary, #eae8e2);
  font-weight: 500;
}

.bf-an-v5 .bf-an-v5-head {
  padding: 0 6px 4px;
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin: 0 0 6px;
}
.bf-an-v5 .bf-an-v5-head h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-text-primary, #eae8e2);
  margin: 0 0 4px;
}
.bf-an-v5 .bf-an-v5-lede {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: var(--color-text-muted, #b9b5a6);
  margin: 0;
}

/* Metadaten-Grid */
.bf-an-v5 .bf-an-v5-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border, #26251f);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #1e1d17);
  border-right: 1px solid var(--color-border, #1e1d17);
  background: rgba(0,0,0,0.18);
}
.bf-an-v5 .bf-an-v5-meta-row:nth-child(2n) { border-right: 0; }
.bf-an-v5 .bf-an-v5-meta-row:nth-last-child(-n+2) { border-bottom: 0; }
.bf-an-v5 .bf-an-v5-meta-row .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
}
.bf-an-v5 .bf-an-v5-meta-row .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--color-text-primary, #eae8e2);
  font-weight: 500;
}

/* Verhältnis-Blueprint */
.bf-an-v5 .bf-an-v5-bp {
  border: 1px solid var(--color-border, #26251f);
  border-radius: 10px;
  padding: 14px 14px 12px;
  background: rgba(0,0,0,0.28);
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-bp-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.bf-an-v5 .bf-an-v5-bp-title .bf-an-v5-bp-sub {
  color: var(--color-text-muted, #8a8578);
}
.bf-an-v5 .bf-an-v5-bp-scale {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 6px;
  padding: 0 4px;
}
.bf-an-v5 .bf-an-v5-bp-track { display: block; }
.bf-an-v5 .bf-an-v5-bp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bf-an-v5 .bf-an-v5-bp-row:last-child { margin-bottom: 0; }
.bf-an-v5 .bf-an-v5-bp-lab {
  min-width: 84px;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-muted, #6d6a5f);
}
.bf-an-v5 .bf-an-v5-bp-lab b {
  color: var(--color-text-primary, #eae8e2);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.bf-an-v5 .bf-an-v5-bp-bar {
  position: relative;
  flex: 1;
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
.bf-an-v5 .bf-an-v5-bp-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-text-primary, #eae8e2);
  min-width: 0;
  overflow: hidden;
}
.bf-an-v5 .bf-an-v5-bp-seg.ein {
  background: linear-gradient(180deg, rgba(212,184,118,0.28), rgba(212,184,118,0.14));
}
.bf-an-v5 .bf-an-v5-bp-seg.aus {
  background: linear-gradient(180deg, rgba(142,168,138,0.28), rgba(142,168,138,0.14));
}
.bf-an-v5 .bf-an-v5-bp-target-line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 1px;
  background: var(--color-primary, #d4b876);
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}

/* Vier Kernkennzahlen */
.bf-an-v5 .bf-an-v5-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-metric {
  border: 1px solid var(--color-border, #26251f);
  border-radius: 10px;
  padding: 14px;
  background: rgba(0,0,0,0.28);
}
.bf-an-v5 .bf-an-v5-m-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 8px;
}
.bf-an-v5 .bf-an-v5-m-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--color-text-primary, #eae8e2);
  font-weight: 500;
  line-height: 1;
}
.bf-an-v5 .bf-an-v5-m-val .u {
  font-size: 12px;
  color: var(--color-text-muted, #8a8578);
  font-weight: 400;
  margin-left: 4px;
}
.bf-an-v5 .bf-an-v5-m-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-muted, #6d6a5f);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.bf-an-v5 .bf-an-v5-m-sub b {
  color: var(--color-primary, #d4b876);
  font-weight: 500;
}

/* Detail-Tabelle */
.bf-an-v5 .bf-an-v5-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-table th,
.bf-an-v5 .bf-an-v5-table td {
  text-align: right;
  padding: 10px 6px;
  border-bottom: 1px solid var(--color-border, #1e1d17);
  color: var(--color-text-primary, #eae8e2);
}
.bf-an-v5 .bf-an-v5-table th {
  color: var(--color-text-muted, #6d6a5f);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.bf-an-v5 .bf-an-v5-table td:first-child,
.bf-an-v5 .bf-an-v5-table th:first-child {
  text-align: left;
}
.bf-an-v5 .bf-an-v5-table td:first-child {
  color: var(--color-text-muted, #b9b5a6);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
}
.bf-an-v5 .bf-an-v5-table .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.bf-an-v5 .bf-an-v5-table .dot.ein { background: var(--color-primary, #d4b876); }
.bf-an-v5 .bf-an-v5-table .dot.aus { background: #8ea88a; }

/* Diagnose */
.bf-an-v5 .bf-an-v5-diag {
  padding: 14px 16px;
  border: 1px solid var(--color-border, #26251f);
  border-radius: 10px;
  background: rgba(0,0,0,0.32);
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-diag-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 8px;
}
.bf-an-v5 .bf-an-v5-diag-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.bf-an-v5 .bf-an-v5-diag-row .l {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: var(--color-text-muted, #b9b5a6);
}
.bf-an-v5 .bf-an-v5-diag-row .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--color-text-primary, #eae8e2);
  font-weight: 500;
}

/* Brustgurt-Sektion */
.bf-an-v5 .bf-an-v5-ble {
  border: 1px solid var(--color-border, #1e1d17);
  border-radius: 12px;
  padding: 16px;
  background: rgba(20, 19, 26, 0.4);
  margin-bottom: 18px;
}
.bf-an-v5 .bf-an-v5-ble-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8a8578);
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bf-an-v5 .bf-an-v5-ble-src {
  color: var(--color-text-muted, #6d6a5f);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.bf-an-v5 .bf-an-v5-ble-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.bf-an-v5 .bf-an-v5-ble-cell {
  border: 1px solid var(--color-border, #26251f);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.28);
}
.bf-an-v5 .bf-an-v5-ble-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 6px;
}
.bf-an-v5 .bf-an-v5-ble-term {
  color: var(--color-text-muted, #8a8578);
  letter-spacing: 0;
  font-size: 9px;
  margin-left: 4px;
}
.bf-an-v5 .bf-an-v5-ble-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--color-text-primary, #eae8e2);
  font-weight: 500;
}
.bf-an-v5 .bf-an-v5-ble-val .u {
  font-size: 11px;
  color: var(--color-text-muted, #8a8578);
  font-weight: 400;
}
.bf-an-v5 .bf-an-v5-coh {
  border-top: 1px solid var(--color-border, #26251f);
  padding-top: 12px;
  text-align: center;
}
.bf-an-v5 .bf-an-v5-coh-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 4px;
}
.bf-an-v5 .bf-an-v5-coh-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  color: var(--color-primary, #d4b876);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}
.bf-an-v5 .bf-an-v5-coh-note {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  color: var(--color-text-muted, #6d6a5f);
}

/* Rundenwahl */
.bf-an-v5 .bf-an-v5-cycles {
  margin-bottom: 14px;
  padding: 0 4px;
}
.bf-an-v5 .bf-an-v5-cycles-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6d6a5f);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.bf-an-v5 .bf-an-v5-cycles-sub {
  color: var(--color-text-muted, #8a8578);
}
.bf-an-v5 .bf-an-v5-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bf-an-v5 .bf-an-v5-chip {
  flex: 1;
  min-width: 56px;
  padding: 10px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-text-muted, #8a8578);
  background: transparent;
  border: 1px solid var(--color-border, #26251f);
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}
.bf-an-v5 .bf-an-v5-chip.active {
  border-color: var(--color-primary, #d4b876);
  color: var(--color-primary, #d4b876);
  background: rgba(212, 184, 118, 0.08);
}

/* Aktionen: 3 Buttons */
.bf-an-v5 .bf-an-v5-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 20px;
}
.bf-an-v5 .bf-an-v5-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--color-primary, #d4b876);
  color: #0a090c;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}
.bf-an-v5 .bf-an-v5-btn-primary .chev {
  font-family: 'JetBrains Mono', monospace;
}
.bf-an-v5 .bf-an-v5-btn-secondary {
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  color: var(--color-text-muted, #b9b5a6);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  border: 1px solid var(--color-border, #26251f);
  cursor: pointer;
}
.bf-an-v5 .bf-an-v5-btn-tertiary {
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  color: var(--color-text-muted, #8a8578);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
/* Ende bf-an-v5 Block */

/* =========================================================
   PR 12a (05b Zustand e, 05.08.2026)
   Gefuehrte Session laufend (v5) - Blatt 05b
   Overlay ueber bf-screen-guided; alte Planet-Elemente werden
   ausgeblendet. Blatt-Farben:
     Gold #d4b876 - Aus-Ton #8ea88a
     Text #eae8e2 / #b9b5a6 / #8a8578 / #6d6a5f
     Border #26251f / #1e1d17
   ========================================================= */

/* v5-Umschaltung: alte Guided-Elemente aus */
.bf-sess-guided-v5 .bf-session-header,
.bf-sess-guided-v5 .bf-guided-center,
.bf-sess-guided-v5 > div:not(.bfg-v5):not(.bf-session-end):not(.bf-hk-badge):not([id="bfGuidedV5"]) {
  display: none;
}
/* Der "Abbrechen/Beenden"-Streifen ganz oben ist ein anonymer div - v5 versteckt ihn ebenfalls, das v5-Overlay bringt einen eigenen Beenden-Button. */

.bfg-v5 {
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;
  color: #eae8e2;
}

.bfg-v5-crumbs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin-bottom: 20px;
  padding: 0 4px;
}

.bfg-v5-sess-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
  margin-bottom: 18px;
  gap: 12px;
}
.bfg-v5-tech {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #eae8e2;
  min-width: 0;
}
.bfg-v5-tech-name { display: block; }
.bfg-v5-tech-sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #6d6a5f;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 400;
}
.bfg-v5-duration {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.bfg-v5-dur-num {
  font-size: 18px;
  font-weight: 500;
  color: #eae8e2;
}
.bfg-v5-dur-cap {
  display: block;
  font-size: 9px;
  color: #6d6a5f;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.bfg-v5-phase-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.bfg-v5-phase-cell {
  border: 1px solid #26251f;
  border-radius: 8px;
  padding: 12px 10px;
  background: rgba(0,0,0,0.28);
  text-align: center;
}
.bfg-v5-phase-cell.active {
  border-color: #d4b876;
  background: rgba(212,184,118,0.08);
}
.bfg-v5-phase-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin-bottom: 6px;
  min-height: 11px;
}
.bfg-v5-phase-v {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #eae8e2;
}
.bfg-v5-phase-cell.active .bfg-v5-phase-v { color: #d4b876; }
.bfg-v5-phase-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #8a8578;
  margin-top: 4px;
  min-height: 12px;
}

.bfg-v5-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 300;
  color: #eae8e2;
  text-align: center;
  line-height: 1;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.bfg-v5-countdown-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5f;
  text-align: center;
  margin: 0 0 16px;
  min-height: 12px;
}

.bfg-v5-wave-panel {
  border: 1px solid #1e1d17;
  border-radius: 12px;
  padding: 16px;
  background: rgba(20, 19, 26, 0.4);
  margin-bottom: 18px;
}
.bfg-v5-wave-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
}
.bfg-v5-wave-sub {
  color: #6d6a5f;
  font-weight: 400;
}
.bfg-v5-wave-svg-wrap {
  position: relative;
  margin-bottom: 12px;
}
.bfg-v5-wave-svg-wrap svg {
  width: 100%;
  height: 180px;
  display: block;
}
.bfg-v5-wave-legend {
  display: flex;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #8a8578;
  padding-top: 12px;
  border-top: 1px solid #1e1d17;
}
.bfg-v5-wave-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bfg-v5-wave-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}
.bfg-v5-wave-swatch.soll {
  background: rgba(212,184,118,0.35);
  border: 1px solid rgba(212,184,118,0.7);
}
.bfg-v5-wave-swatch.ist {
  background: #eae8e2;
}

.bfg-v5-info-panel {
  border: 1px solid #1e1d17;
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(20, 19, 26, 0.4);
  margin-bottom: 18px;
}
.bfg-v5-info-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin: 0 0 14px;
}
.bfg-v5-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid #1e1d17;
}
.bfg-v5-info-row:first-of-type { border-top: 0; padding-top: 0; }
.bfg-v5-info-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: #b9b5a6;
}
.bfg-v5-info-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #eae8e2;
}

.bfg-v5-mini-signal {
  height: 3px;
  background: #1e1d17;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.bfg-v5-mini-signal-fill {
  display: block;
  height: 100%;
  background: #d4b876;
  border-radius: 2px;
  width: 0;
  transition: width 120ms linear;
}

.bfg-v5-end-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  color: #b9b5a6;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 400;
  border-radius: 8px;
  border: 1px solid #26251f;
  cursor: pointer;
  margin-bottom: 8px;
}
.bfg-v5-end-btn:hover { border-color: #3a382f; color: #eae8e2; }
/* Ende bfg-v5 Block */

/* =============================================================
   BLATT 07-a  ·  Session-Abschluss v5  (05.08.2026)
   Overlay in #bfGuidedEnd. Klassik-Elemente werden ausgeblendet,
   sobald #bfGuidedV5End sichtbar ist. Engine bleibt unangefasst.
   ============================================================= */

/* Klassik-Elemente im Guided-End ausblenden, wenn v5-Overlay aktiv ist.
   Wir schalten das ueber die Sichtbarkeit von #bfGuidedV5End: sobald der
   Renderer es einblendet, greifen diese Regeln. */
#bfGuidedEnd:has(> #bfGuidedV5End:not([style*="display:none"])) > h2[data-bft="session_done"],
#bfGuidedEnd:has(> #bfGuidedV5End:not([style*="display:none"])) > #bfImprovementBox,
#bfGuidedEnd:has(> #bfGuidedV5End:not([style*="display:none"])) > #bfGuidedContribution,
#bfGuidedEnd:has(> #bfGuidedV5End:not([style*="display:none"])) > #bfMoodAfterGuided,
#bfGuidedEnd:has(> #bfGuidedV5End:not([style*="display:none"])) > .bf-btn-group {
  display: none !important;
}

/* Overlay-Wrapper */
#bfGuidedV5End.bfgv5 {
  color: #eae8e2;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
#bfGuidedV5End .bfgv5-crumbs {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #6d6a5f; margin-bottom: 20px; padding: 0 4px;
}
#bfGuidedV5End .bfgv5-crumbs b { color: #d4b876; font-weight: 500; }
#bfGuidedV5End .bfgv5-head { padding: 0 4px; margin-bottom: 22px; }
#bfGuidedV5End .bfgv5-head h2 {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 24px;
  font-weight: 300; color: #eae8e2;
  margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.2;
}
#bfGuidedV5End .bfgv5-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #8a8578; letter-spacing: 0.02em; margin: 0;
}

/* Panels */
#bfGuidedV5End .bfgv5-panel {
  border: 1px solid #1e1d17; border-radius: 12px;
  padding: 16px; background: rgba(20, 19, 26, 0.42);
  margin-bottom: 14px;
}
#bfGuidedV5End .bfgv5-panel-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8578; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
#bfGuidedV5End .bfgv5-panel-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #6d6a5f; letter-spacing: 0.02em; text-transform: none;
}
#bfGuidedV5End .bfgv5-panel-note {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #8a8578; line-height: 1.6;
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid #1e1d17;
}

/* Ziel-Balken (kein Ist-Balken; Guided misst keine Ist-Ratios) */
#bfGuidedV5End .bfgv5-bars { margin: 8px 0; }
#bfGuidedV5End .bfgv5-bar-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6d6a5f; margin-bottom: 4px;
}
#bfGuidedV5End .bfgv5-bar {
  display: flex; height: 22px; width: 100%;
  border-radius: 4px; overflow: hidden;
  margin-bottom: 4px;
  background: #1e1d17;
}
#bfGuidedV5End .bfgv5-seg {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #eae8e2; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden;
}
#bfGuidedV5End .bfgv5-seg.ein { background: #7a5a3f; }
#bfGuidedV5End .bfgv5-seg.halten { background: #3f5878; }
#bfGuidedV5End .bfgv5-seg.aus { background: #5a7a5f; }
#bfGuidedV5End .bfgv5-seg.pause { background: #6b6152; }

/* Sessionabschluss-Panel */
#bfGuidedV5End .bfgv5-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid #1e1d17;
}
#bfGuidedV5End .bfgv5-row:last-of-type { border-bottom: 0; }
#bfGuidedV5End .bfgv5-row .k {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #b9b5a6;
}
#bfGuidedV5End .bfgv5-row .v {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #eae8e2; font-weight: 500;
}
#bfGuidedV5End .bfgv5-fallback {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #8a8578; line-height: 1.6;
}
#bfGuidedV5End .bfgv5-btn-ghost {
  display: block; width: 100%;
  margin-top: 12px; padding: 10px 12px;
  background: transparent; border: 1px solid #26251f;
  border-radius: 8px; color: #eae8e2;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  cursor: pointer;
}
#bfGuidedV5End .bfgv5-btn-ghost:hover { border-color: #3a382f; }

/* Gurt-Hinweis, statisch */
#bfGuidedV5End .bfgv5-gurt-hint {
  border: 1px dashed #26251f; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #6d6a5f; line-height: 1.5;
}
#bfGuidedV5End .bfgv5-gurt-hint b { color: #b9b5a6; font-weight: 500; }

/* Umgebungs-Hinweis, nur bei laut */
#bfGuidedV5End .bfgv5-env-hint {
  border: 1px dashed #4a3f2a; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #8a8578; line-height: 1.5;
}
#bfGuidedV5End .bfgv5-env-hint b { color: #d4b876; font-weight: 500; }

/* Nachmess-Angebot, Wortlaut aus Blatt 04 Phase A */
#bfGuidedV5End .bfgv5-remeas {
  border: 1px solid #26251f; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: rgba(20, 19, 26, 0.28);
}
#bfGuidedV5End .bfgv5-remeas-title {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 13px;
  color: #eae8e2; font-weight: 500; margin-bottom: 4px;
}
#bfGuidedV5End .bfgv5-remeas-desc {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #8a8578; letter-spacing: 0.02em;
  margin-bottom: 10px;
}
#bfGuidedV5End .bfgv5-remeas-btn {
  display: inline-block; padding: 8px 14px;
  background: transparent; border: 1px solid #d4b876;
  border-radius: 8px; color: #d4b876;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  cursor: pointer;
}

/* Fuss */
#bfGuidedV5End .bfgv5-foot {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid #1e1d17;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #8a8578; letter-spacing: 0.08em;
}
#bfGuidedV5End .bfgv5-foot-back { cursor: pointer; }
#bfGuidedV5End .bfgv5-foot-done {
  color: #d4b876; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}

/* --- v5 Blatt 07-b (mit Brustgurt): Kohärenz, HRV, RSA-Kurve --- */
/* Panel-Grundfarben und Rahmen erben von .bfgv5-panel. */

/* Kohärenz-Ring + Zellen */
#bfGuidedV5End .bfgv5-coh-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px;
}
#bfGuidedV5End .bfgv5-coh-ring {
  width: 72px; height: 72px; flex-shrink: 0;
  position: relative;
}
#bfGuidedV5End .bfgv5-coh-ring svg {
  width: 72px; height: 72px; transform: rotate(-90deg);
}
#bfGuidedV5End .bfgv5-coh-ring .val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 22px;
  font-weight: 300; color: #d4b876;
}
#bfGuidedV5End .bfgv5-coh-info .k {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a8578; margin-bottom: 3px;
}
#bfGuidedV5End .bfgv5-coh-info .rng {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: #b9b5a6;
}
#bfGuidedV5End .bfgv5-coh-info .cnt {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #6d6a5f; margin-top: 3px;
}
#bfGuidedV5End .bfgv5-coh-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-top: 8px;
  padding-top: 12px; border-top: 1px solid #1e1d17;
}
#bfGuidedV5End .bfgv5-coh-cell { text-align: center; }
#bfGuidedV5End .bfgv5-coh-cell .v {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 20px;
  font-weight: 300; color: #eae8e2;
}
#bfGuidedV5End .bfgv5-coh-cell .v.gold { color: #d4b876; }
#bfGuidedV5End .bfgv5-coh-cell .l {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6d6a5f; margin-top: 3px;
}

/* HRV-Zeilen */
#bfGuidedV5End .bfgv5-hrv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid #1e1d17;
}
#bfGuidedV5End .bfgv5-hrv-row:last-of-type { border-bottom: 0; }
#bfGuidedV5End .bfgv5-hrv-row .k {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
  color: #b9b5a6;
}
#bfGuidedV5End .bfgv5-hrv-row .k .term {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #6d6a5f; margin-left: 6px;
}
#bfGuidedV5End .bfgv5-hrv-row .v {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #eae8e2; font-weight: 500;
}
#bfGuidedV5End .bfgv5-hrv-row .v .u {
  color: #6d6a5f; margin-left: 3px; font-weight: 400;
}
#bfGuidedV5End .bfgv5-hrv-foot {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #6d6a5f; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #1e1d17; text-align: center;
}

/* RSA-Kurve */
#bfGuidedV5End .bfgv5-rsa-chart {
  height: 140px; width: 100%;
  margin: 8px 0 4px;
}
#bfGuidedV5End .bfgv5-rsa-legend {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #8a8578; letter-spacing: 0.06em; text-transform: uppercase;
}
#bfGuidedV5End .bfgv5-rsa-legend .item {
  display: inline-flex; align-items: center; gap: 5px;
}
#bfGuidedV5End .bfgv5-rsa-legend .dot { width: 8px; height: 2px; }
#bfGuidedV5End .bfgv5-rsa-legend .dot.ein { background: #b57b52; }
#bfGuidedV5End .bfgv5-rsa-legend .dot.halten { background: #6a8ab5; }
#bfGuidedV5End .bfgv5-rsa-legend .dot.aus { background: #8ab08e; }
/* Ende bfgv5 Block */

/* =====================================================================
   v5-Blatt 03-a · Stimmungs-Check · Vor der Messung (PR 14, 05.08.2026)
   Wurzel: .bf-mood-intro-v5 auf #bf-screen-mood-intro.
   Farben: bg #0d0d10 (Universum), Gold #d4b876, Grautoene wie im Blatt.
   ===================================================================== */
.bf-mood-intro-v5 {
  padding: 40px 32px 32px;
}
.bf-mood-intro-v5 .bfmi-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.bf-mood-intro-v5 .bfmi-crumb-sep { color: #38352c; }
.bf-mood-intro-v5 .bfmi-crumb-cur { color: #d4b876; }

.bf-mood-intro-v5 .bfmi-probe {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  color: #d4b876;
}

.bf-mood-intro-v5 .bfmi-head {
  text-align: center;
  margin: 24px 0 28px;
}
.bf-mood-intro-v5 .bfmi-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin: 0 0 12px;
}
.bf-mood-intro-v5 .bfmi-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #eae8e2;
  margin: 0 0 12px;
  line-height: 1.25;
  text-align: center;
}
.bf-mood-intro-v5 .bfmi-lede {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #8a8578;
  letter-spacing: 0.02em;
  margin: 0;
}

.bf-mood-intro-v5 .bfmi-desc {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  color: #b9b5a6;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 28px;
  text-align: center;
}

.bf-mood-intro-v5 .bfmi-cta {
  display: flex;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #d4b876;
  background: transparent;
  color: #d4b876;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.bf-mood-intro-v5 .bfmi-cta:hover,
.bf-mood-intro-v5 .bfmi-cta:active {
  background: rgba(212, 184, 118, 0.06);
}
.bf-mood-intro-v5 .bfmi-cta-arr {
  font-size: 18px;
  line-height: 1;
}

.bf-mood-intro-v5 .bfmi-consent {
  margin: 24px auto 0;
  max-width: 380px;
  padding: 14px 18px;
  border: 1px solid #26251f;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8578;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bf-mood-intro-v5 .bfmi-consent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4b876;
  margin-top: 5px;
  flex-shrink: 0;
}
/* Ende Blatt 03-a Block */

/* =====================================================================
   v5-Blatt 03-b · Stimmungs-Check · Waehrend der Messung
   (PR 15, 05.08.2026)
   Wurzel: .bf-mood-v5 auf #bf-screen-mood-check.
   Strategie: Klassik-Elemente bleiben, weil die Engine sie beschreibt.
   Wir blenden sie aus und stylen die zwei Kern-Elemente (bfMoodTimer,
   bfMoodTimerLabel) zum v5-Layout um. Zusatz-Container (Kruemel, Signet,
   Hinweis, dezenter Cancel) sind neu.
   ===================================================================== */
.bf-mood-v5 {
  padding: 40px 32px 32px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Kruemel */
.bf-mood-v5 .bfmv5-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.bf-mood-v5 .bfmv5-crumb-sep { color: #38352c; }
.bf-mood-v5 .bfmv5-crumb-cur { color: #d4b876; }

/* Kleines Signet */
.bf-mood-v5 .bfmv5-probe {
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  color: #d4b876;
  opacity: 0.5;
}

/* Klassik-Elemente ausblenden, die im v5 nicht sichtbar sein sollen */
.bf-mood-v5 #bfHKBadgeMood,
.bf-mood-v5 > .bf-screen-title,
.bf-mood-v5 > #bfMoodCheckSubtitle,
.bf-mood-v5 > .bf-screen-subtitle,
.bf-mood-v5 .bf-mood-planet-wrap,
.bf-mood-v5 .breathing-circle,
.bf-mood-v5 .bf-phase-text,
.bf-mood-v5 .bf-cycle-dots,
.bf-mood-v5 .bf-cycle-counter,
.bf-mood-v5 .bf-mood-metrics,
.bf-mood-v5 .bf-signal-bar,
.bf-mood-v5 [data-bft="signal_strength"] {
  display: none !important;
}
/* Container um den Planet-Kreis (inline-flex-Wrapper) verstecken */
.bf-mood-v5 > div[style*="display:flex;justify-content:center;margin-bottom:12px"],
.bf-mood-v5 > div[style*="text-align:center;margin-bottom:10px"] {
  display: none !important;
}

/* Timer zu 128px Mono-Countdown umgestylt */
.bf-mood-v5 #bfMoodTimer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 128px;
  font-weight: 300;
  color: #eae8e2;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 40px 0 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
}
/* Timer-Label als Einheits-Kicker unter dem Countdown */
.bf-mood-v5 #bfMoodTimerLabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5f;
  text-align: center;
  margin: 20px 0 0;
  padding: 0;
  background: transparent;
}

/* Hinweis-Zeile unter dem Countdown */
.bf-mood-v5 .bfmv5-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6d6a5f;
  text-align: center;
  margin-top: 60px;
  letter-spacing: 0.02em;
}

/* Cancel als dezenter Fuss-Link statt gross Button */
.bf-mood-v5 .bfmv5-cancel {
  background: transparent !important;
  border: none !important;
  color: #6d6a5f !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.bf-mood-v5 .bfmv5-cancel:hover {
  color: #8a8578 !important;
  background: transparent !important;
}
/* Ende Blatt 03-b Block */

/* =====================================================================
   v5-Blatt 03-c · Stimmungs-Check · Nach der Messung (Ergebnis)
   (PR 16, 05.08.2026)
   Wurzel: .bf-mood-v5-result auf #bf-screen-mood-result.
   Ansatz: Engine-Elemente bleiben, werden umgestylt oder ausgeblendet.
   Sechs-Kennzahl-Grid wird via Flex-Column mit order-Werten erzeugt.
   ===================================================================== */
.bf-mood-v5-result {
  padding: 32px 24px 32px;
  background: #0d0d10;
  color: #eae8e2;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Back-Link (Ist-Element) an v5-Ton anpassen */
.bf-mood-v5-result #bfMoodBackLink {
  color: #6d6a5f !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

/* Kruemel */
.bf-mood-v5-result .bfmv5r-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.bf-mood-v5-result .bfmv5r-crumb-sep { color: #38352c; }
.bf-mood-v5-result .bfmv5r-crumb-cur { color: #d4b876; }

/* Result-Head */
.bf-mood-v5-result .bfmv5r-head {
  text-align: center;
  padding: 8px 0 24px;
  border-bottom: 1px solid #26251f;
  margin-bottom: 24px;
}
.bf-mood-v5-result .bfmv5r-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin: 0 0 12px;
}
.bf-mood-v5-result .bfmv5r-title {
  font-size: 20px;
  font-weight: 300;
  color: #eae8e2;
  margin: 0;
  line-height: 1.3;
}

/* Ist-Titel, Emoji, Zustands-Wort, Beschreibung ausblenden */
.bf-mood-v5-result > .bf-screen-title,
.bf-mood-v5-result #bfMoodEmoji,
.bf-mood-v5-result #bfMoodState,
.bf-mood-v5-result #bfMoodDesc,
.bf-mood-v5-result > .bf-mood-or,
.bf-mood-v5-result > [data-bft="recommendation"] {
  display: none !important;
}

/* Kennzahl-Grid: Flex-Column, order steuert Reihenfolge */
.bf-mood-v5-result #bfMoodDetailGrid {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #26251f;
  border-bottom: 1px solid #26251f;
  padding: 4px 0;
  margin: 0 0 24px !important;
  grid-template-columns: none !important;
}
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 !important;
  border-bottom: 1px solid #1e1d17;
  background: transparent !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  text-align: left !important;
  margin: 0 !important;
}
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail:last-child {
  border-bottom: none !important;
}
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #8a8578 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 !important;
}
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail-val {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  color: #eae8e2 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: right !important;
}
/* Reihenfolge im Grid: Engine schreibt vier Zeilen in fester Ordnung:
     nth-child(1) = Frequenz
     nth-child(2) = Verhaeltnis
     nth-child(3) = Regelmaessigkeit
     nth-child(4) = Tiefe
   Der v5-Skript-Block fuegt zwei Zeilen (Einatmung=order:1, Ausatmung=order:2) hinzu.
   Blatt-Reihenfolge: Frequenz, Einatmung, Ausatmung, Verhaeltnis, Tiefe, Regelmaessigkeit. */
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail:nth-child(1) { order: 0; }  /* Frequenz */
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail:nth-child(2) { order: 3; }  /* Verhaeltnis */
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail:nth-child(3) { order: 5; }  /* Regelmaessigkeit */
.bf-mood-v5-result #bfMoodDetailGrid .bf-mood-detail:nth-child(4) { order: 4; }  /* Tiefe */

/* Vergleich Vor/Nach: bleibt in seiner eigenen Optik, wird in 04-c gebaut */
.bf-mood-v5-result .bf-mood-compare {
  margin-bottom: 24px;
}

/* Empfehlungs-Zeile: Gold-Rand oben, monochromer Rahmen */
.bf-mood-v5-result #bfMoodRecCard {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #d4b876 !important;
  border-bottom: 1px solid #26251f !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
}
.bf-mood-v5-result #bfMoodRecCard::before {
  content: attr(data-kicker);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b876;
  margin-bottom: 12px;
}
.bf-mood-v5-result #bfMoodRecCard::after {
  content: "›";
  position: absolute;
  right: 4px;
  bottom: 16px;
  color: #d4b876;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
}
.bf-mood-v5-result #bfMoodRecName {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #eae8e2 !important;
  margin: 0 0 4px !important;
  padding-right: 28px;
}
.bf-mood-v5-result #bfMoodRecDesc {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #8a8578 !important;
  margin: 0 !important;
  padding-right: 28px;
  line-height: 1.5;
}

/* Sekundaerer Weg (choose_other) als Text-Link */
.bf-mood-v5-result .bf-btn-group {
  text-align: center;
  margin: 24px 0 0 !important;
}
.bf-mood-v5-result .bfmv5r-secondary {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dotted #38352c !important;
  color: #8a8578 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 2px 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.bf-mood-v5-result .bfmv5r-secondary:hover {
  color: #b9b5a6 !important;
  border-bottom-color: #6d6a5f !important;
  background: transparent !important;
}

/* Nachmessung-Vermerk */
.bf-mood-v5-result .bfmv5r-repeat {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #26251f;
  text-align: center;
}
.bf-mood-v5-result .bfmv5r-repeat-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin: 0 0 8px;
}
.bf-mood-v5-result .bfmv5r-repeat-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6d6a5f;
  margin: 0;
  line-height: 1.5;
}
/* Nachmessung nur bei Pre-Messung sichtbar; die Engine setzt is-post
   (siehe biofeedback.js) beim Vergleich \u2014 dann verstecken. */
.bf-mood-v5-result.is-post .bfmv5r-repeat {
  display: none;
}
/* Ende Blatt 03-c Block */

/* =========================================================
   Stimmungs-Check v5 · Blatt 04-a — Nachmess-Angebot
   05.08.2026 (PR 17)

   Erweitert den bestehenden .bfgv5-remeas-Block im v5-End-Overlay
   zum vollen Blatt-04-a-Layout: Signet, Kicker, Titel, Lede,
   Baseline-Grid mit vier Vormess-Werten, Gold-CTA, Skip-Link.

   Der Anker (id="bfGuidedV5Remeas") wird von _renderGuidedV5End()
   in biofeedback.js:7462 abhaengig von _moodPreResult ein-/ausgeblendet
   — die Engine bleibt unangetastet.
   ========================================================= */

#bfGuidedV5End .bfgv5-remeas.bfmv5-offer {
  border: 1px solid #26251f;
  border-radius: 16px;
  padding: 24px 22px 22px;
  margin-bottom: 14px;
  background: rgba(20, 19, 26, 0.28);
  text-align: center;
}

/* Signet zentriert oben */
#bfGuidedV5End .bfmv5-offer-signet {
  display: block;
  margin: 4px auto 16px;
  width: 96px;
  height: 96px;
  color: #d4b876;
}

/* Kicker "Session abgeschlossen · 5 Min" (aus i18n) */
#bfGuidedV5End .bfmv5-offer-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin: 0 0 12px;
}

/* Titel des Angebots — v5-Look, ueberschreibt den kleinen Ist-Titel */
#bfGuidedV5End .bfgv5-remeas.bfmv5-offer .bfgv5-remeas-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #eae8e2;
  line-height: 1.3;
  margin: 0 0 10px;
}

/* Lede "Mikrofon · 30 s · Delta" */
#bfGuidedV5End .bfgv5-remeas.bfmv5-offer .bfgv5-remeas-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #8a8578;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

/* Baseline-Block — vier Vormess-Werte als kompaktes Grid */
#bfGuidedV5End .bfmv5-offer-baseline {
  border-top: 1px solid #26251f;
  border-bottom: 1px solid #26251f;
  padding: 14px 0;
  margin: 0 0 20px;
  text-align: center;
}
#bfGuidedV5End .bfmv5-offer-baseline-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin: 0 0 12px;
}
#bfGuidedV5End .bfmv5-offer-baseline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
#bfGuidedV5End .bfmv5-offer-bl-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d6a5f;
  margin-bottom: 4px;
}
#bfGuidedV5End .bfmv5-offer-bl-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #b9b5a6;
}

/* Gold-CTA — Vollbreite, deutlich */
#bfGuidedV5End .bfgv5-remeas.bfmv5-offer .bfgv5-remeas-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid #d4b876;
  background: transparent;
  color: #d4b876;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms ease;
}
#bfGuidedV5End .bfgv5-remeas.bfmv5-offer .bfgv5-remeas-btn:hover {
  background: rgba(212, 184, 118, 0.06);
}

/* Skip-Link — "jetzt nicht" */
#bfGuidedV5End .bfmv5-offer-skip {
  margin-top: 16px;
  text-align: center;
}
#bfGuidedV5End .bfmv5-offer-skip a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8578;
  text-decoration: none;
  border-bottom: 1px dotted #38352c;
  padding-bottom: 2px;
  cursor: pointer;
}
#bfGuidedV5End .bfmv5-offer-skip a:hover {
  color: #b9b5a6;
}

/* =========================================================
   Stimmungs-Check v5 · Blatt 04-c — Vergleich
   05.08.2026 (PR 18)

   Aktiv bei .bf-mood-v5-result.is-post (Wurzel-Klasse wird
   vom inline-Script in www/index.html gesetzt, sobald
   #bfMoodCompare sichtbar und gefuellt ist).

   Der Compare-Block wird zu vier Delta-Zeilen: Label oben,
   Vor→Nach mittig mit Gold-Pfeil, darunter eine Δ-Zeile mit
   der berechneten Differenz. Kein Engine-Eingriff — die Δ wird
   client-seitig aus den from/to-Textinhalten gerechnet.
   ========================================================= */

/* Pre-/Post-Krumel und -Head umschalten (Standard: pre sichtbar). */
.bf-mood-v5-result .bfmv5r-crumb-post,
.bf-mood-v5-result .bfmv5r-head-post {
  display: none;
}
.bf-mood-v5-result.is-post .bfmv5r-crumb-pre,
.bf-mood-v5-result.is-post .bfmv5r-head-pre {
  display: none;
}
.bf-mood-v5-result.is-post .bfmv5r-crumb-post {
  display: block;
}
.bf-mood-v5-result.is-post .bfmv5r-head-post {
  display: block;
}

/* Im Post-Modus alles ausblenden, was nicht Teil von 04-c ist:
   Emoji, State-Chip, Beschreibung, Detail-Grid, Rec-Card,
   "recommendation"-Zeile, "oder"-Zeile, Sekundaerbutton,
   der klassische H1, Upsell. */
.bf-mood-v5-result.is-post > .bf-screen-title,
.bf-mood-v5-result.is-post #bfMoodEmoji,
.bf-mood-v5-result.is-post #bfMoodState,
.bf-mood-v5-result.is-post #bfMoodDesc,
.bf-mood-v5-result.is-post #bfMoodDetailGrid,
.bf-mood-v5-result.is-post #bfMoodRecCard,
.bf-mood-v5-result.is-post #bfMoodUpsell,
.bf-mood-v5-result.is-post > [data-bft="recommendation"],
.bf-mood-v5-result.is-post > .bf-mood-or,
.bf-mood-v5-result.is-post .bf-btn-group,
.bf-mood-v5-result.is-post > .bf-mood-or {
  display: none;
}

/* Compare-Block als offener Block. Die klassische Card-Optik
   wird ueberlagert. */
.bf-mood-v5-result.is-post .bf-mood-compare {
  display: block !important;
  background: transparent;
  border: none;
  padding: 0;
  margin: 24px 0 0 0;
}

/* Ehemaliger Titel "Vorher · nachher" wird zur Kopfzeile mit
   Baseline/Nach-Spalten ueber den Werten. */
.bf-mood-v5-result.is-post .bf-mood-compare-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  position: relative;
  padding: 0;
  margin: 0 0 12px 0;
  border-bottom: 0.5px solid #26251f;
  min-height: 20px;
}
.bf-mood-v5-result.is-post .bf-mood-compare-title::before,
.bf-mood-v5-result.is-post .bf-mood-compare-title::after {
  position: absolute;
  bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8578;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bf-mood-v5-result.is-post .bf-mood-compare-title::before {
  content: "Baseline";
  left: 0;
}
.bf-mood-v5-result.is-post .bf-mood-compare-title::after {
  content: "nach";
  right: 0;
}

/* Zeile: Label oben, Wert-Paar mittig, Δ darunter. Die Engine
   schreibt die drei Spannen in einer Row (Label, Pair, ...).
   Wir bauen die Grid-Struktur per Flow. */
.bf-mood-v5-result.is-post .bf-mood-compare-row {
  display: block;
  padding: 16px 0;
  border-bottom: 0.5px solid #1e1d17;
  margin: 0;
}
.bf-mood-v5-result.is-post .bf-mood-compare-row:last-child {
  border-bottom: none;
}
.bf-mood-v5-result.is-post .bf-mood-compare-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #8a8578;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bf-mood-v5-result.is-post .bf-mood-compare-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.bf-mood-v5-result.is-post .bf-mood-compare-from,
.bf-mood-v5-result.is-post .bf-mood-compare-to {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 400;
  color: #eae8e2;
}
.bf-mood-v5-result.is-post .bf-mood-compare-from {
  text-align: left;
}
.bf-mood-v5-result.is-post .bf-mood-compare-to {
  text-align: right;
}
.bf-mood-v5-result.is-post .bf-mood-compare-arrow {
  color: #d4b876;
  font-size: 16px;
  text-align: center;
}
/* Δ-Zeile, vom inline-Script eingehaengt. */
.bf-mood-v5-result.is-post .bfmv5c-diff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6d6a5f;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Note-Absatz: die Engine setzt bei Silent-Fall (no_pre/no_post)
   eine bf-mood-compare-note. Bei 04-c blenden wir die Engine-Note
   aus und zeigen unsere eigene Fussnote (siehe unten). */
.bf-mood-v5-result.is-post .bf-mood-compare .bf-mood-compare-note {
  display: none;
}

/* Fussnote 04-c (im HTML als bfmv5c-footnote, nur bei is-post). */
.bfmv5c-footnote {
  display: none;
}
.bf-mood-v5-result.is-post .bfmv5c-footnote {
  display: block;
  padding: 16px 0;
  border-top: 0.5px solid #1e1d17;
  margin-top: 24px;
}
.bf-mood-v5-result.is-post .bfmv5c-footnote-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 6px;
}
.bf-mood-v5-result.is-post .bfmv5c-footnote-text {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #b9b5a6;
  margin: 0;
}

/* Done-Zeile 04-c: Gold-Rand oben, klickbar, chevron rechts. */
.bfmv5c-done {
  display: none;
}
.bf-mood-v5-result.is-post .bfmv5c-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 24px;
  border-top: 1px solid #d4b876;
  margin-top: 16px;
  cursor: pointer;
}
.bf-mood-v5-result.is-post .bfmv5c-done-name {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #eae8e2;
  letter-spacing: -0.01em;
}
.bf-mood-v5-result.is-post .bfmv5c-done-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8578;
  margin-top: 4px;
}
.bf-mood-v5-result.is-post .bfmv5c-done-chev {
  font-size: 20px;
  color: #d4b876;
  padding-left: 12px;
}

/* =========================================================================
   Biofeedback v5 · Blatt 02 — Uebersicht (Deckblatt)
   05.08.2026, PR 19 · nur Universum-Theme, Engine unangetastet.
   Der Screen #bf-screen-select traegt .bf-select-v5 und blendet die alten
   Cards aus, das v5-Cover und die Plates uebernehmen. Die Techniken werden
   weiter von buildTechGrid() (biofeedback.js:2957) gerendert; ein Inline-
   Script schreibt data-bfsel-role/-ratio in .bf-tech-card. CSS macht daraus
   Werkzeug-Zeilen.
   ========================================================================= */

/* --- Wrapper ------------------------------------------------------------ */
/* Flex-Container mit order-Reihenfolge, damit die Kalibrier-Plate im HTML
   vor dem Technik-Grid stehen kann (Test in biofeedback-atemmodell-ux),
   optisch aber danach erscheint.
   Wichtig: nur wenn der Screen .active ist. Sonst ueberschreibt display:flex
   die Grundregel .bf-screen { display:none }, und das Deckblatt bleibt
   unter jedem Nachfolge-Screen (z.B. Atemmodell) sichtbar (Bug 06.08.2026). */
.bf-select-v5.active {
  /* Kein eigener background — der Grund kommt von
     body.bf-select-cover-active #main-content, damit der Verlauf unter
     dem Header ueber die volle Breite durchgeht und nicht am Container
     abgeschnitten wird. */
  color: #eae8e2;
  padding: 24px 24px 40px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.bf-select-v5 > a[onclick*="goBackToApp"] { order: 0; }
.bf-select-v5 > .bfsel-cover         { order: 1; }
.bf-select-v5 > #bfsel-tools         { order: 2; }
.bf-select-v5 > .bfsel-plate-cal     { order: 3; }
.bf-select-v5 > .bfsel-foot          { order: 4; }

/* Zurueck-Chevron in Mono-Grau. */
.bf-select-v5 > a[onclick*="goBackToApp"] {
  color: #6d6a5f !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 40px !important;
}

/* --- Cover-Kopf --------------------------------------------------------- */
.bf-select-v5 .bfsel-cover {
  text-align: center;
  padding: 40px 24px 48px;
  border-bottom: 1px solid #26251f;
  margin-bottom: 40px;
}
.bf-select-v5 .bfsel-cover-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 32px;
}
.bf-select-v5 .bfsel-signet {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 32px;
  color: #d4b876;
}
.bf-select-v5 .bfsel-signet .ring-outer { opacity: 0.30; }
.bf-select-v5 .bfsel-signet .ring-mid   { opacity: 0.55; }
.bf-select-v5 .bfsel-signet .ring-inner { opacity: 0.80; }
.bf-select-v5 .bfsel-signet .cross      { opacity: 0.35; }
.bf-select-v5 .bfsel-signet .core       { opacity: 1; }
.bf-select-v5 .bfsel-cover-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  color: #eae8e2;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.bf-select-v5 .bfsel-cover-title em {
  font-style: normal;
  color: #d4b876;
}
.bf-select-v5 .bfsel-cover-lede {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 32px;
}
.bf-select-v5 .bfsel-cover-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #d4b876;
  color: #0d0d10;
  border: none;
  border-radius: 2px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  margin-bottom: 16px;
}
.bf-select-v5 .bfsel-cover-open:hover { background: #c9ad6d; }
.bf-select-v5 .bfsel-cover-arr {
  font-size: 15px;
  line-height: 1;
}
.bf-select-v5 .bfsel-cover-below {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: #8a8578;
}
/* 07.08.2026 (PR 31, Befund 06): frueher stand hier ein <a>-Selektor mit
   Unterstrich und Hover-Aufhellung. Der Link wurde ausgebaut (er landete auf
   der Startseite, weil der Router den Hash-Anker als View-Wechsel las). Der
   zweite Halbsatz ist jetzt reiner Text — selbe Farbe wie ein frueherer
   Ruhe-Link, ohne Unterstrich, ohne Hover. Chevron ist gedaempft daneben. */
.bf-select-v5 .bfsel-cover-below [data-bft="bf.select.cover.or_b"] {
  color: #b9b5a6;
}
.bf-select-v5 .bfsel-cover-below-arr {
  color: #8a8578;
  margin-left: 4px;
  display: inline-block;
  vertical-align: baseline;
}

/* Alte Struktur im v5-Modus ausblenden.
   Der Selektor greift auf :has() zurueck (Chrome/Safari/FF 121+ okay,
   auch iOS 15.4+). Fuer Legacy blenden wir den bfMoodCheckCard direkt aus
   und decken den mic_hint- und BLE-Row-Container ueber ihre Kindelemente ab. */
.bf-select-v5 > .bf-screen-title,
.bf-select-v5 > .bf-screen-subtitle,
.bf-select-v5 > #bfMoodCheckCard {
  display: none !important;
}
.bf-select-v5 > div:has(> p[data-bft="mic_hint"]),
.bf-select-v5 > div:has(> #bfBLEPanel),
.bf-select-v5 > div:has(> #bfWatchPanel) {
  display: none !important;
}

/* --- Plates ------------------------------------------------------------- */
.bf-select-v5 .bfsel-plate { margin-bottom: 40px; }
.bf-select-v5 .bfsel-plate-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5f;
  padding-bottom: 12px;
  border-bottom: 1px solid #26251f;
  margin-bottom: 4px;
}

/* --- Werkzeuge (Techniken) ---------------------------------------------- */
/* Techniken-Grid im v5-Modus als Zeilenstapel. Die Engine erzeugt weiterhin
   .bf-tech-card mit .bf-tech-card-name, .bf-tech-card-desc, .bf-tech-card-ratio.
   Wir blenden desc und ratio-Chips aus und zeigen Zweck-Wort und Verhaeltnis
   aus data-bfsel-role/-ratio ueber ::after/::before. */
.bf-select-v5 #bfTechGrid {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.bf-select-v5 #bfTechGrid .bf-tech-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #26251f;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  min-height: 0;
}
.bf-select-v5 #bfTechGrid .bf-tech-card:last-child { border-bottom: none; }
.bf-select-v5 #bfTechGrid .bf-tech-card:hover .bf-tech-card-name { color: #d4b876; }
/* Name links, gross. */
.bf-select-v5 #bfTechGrid .bf-tech-card-name {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #eae8e2;
  letter-spacing: -0.01em;
  transition: color 0.2s;
  grid-column: 1;
  grid-row: 1;
}
/* Zweck-Wort in Mono, unter dem Namen. */
.bf-select-v5 #bfTechGrid .bf-tech-card[data-bfsel-role]::before {
  content: attr(data-bfsel-role);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6a5f;
  grid-column: 1;
  grid-row: 2;
  margin-top: 4px;
}
/* Verhaeltnis rechts, in Mono. */
.bf-select-v5 #bfTechGrid .bf-tech-card[data-bfsel-ratio]::after {
  content: attr(data-bfsel-ratio);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #b9b5a6;
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
}
/* desc- und chip-Zeilen ausblenden, sie bleiben als Semantik/i18n-Ziel. */
.bf-select-v5 #bfTechGrid .bf-tech-card .bf-tech-card-desc,
.bf-select-v5 #bfTechGrid .bf-tech-card .bf-tech-card-ratio {
  display: none;
}

/* --- Einmal kalibrieren ------------------------------------------------- */
/* Struktur der Ist-Card (nicht geaendert, Engine unangetastet):
   .bfsel-cal-card > div.row > div.emoji + div.textblock
   textblock enthaelt title-div, subtitle-div (und ggf. status-div).
   Wir malen den Inhalt in Zeilen um. */
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card {
  padding: 20px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #26251f !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card:last-child { border-bottom: none !important; }
/* Aeussere Reihe: flex mit voller Breite. */
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card > div {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}
/* Emoji-Icon (erstes Kind der Reihe) verbergen. */
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card > div > div:first-child {
  display: none !important;
}
/* Textblock nimmt die volle Breite ein. */
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card > div > div:not(:first-child) {
  flex: 1 !important;
  width: 100% !important;
}
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card [data-bft="rf_card_title"],
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card [data-bft="am_entry_title"] {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #eae8e2 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
}
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card [data-bft="rf_card_subtitle"],
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card [data-bft="am_entry_desc"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #6d6a5f !important;
  margin: 4px 0 0 !important;
}
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card #bfAmEntryStatus {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #b9b5a6 !important;
  margin: 6px 0 0 !important;
  letter-spacing: 0.04em;
}
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card:hover [data-bft="rf_card_title"],
.bf-select-v5 .bfsel-plate-cal .bfsel-cal-card:hover [data-bft="am_entry_title"] {
  color: #d4b876 !important;
}

/* --- Fuss (Mikrofon / Brustgurt / Atemweg) ------------------------------ */
.bf-select-v5 .bfsel-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 24px;
  padding: 24px 0 0;
  border-top: 1px solid #38352c;
  margin-top: 8px;
}
.bf-select-v5 .bfsel-foot-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8578;
}
.bf-select-v5 .bfsel-foot-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #b9b5a6;
  text-align: right;
  letter-spacing: 0.04em;
}
.bf-select-v5 .bfsel-foot-v b {
  font-weight: 500;
  color: #eae8e2;
}
.bf-select-v5 .bfsel-foot-link {
  color: #d4b876;
  cursor: pointer;
}
.bf-select-v5 .bfsel-foot-link:hover { color: #eae8e2; }

/* Atemweg-Umschalter: Nase und Mund sind beide klickbar. Das aktive Element
 * traegt <b> (hell #eae8e2, ueber .bfsel-foot-v b). Das inaktive Element ist
 * gedaempft, aber cursor:pointer und faerbt bei :hover hell. Kein Gold hier —
 * §11.26 laesst nur einen Gold-Anker pro Screen zu; der sitzt im Brustgurt-Link. */
.bf-select-v5 #bfsel-foot-path b,
.bf-select-v5 #bfsel-foot-path span[id] {
  cursor: pointer;
}
.bf-select-v5 #bfsel-foot-path span[id]:hover { color: #eae8e2; }

/* ================================================================
 * Session-Runner (Vier-Zustaende-Kachel Tag 2.3 usw.)
 * kachel-runner-* Klassen werden von www/kurse/mechanik/session-runner.js
 * gerendert und leben in der bestehenden .kachel-card. Alle Farben
 * kommen aus den Universum-Tokens.
 * ================================================================ */

.kachel-runner-card {
  /* Nutzt bestehende .kachel-card, hier nur feine Ergaenzungen */
}

.kachel-runner-stufen-progress {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px 0;
  padding: 0;
}
.kachel-runner-stufen-dot {
  flex: 1;
  height: 3px;
  background: rgba(42, 52, 82, 0.5);
  border-radius: 2px;
}
.kachel-runner-stufen-dot.done {
  background: var(--u-accent-dim, #8A6D3B);
}
.kachel-runner-stufen-dot.active {
  background: var(--u-accent, #E0B860);
}

.kachel-runner-state {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
  margin: 6px 0 6px 0;
}

.kachel-runner-desc {
  color: var(--u-text-dim, #C7CFE1);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 14px 0;
}

.kachel-runner-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(19, 27, 59, 0.6), rgba(11, 15, 32, 0.9));
  border: 1px solid rgba(224, 184, 96, 0.14);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 12px 0;
}
.kachel-runner-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  display: block;
}
.kachel-runner-frame-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-text-dim, #C7CFE1);
  background: rgba(11, 15, 32, 0.65);
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
}

.kachel-runner-timer-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(19, 27, 59, 0.6);
  border-radius: 6px;
  margin: 0 0 12px 0;
  font-family: "JetBrains Mono", "Courier New", monospace;
}
.kachel-runner-timer-mini-time {
  color: var(--u-text, #E6ECF7);
  font-size: 15px;
  letter-spacing: 0.05em;
}
.kachel-runner-timer-mini-target {
  color: var(--u-text-dim, #C7CFE1);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kachel-runner-question {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-text-dim, #C7CFE1);
  margin: 0 0 8px 0;
}

.kachel-runner-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px 0;
}
.kachel-runner-chip {
  appearance: none;
  background: rgba(19, 27, 59, 0.55);
  border: 1px solid rgba(224, 184, 96, 0.18);
  border-radius: 6px;
  color: var(--u-text, #E6ECF7);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.kachel-runner-chip:hover:not([disabled]) {
  background: rgba(19, 27, 59, 0.8);
  border-color: rgba(224, 184, 96, 0.35);
}
.kachel-runner-chip.selected {
  background: rgba(224, 184, 96, 0.14);
  border-color: var(--u-accent, #E0B860);
  color: var(--u-accent, #E0B860);
}
.kachel-runner-chip[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Zustand 2: Uebergangsnotiz (die Session laeuft ueber die Atem-Flaeche) */
.kachel-runner-uebergang {
  color: var(--u-text-dim, #C7CFE1);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 12px 0;
}

/* Zustand 2: Start-Bestaetigung */
.kachel-runner-session-start {
  display: flex;
  justify-content: center;
  margin: 12px 0 4px 0;
}
.kachel-runner-session-start-btn {
  min-width: 180px;
}

/* Zustand 4: Vergleich */
.kachel-runner-vergleich {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(19, 27, 59, 0.55);
  border-radius: 8px;
  margin: 0 0 12px 0;
}
.kachel-runner-vergleich-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.kachel-runner-vergleich-label {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-text-dim, #C7CFE1);
}
.kachel-runner-vergleich-value {
  color: var(--u-text, #E6ECF7);
  font-size: 15px;
}

.kachel-runner-verdict {
  border-left: 2px solid var(--u-accent, #E0B860);
  padding: 10px 14px;
  background: rgba(224, 184, 96, 0.06);
  border-radius: 0 6px 6px 0;
  color: var(--u-text, #E6ECF7);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px 0;
}
.kachel-runner-verdict-tag {
  display: block;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
  margin-bottom: 4px;
}

/* Primaerer Weiter-Button (Zustand 4) */
.kachel-nav-primary {
  background: var(--u-accent, #E0B860) !important;
  border-color: var(--u-accent, #E0B860) !important;
  color: var(--u-bg, #0B0F20) !important;
  font-weight: 500;
}
.kachel-nav-primary:hover:not([disabled]) {
  background: #F0C878 !important;
  border-color: #F0C878 !important;
}

/* Session-Runner Tag 3.3: Ziffernblatt-Zustaende ================================ */
.kachel-runner-ziffernblatt-frame {
  width: 220px;
  height: 220px;
  margin: 20px auto 16px;
  background: var(--u-bg-2, #0F1530);
  border: 1px solid var(--line, #2A3452);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kachel-runner-ziffernblatt {
  width: 180px;
  height: 180px;
  color: var(--u-accent, #E0B860);
}
.kachel-runner-mess-sektor {
  fill: var(--u-accent, #E0B860);
  fill-opacity: 0.18;
  stroke: none;
}
.kachel-runner-mess-marker {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
  min-height: 14px;
}

/* Ergebnis-Panel Tag 3.3 */
.kachel-runner-mess-ergebnis {
  max-width: 260px;
  margin: 20px auto 20px;
  padding: 20px 22px;
  background: var(--u-bg-2, #0F1530);
  border: 1px solid var(--line, #2A3452);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kachel-runner-mess-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px;
  color: var(--ink-0, #F5F7FC);
  font-variant-numeric: tabular-nums;
}
.kachel-runner-mess-min {
  font-size: 9px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 32px;
}
.kachel-runner-mess-wert {
  color: var(--u-accent, #E0B860);
  font-variant-numeric: tabular-nums;
}
.kachel-runner-mess-einheit {
  font-size: 9px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kachel-runner-mess-trend {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 0.5px solid var(--line, #2A3452);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--ink-2, #98A2BA);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* Ende Session-Runner */

/* ============================================================ */
/* Atmen Uebersicht v4 · Blatt 04 · Etappe 1                    */
/* Section-Eyebrow + Underline-Tabs (Blatt 10 Regel §11.9)     */
/* Namespace: .breathwork-tabs--v4 auf dem Tab-Container.      */
/* Alte .breathwork-tabs Regeln bleiben unangetastet fuer andere*/
/* Kontexte; nur wenn --v4 mitspielt, greifen diese Regeln.    */
/* ============================================================ */

.breath-section-eyebrow {
  padding: 24px 24px 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  text-align: left;
}

/* Underline-Tabs: gesamte Bar-Optik zuruecksetzen */
.breathwork-tabs.breathwork-tabs--v4 {
  display: flex;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line, #2A3452);
  border-radius: 0;
  padding: 0 24px;
  gap: 24px;
  margin: 0 auto var(--space-6, 24px);
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}

.breathwork-tabs--v4 .breathwork-tab {
  padding: 12px 2px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.breathwork-tabs--v4 .breathwork-tab:hover {
  color: var(--ink-1, #DDE3EF);
}

.breathwork-tabs--v4 .breathwork-tab.active {
  background: transparent;
  color: var(--u-accent, #E0B860);
  border-bottom-color: var(--u-accent, #E0B860);
  box-shadow: none;
  font-weight: 400;
}

/* "Die Reise"-Sonderregeln neutralisieren, sobald --v4 aktiv ist */
.breathwork-tabs--v4 .breathwork-tab[data-tab="reise"] {
  font-weight: 400;
  letter-spacing: 0.14em;
  position: static;
}
.breathwork-tabs--v4 .breathwork-tab[data-tab="reise"]::after {
  content: none;
}
.breathwork-tabs--v4 .breathwork-tab[data-tab="reise"].active {
  background: transparent;
  color: var(--u-accent, #E0B860);
  border-bottom-color: var(--u-accent, #E0B860);
  box-shadow: none;
  font-weight: 400;
}

/* =========================================================================
   Blatt 04 — Atmen-Uebersicht v4 (Etappe 2-6)
   Biofeedback-Instrument, Mood-2x3, Kalender, Archiv, Werkzeuge.
   Kanon: Monochrom, Gold-Anker sparsam, keine Emojis, keine Marketing-Adjektive.
   ========================================================================= */

/* --- Etappe 3: Biofeedback als Instrument-Panel (Gold-Anker links) --- */
.bf-instrument {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--u-panel-border, var(--color-border));
  border-left: 2px solid var(--u-accent, #E0B860);
  background: linear-gradient(90deg, rgba(224, 184, 96, 0.04), transparent 60%),
              var(--u-panel-1, var(--color-surface));
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  margin-bottom: var(--space-5);
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.bf-instrument:hover {
  border-left-color: var(--u-accent, #E0B860);
  background: linear-gradient(90deg, rgba(224, 184, 96, 0.07), transparent 60%),
              var(--u-panel-2, var(--color-surface-hover, var(--color-surface)));
}
.bf-instrument-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 64px;
}
.bf-instrument-icon svg { width: 100%; height: 100%; }
.bf-instrument-icon .bf-ekg-baseline { stroke: var(--color-border, #2A3452); }
.bf-instrument-icon .bf-ekg-trace { stroke: var(--color-text, #DDE3EF); }
.bf-instrument-icon .bf-ekg-peak { fill: #E0B860; }
.bf-instrument-body { display: flex; flex-direction: column; gap: 4px; }
.bf-instrument-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
}
.bf-instrument-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--u-ink-1, var(--color-text));
  line-height: 1.3;
}
.bf-instrument-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--u-ink-3, var(--color-text-muted));
}
.bf-instrument-arrow {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--u-ink-2, var(--color-text-muted));
}

/* --- Etappe 2: Schnellstart-Trenner + Mood-Kacheln 3x2 (drei pro Zeile) --- */
.bf-quickstart-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
  margin: var(--space-5) 0 var(--space-3);
  white-space: nowrap;
  overflow: hidden;
}
/* Blatt-04-Praezision: Mood-Kacheln 1:1 aus dem Blatt.
   Blatt: 6 Kacheln je Zeile auf 1120px, Icon 44px, Label 13px, gap 14px.
   Mobile: 3 Spalten (unter 720px) - kein Aspect-Ratio, keine Mindesthoehe.
*/
#moodPickerSlot .mood-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px;
  margin-bottom: var(--space-5);
}
@media (max-width: 720px) {
  #moodPickerSlot .mood-tiles {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
#moodPickerSlot .mood-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 12px 20px;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 4px;
  border: 1px solid var(--u-panel-border, var(--color-border));
  background: var(--u-panel-1, var(--color-surface));
}
#moodPickerSlot .mood-tile:hover {
  border-color: var(--u-accent-dim, #8A6D3B);
  background: var(--u-panel-2, var(--color-surface));
  box-shadow: none;
  transform: none;
}
#moodPickerSlot .mood-tile-icon,
#moodPickerSlot .mood-tile[data-mood] .mood-tile-icon {
  color: var(--color-text, #DDE3EF);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#moodPickerSlot .mood-tile-icon svg { width: 44px; height: 44px; }
#moodPickerSlot .mood-tile-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text, #DDE3EF);
  text-align: center;
}

/* --- Etappe 4: Kalender --- */
.bf-calendar-wrap { margin: var(--space-5) 0; }
.bf-calendar-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--u-panel-border, var(--color-border));
  background: var(--u-panel-1, var(--color-surface));
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  color: var(--u-ink-1, var(--color-text));
}
.bf-calendar-toggle:hover {
  border-color: var(--u-accent-dim, #8A6D3B);
  background: var(--u-panel-2, var(--color-surface));
}
.bf-calendar-icon { width: 32px; height: 32px; flex-shrink: 0; }
.bf-calendar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-ink-2, var(--color-text));
}
.bf-calendar-panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--u-panel-border, var(--color-border));
  border-left: 2px solid var(--u-accent, #E0B860);
  border-radius: 4px;
  background: var(--u-panel-1, var(--color-surface));
}
.bf-calendar-panel[hidden] { display: none; }
.bf-cal-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
  margin-bottom: var(--space-4);
  white-space: nowrap;
  overflow: hidden;
}
.bf-cal-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--u-panel-border, var(--color-border));
}
.bf-cal-row:last-of-type { border-bottom: none; }
.bf-cal-row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
}
.bf-cal-input {
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--u-panel-border, var(--color-border));
  color: var(--u-ink-1, var(--color-text));
  font-family: var(--font-mono);
  font-size: 14px;
  color-scheme: dark light;
}
.bf-cal-input:focus { outline: none; border-bottom-color: var(--u-accent, #E0B860); }
.bf-cal-seg {
  display: flex;
  gap: 0;
  border: 1px solid var(--u-panel-border, var(--color-border));
  border-radius: 3px;
  overflow: hidden;
}
.bf-cal-seg-item {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--u-panel-border, var(--color-border));
  color: var(--u-ink-2, var(--color-text-muted));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.bf-cal-seg-item:last-child { border-right: none; }
.bf-cal-seg-item:hover { color: var(--u-ink-1, var(--color-text)); }
.bf-cal-seg-item.active {
  background: var(--u-panel-2, var(--color-surface));
  color: var(--u-accent, #E0B860);
}
.bf-cal-export {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.bf-cal-export-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--u-panel-border, var(--color-border));
  color: var(--u-ink-1, var(--color-text));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border-radius: 3px;
  cursor: pointer;
}
.bf-cal-export-btn:hover {
  border-color: var(--u-accent-dim, #8A6D3B);
  color: var(--u-accent, #E0B860);
}
.bf-cal-export-btn .arrow { font-size: 14px; }

/* --- Etappe 5: Archiv-Grid --- */
.bf-archive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--space-6) 0 var(--space-3);
}
.bf-archive-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--u-ink-1, var(--color-text));
  margin: 0;
}
.bf-archive-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
  text-transform: uppercase;
}
.bf-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.bf-archive-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 140px;
  min-width: 0; /* Grid-1fr-Spalten schrumpfen sonst nicht unter Content-Min-Breite */
  padding: var(--space-4);
  background: var(--u-panel-1, var(--color-surface));
  border: 1px solid var(--u-panel-border, var(--color-border));
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
/* iPhone-Breite: TECHNIKEN-Wort weg, nur Zahl und Pfeil.
   Grund: die drei Karten Aktivierung/Ausgleich/Erholung liefen auf iPhone
   ueber den Viewport, weil das nowrap-artige 'TECHNIKEN' plus letter-spacing
   die Min-Content-Breite der Grid-Spalten ueber 1/3-Viewport zog. */
@media (max-width: 640px) {
  .bf-archive-count-suffix {
    display: none;
  }
}
.bf-archive-card:hover {
  border-color: var(--u-accent-dim, #8A6D3B);
  background: var(--u-panel-2, var(--color-surface));
}
.bf-archive-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--u-ink-1, var(--color-text));
}
.bf-archive-card-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
  text-transform: uppercase;
}
.bf-archive-count-num { color: var(--u-accent, #E0B860); font-size: 14px; }
.bf-archive-card-count .arrow { margin-left: auto; font-size: 14px; }

/* --- Etappe 6: Werkzeuge (Bento) --- */
.bf-bento-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-3, var(--color-text-muted));
  margin: var(--space-5) 0 var(--space-3);
  white-space: nowrap;
  overflow: hidden;
}
.bf-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
@media (max-width: 480px) {
  .bf-bento-grid { grid-template-columns: 1fr; }
}
.bf-bento-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: var(--u-panel-1, var(--color-surface));
  border: 1px solid var(--u-panel-border, var(--color-border));
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.bf-bento-row:hover {
  border-color: var(--u-accent-dim, #8A6D3B);
  background: var(--u-panel-2, var(--color-surface));
}
.bf-bento-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--u-ink-1, var(--color-text));
}
.bf-bento-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--u-ink-2, var(--color-text-muted));
}

/* Kleine Bildschirme: Kalender-Row stapelt, Archiv bleibt dreispaltig */
@media (max-width: 480px) {
  .bf-cal-row { grid-template-columns: 100px 1fr; }
  .bf-archive-card { min-height: 120px; }
  .bf-archive-card-title { font-size: 17px; }
}

/* =============================================
   BLATT 07 · SESSION EINRICHTEN — KANON-RAHMEN (PR A)
   Instr-Section-Struktur, Technik-Eyebrow, HRV-Panel,
   Start-Button-Meta. Die Skalen selbst kommen in PR B.
   ============================================= */

/* Nav-Back als Mono-Textzeile (nur im Session-Settings) */
/* Blatt 07 Kanon: Setup-Container an Warmup/Atmen angleichen (max 480px) */
.breathwork-setup.breath-settings {
  max-width: 480px;
  margin-inline: auto;
}

.breath-settings .breath-nav-back--settings {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 4px 0;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.breath-settings .breath-nav-back--settings:hover {
  background: transparent;
  color: var(--color-primary);
}
.breath-settings .breath-nav-back--settings .glyph {
  color: var(--color-primary);
}

/* Technik-Header mit Eyebrow + Timing */
.breath-settings-header {
  text-align: left;
  padding: 8px 0 26px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}
.breath-settings-header .tech-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.breath-settings-header .tech-eyebrow .beat {
  color: var(--color-primary);
  opacity: 0.7;
}
.breath-settings-header h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 14px 0;
  text-align: left;
}
.breath-settings-header .breath-settings-timing {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.breath-settings-header .breath-settings-timing .arrow {
  color: var(--color-primary);
}

/* Instr-Section-Struktur */
.breath-settings .ss-section {
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 22px;
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.breath-settings .ss-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.breath-settings .instr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 4px 0 18px;
}
.breath-settings .instr-head .unit {
  color: var(--color-primary);
  opacity: 0.75;
}

/* HRV-Panel im Blatt-Look — Wrapper um #hrvConnectArea */
.breath-settings .hrv-section-head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 24px 0 12px;
}
.breath-settings .hrv-connect-area {
  position: relative;
  padding: 16px 18px 18px 22px;
  background:
    linear-gradient(90deg, rgba(212, 160, 60, 0.05), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  margin-top: 8px;
  margin-bottom: 26px;
  max-width: none;
}
.breath-settings .hrv-connect-area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary);
  opacity: 0.85;
}

/* Panel-interne Blatt-Klassen (werden von hrv.js gerendert) */
.hrv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hrv-panel-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hrv-panel-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.6;
}
.hrv-panel-status--online {
  color: var(--color-primary);
}
.hrv-panel-status--online .dot {
  background: var(--color-primary);
  box-shadow: 0 0 6px rgba(212, 160, 60, 0.6);
  opacity: 1;
}
.hrv-panel-status--connecting .dot {
  background: var(--color-primary);
  opacity: 0.6;
  animation: hrv-panel-pulse 1.2s ease-in-out infinite;
}
@keyframes hrv-panel-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.hrv-panel-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.hrv-panel-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.35;
}
.hrv-panel-label .desc {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 3px;
  letter-spacing: 0;
  text-transform: none;
}
.hrv-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.hrv-panel-btn:hover {
  background: rgba(212, 160, 60, 0.06);
}
.hrv-panel-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Start-Button mit Meta-Zeile und Pfeil */
.breath-settings #startBreathwork {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: none;
  padding: 16px 20px;
  margin-top: 28px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: rgba(212, 160, 60, 0.04);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.2s;
  text-align: left;
}
.breath-settings #startBreathwork:hover {
  background: rgba(212, 160, 60, 0.09);
  border-color: var(--color-primary-hover);
}
.breath-settings #startBreathwork .start-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.breath-settings #startBreathwork .start-btn-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-primary);
  opacity: 0.75;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.breath-settings #startBreathwork .start-btn-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
}

/* =============================================
   BLATT 07 PR B — Praezisions-Skalen (Dauer/Tempo)
   Kanon-Uebernahme aus blaetter-v4-final/07-session-settings.
   Ticks werden als <button> gerendert (klickbar); Marker/Dot
   spiegeln den aktuellen Wert. Kein Wheel-Scroll mehr.
   ============================================= */

/* --- Value-Readout (grosse Ziffer + Einheit) --- */
.breath-settings .value-readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
}
.breath-settings .value-readout .num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.breath-settings .value-readout .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Skalen-Container --- */
.breath-settings .ss-scale {
  outline: none;
  padding: 0;
}
.breath-settings .ss-scale:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 4px;
}

/* --- Duration-Skala: Achse mit Ticks + Marker --- */
.breath-settings .scale-axis {
  position: relative;
  height: 42px;
  margin-bottom: 4px;
}
.breath-settings .scale-axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 1px;
  background: var(--color-border);
}

/* Ticks — als klickbare Buttons ausgelegt. Klick-Zone ist groesser
   als der sichtbare Strich, weil die Buttons ganze Hoehe abdecken. */
.breath-settings .scale-tick {
  position: absolute;
  top: 0;
  height: 42px;
  width: 12px;
  transform: translateX(-6px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.breath-settings .scale-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-0.5px);
  width: 1px;
  height: 9px;
  background: var(--color-text-muted);
  transition: background 0.15s;
}
.breath-settings .scale-tick.major::before {
  height: 12px;
  top: 11px;
  background: var(--color-text);
}
.breath-settings .scale-tick:hover::before {
  background: var(--color-primary);
}
.breath-settings .scale-tick:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
}

/* Gold-Marker (Dreieck + vertikale Linie) */
.breath-settings .scale-marker {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  width: 12px;
  height: 30px;
  pointer-events: none;
  transition: left 0.18s ease-out;
}
.breath-settings .scale-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--color-primary);
}
.breath-settings .scale-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 1px;
  height: 22px;
  background: var(--color-primary);
  opacity: 0.55;
}

/* Numerische Labels unter der Achse */
.breath-settings .scale-labels {
  position: relative;
  height: 16px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}
.breath-settings .scale-label {
  position: absolute;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  transition: color 0.15s;
}
.breath-settings .scale-label:hover {
  color: var(--color-primary);
}
.breath-settings .scale-label.active {
  color: var(--color-primary);
}
.breath-settings .scale-label:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
}

/* Footer (MIN X · MAX Y + EIGENE-Button) */
.breath-settings .scale-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.breath-settings .scale-footer .range {
  display: flex;
  gap: 12px;
}
.breath-settings .scale-footer .range .beat {
  color: var(--color-primary);
  opacity: 0.55;
}

/* Custom-Button (EIGENE) */
.breath-settings .custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.breath-settings .custom-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.85;
}
.breath-settings .custom-btn.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.breath-settings .custom-btn .plus {
  color: var(--color-primary);
}

/* Eigene-Input-Zeile (aufklappbar) */
.breath-settings .custom-input-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.breath-settings .custom-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  outline: none;
  border-radius: 0;
}
.breath-settings .custom-input:focus {
  border-color: var(--color-primary);
}
.breath-settings .custom-input-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Tempo-Bereich: Readout + Stepper --- */
.breath-settings .tempo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.breath-settings .tempo-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.breath-settings .tempo-readout .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.breath-settings .tempo-readout .pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
}
.breath-settings .tempo-readout .delta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-primary);
  opacity: 0.75;
  letter-spacing: 0.14em;
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

.breath-settings .step-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breath-settings .step-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  padding: 0;
  border-radius: 0;
}
.breath-settings .step-btn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.breath-settings .step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.breath-settings .step-btn svg { width: 14px; height: 14px; }

/* Tempo-Achse */
.breath-settings .tempo-scale {
  outline: none;
}
.breath-settings .tempo-scale:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 4px;
}
.breath-settings .tempo-axis {
  position: relative;
  height: 32px;
  margin-top: 6px;
}
.breath-settings .tempo-axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 1px;
  background: var(--color-border);
}
.breath-settings .tempo-tick {
  position: absolute;
  top: 0;
  height: 32px;
  width: 12px;
  transform: translateX(-6px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.breath-settings .tempo-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-0.5px);
  width: 1px;
  height: 6px;
  background: var(--color-text-muted);
  opacity: 0.5;
  transition: background 0.15s, opacity 0.15s;
}
.breath-settings .tempo-tick.major::before {
  height: 9px;
  top: 9px;
  background: var(--color-text);
  opacity: 0.8;
}
.breath-settings .tempo-tick.center::before {
  background: var(--color-primary);
  opacity: 0.9;
  height: 11px;
  top: 8px;
  width: 1.2px;
}
.breath-settings .tempo-tick:hover::before {
  background: var(--color-primary);
  opacity: 1;
}
.breath-settings .tempo-tick:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
}

/* Gold-Dot */
.breath-settings .tempo-dot {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--color-surface, transparent);
  pointer-events: none;
  transition: left 0.18s ease-out;
}

.breath-settings .tempo-labels {
  position: relative;
  height: 14px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
}
.breath-settings .tempo-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.breath-settings .tempo-label:hover {
  color: var(--color-primary);
}
.breath-settings .tempo-label.center {
  color: var(--color-primary);
}
.breath-settings .tempo-label.active {
  color: var(--color-primary);
}
.breath-settings .tempo-label:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
}

/* =============================================================================
   BLATT 07 PR C — Pill-Row (Visualisierung / Modus / Klang)

   Freistehende Radio-Buttons nach Blatt-Kanon (blaetter-v4-final/07-session-
   settings/index.html:399-438): flex-verteilte Pillen mit Rahmen, Icon 15x15,
   bei Auswahl warmer Gold-Ton, kein durchgefuellter Solid-Fill.

   Legacy `.ss-pill-group` / `.ss-pill` bleibt fuer andere Screens erhalten;
   dieser Block gilt nur, wo `.pill-row` als Container gesetzt ist.
   ============================================================================= */

.breath-settings .pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.breath-settings .pill-row .pill {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--color-surface) 40%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-text-muted);
  font: 500 13px var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.breath-settings .pill-row .pill svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Aktive Auswahl — sowohl .selected (Live-JS) als auch .active (Blatt-Kanon) */
.breath-settings .pill-row .pill.selected,
.breath-settings .pill-row .pill.active {
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
  background: color-mix(in oklab, var(--color-primary) 6%, transparent);
}

.breath-settings .pill-row .pill:hover:not(.selected):not(.active) {
  color: var(--color-text);
  border-color: color-mix(in oklab, var(--color-primary) 25%, var(--color-border));
}

.breath-settings .pill-row .pill:focus-visible {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
}

/* Icons in Gold-Fill fuer besetzte Formen (Universum-Kernpunkt) */
.breath-settings .pill-row .pill.selected svg [fill="currentColor"],
.breath-settings .pill-row .pill.active svg [fill="currentColor"] {
  fill: currentColor;
}

/* =============================================================================
 * BLATT 12 · SESSION KANON-ANGLEICH (PR A · v868)
 * ---------------------------------------------------------------------------
 * Tech-Name neben Glyph, Rhythm-Band (EIN/HALTEN/AUS/HALTEN),
 * Timer-Row (verstrichen VON gesamt), Controls-Grid 2 Spalten.
 * Quelle: projects/shiihaa-kosmos-.../blaetter-v4-final/12-atmen-session
 * ========================================================================== */

/* Session-Tech: Glyph + Name links in der Topbar */
.session-tech {
  display: flex;
  align-items: center;
  gap: 12px;
}
.session-tech-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-tech-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.session-tech-name:empty {
  display: none;
}

/* Rhythmus-Band: EIN / HALTEN / AUS / HALTEN.
   Aktive Phase in Gold, inaktive in ink-3. Werte in mono. */
.session-rhythm-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 0 16px;
}
.session-rhythm-band .rhythm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}
.session-rhythm-band .rhythm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.session-rhythm-band .rhythm-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.25s ease;
}
.session-rhythm-band .rhythm-item.active .rhythm-value,
.session-rhythm-band .rhythm-item.active .rhythm-label {
  color: var(--color-primary);
}
.session-rhythm-band .rhythm-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  opacity: 0.6;
}
/* Halte-Slot ohne Wert wird schwaecher gezeichnet (kein Halten in der Technik) */
.session-rhythm-band .rhythm-item[data-empty="true"] {
  opacity: 0.35;
}

/* Timer-Row: verstrichene Zeit + "VON MM:SS" (Kanon) */
.session-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 0 0 24px;
}
.session-timer-row .timer-main {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.04em;
}
.session-timer-row .timer-target {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.session-timer-row .timer-target:empty {
  display: none;
}

/* Rhythm-Band + Timer-Row nur waehrend aktiver Session sichtbar */
.session-rhythm-band,
.session-timer-row {
  display: none;
}
body.breath-session-active .session-rhythm-band {
  display: flex;
}
body.breath-session-active .session-timer-row {
  display: flex;
}

/* Waehrend aktiver Session uebernimmt das Rhythm-Band die Rhythmus-Info —
   die alte I:E-Zeile (Lung-Modus) bleibt dann aus, Kanon-konform. */
body.breath-session-active .breath-ie-ratio {
  display: none !important;
}

/* Controls-Grid 2 Spalten (Kanon). breath-controls war flex; wir uebersteuern
   sie waehrend der aktiven Session zum Kanon-Grid.
   Wichtig: .breath-controls ist im Session-Modus `position: fixed` (bottom-
   docked, ~76px hoch inkl. Padding + safe-area). Ohne Bottom-Puffer im
   Session-Wrapper werden Rhythm-Band und Timer-Row von der Leiste
   ueberdeckt (Blatt 12 Fix 12.08.2026). Deshalb padding-bottom hier. */
body.breath-session-active .breathwork-session {
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 108px);
}
body.breath-session-active .breath-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 320px;
}
body.breath-session-active .breath-controls .btn {
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ============================================================
   BLATT 09 · SESSION-ABSCHLUSS · v871 (12.08.2026)
   Kanon-Angleich: Marker + Titel "Abgeschlossen" + Uhrzeit,
   Overview (Technik/Dauer/Zyklen/Rhythmus + Fertigkeiten),
   Biofeedback (bedingt), Weiter-Liste, Aktions-Leiste.
   Alle Werte via Aether-Tokens; keine Serif; keine Emojis.
   ============================================================ */

/* Screen-Wrapper */
.abschluss-screen {
  padding: 0 var(--space-4) var(--space-8);
}

/* Hero */
.abschluss-screen .abschluss-hero {
  padding: var(--space-8) var(--space-4) var(--space-6);
  text-align: center;
}
.abschluss-screen .abschluss-marker {
  width: 36px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.7;
  margin: 0 auto var(--space-6);
}
.abschluss-screen .abschluss-title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.abschluss-screen .abschluss-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.abschluss-screen .abschluss-time:empty {
  display: none;
}

/* Overview-Block */
.abschluss-screen .abschluss-overview {
  padding: 0 0 var(--space-5);
}
.abschluss-screen .overview-block {
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-5) var(--space-4);
}
.abschluss-screen .overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
}
.abschluss-screen .overview-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.abschluss-screen .overview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.abschluss-screen .overview-value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.abschluss-screen .overview-value-unit {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.abschluss-screen .overview-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}
.abschluss-screen .skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.abschluss-screen .skill-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
}

/* Biofeedback (bedingt sichtbar) */
.abschluss-screen .abschluss-biofeedback {
  padding: 0 0 var(--space-5);
}
.abschluss-screen .abschluss-biofeedback[hidden] {
  display: none;
}
.abschluss-screen .biofeedback-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 var(--space-3);
}
.abschluss-screen .biofeedback-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.abschluss-screen .biofeedback-sensor {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}
.abschluss-screen .biofeedback-block {
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-5) var(--space-4);
}
.abschluss-screen .bf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
}
@media (max-width: 480px) {
  .abschluss-screen .bf-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.abschluss-screen .bf-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.abschluss-screen .bf-metric {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.abschluss-screen .bf-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.1;
}
.abschluss-screen .bf-num {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.abschluss-screen .bf-arrow {
  font-size: 14px;
  color: var(--color-text-muted);
}
.abschluss-screen .bf-unit {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.abschluss-screen .bf-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.abschluss-screen .bf-delta:empty {
  display: none;
}
.abschluss-screen .bf-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.abschluss-screen .bf-hint:empty {
  display: none;
}

/* Beginn→Ende (Blatt 09 Note 07): kompakte Rohwertzeile unter Ist-Wert. */
.abschluss-screen .bf-arc {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.abschluss-screen .bf-arc-start,
.abschluss-screen .bf-arc-end {
  color: var(--color-text-primary);
}
.abschluss-screen .bf-arc-sep {
  color: var(--color-text-muted);
}
.abschluss-screen .bf-arc-delta {
  margin-left: auto;
  color: var(--color-text-muted);
}
.abschluss-screen .bf-arc-delta.is-gold {
  color: var(--color-gold);
}
.abschluss-screen .bf-arc-delta:empty {
  display: none;
}

/* Kohaerenz-Sparkline (Blatt 09 Note 09) */
.abschluss-screen .bf-sparkline-wrap {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.abschluss-screen .bf-sparkline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.abschluss-screen .bf-sparkline {
  width: 100%;
  height: 44px;
  color: var(--color-gold);
  display: block;
}
.abschluss-screen .bf-sparkline-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Weiter-Liste */
.abschluss-screen .weiter-section {
  padding: 0 0 var(--space-5);
}
.abschluss-screen .weiter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 var(--space-3);
}
.abschluss-screen .weiter-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.abschluss-screen .weiter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg, transparent);
  border: 0;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 120ms ease;
}
.abschluss-screen .weiter-item:hover,
.abschluss-screen .weiter-item:focus-visible {
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.03));
  outline: none;
}
.abschluss-screen .weiter-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.abschluss-screen .weiter-item-title {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  font-weight: 400;
}
.abschluss-screen .weiter-item-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.abschluss-screen .weiter-item-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

/* Aktions-Leiste */
.abschluss-screen .abschluss-actions {
  padding: var(--space-4) 0 0;
}
.abschluss-screen .abschluss-actions .btn-primary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   Blatt 08 · Rundenbasierte Session Settings (STA/FRC, RV, Stretch)
   Round-Editor mit progressiven Bars und Summe; Prep/Cooldown-
   Skala nutzt die bestehenden .breath-settings .scale-* Klassen.
   ═══════════════════════════════════════════════════════════════ */

.breath-settings .round-editor {
  margin-top: 8px;
  padding: 16px 16px 18px;
  background: var(--color-surface-elevated, rgba(19, 27, 59, 0.35));
  border: 1px solid var(--color-border);
}

.breath-settings .round-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.breath-settings .round-editor-head .re-title::before {
  content: "── ";
  color: var(--u-accent-dim, #8A6D3B);
}
.breath-settings .round-editor-head .re-title::after {
  content: " ────";
  color: var(--u-accent-dim, #8A6D3B);
}

.breath-settings .round-editor-head .sum {
  color: var(--u-accent-dim, #8A6D3B);
  font-variant-numeric: tabular-nums;
}

.breath-settings .round-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.breath-settings .round-row:last-child {
  border-bottom: none;
}

.breath-settings .round-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.breath-settings .round-bar-wrap {
  position: relative;
  height: 20px;
}

.breath-settings .round-bar-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 1px;
  background: var(--color-border);
}

.breath-settings .round-bar {
  position: absolute;
  left: 0;
  top: 6px;
  height: 7px;
  background: linear-gradient(90deg, var(--u-accent-dim, #8A6D3B), var(--u-accent, #E0B860));
  opacity: 0.85;
  transition: width 0.18s ease-out;
}

.breath-settings .round-bar-dot {
  position: absolute;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--u-accent, #E0B860);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--u-bg, #0B1024);
  transform: translateX(-50%);
  transition: left 0.18s ease-out;
}

.breath-settings .round-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.breath-settings .round-value .re-input {
  width: 46px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.breath-settings .round-value .re-input::-webkit-outer-spin-button,
.breath-settings .round-value .re-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.breath-settings .round-value .re-input:focus {
  outline: none;
  border-color: var(--u-accent, #E0B860);
}

.breath-settings .round-value .unit {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   Blatt 08 · PR2 · Tech-Header, Safety-Panel, Preset-Karten,
   Round-Count-Control. Alles unter .breath-settings gescopt, damit es
   nur in den rundenbasierten Session-Settings wirkt und nicht in
   andere Ansichten leckt.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tech-Header ─────────────────────────────────────────────────── */
.breath-settings .tech-header {
  padding: 8px 0 26px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.breath-settings .tech-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.breath-settings .tech-eyebrow .beat { color: var(--u-accent-dim, #8A6D3B); }
.breath-settings .tech-header h1 {
  font-family: var(--font-body, "Hanken Grotesk", sans-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.breath-settings .tech-flow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breath-settings .tech-flow .arrow { color: var(--u-accent, #E0B860); }
.breath-settings .tech-flow .step-round { color: var(--u-accent, #E0B860); }
.breath-settings .tech-flow .beat { color: var(--u-accent-dim, #8A6D3B); }

/* ── Safety-Panel ────────────────────────────────────────────────── */
.breath-settings .safety-panel {
  position: relative;
  padding: 12px 16px 14px 20px;
  background:
    linear-gradient(90deg, rgba(224, 184, 96, 0.05), transparent 60%),
    var(--u-panel, rgba(19, 27, 59, 0.4));
  border: 1px solid var(--color-border);
  margin-bottom: 32px;
}
.breath-settings .safety-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--u-accent, #E0B860);
}
.breath-settings .safety-head {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.breath-settings .safety-text {
  font-family: var(--font-body, "Hanken Grotesk", sans-serif);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
.breath-settings .safety-text strong {
  font-weight: 600;
  color: var(--u-accent, #E0B860);
}

/* ── Instrument-Section (Trennlinie zwischen Setup-Bloecken) ─────── */
.breath-settings .instr-section {
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 22px;
}
.breath-settings .instr-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.breath-settings .instr-head .unit { color: var(--u-accent-dim, #8A6D3B); }

/* ── Section-Head (── FEINEINSTELLUNGEN ────) ───────────────────── */
.breath-settings .section-head {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  margin: 8px 0 18px;
}

/* ── Preset-Karten (3-Spalten-Grid statt schmaler Buttons) ───────── */
.breath-settings .preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.breath-settings .preset-card {
  padding: 14px 12px;
  background: rgba(19, 27, 59, 0.4);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.breath-settings .preset-card .preset-name {
  font-family: var(--font-body, "Hanken Grotesk", sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: -0.003em;
}
.breath-settings .preset-card .preset-desc {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 9.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.breath-settings .preset-card.active {
  border-color: var(--u-accent-dim, #8A6D3B);
  background: rgba(224, 184, 96, 0.06);
}
.breath-settings .preset-card.active .preset-name { color: var(--u-accent, #E0B860); }
.breath-settings .preset-card.active .preset-desc { color: var(--u-accent-dim, #8A6D3B); }
.breath-settings .preset-card:hover:not(.active) {
  color: var(--color-text);
  border-color: rgba(224, 184, 96, 0.25);
}
.breath-settings .preset-card:focus-visible {
  outline: 1px solid var(--u-accent, #E0B860);
  outline-offset: 2px;
}

/* ── Round-Count-Control (grosse Zahl + Stepper-SVGs) ────────────── */
.breath-settings .round-count-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.breath-settings .round-count-readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.breath-settings .round-count-readout .num {
  font-family: var(--font-body, "Hanken Grotesk", sans-serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.breath-settings .round-count-readout .unit {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.breath-settings .step-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breath-settings .step-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: rgba(19, 27, 59, 0.4);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.breath-settings .step-btn:hover:not(:disabled) {
  color: var(--u-accent, #E0B860);
  border-color: var(--u-accent-dim, #8A6D3B);
  background: rgba(224, 184, 96, 0.04);
}
.breath-settings .step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.breath-settings .step-btn:focus-visible {
  outline: 1px solid var(--u-accent, #E0B860);
  outline-offset: 2px;
}
.breath-settings .step-btn svg { width: 14px; height: 14px; }

/* ============================================================================
   Blatt 05 · Atmen · Kategorie · Kanon v882
   Additiv — bestehende .breath-cat-tech-card-Regeln (siehe oben) bleiben als
   Fallback, werden aber durch die neuen .breath-cat-tech-row-Selektoren
   überschrieben, sobald renderCategory() das neue Template rendert.

   Farbfallbacks folgen dem im Repo etablierten Muster:
   --u-ink-1  → var(--color-text)          (Universum: #E0E4EC)
   --u-ink-2  → var(--color-text-muted)    (Universum: #8A95AA)
   --u-ink-3  → var(--color-text-muted)
   --u-accent → #E0B860                    (Universum-Gold hell)
   --u-accent-dim → #8A6D3B                (Universum-Gold gedämpft)
   ============================================================================ */

/* Section-Head — Terminal-Zeile über der ganzen Kategorie */
.breath-cat-section-head {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--u-ink-3, var(--color-text-muted));
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Nav-Back mit Gold-Chevron */
.breath-nav-back--category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--u-ink-2, var(--color-text-muted));
  background: transparent;
  border: none;
  padding: 8px 0;
  cursor: pointer;
}
.breath-nav-back--category .glyph {
  color: var(--u-accent, #E0B860);
  font-family: inherit;
  font-size: 12px;
}
.breath-nav-back--category:hover { color: var(--u-ink-1, var(--color-text)); }

/* Header · Eyebrow + H1 + Beschreibung, linksbündig */
#categoryHeader {
  text-align: left;
  padding: 24px 0 20px;
}
.breath-category-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--u-accent, #E0B860);
  margin-bottom: 12px;
}
.breath-category-title {
  font-family: var(--font-display, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  color: var(--u-ink-1, var(--color-text));
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.breath-category-desc {
  font-family: var(--font-display, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--u-ink-2, var(--color-text-muted));
  margin: 0;
  max-width: 62ch;
}

/* Meta-Zeile · Anzahl · Sortierung */
.breath-category-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--u-ink-3, var(--color-text-muted));
  padding: 14px 0 12px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 16px 0 0;
}

/* Techniken-Zeile · statt Karte */
#categoryTechniques {
  display: block;
  padding: 0;
  gap: 0;
}
.breath-cat-tech-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.breath-cat-tech-row:hover {
  background: rgba(224,184,96,0.05);
}
.breath-cat-tech-row:focus-visible {
  outline: 1px solid var(--u-accent, #E0B860);
  outline-offset: -2px;
}

.breath-cat-tech-row .breath-cat-tech-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.breath-cat-tech-row .breath-cat-tech-name {
  font-family: var(--font-display, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--u-ink-1, var(--color-text));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breath-cat-tech-row .breath-cat-tech-timing {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--u-ink-2, var(--color-text-muted));
  text-transform: uppercase;
}
.breath-cat-tech-row .breath-cat-tech-timing .beat {
  color: var(--u-accent-dim, #8A6D3B);
  padding: 0 2px;
}

/* Info-SVG · monochrom, ohne Serif-„i" */
.breath-cat-tech-row .breath-cat-tech-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--u-ink-3, var(--color-text-muted));
  cursor: pointer;
}
.breath-cat-tech-row .breath-cat-tech-info svg {
  width: 20px;
  height: 20px;
}
.breath-cat-tech-row .breath-cat-tech-info:hover { color: var(--u-ink-1, var(--color-text)); }

/* Arrow · dezentes Gold */
.breath-cat-tech-row .breath-cat-tech-arrow {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 16px;
  color: var(--u-accent, #E0B860);
  line-height: 1;
}

/* Locked (Option C) · ausgegraut, kein Icon, Timing-Zeile zeigt Hint */
.breath-cat-tech-row.breath-cat-tech-row-locked {
  opacity: 0.5;
  cursor: default;
}
.breath-cat-tech-row.breath-cat-tech-row-locked .breath-cat-tech-arrow {
  color: var(--u-ink-3, var(--color-text-muted));
}

/* Not-recommended · dezenter Beleg */
.breath-cat-tech-row.not-recommended {
  opacity: 0.55;
}

/* Delete-Handle bei Custom-Technik */
.breath-cat-tech-row .breath-cat-tech-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--u-ink-3, var(--color-text-muted));
  cursor: pointer;
}
.breath-cat-tech-row .breath-cat-tech-delete:hover {
  color: var(--color-error, #C86464);
}

/* Custom-Badge */
.breath-cat-tech-row .custom-badge {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--u-accent, #E0B860);
  padding: 2px 6px;
  border: 1px solid var(--u-accent, #E0B860);
  border-radius: 2px;
  text-transform: uppercase;
}

/* „Eigene hinzufügen"-Zeile · letzte Listenzeile */
.breath-cat-tech-row--add {
  border-bottom: none;
  opacity: 0.72;
}
.breath-cat-tech-row--add:hover { opacity: 1; }
.breath-cat-tech-row--add .breath-cat-tech-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 16px;
  color: var(--u-accent, #E0B860);
  line-height: 1;
}
.breath-cat-tech-row--add .breath-cat-tech-name {
  font-weight: 400;
  color: var(--u-ink-2, var(--color-text-muted));
}
.breath-cat-tech-row--add .breath-cat-tech-timing {
  color: var(--u-ink-3, var(--color-text-muted));
}

/* ─────────────────────────────────────────────
   Blatt 06 · Atmen · Fertigkeiten · Kanon v884
   Zeilen-Layout fuer die Skills-Bibliothek. Alle Farb- und Font-Fallbacks
   sind an die Repo-Konvention angeglichen (--u-ink-* → --color-text*,
   --u-accent → #E0B860, --u-accent-dim → #8A6D3B, --color-border,
   --font-display, --font-mono). Additiv: alte .skills-page-card- und
   .skills-page-*-Regeln bleiben unberuehrt, greifen aber nicht mehr,
   weil renderSkillsPage jetzt .skill-row rendert.
   ───────────────────────────────────────────── */

.breath-skills-page .skills-page-header {
  padding: 16px 0 28px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
  max-width: 520px;
  margin-inline: auto;
}

.breath-skills-page .skills-page-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--u-ink-3, var(--color-text-muted));
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.breath-skills-page .skills-page-title {
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--u-ink-1, var(--color-text));
  margin-bottom: 14px;
  text-align: left;
}

.breath-skills-page .skills-page-intro {
  color: var(--u-ink-2, var(--color-text-muted));
  font-size: 14px;
  line-height: 1.55;
  max-width: 94%;
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
}

.breath-skills-page .skills-page-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--u-ink-3, var(--color-text-muted));
  letter-spacing: 0.14em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  max-width: 520px;
  margin-inline: auto;
}

.breath-skills-page .skills-page-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 520px;
  margin-inline: auto;
}

.breath-skills-page .skill-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.2s ease;
  width: 100%;
  font: inherit;
}

.breath-skills-page .skill-row:hover {
  background: linear-gradient(90deg, rgba(224, 184, 96, 0.03), transparent 40%);
  padding-left: 6px;
}

.breath-skills-page .skill-row-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.breath-skills-page .skill-row-name {
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.003em;
  color: var(--u-ink-1, var(--color-text));
}

.breath-skills-page .skill-row-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--u-ink-3, var(--color-text-muted));
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-transform: uppercase;
}

.breath-skills-page .skill-meta-subtitle {
  color: var(--u-ink-3, var(--color-text-muted));
}

.breath-skills-page .skill-meta-beat {
  color: var(--u-accent-dim, #8A6D3B);
}

.breath-skills-page .skill-meta-safety {
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
}

.breath-skills-page .skill-meta-safety--critical {
  color: var(--u-accent, #E0B860);
}

.breath-skills-page .skill-row-desc {
  font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--u-ink-2, var(--color-text-muted));
  margin-top: 4px;
  max-width: 96%;
}

.breath-skills-page .skill-row-info {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--u-ink-3, var(--color-text-muted));
  margin-top: 2px;
}

.breath-skills-page .skill-row-info svg {
  width: 20px;
  height: 20px;
}

.breath-skills-page .skill-row-arrow {
  color: var(--u-accent, #E0B860);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  padding-left: 4px;
  padding-right: 2px;
  margin-top: 2px;
}

/* =====================================================================
   HOME BLATT 00 FOLD — für angemeldete Nutzer
   ---------------------------------------------------------------------
   Wiederhergestellter CSS-Bereich aus dem Zustand vor PR #231
   (Commit de67f96), notwendig weil PR #231 das HTML und Team-CSS
   gestrichen hatte, während die Farbübergänge (.home-flow-Gradient,
   .home-philosophy-Gradient) sowie .home-philosophy und .pillar-*
   erhalten geblieben sind und bereits weiter oben in dieser Datei
   stehen.

   Alle Selektoren, die mit den späteren Landing-Klassen (Blatt 51:
   .landing-saeulen > .saeulen-grid > .saeule-card) kollidieren, sind
   hier unter .home-fold-loggedin gescoped. Team-Selektoren (.home-team,
   .team-*) sowie .home-cta-section stehen ohne Scope, weil sie nur im
   Fold auftauchen und nirgends sonst.
   ===================================================================== */

/* --- Section 3 (Blatt 00): Säulen — staggered cards für Angemeldete --- */
.home-fold-loggedin .home-saeulen {
  padding: var(--space-20) var(--space-6);
  background: transparent;
}
.home-fold-loggedin .saeulen-inner {
  max-width: 980px;
  margin: 0 auto;
}
.home-fold-loggedin .saeulen-stagger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.home-fold-loggedin .saeule-card {
  background: var(--color-surface);
  border: 1px solid var(--color-gold-glow);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
}
/* Staggered vertical offset */
.home-fold-loggedin .saeule-card--2 { margin-top: var(--space-8); }
.home-fold-loggedin .saeule-card--3 { margin-top: var(--space-16); }
.home-fold-loggedin .saeule-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.home-fold-loggedin .saeule-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.home-fold-loggedin .saeule-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.home-fold-loggedin .saeule-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-gold);
  opacity: 0;
  transition: opacity 0.35s;
}
.home-fold-loggedin .saeule-card .saeule-accent { opacity: 0.4; }

/* --- Section 4 (Blatt 00): Team (Felix + Markus) --- */
.home-team {
  padding: var(--space-20) var(--space-6);
  background: transparent;
}
.team-inner {
  max-width: 980px;
  margin: 0 auto;
}
.team-tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  text-align: center;
  margin-bottom: var(--space-8);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3) var(--space-8);
  align-items: start;
  margin-bottom: var(--space-10);
}
.team-card {
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: var(--space-3);
}
.team-name {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.team-role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}
.team-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}
.team-text strong {
  font-weight: 600;
  color: var(--color-text);
}
.team-quote {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--color-text);
  line-height: 1.6;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  border: none;
  opacity: 0.85;
}
.team-quote-attribution {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}

/* --- Section 5 (Blatt 00): CTA + Newsletter strip --- */
.home-cta-section {
  padding: var(--space-20) var(--space-6);
  background: transparent;
  text-align: center;
}
.cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* --- Mobile-Overrides für den Blatt-00-Fold (übernommen aus de67f96) --- */
@media (max-width: 768px) {
  .home-fold-loggedin .home-philosophy {
    /* Mehr Luft, damit der nächste Section-Titel nicht an der Kante klebt */
    padding: var(--space-16) var(--space-4);
  }
  .home-fold-loggedin .philosophy-pillars {
    flex-direction: column;
    gap: var(--space-5);
  }
  .home-fold-loggedin .philosophy-quote {
    font-size: var(--text-lg);
  }
  .home-fold-loggedin .philosophy-quote-mark {
    position: static;
    display: inline;
  }
  .home-fold-loggedin .home-saeulen {
    padding: var(--space-16) var(--space-4);
  }
  .home-fold-loggedin .saeulen-stagger {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .home-fold-loggedin .saeule-card--2,
  .home-fold-loggedin .saeule-card--3 {
    margin-top: 0;
  }
  .home-team {
    padding: var(--space-16) var(--space-6);
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .home-cta-section {
    padding: var(--space-16) var(--space-6);
  }
}

/* ============================================================
   Loslassen-Strang · Reflexion + PV · v4-Kanon (Blätter 20–24)
   ============================================================ */

/* Reflexion — Übersicht */
.reflection-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reflection-topbar-back {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.reflection-topbar-back:hover {
  color: var(--color-text);
}

.reflection-count {
  margin-left: auto;
}

.r-head {
  margin-bottom: var(--space-6);
}

.r-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
}

/* .r-title entfernt — siehe .subview-title */

.r-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.r-start-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
}

.r-start-card-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.r-start-card-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

.r-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.r-state-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2) 0;
}

.r-state-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.r-state-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.r-state-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
}

.r-state-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.r-state-list li:first-child {
  border-top: none;
}

.r-login-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* Reflexion — Frage */
.r-question {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-4) 0;
  letter-spacing: -0.005em;
}

.r-answer-area {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}

.r-answer-area::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.r-answer-area:focus {
  outline: none;
  border-color: var(--color-primary);
}

.r-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.r-nav-back,
.r-nav-skip {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-2) 0;
}

.r-nav-back:hover,
.r-nav-skip:hover {
  color: var(--color-text);
}

.r-nav-next {
  margin-left: auto;
}

/* Reflexion — Progress-Dots */
.r-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
}

.r-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-interactive);
}

.r-dot.is-done {
  background: var(--color-text-muted);
}

.r-dot.is-active {
  background: var(--color-primary);
}

/* Reflexion — Zusammenfassung */
.r-summary-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
}

.r-summary-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.r-summary-item:first-child {
  border-top: none;
}

.r-summary-q {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.r-summary-a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.r-summary-a.is-empty {
  color: var(--color-text-muted);
  font-style: normal;
}

/* Reflexion — Brücke zur PV */
.pv-bridge {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.pv-bridge-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3) 0;
}

.pv-bridge-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.pv-bridge-lede {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.5;
}

/* PV — Übersicht */
.pv-overview {
  max-width: var(--content-narrow, 640px);
  margin: 0 auto;
}

.pv-ov-head {
  margin-bottom: var(--space-6);
}

.pv-ov-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
}

/* .pv-ov-title entfernt — siehe .subview-title */

.pv-ov-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.pv-ov-legal {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

.pv-ov-status {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.pv-ov-status-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2) 0;
}

.pv-ov-status-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.pv-ov-status-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.pv-ov-status.is-signed {
  border-color: var(--color-primary);
}

.pv-ov-section {
  margin-bottom: var(--space-6);
}

.pv-ov-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3) 0;
}

.pv-ov-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pv-step;
}

.pv-ov-steps li {
  counter-increment: pv-step;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.pv-ov-steps li::before {
  content: counter(pv-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  min-width: 24px;
}

.pv-ov-steps li:first-child {
  border-top: none;
}

.pv-ov-steps li.is-done {
  color: var(--color-text-muted);
}

.pv-ov-steps li.is-current {
  color: var(--color-text);
  font-weight: 500;
}

.pv-ov-marker {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pv-ov-sig {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.pv-ov-sig-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pv-ov-sig-row:first-child {
  border-top: none;
}

.pv-ov-sig-label {
  color: var(--color-text-muted);
}

.pv-ov-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pv-ov-secondary {
  color: var(--color-text-muted);
}

/* PV — Progress-Header nach Blatt 24 */
.pv-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pv-progress-back {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pv-progress-back:hover {
  color: var(--color-text);
}

.pv-progress-back-arrow {
  font-family: var(--font-mono);
}

.pv-progress-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pv-progress-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-3) 0;
}

.pv-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-interactive);
}

.pv-progress-dot.is-done {
  background: var(--color-text-muted);
}

.pv-progress-dot.is-active {
  background: var(--color-primary);
}

/* PV — Fachpersonen-Link (nur Ärzte-Modus) */
.pv-mode-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) 0;
  cursor: pointer;
}

.pv-mode-link:hover {
  color: var(--color-text);
}

@media (max-width: 640px) {
  .pv-overview {
    padding: 0 var(--space-4);
  }
  .r-question {
    font-size: var(--text-xl);
  }
}

/* Reflexion — zusätzliche Klassen (Ergänzungen für Blätter 21/22) */
.reflection-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.r-state-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.r-state-link {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.r-state-link:hover {
  color: var(--color-text);
}

.r-start-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2) 0;
}

.r-start-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.r-start-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

.r-start-cta {
  margin-top: 0;
}

.r-signin-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0 0;
}

.r-signin-hint a {
  color: var(--color-text);
  text-decoration: underline;
}

.reflection-back {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.reflection-back:hover {
  color: var(--color-text);
}

.reflection-skip {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-2) 0;
}

.reflection-skip:hover {
  color: var(--color-text);
}

.reflection-sum-title {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-5) 0;
  letter-spacing: -0.005em;
}

/* Kurs Mechanik · Tag 8.2 · PHELIX-Atem-Runner
   Iframe-Buehne mit PHELIX-Avatar (view=reel_body wie im Warmup),
   Cue-Zeile mit vier Phasen und Zyklus-Zaehler. Der Avatar fuehrt
   den Rhythmus; die Cue-Zeile spiegelt die aktive Phase in Gold. */
.kachel-phelix-atem-buehne {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0 20px;
}
.kachel-phelix-atem-iframe {
  width: 100%;
  max-width: 320px;
  height: 32dvh;
  border: 0;
  background: transparent;
  display: block;
}
@media (min-width: 768px) {
  .kachel-phelix-atem-iframe {
    max-width: 380px;
    height: 36dvh;
  }
}
.kachel-phelix-atem-cue {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kachel-phelix-atem-cue-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-top: 1px solid var(--ink-3, #7C89A6);
  color: var(--ink-3, #7C89A6);
  transition: color 180ms ease, border-color 180ms ease;
}
.kachel-phelix-atem-cue-phase[data-active="true"] {
  color: var(--gold, #E0B860);
  border-top-color: var(--gold, #E0B860);
}
.kachel-phelix-atem-cue-tag {
  font-weight: 500;
}
.kachel-phelix-atem-cue-wert {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.kachel-phelix-atem-zyklen {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.06em;
  color: var(--ink-2, #A9B3C7);
  margin: 8px 0 20px;
}
.kachel-phelix-atem-zyklen-now {
  color: var(--gold, #E0B860);
}

/* ============================================================
   Tag 10 · Renderer-Bausteine (PR A · Renderer-Erweiterung)
   Alle Bausteine folgen der bestehenden Panel-Sprache:
   Panel-2 als Grundflaeche, Gold-Akzent als Linien-Element,
   Mono-Uppercase-Label als Kopfzeile, Hanken fuer Fliesstext.
   ============================================================ */

/* Setup-Block · Vorbereitungs-Text (Tag 10.2). Panel-2, kein Gold-Rand. */
.kachel-setup {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-setup-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-setup-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
}

/* Kernblock · Betonungs-Absatz mit Gold-Rand links (Tag 10.2). */
.kachel-kernblock {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-left: 2px solid var(--u-accent, #E0B860);
  border-radius: 6px;
  margin-bottom: 14px;
}
.kachel-kernblock-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-kernblock-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
  margin: 0;
}

/* Tipps-Liste · Bullet-Punkte (Tag 10.2). */
.kachel-tipps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.kachel-tipps li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.55;
}
.kachel-tipps li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--u-accent-dim, #8A6D3B);
}

/* Nummerierte Schritt-Liste (Tag 10.4 Uddiyana-Ablauf). */
.kachel-schritte {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-schritte-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--u-line, #2A3452);
}
.kachel-schritte-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kachel-schritte-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
}
.kachel-schritte-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: schritt;
}
.kachel-schritt {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--u-line, #2A3452);
}
.kachel-schritt:last-child { border-bottom: none; }
.kachel-schritt-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--u-accent, #E0B860);
  min-width: 24px;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kachel-schritt-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
}
.kachel-schritt-text b {
  color: var(--ink-1, #DDE3EF);
  font-weight: 600;
}
.kachel-schritt-recovery .kachel-schritt-text {
  color: var(--ink-2, #A9B3C7);
}

/* Kontraindikations-Chips (Tag 10.3). */
.kachel-kontra {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-kontra-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-kontra-instr {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.55;
  margin-bottom: 12px;
}
.kachel-kontra-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.kachel-kontra-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--u-panel, #0F1735);
  border-radius: 6px;
}
.kachel-kontra-chip-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
}
/* Marker rechts im Kontra-Chip. Frueher zwei disabled Ja/Nein-Buttons — sah
 * nach Toggle aus, war statisch. Jetzt ein einzelner Marker mit Gold-Akzent,
 * der klar sagt: dieser Punkt trifft nicht zu. Reine Anzeige, kein Element
 * ist interaktiv (siehe kachel-renderer.js kontraChips-Block, Aug 2026). */
.kachel-kontra-chip-marker {
  padding: 3px 10px;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}
.kachel-kontra-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--u-line, #2A3452);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kachel-kontra-status-value {
  color: var(--u-accent, #E0B860);
}

/* Bereitschafts-Textblock (Tag 10.3). Panel-2, kein Gold-Rand. */
.kachel-bereitschaft {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-bereitschaft-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-bereitschaft-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.6;
  margin: 0;
}

/* Safety-Block · Sicherheits-Hinweis (Tag 10.4). Gold-Rand links. */
.kachel-safety {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-left: 2px solid var(--u-accent, #E0B860);
  border-radius: 6px;
  margin-bottom: 14px;
}
.kachel-safety-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-safety-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
  margin: 0;
}

/* Entscheidungs-Buttons (Tag 10.5 Bereitschafts-Check). */
.kachel-entscheidung {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-entscheidung-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-entscheidung-frage {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.55;
  margin: 0 0 12px;
}
.kachel-entscheidung-optionen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kachel-entscheidung-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--u-panel, #0F1735);
  border: 1px solid var(--u-line, #2A3452);
  border-radius: 6px;
  text-align: left;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
  cursor: pointer;
}
.kachel-entscheidung-btn:hover,
.kachel-entscheidung-btn:focus {
  border-color: var(--u-accent-dim, #8A6D3B);
  outline: none;
}
.kachel-entscheidung-btn-primary {
  border-color: var(--u-accent-dim, #8A6D3B);
}
.kachel-entscheidung-btn-primary:hover,
.kachel-entscheidung-btn-primary:focus {
  border-color: var(--u-accent, #E0B860);
}
.kachel-entscheidung-btn-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kachel-entscheidung-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* Timer-Anker · optionaler Runden-Timer (Tag 10.2). */
.kachel-timer-anker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 10px;
  margin-bottom: 14px;
}
.kachel-timer-anker-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kachel-timer-anker-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kachel-timer-anker-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: var(--u-accent, #E0B860);
  font-variant-numeric: tabular-nums;
}
.kachel-timer-anker-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
}

/* Meilenstein · Panel-2 mit Gold-dim-Rand (Tag 10.1). */
.kachel-meilenstein {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-left: 2px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 6px;
  margin-bottom: 14px;
}
.kachel-meilenstein-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-meilenstein-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.55;
  margin: 0;
}

/* Merksatz · Panel mit Gold-Rand und "MERKSATZ TAG X"-Label. */
.kachel-merksatz {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-left: 2px solid var(--u-accent, #E0B860);
  border-radius: 6px;
  margin-bottom: 14px;
}
.kachel-merksatz-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kachel-merksatz-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.5;
  margin: 0;
  font-style: normal;
}

/* ---------- Tag 11 · Neue Kachel-Bausteine ---------- */

/* Aussage-Reichweite · Panel-2 mit Gold-dim-Rand, Mono-Label.
   Rahmt eine Studie als Kontext, nicht als Wirkungsbeleg (Tag 11.1). */
.kachel-reichweite {
  padding: 12px 14px;
  background: var(--u-panel-2, #182349);
  border-left: 2px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 6px;
  margin-bottom: 14px;
}
.kachel-reichweite-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-reichweite-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.55;
  margin: 0;
}

/* Skill-Chip · kompakter Chip mit Pfeil, verweist auf Skill-Karte (Tag 11.3). */
.kachel-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-1, #DDE3EF);
  text-decoration: none;
  margin-bottom: 12px;
}
.kachel-skill-chip:hover {
  border-color: var(--u-accent, #E0B860);
}
.kachel-skill-chip-text {
  color: var(--ink-1, #DDE3EF);
}
.kachel-skill-chip-arrow {
  color: var(--u-accent, #E0B860);
}
.kachel-skill-chip-suffix {
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}

/* Kontraindikations-Rueckversicherung · kompakter Kasten mit Link zurueck
   zur Kontra-Kachel eines frueheren Tages (Tag 11.3 -> Tag 10.3). */
.kachel-kontra-rueck {
  padding: 10px 12px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 6px;
  margin-bottom: 12px;
}
.kachel-kontra-rueck-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kachel-kontra-rueck-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.5;
}
.kachel-kontra-rueck-link {
  color: var(--u-accent, #E0B860);
  text-decoration: underline;
  text-decoration-color: var(--u-accent-dim, #8A6D3B);
  text-underline-offset: 3px;
  margin-left: 4px;
}

/* Inline-Block-Timer · Slot im Renderer, Runner setzt Inhalt hinein (Tag 11.2). */
.kachel-block-timer-slot {
  margin: 10px 0 14px;
}
.kachel-block-timer {
  display: block;
  padding: 14px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 8px;
}

/* Timer-Uhr und Zustands-Label */
.kbt-timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.kbt-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #6A7492);
}
.kbt-state-ruhe {
  color: var(--ink-3, #6A7492);
}
.kbt-state-aktiv {
  color: var(--u-accent, #E0B860);
}
.kbt-clock {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 26px;
  color: var(--ink-1, #DDE3EF);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.kbt-clock.aktiv {
  color: var(--u-accent, #E0B860);
}

/* Timeline mit Bloecken und Cursor */
.kbt-timeline-stage {
  margin-bottom: 12px;
}
.kbt-timeline-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kbt-timeline {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--u-panel-3, #0F1834);
}
.kbt-block {
  flex: 1 1 0;
  border-right: 1px solid rgba(10, 15, 34, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kbt-block:last-child {
  border-right: none;
}
.kbt-block-ruhe {
  background: rgba(42, 52, 82, 0.55);
}
.kbt-block-aktiv {
  background: rgba(224, 184, 96, 0.14);
}
.kbt-block-current-ruhe {
  background: rgba(42, 52, 82, 0.9);
  outline: 1px solid var(--ink-2, #98A2BA);
  outline-offset: -1px;
}
.kbt-block-current-aktiv {
  background: rgba(224, 184, 96, 0.32);
  outline: 1px solid var(--u-accent, #E0B860);
  outline-offset: -1px;
}
.kbt-block-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  color: var(--ink-2, #98A2BA);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kbt-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--u-accent, #E0B860);
  left: 0;
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
}
.kbt-cursor.running {
  opacity: 1;
}
.kbt-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.kbt-axis-tick {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.06em;
}

/* Puls-Detail: Reihe mit 15 Dots im 2-s-Takt */
.kbt-puls-detail {
  margin-bottom: 14px;
  padding: 8px 10px;
  background: var(--u-panel-3, #0F1834);
  border-radius: 6px;
}
.kbt-puls-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kbt-puls-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.kbt-puls-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
}
.kbt-puls-dot.active {
  background: var(--u-accent, #E0B860);
  border-color: var(--u-accent, #E0B860);
}
.kbt-puls-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-2, #A9B3C7);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Anleitungs-Schritte (nummerierte Liste unter dem Timer) */
.kbt-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  counter-reset: kbt-step;
}
.kbt-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
}
.kbt-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--u-accent, #E0B860);
  letter-spacing: 0.08em;
  min-width: 22px;
  padding-top: 2px;
}
.kbt-step-text {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2, #A9B3C7);
  line-height: 1.5;
}

/* Start-Button */
.kbt-start {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--u-accent, #E0B860);
  border-radius: 6px;
  color: var(--u-accent, #E0B860);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.kbt-start:hover {
  background: rgba(224, 184, 96, 0.08);
}
.kbt-start.running {
  border-color: var(--ink-3, #6A7492);
  color: var(--ink-3, #6A7492);
  cursor: default;
}
.kbt-start.done {
  border-color: var(--u-accent-dim, #8A6D3B);
  color: var(--u-accent-dim, #8A6D3B);
}

/* App-Weg-Kasten unter dem Timer */
.kbt-appweg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 12px;
  background: var(--u-panel-3, #0F1834);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 6px;
}
.kbt-appweg-info {
  flex: 1 1 auto;
}
.kbt-appweg-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.kbt-appweg-title {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-1, #DDE3EF);
  line-height: 1.4;
}
.kbt-appweg-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--u-accent-dim, #8A6D3B);
  border-radius: 4px;
  color: var(--u-accent, #E0B860);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.kbt-appweg-btn:hover {
  border-color: var(--u-accent, #E0B860);
}

/* Referenz-Zeile am Kachel-Ende (Tag 10.2, 10.4). */
.kachel-ref-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 10px 0 6px;
  padding: 0 2px;
}

/* ============================================================ */
/* Tag 12.2 · Inline-Rhythmus-Timer · Zwei-Phasen-Warmup         */
/* ============================================================ */

.kachel-rhythmus-timer-slot {
  margin: 10px 0 14px;
}
.tag12-rhythmus-timer {
  display: block;
  padding: 14px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 8px;
}

.tag12-rt-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 14px;
}
.tag12-rt-state {
  grid-column: 1;
  grid-row: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #6A7492);
}
.tag12-rt-clock {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 32px;
  color: var(--ink-1, #DDE3EF);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tag12-rt-phase {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--u-accent, #E0B860);
}
.tag12-rt-cycle {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7492);
  font-variant-numeric: tabular-nums;
}

.tag12-rt-timeline {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--u-panel-3, #0F1834);
  margin-bottom: 12px;
}
.tag12-rt-block {
  flex: 1 1 0;
  border-right: 1px solid rgba(10, 15, 34, 0.4);
  background: rgba(42, 52, 82, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag12-rt-block:last-child {
  border-right: none;
}
.tag12-rt-block-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, #6A7492);
}
.tag12-rt-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--u-accent, #E0B860);
  transition: left 200ms linear;
  pointer-events: none;
}

/* Optionale Zeitachse unter der Timeline (Tag 13.2 / 13.3) */
.tag12-rt-timeaxis {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6A7492);
  margin: -8px 0 14px 0;
  padding: 0 2px;
}

.tag12-rt-rhythm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.tag12-rt-half {
  padding: 12px;
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 6px;
  background: var(--u-panel-3, #0F1834);
  text-align: center;
  opacity: 0.45;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.tag12-rt-half-active {
  opacity: 1;
  border-color: var(--u-accent, #E0B860);
}
.tag12-rt-half-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1, #DDE3EF);
  margin-bottom: 4px;
}
.tag12-rt-half-sec {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7492);
  font-variant-numeric: tabular-nums;
}

.tag12-rt-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tag12-rt-steps li {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 10px;
  background: var(--u-panel-3, #0F1834);
  border-radius: 4px;
}
.tag12-rt-step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--u-accent, #E0B860);
  align-self: start;
}
.tag12-rt-step-head {
  grid-column: 2;
  grid-row: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1, #DDE3EF);
}
.tag12-rt-step-text {
  grid-column: 2;
  grid-row: 2;
  font-size: 13px;
  color: var(--ink-2, #A8B0C4);
  line-height: 1.5;
}

.tag12-rt-start {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--u-accent, #E0B860);
  color: var(--u-ink-inverse, #0A0F22);
  border: none;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 12px;
}
.tag12-rt-start[disabled] {
  background: var(--u-panel-3, #0F1834);
  color: var(--ink-3, #6A7492);
  cursor: default;
}

.tag12-rt-appweg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--u-panel-3, #0F1834);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 6px;
}
.tag12-rt-appweg-info {
  flex: 1 1 auto;
  min-width: 0;
}
.tag12-rt-appweg-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #6A7492);
  margin-bottom: 3px;
}
.tag12-rt-appweg-title {
  font-size: 13px;
  color: var(--ink-1, #DDE3EF);
}
.tag12-rt-appweg-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 4px;
  color: var(--ink-2, #A8B0C4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tag12-rt-appweg-btn:hover {
  border-color: var(--ink-2, #A8B0C4);
  color: var(--ink-1, #DDE3EF);
}

/* ============================================================ */
/* Tag 12.6 · Inline-Kreis-Timer · Dreiphasen-Rad (Ein/Aus/Ret) */
/* Wird an Tag 13.6 wiederverwendet.                            */
/* ============================================================ */

.kachel-kreis-timer-slot {
  margin: 10px 0 14px;
}
.tag12-kreis-timer {
  display: block;
  padding: 14px;
  background: var(--u-panel-2, #182349);
  border: 1px solid var(--ink-3-border, #2A3452);
  border-radius: 8px;
}

.tag12-kt-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  margin-bottom: 14px;
}
.tag12-kt-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #6A7492);
}
.tag12-kt-clock {
  justify-self: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 32px;
  color: var(--ink-1, #DDE3EF);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tag12-kt-cycle {
  justify-self: end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7492);
  font-variant-numeric: tabular-nums;
}

.tag12-kt-wheel-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 8px auto 14px;
}
.tag12-kt-wheel {
  width: 100%;
  height: 100%;
  display: block;
}
.tag12-kt-seg {
  opacity: 0.35;
  transition: opacity 180ms ease, stroke-width 180ms ease;
}
.tag12-kt-seg-active {
  opacity: 1;
  stroke-width: 7;
}
.tag12-kt-seg-ein {
  stroke: var(--ink-1, #DDE3EF);
}
.tag12-kt-seg-aus {
  stroke: var(--ink-2, #A8B0C4);
}
.tag12-kt-seg-retention {
  stroke: var(--u-accent, #E0B860);
}

.tag12-kt-phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-1, #DDE3EF);
  pointer-events: none;
}

.tag12-kt-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tag12-kt-steps li {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 10px;
  background: var(--u-panel-3, #0F1834);
  border-radius: 4px;
}
.tag12-kt-step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--u-accent, #E0B860);
  align-self: start;
}
.tag12-kt-step-head {
  grid-column: 2;
  grid-row: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1, #DDE3EF);
}
.tag12-kt-step-text {
  grid-column: 2;
  grid-row: 2;
  font-size: 13px;
  color: var(--ink-2, #A8B0C4);
  line-height: 1.5;
}

.tag12-kt-start {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--u-accent, #E0B860);
  color: var(--u-ink-inverse, #0A0F22);
  border: none;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.tag12-kt-start[disabled] {
  background: var(--u-panel-3, #0F1834);
  color: var(--ink-3, #6A7492);
  cursor: default;
}

/* ============================================================================
   PWA-Update-Streifen (BIOS-Stil, monochrom)
   ----------------------------------------------------------------------------
   Sichtbar nur, wenn ein neuer Service Worker installiert wartet und schon ein
   alter Controller laeuft. Bewusste Fremdsprache im Instrument: monospace,
   monochrom, schmaler Kontrast — die Ebene der Auslieferung meldet sich, nicht
   das Instrument selbst. Ein Streifen am unteren Rand, kein Overlay, keine
   Farbe, kein Gold-Anker.
   Kein Konflikt mit update-notice.js (Store-Update-Karte fuer den nativen
   Build) — jener Baustein nutzt #shiihaa-update-notice und .un-*.
   ========================================================================== */
.pwa-update-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: #000000;
  color: #E6E6E6;
  border-top: 1px solid #333333;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-align: center;
}
.pwa-update-notice.is-visible { display: block; }
.pwa-update-notice__label {
  color: #999999;
  margin-right: var(--space-3);
}
.pwa-update-notice__action {
  background: transparent;
  color: #E6E6E6;
  border: 1px solid #E6E6E6;
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pwa-update-notice__action:hover,
.pwa-update-notice__action:focus {
  background: #E6E6E6;
  color: #000000;
  outline: none;
}

/* Kontrast-Block (Tag 14.1 Wissen): Gegenueberstellung mit Gold-Kante fuer
   pos und neutraler Linie fuer neg. Sitzt zwischen prose-Absaetzen und
   schaerft eine Definition durch das explizite "misst" vs. "misst nicht". */
.kachel-contrast {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 22px;
}
.kachel-contrast-row {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  border-left: 2px solid var(--line, #2A3452);
}
.kachel-contrast-row.kachel-contrast-pos {
  border-left: 2px solid var(--u-accent, #E0B860);
}
.kachel-contrast-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kachel-contrast-row.kachel-contrast-neg .kachel-contrast-label {
  color: var(--ink-3, #6A7492);
}
.kachel-contrast-text {
  font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
  font-size: 14px;
  color: var(--ink-1, #C6CDE2);
  line-height: 1.55;
}

/* Naechste-Schritte-Karten (Tag 14.5 Aufgabe): drei Karten mit Titel,
   Status-Chip, Kurz-Text und Mono-Fusszeile. Aktive Karte mit Gold-Kante,
   geplante mit neutraler Linie. */
.kachel-naechste-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 20px;
}
.kachel-naechste-item {
  padding: 14px 16px;
  background: var(--u-panel-2, #182349);
  border-radius: 10px;
  border-left: 2px solid var(--line, #2A3452);
}
.kachel-naechste-item.kachel-naechste-aktiv {
  border-left: 2px solid var(--u-accent, #E0B860);
}
.kachel-naechste-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kachel-naechste-titel {
  font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
  font-size: 15px;
  color: var(--ink-0, #F5F7FC);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.kachel-naechste-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--u-accent-dim, #8A6D3B);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kachel-naechste-item:not(.kachel-naechste-aktiv) .kachel-naechste-status {
  color: var(--ink-3, #6A7492);
}
.kachel-naechste-text {
  font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
  font-size: 13.5px;
  color: var(--ink-2, #98A2BA);
  line-height: 1.6;
  margin-bottom: 8px;
}
.kachel-naechste-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-3, #6A7492);
  letter-spacing: 0.06em;
}
.kachel-abschluss-zeile {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--u-bg, #0B1024);
  border-radius: 8px;
  border: 1px solid var(--line, #2A3452);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-1, #C6CDE2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Tag 14.3 · Abschluss-Session-Runner
   Wird von www/kurse/mechanik/tag-14-abschluss-session-runner.js geschrieben.
   Kachel-Wrapper (Progress, Titel, Nav) liefert kachel-renderer.js via
   renderKachelWithRunner. Nur der Slot mit dem Runner-Inhalt liegt hier.
   --------------------------------------------------------------------------- */

.kachel-abschluss-slot {
  margin-top: 4px;
}

.kachel-abschluss-runner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 4px;
}

/* Segment-Chip-Reihe */
.kachel-abschluss-segments {
  display: flex;
  gap: 2px;
  padding: 0 2px;
}
.kachel-abschluss-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--mech-u-panel-2, #182349);
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  color: var(--mech-ink-3, #6A7492);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}
.kachel-abschluss-seg-num {
  display: block;
  font-size: 11px;
  color: var(--mech-ink-1, #DDE3EF);
  margin-bottom: 2px;
}
.kachel-abschluss-seg-name {
  display: block;
}
.kachel-abschluss-seg-dauer {
  display: block;
  font-size: 9px;
  margin-top: 2px;
  color: var(--mech-ink-3, #6A7492);
}
.kachel-abschluss-seg.active {
  color: var(--mech-u-accent, #E0B860);
  border-color: rgba(224, 184, 96, 0.3);
  background: rgba(224, 184, 96, 0.05);
}
.kachel-abschluss-seg.active .kachel-abschluss-seg-num {
  color: var(--mech-u-accent, #E0B860);
}
.kachel-abschluss-seg.done {
  opacity: 0.55;
}

/* Timer-Ring · pulsanimation nur wenn Segment laeuft */
.kachel-abschluss-timer-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 4px;
}
.kachel-abschluss-timer-ring {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(224, 184, 96, 0.08),
    rgba(224, 184, 96, 0.02) 60%,
    transparent);
  border: 1px solid rgba(224, 184, 96, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.kachel-abschluss-runner[data-state="running"] .kachel-abschluss-timer-ring {
  animation: kachel-abschluss-puls 10s ease-in-out infinite;
}
@keyframes kachel-abschluss-puls {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(224, 184, 96, 0.2);
  }
  50% {
    transform: scale(1.04);
    border-color: rgba(224, 184, 96, 0.35);
  }
}
.kachel-abschluss-timer-inner {
  text-align: center;
}
.kachel-abschluss-timer-num {
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 36px;
  font-weight: 400;
  color: var(--mech-ink-0, #F5F7FC);
  letter-spacing: -0.02em;
  line-height: 1;
}
.kachel-abschluss-timer-unit {
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  color: var(--mech-ink-3, #6A7492);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 6px;
}
.kachel-abschluss-current-name {
  font-family: var(--mech-font-body, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--mech-ink-0, #F5F7FC);
  text-align: center;
  margin: 0 0 4px;
}
.kachel-abschluss-current-rhythm {
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--mech-u-accent, #E0B860);
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 4px;
}

/* Segment-Details */
.kachel-abschluss-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kachel-abschluss-detail {
  padding: 10px 12px;
  background: var(--mech-u-panel-2, #182349);
  border-left: 2px solid var(--mech-line, #2A3452);
  border-radius: 0 8px 8px 0;
  font-family: var(--mech-font-body, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-size: 12.5px;
  color: var(--mech-ink-2, #98A2BA);
  line-height: 1.55;
}
.kachel-abschluss-detail.active {
  border-left-color: var(--mech-u-accent, #E0B860);
}
.kachel-abschluss-detail.done {
  opacity: 0.55;
}
.kachel-abschluss-detail-tag {
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  color: var(--mech-ink-3, #6A7492);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.kachel-abschluss-detail.active .kachel-abschluss-detail-tag {
  color: var(--mech-u-accent, #E0B860);
}
.kachel-abschluss-detail-body {
  font-size: 12.5px;
}
.kachel-abschluss-detail-body b {
  color: var(--mech-ink-1, #DDE3EF);
  font-weight: 500;
}

/* Aktions-Zeile */
.kachel-abschluss-action-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.kachel-abschluss-action {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--mech-font-body, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid var(--mech-u-accent, #E0B860);
  background: var(--mech-u-accent, #E0B860);
  color: #0B1024;
}
.kachel-abschluss-action:hover {
  background: #F2C972;
  border-color: #F2C972;
}
.kachel-abschluss-action.kachel-abschluss-pause,
.kachel-abschluss-action.kachel-abschluss-stop {
  background: transparent;
  color: var(--mech-u-accent, #E0B860);
}
.kachel-abschluss-action.kachel-abschluss-pause:hover,
.kachel-abschluss-action.kachel-abschluss-stop:hover {
  background: rgba(224, 184, 96, 0.08);
}
.kachel-abschluss-done-hint {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--mech-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mech-u-accent, #E0B860);
  border: 1px solid rgba(224, 184, 96, 0.3);
  background: rgba(224, 184, 96, 0.05);
  text-align: center;
}