/* ============================================================
   PRESSUREPROOF DASHBOARD · THEME-MATCHED v4
   Schriften & Farben aus pressureproof-theme v2.5 (style.css)
   ============================================================
   FONTS (matched to website):
     • Oswald      400/500/600/700  — alle Headlines, Stat-Numbers, Labels
     • Montserrat  300/400/500/600/700/800  — kompletter Body-Text
     • Big Shoulders Display  700  — NUR Logo

   COLORS (matched to :root in theme):
     • --bg-main: #0A0A0A
     • --bg-card: #1a1a1a
     • --gold:    #C9A227
     • --gray:    #9A9A9A
     • --white:   #FFFFFF

   STRUCTURE:
     1. Font + color tokens
     2. Typography overrides
     3. Card patterns (matches .pricing-card, .trilogy-card)
     4. Form patterns (matches .form-group)
     5. Button patterns (matches .btn-primary, .btn-secondary)
     6. Dashboard-specific overrides (Hero, Wechselwirkungen, etc.)
     7. Light-mode support
   ============================================================ */


/* ====== 1. FONT IMPORT ====== */
/* Bereits über das Theme geladen — diese Zeile nur falls Standalone */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800&family=Big+Shoulders+Display:wght@700&display=swap');


/* ====== 2. THEME TOKENS ====== */

.pp-dash,
.pp-content,
.tab-pane,
.pp-main-grid {
  /* Backgrounds */
  --pp-bg:           #0A0A0A;
  --pp-bg-card:      #1a1a1a;
  --pp-bg-card-hover:#222222;
  --pp-bg-input:     rgba(255, 255, 255, 0.05);
  --pp-bg-overlay:   rgba(10, 10, 10, 0.96);

  /* Gold scale */
  --pp-gold:         #C9A227;
  --pp-gold-light:   #FFD700;
  --pp-gold-soft:    #B89426;
  --pp-gold-glow:    rgba(201, 162, 39, 0.18);
  --pp-gold-faint:   rgba(201, 162, 39, 0.05);

  /* Borders */
  --pp-line:         rgba(201, 162, 39, 0.2);
  --pp-line-soft:    rgba(255, 255, 255, 0.06);
  --pp-line-medium:  rgba(255, 255, 255, 0.1);
  --pp-line-input:   rgba(201, 162, 39, 0.3);

  /* Text */
  --pp-text:         #FFFFFF;
  --pp-text-soft:    rgba(255, 255, 255, 0.85);
  --pp-text-mute:    #9A9A9A;
  --pp-text-faint:   #6A6A6A;

  /* Status */
  --pp-status-opt:   #4FB287;
  --pp-status-warn:  #E6A847;
  --pp-status-crit:  #D9544D;
  --pp-status-opt-bg:  rgba(79, 178, 135, 0.10);
  --pp-status-warn-bg: rgba(230, 168, 71, 0.10);
  --pp-status-crit-bg: rgba(217, 84, 77, 0.10);

  /* Fonts — MATCHED TO THEME */
  --pp-font-display: 'Oswald', sans-serif;
  --pp-font-body:    'Montserrat', sans-serif;
  --pp-font-logo:    'Big Shoulders Display', sans-serif;
}


/* ====== 3. RESET PLUS BODY ====== */

body {
  background-color: var(--pp-bg) !important;
  color: var(--pp-text) !important;
  font-family: var(--pp-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

::selection {
  background: var(--pp-gold);
  color: var(--pp-bg);
}


/* ====== 4. HEADINGS — OSWALD ====== */

h1, h2, h3, h4, h5, h6,
.pp-page-title,
.pp-section-title,
.pp-card-title,
.pp-cat-title,
.pp-summary-headline {
  font-family: var(--pp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--pp-text);
  text-transform: none;
  line-height: 1.2 !important;
}

.pp-page-title {
  font-size: 2.75rem !important;        /* ~44px, between H1 4rem and H2 2.5rem */
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.pp-section-title {
  font-size: 1.85rem !important;        /* ~30px */
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.pp-cat-title {
  font-size: 1.5rem !important;         /* ~24px */
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.pp-card-title {
  font-size: 1.3rem !important;         /* H3 size from theme */
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--pp-text) !important;
}

.pp-summary-headline {
  font-size: 2.25rem !important;        /* ~36px */
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}


/* ====== 5. STAT NUMBERS — OSWALD ====== */
/* Matches theme's .stat-number: Oswald 2.5rem gold */

.pp-hero-value,
.pp-bioage-main,
.pp-dist-num,
.pp-marker-value,
.pp-vitals-bmi-value,
.pp-bm-kpi-value,
.pp-body-value,
.pp-vitals-input {
  font-family: var(--pp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.pp-hero-value,
.pp-bioage-main {
  font-size: 4.5rem !important;         /* ~72px — slightly bigger than theme's 4rem H1 */
  line-height: 0.95 !important;
}

.pp-dist-num {
  font-size: 2.5rem !important;         /* matches .stat-number */
}

.pp-marker-value {
  font-size: 1.5rem !important;
}

.pp-vitals-bmi-value {
  font-size: 3rem !important;
}

.pp-bm-kpi-value {
  font-size: 2.25rem !important;
}

.pp-body-value {
  font-size: 2.75rem !important;
}

.pp-vitals-input {
  font-size: 3rem !important;
}


/* ====== 6. BODY TEXT — MONTSERRAT ====== */

p,
.pp-section-sub,
.pp-card-sub,
.pp-cat-summary,
.pp-hero-detail,
.pp-marker-relevance,
.pp-tooltip-body,
.pp-supp-dosage,
.pp-time-supp-dose,
.pp-time-note,
.pp-priority-col li,
.pp-add-list li,
.pp-summary-body,
.pp-summary-cell-text,
.pp-summary-quote p,
.pp-check-text,
.pp-sources li,
.pp-help,
.pp-vitals-context,
.pp-body-context,
.pp-interact-text,
.pp-action-detail {
  font-family: var(--pp-font-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;        /* override italic — theme is mostly upright */
}

.pp-section-sub,
.pp-card-sub,
.pp-cat-summary,
.pp-hero-detail {
  font-size: 0.95rem !important;        /* ~15px */
  color: var(--pp-text-mute) !important;
  line-height: 1.55 !important;
}

.pp-summary-body,
.pp-summary-quote p {
  font-size: 1.05rem !important;        /* ~17px — for emphasis content */
  color: var(--pp-text) !important;
  line-height: 1.65 !important;
}

.pp-check-text,
.pp-priority-col li,
.pp-add-list li,
.pp-interact-text,
.pp-action-detail,
.pp-supp-dosage,
.pp-time-supp-dose {
  font-size: 0.95rem !important;
  color: var(--pp-text) !important;
  line-height: 1.5 !important;
}

.pp-summary-cell-text,
.pp-vitals-context,
.pp-body-context,
.pp-time-note,
.pp-sources li,
.pp-help,
.pp-tooltip-body {
  font-size: 0.9rem !important;         /* ~14.4px */
  color: var(--pp-text-mute) !important;
  line-height: 1.5 !important;
}


/* ====== 7. LABELS / EYEBROWS — OSWALD UPPERCASE GOLD ====== */
/* Matches theme's .form-group label: Oswald 0.85rem letter-spacing 2px gold */

.pp-eyebrow,
.pp-section-num,
.pp-card-num,
.pp-cat-title .num,
.pp-priority-num,
.pp-priority-col-label,
.pp-summary-cell-label,
.pp-add-cat,
.pp-supp-row.head span,
.pp-supp-trigger-label,
.pp-supp-timing,
.pp-overview-header span,
.pp-overview-status,
.pp-bm-kpi-label,
.pp-bm-kpi-target,
.pp-bm-kpi-delta,
.pp-vitals-label,
.pp-body-label,
.pp-hero-label,
.pp-hero-status,
.pp-bioage-vs-label,
.pp-dist-label,
.pp-time-clock,
.pp-time-context,
.pp-time-stomach,
.pp-time-supp-name,
.pp-tooltip-title,
.pp-tooltip-status,
.pp-trend-title,
.pp-trend-delta,
.pp-action-label,
.pp-action-supp,
.pp-interact-pair,
.pp-interact-label,
.pp-marker-name,
.pp-overview-marker,
.pp-overview-value,
.pp-overview-target,
.pp-bar-legend span,
.pp-bar-ticks,
.pp-tab,
.pp-btn,
.pp-nav-item,
.pp-sidebar-title,
.pp-page-meta,
.pp-summary-quote-end,
.pp-marker-value .unit,
.pp-vitals-unit,
.pp-bm-kpi-value .unit,
.pp-hero-value .unit,
.pp-label,
.pp-form-message {
  font-family: var(--pp-font-display) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Specific size adjustments */
.pp-eyebrow {
  font-size: 0.8rem !important;          /* ~13px, matches button font-size */
  letter-spacing: 5px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-section-num,
.pp-card-num {
  font-size: 0.8rem !important;          /* increased from 0.625rem (10px) */
  letter-spacing: 4px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-priority-num,
.pp-priority-col-label,
.pp-summary-cell-label,
.pp-add-cat {
  font-size: 0.75rem !important;         /* ~12px */
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-cat-title .num {
  font-size: 0.875rem !important;        /* ~14px */
  letter-spacing: 4px !important;
  font-weight: 500 !important;
}

.pp-priority-title {
  font-family: var(--pp-font-display) !important;
  font-size: 1.4rem !important;          /* ~22px */
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.pp-priority-values {
  font-family: var(--pp-font-body) !important;
  font-size: 0.95rem !important;
  font-style: normal !important;
  color: var(--pp-text-mute) !important;
}

.pp-supp-row.head span,
.pp-overview-header span {
  font-size: 0.7rem !important;          /* ~11.2px */
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-supp-trigger-label,
.pp-supp-timing {
  font-size: 0.7rem !important;
  letter-spacing: 1.8px !important;
  font-weight: 500 !important;
}

.pp-supp-trigger-label {
  color: var(--pp-text-mute) !important;
}

.pp-supp-timing {
  color: var(--pp-gold) !important;
  font-weight: 600 !important;
}

.pp-supp-trigger-name,
.pp-supp-name,
.pp-time-supp-name,
.pp-action-supp {
  font-family: var(--pp-font-display) !important;
  font-size: 1.05rem !important;         /* ~17px */
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;       /* names stay normal case */
}

.pp-overview-status,
.pp-bm-kpi-delta {
  font-size: 0.7rem !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
}

.pp-bm-kpi-label,
.pp-vitals-label,
.pp-body-label,
.pp-hero-label,
.pp-bioage-vs-label,
.pp-trend-title,
.pp-action-label,
.pp-interact-label,
.pp-tooltip-title {
  font-size: 0.75rem !important;
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-bm-kpi-target {
  font-size: 0.7rem !important;
  letter-spacing: 1.8px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}

.pp-vitals-context {
  font-family: var(--pp-font-body) !important;
  text-transform: none !important;
  font-style: normal !important;
}

.pp-hero-status,
.pp-tooltip-status {
  font-size: 0.8rem !important;
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
}

.pp-dist-label {
  font-size: 0.85rem !important;
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}

.pp-time-clock {
  font-family: var(--pp-font-display) !important;
  font-size: 1.25rem !important;         /* ~20px */
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 1px !important;
  color: var(--pp-gold) !important;
}

.pp-time-context,
.pp-time-stomach {
  font-size: 0.7rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}

.pp-marker-name,
.pp-overview-marker {
  font-family: var(--pp-font-display) !important;
  font-size: 1.1rem !important;          /* ~17.6px */
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}

.pp-marker-relevance {
  font-size: 0.75rem !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}

.pp-bar-legend span {
  font-size: 0.65rem !important;         /* ~10.4px */
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}

.pp-bar-legend span.optimal-label {
  color: var(--pp-gold) !important;
  font-weight: 600 !important;
}

.pp-bar-ticks {
  font-family: var(--pp-font-display) !important;
  font-size: 0.65rem !important;
  letter-spacing: 1.2px !important;
  color: var(--pp-text-mute) !important;
  font-weight: 500 !important;
}

.pp-overview-value,
.pp-overview-target {
  font-family: var(--pp-font-display) !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

.pp-overview-value {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.pp-overview-target {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: var(--pp-text-mute) !important;
}

.pp-marker-value .unit,
.pp-vitals-unit,
.pp-bm-kpi-value .unit,
.pp-hero-value .unit {
  font-size: 0.75rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 400 !important;
  color: var(--pp-text-mute) !important;
}


/* ====== 8. INTERACTIVE TEXT (Wechselwirkungen) ====== */

.pp-interact-pair {
  font-family: var(--pp-font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: var(--pp-status-warn) !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
}

.pp-interact-label {
  font-size: 0.7rem !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
  padding-top: 3px !important;
}

.pp-interact-text {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--pp-text-soft) !important;
}

.pp-interact-row {
  grid-template-columns: 80px 1fr !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
}


/* ====== 9. CHECKLIST (Nächste Schritte) ====== */

.pp-check-text {
  font-family: var(--pp-font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.45 !important;
}

.pp-check-due {
  font-family: var(--pp-font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}


/* ====== 10. CARD PATTERN ====== */
/* Matches theme's .pricing-card style */

.pp-card,
.pp-overview,
.pp-checklist,
.pp-sources,
.pp-supp-table {
  background: var(--pp-bg-card) !important;
  border: 1px solid var(--pp-line) !important;
  transition: all 0.3s ease;
}

.pp-card:hover {
  border-color: var(--pp-gold);
  background: rgba(201, 162, 39, 0.03);
}

.pp-card-head {
  border-bottom: 1px solid var(--pp-line-soft) !important;
  padding: 1.5rem 1.75rem 1rem !important;
}

.pp-card-body {
  padding: 1.5rem 1.75rem 1.75rem !important;
}


/* ====== 11. FORM PATTERNS ====== */
/* Matches theme's .form-group input exactly */

.pp-input,
.pp-select,
input[type="text"].pp-input,
input[type="email"].pp-input,
input[type="password"].pp-input,
input[type="number"].pp-input,
input[type="date"].pp-input,
input[type="tel"].pp-input,
select.pp-select {
  font-family: var(--pp-font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--pp-text) !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.pp-input::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.pp-input:hover,
.pp-select:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.pp-input:focus,
.pp-select:focus {
  border-color: var(--pp-gold) !important;
  background: rgba(201, 162, 39, 0.05) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.1) !important;
}

.pp-label {
  font-family: var(--pp-font-display) !important;
  font-size: 0.85rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--pp-gold) !important;
  margin-bottom: 0.6rem !important;
  display: block !important;
}


/* ====== 12. BUTTON PATTERNS ====== */
/* Matches .btn-primary / .btn-secondary from theme */

.pp-btn,
.pp-btn.primary {
  font-family: var(--pp-font-display) !important;
  font-size: 0.8rem !important;          /* matches theme exactly */
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pp-btn {
  background: transparent !important;
  border: 1px solid var(--pp-gold) !important;
  color: var(--pp-gold) !important;
}

.pp-btn:hover {
  background: var(--pp-gold) !important;
  color: var(--pp-bg) !important;
  transform: scale(1.02);
}

.pp-btn.primary {
  background: var(--pp-gold) !important;
  border: 1px solid var(--pp-gold) !important;
  color: var(--pp-bg) !important;
}

.pp-btn.primary:hover {
  background: var(--pp-white) !important;
  color: var(--pp-bg) !important;
  transform: scale(1.04) translateY(-1px);
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.3) !important;
}


/* ====== 13. NAV / TABS ====== */

.pp-tab {
  font-size: 0.8rem !important;          /* matches button size */
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
  padding: 16px 24px !important;
  color: var(--pp-text-mute) !important;
}

.pp-tab.active {
  color: var(--pp-gold) !important;
  border-bottom-color: var(--pp-gold) !important;
}


/* ====== 14. SIDEBAR (Scroll-Spy) ====== */

.pp-sidebar-title {
  font-size: 0.7rem !important;
  letter-spacing: 4px !important;
  font-weight: 600 !important;
  color: var(--pp-gold) !important;
}

.pp-nav-item {
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  color: var(--pp-text-mute) !important;
}

.pp-nav-item:hover {
  color: var(--pp-text) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.pp-nav-item.is-active {
  color: var(--pp-gold) !important;
  border-left-color: var(--pp-gold) !important;
  background: linear-gradient(90deg, var(--pp-gold-glow), transparent) !important;
}

.pp-nav-num {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
}


/* ====== 15. HERO + CRITICAL STRIP ====== */

.pp-hero {
  border: 1px solid var(--pp-line) !important;
  background: var(--pp-line-soft) !important;
}

.pp-hero-cell {
  background: var(--pp-bg-card) !important;
}

.pp-hero-cell.primary {
  background: linear-gradient(135deg, var(--pp-bg-card) 0%, #221d12 100%) !important;
}

.pp-hero-detail {
  font-family: var(--pp-font-body) !important;
  font-size: 1rem !important;            /* increased for readability */
  color: var(--pp-text-soft) !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  margin-top: 1rem !important;
}

.pp-critical-text strong {
  font-family: var(--pp-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.pp-critical-text p {
  font-family: var(--pp-font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--pp-text) !important;
  line-height: 1.5 !important;
  margin-top: 0.4rem !important;
}


/* ====== 16. PAGE TITLE ROW ====== */

.pp-page-meta {
  font-size: 0.75rem !important;
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
  color: var(--pp-text-mute) !important;
}


/* ====== 17. ALERTS ====== */

.pp-alert {
  font-family: var(--pp-font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  padding: 16px 24px !important;
  line-height: 1.5;
}

.pp-alert strong {
  font-family: var(--pp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}


/* ====== 18. SUMMARY ====== */

.pp-summary-quote-end {
  font-size: 0.95rem !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--pp-gold) !important;
}


/* ====== 19. ITALIC ELIMINATION ====== */
/* Theme rarely uses italics — drop them for consistency */

.pp-section-sub,
.pp-card-sub,
.pp-cat-summary,
.pp-hero-detail,
.pp-vitals-context,
.pp-body-context,
.pp-time-note,
.pp-help,
.pp-summary-body,
.pp-summary-quote p,
.pp-priority-values,
.pp-action-detail {
  font-style: normal !important;
}

/* Keep italics only for quotes — they look intentional there */
.pp-summary-quote p {
  font-style: italic !important;
}


/* ====== 20. LIGHT MODE SUPPORT ====== */
/* Mirrors body.light-mode from theme — wraps for dashboard context */

body.light-mode .pp-content,
body.light-mode .tab-pane,
body.light-mode .pp-main-grid {
  --pp-bg:           #FFFFFF;
  --pp-bg-card:      #F7F5EE;
  --pp-bg-card-hover:#F0EBE0;
  --pp-bg-input:     rgba(0, 0, 0, 0.03);
  --pp-bg-overlay:   rgba(255, 255, 255, 0.96);

  --pp-line:         rgba(201, 162, 39, 0.4);
  --pp-line-soft:    rgba(0, 0, 0, 0.08);
  --pp-line-medium:  rgba(0, 0, 0, 0.12);

  --pp-text:         #1a1a1a;
  --pp-text-soft:    rgba(26, 26, 26, 0.85);
  --pp-text-mute:    #6A6A6A;
  --pp-text-faint:   #8A8A8A;
}

body.light-mode .pp-input,
body.light-mode .pp-select {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--pp-text) !important;
}

body.light-mode .pp-input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
}


/* ====== 21. RESPONSIVE — DON'T SHRINK ON MOBILE ====== */
/* Breakpoint v5.0: 1100px (iPad Landscape ist 1024px → bekommt Mobile-Layout) */

@media (max-width: 1100px) {
  .pp-page-title { font-size: 2rem !important; }
  .pp-section-title { font-size: 1.5rem !important; }
  .pp-summary-headline { font-size: 1.75rem !important; }
  .pp-hero-value, .pp-bioage-main { font-size: 3.5rem !important; }
  .pp-vitals-input { font-size: 2.5rem !important; }
  /* Body text + labels stay the same — readability first */
}

/* ====== 22. LIGHT-MODE TOGGLE BUTTON (v5.0) ======
   Floating switch im Dashboard-Bereich — toggelt body.light-mode
   und persistiert über localStorage (key: pp-theme).
   ============================================== */

.pp-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: rgba(26, 26, 26, 0.92);
  color: #C9A227;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, background 0.2s, color 0.2s;
}

.pp-theme-toggle:hover {
  transform: translateY(-2px);
  background: rgba(201, 162, 39, 0.18);
}

body.light-mode .pp-theme-toggle {
  background: #fff;
  border-color: rgba(201, 162, 39, 0.5);
  color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pp-theme-toggle .pp-theme-toggle-sun { display: none; }
.pp-theme-toggle .pp-theme-toggle-moon { display: block; }
body.light-mode .pp-theme-toggle .pp-theme-toggle-sun { display: block; }
body.light-mode .pp-theme-toggle .pp-theme-toggle-moon { display: none; }