:root {
  --color-nutrition: #00c853;
  --color-running: #c86700;
  --color-fitness: #283feb;
  --color-diary: #750420;
  --color-tools: #9c27b0;
  --color-stats: #1ec8ee;
  --color-visualizer: #707070;
  --color-planner: #f6f630;
  --color-white: #fefefe;
  --color-coach: #7408cd;
  --color-pdf: #3d2551;
  --color-boulder: #d74b06;
  --color-primary: #fff;
  --accent: var(--color-primary);

  --bg-color: #0e0f0f;
  --text-color: #eaeaea;
  --text-light: #ccc;
  --border-color: rgba(255, 255, 255, 0.1);
  --highlight: #00c853;
  --card-bg: #151515;

  --bg-glow: radial-gradient(circle at 50% 20%, rgba(0, 3, 200, 0.2), transparent 60%);
  --gradient-soft: linear-gradient(135deg, rgba(61, 67, 239, 0.15), rgba(76, 84, 236, 0.286));
  /* Rubriken */
  --gradient-subtle: linear-gradient(145deg, rgba(0, 133, 200, 0.08), rgba(0, 200, 83, 0.03));
  --gradient-cta: linear-gradient(135deg, rgba(0, 17, 200, 0.05), rgba(0, 200, 83, 0.02));
  --border-highlight: rgba(3, 0, 200, 0.2);
  --border-strong: rgba(0, 3, 200, 0.4);
}

body.light {
  --bg-color: #f5f5f5;
  --text-color: #1a1a1a;
  --text-light: #555;
  --border-color: rgba(0, 0, 0, 0.08);
  --highlight: #26a69a;
  /* weicheres Türkisgrün */
  --card-bg: #ffffff;

  --color-nutrition: #00c853;
  --color-fitness: #2413df;
  --color-wellbeing: #42a5f5;
  --color-tools: #9c27b0;
  --color-primary: #17442d9d;
  --accent: var(--color-primary);

  --gradient-soft: linear-gradient(135deg, rgba(0, 150, 136, 0.12), rgba(0, 150, 136, 0.04));
  --gradient-subtle: linear-gradient(145deg, rgba(0, 150, 136, 0.06), rgba(0, 150, 136, 0.02));
  --gradient-cta: linear-gradient(135deg, rgba(0, 150, 136, 0.04), rgba(0, 150, 136, 0.01));
  --border-highlight: rgba(0, 150, 136, 0.15);
  --border-strong: rgba(0, 150, 136, 0.3);
}

body.fitness {
  --accent: var(--color-fitness);
  --color-primary: #ffffff9d;
}

body.flow {
  --accent: var(--color-flow);
  --color-primary: #ffffff9d;
}

body.nutrition {
  --accent: var(--color-nutrition);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(3, 200, 0, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(61, 239, 117, 0.15), rgba(76, 236, 103, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(0, 200, 10, 0.08), rgba(0, 200, 30, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(0, 200, 23, 0.05), rgba(0, 200, 10, 0.02));
  --border-highlight: rgba(3, 200, 0, 0.2);
  --border-strong: rgba(7, 200, 0, 0.4);
}

body.running {
  --accent: var(--color-running);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(200, 87, 0, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(239, 150, 61, 0.15), rgba(236, 193, 76, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(200, 133, 0, 0.08), rgba(200, 117, 0, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(200, 110, 0, 0.05), rgba(200, 120, 0, 0.02));
  --border-highlight: rgba(200, 120, 0, 0.2);
  --border-strong: rgba(200, 117, 0, 0.4);
}

body.one {
  --accent: var(--color-one);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(197, 197, 197, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(239, 150, 61, 0.15), rgba(236, 236, 236, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(212, 212, 212, 0.08), rgba(190, 190, 190, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(185, 185, 185, 0.05), rgba(180, 180, 180, 0.02));
  --border-highlight: rgba(179, 179, 179, 0.2);
  --border-strong: rgba(175, 175, 175, 0.4);
}

body.stats {
  --accent: var(--color-stats);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(0, 200, 193, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(61, 227, 239, 0.15), rgba(76, 220, 236, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(0, 173, 200, 0.08), rgba(0, 200, 200, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(0, 200, 187, 0.05), rgba(0, 200, 200, 0.02));
  --border-highlight: rgba(0, 200, 170, 0.2);
  --border-strong: rgba(0, 200, 200, 0.4);
}

body.coach {
  --accent: var(--color-coach);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(130, 0, 200, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(171, 61, 239, 0.15), rgba(177, 76, 236, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(113, 0, 200, 0.08), rgba(133, 0, 200, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(160, 0, 200, 0.05), rgba(120, 0, 200, 0.02));
  --border-highlight: rgba(167, 0, 200, 0.2);
  --border-strong: rgba(143, 0, 200, 0.4);
}

body.pdf {
  --accent: var(--color-coach);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(130, 0, 200, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(171, 61, 239, 0.15), rgba(177, 76, 236, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(113, 0, 200, 0.08), rgba(133, 0, 200, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(160, 0, 200, 0.05), rgba(120, 0, 200, 0.02));
  --border-highlight: rgba(167, 0, 200, 0.2);
  --border-strong: rgba(143, 0, 200, 0.4);
}

body.planner {
  --accent: var(--color-planner);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(183, 200, 0, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(218, 239, 61, 0.15), rgba(199, 236, 76, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(200, 200, 0, 0.08), rgba(170, 200, 0, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(200, 183, 0, 0.05), rgba(180, 200, 0, 0.02));
  --border-highlight: rgba(200, 200, 0, 0.2);
  --border-strong: rgba(200, 187, 0, 0.4);
}

body.diary {
  --accent: var(--color-diary);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(200, 0, 103, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(239, 61, 153, 0.15), rgba(236, 76, 159, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(200, 0, 93, 0.08), rgba(200, 0, 97, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(200, 0, 107, 0.05), rgba(200, 0, 90, 0.02));
  --border-highlight: rgba(200, 0, 110, 0.2);
  --border-strong: rgba(200, 0, 60, 0.4);
}

body.visualizer {
  --accent: var(--color-visualizer);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(186, 186, 186, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(229, 229, 229, 0.15), rgba(176, 176, 176, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(190, 190, 190, 0.08), rgba(204, 204, 204, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(193, 193, 193, 0.05), rgba(195, 195, 195, 0.02));
  --border-highlight: rgba(184, 184, 184, 0.2);
  --border-strong: rgba(193, 193, 193, 0.4);
}

body.light {
  --color-primary: #3838389d;
  --bg-color: #f9f9f9;
  --card-bg: #ffffff;
  --text-color: #222;
  --text-light: #666;
  --border-color: rgba(0, 0, 0, 0.08);
  --highlight: #555555;
  --gradient-soft: linear-gradient(135deg, rgba(0, 150, 136, 0.12), rgba(0, 150, 136, 0.05));
  --gradient-subtle: linear-gradient(145deg, rgba(0, 150, 136, 0.06), rgba(0, 150, 136, 0.02));
  --gradient-cta: linear-gradient(135deg, rgba(0, 150, 136, 0.04), rgba(0, 150, 136, 0.01));
  --border-highlight: rgba(0, 150, 136, 0.15);
  --border-strong: rgba(0, 150, 136, 0.3);
}

body.boulder {
  --accent: var(--color-boulder);
  --color-primary: #ffffff9d;
  /* header */
  --bg-glow: radial-gradient(circle at 50% 20%, rgba(150, 50, 0, 0.2), transparent 60%);
  /* Rubriken */
  --gradient-soft: linear-gradient(135deg, rgba(171, 61, 239, 0.15), rgba(177, 76, 236, 0.286));
  /* testimonial */
  --gradient-subtle: linear-gradient(145deg, rgba(113, 0, 200, 0.08), rgba(133, 0, 200, 0.03));
  /* cta*/
  --gradient-cta: linear-gradient(135deg, rgba(160, 0, 200, 0.05), rgba(120, 0, 200, 0.02));
  --border-highlight: rgba(167, 0, 200, 0.2);
  --border-strong: rgba(143, 0, 200, 0.4);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  color: var(--accent);
}

p {
  color: var(--text-light);
}

a,
.button,
nav a:hover,
nav a.active,
.testimonial .author,
.rubrik-card h3,
.target-card h3,
.feature-card h3,
.step h3,
.mission-section h2,
.modal-content h3,
.newsletter-section h3,
.footer-column h4 {
  color: var(--accent);
}

.bubble:hover,
.cta-box button,
.cta-box button:hover,
.modal-content a:hover,
.feature-card:hover,
.target-card:hover,
.step:hover,
.testimonial:hover {
  background-color: var(--accent);
}

nav a.active::after {
  background-color: var(--accent);
}

.cta-box button,
.newsletter-form button {
  box-shadow: 0 0 16px var(--accent);
}

.cta-box button:hover,
.newsletter-form button:hover {
  box-shadow: 0 0 24px var(--accent);
  transform: scale(1.05);
}

/* Light/Dark Theme Toggle Test Button */
.theme-toggle {
  bottom: 20px;
  right: 20px;
  background: var(--accent);
  color: var(--bg-color);
  padding: 10px 14px;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 12px var(--accent);
}

.theme-toggle:hover {
  box-shadow: 0 0 20px var(--accent);
}

section {
  border-bottom: 1px solid var(--text-light);
}

section.no-border {
  border: none;
}

button a {
  color: inherit !important;
  text-decoration: none;
}