/*
  MintCoach UI Theme (Materialize)
  Ziel: deutlich professioneller + etwas farbenfroher,
  aber weiterhin „Material“-mäßig sauber und nicht knallig.
*/

:root {
  /* Surfaces */
  --mc-bg: #f7f8fb;
  --mc-surface: #ffffff;
  --mc-surface-2: rgba(15, 23, 42, 0.03);
  --mc-text: #0f172a;
  --mc-muted: rgba(15, 23, 42, 0.66);
  --mc-border: rgba(15, 23, 42, 0.12);
  --mc-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);

  /* Brand / Accent */
  --mc-accent: #4f46e5;        /* Indigo */
  --mc-accent-hover: #4338ca;
  --mc-accent2: #06b6d4;       /* Cyan */
  --mc-accent3: #f97316;       /* Orange highlight */
  --mc-on-accent: #ffffff;

  /* Accent tints */
  --mc-accent-soft: rgba(79, 70, 229, 0.14);
  --mc-accent-border: rgba(79, 70, 229, 0.40);
  --mc-accent-surface: rgba(79, 70, 229, 0.06);
  --mc-accent-ring: rgba(79, 70, 229, 0.18);

  /* Hero glow colors */
  --mc-glow-1: rgba(79, 70, 229, 0.22);
  --mc-glow-2: rgba(6, 182, 212, 0.18);
  --mc-glow-3: rgba(249, 115, 22, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mc-bg: #0b0d12;
    --mc-surface: #121724;
    --mc-surface-2: rgba(255, 255, 255, 0.05);
    --mc-text: #f2f4f8;
    --mc-muted: rgba(255, 255, 255, 0.74);
    --mc-border: rgba(255, 255, 255, 0.14);
    --mc-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);

    --mc-accent-soft: rgba(79, 70, 229, 0.22);
    --mc-accent-border: rgba(79, 70, 229, 0.52);
    --mc-accent-surface: rgba(79, 70, 229, 0.10);
    --mc-accent-ring: rgba(79, 70, 229, 0.24);

    --mc-glow-1: rgba(79, 70, 229, 0.30);
    --mc-glow-2: rgba(6, 182, 212, 0.22);
    --mc-glow-3: rgba(249, 115, 22, 0.14);
  }
}

/* Manuelles Theme-Toggle (JS setzt html.theme-*) */
html.theme-light {
  --mc-bg: #f7f8fb;
  --mc-surface: #ffffff;
  --mc-surface-2: rgba(15, 23, 42, 0.03);
  --mc-text: #0f172a;
  --mc-muted: rgba(15, 23, 42, 0.66);
  --mc-border: rgba(15, 23, 42, 0.12);
  --mc-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);

  --mc-accent-soft: rgba(79, 70, 229, 0.14);
  --mc-accent-border: rgba(79, 70, 229, 0.40);
  --mc-accent-surface: rgba(79, 70, 229, 0.06);
  --mc-accent-ring: rgba(79, 70, 229, 0.18);

  --mc-glow-1: rgba(79, 70, 229, 0.22);
  --mc-glow-2: rgba(6, 182, 212, 0.18);
  --mc-glow-3: rgba(249, 115, 22, 0.12);
}
html.theme-dark {
  --mc-bg: #0b0d12;
  --mc-surface: #121724;
  --mc-surface-2: rgba(255, 255, 255, 0.05);
  --mc-text: #f2f4f8;
  --mc-muted: rgba(255, 255, 255, 0.74);
  --mc-border: rgba(255, 255, 255, 0.14);
  --mc-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);

  --mc-accent-soft: rgba(79, 70, 229, 0.22);
  --mc-accent-border: rgba(79, 70, 229, 0.52);
  --mc-accent-surface: rgba(79, 70, 229, 0.10);
  --mc-accent-ring: rgba(79, 70, 229, 0.24);

  --mc-glow-1: rgba(79, 70, 229, 0.30);
  --mc-glow-2: rgba(6, 182, 212, 0.22);
  --mc-glow-3: rgba(249, 115, 22, 0.14);
}

body {
  background: var(--mc-bg);
  color: var(--mc-text);
  overflow-x: hidden;
}

/* Typo: Materialize bleibt, aber etwas moderner */
body, input, textarea, button {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: 900;
  letter-spacing: -0.02em;
}

p { line-height: 1.65; }

a { color: var(--mc-accent); }
a:hover { color: var(--mc-accent-hover); }

.help-muted { color: var(--mc-muted); }

/* Container */
.mc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.mc-main { padding-bottom: 28px; }

/* Damit Anchor-Links (/#preise etc.) nicht unter der sticky Nav „verschwinden“ */
section[id] { scroll-margin-top: 90px; }

/* Full-bleed Sections innerhalb des Containers */
.mc-fullbleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* =========================================================
   Materialize – Accent Override (kein Teal/Grün mehr)
   ========================================================= */

/* Buttons */
.btn,
.btn-large,
.btn-small,
.btn-floating {
  background-color: var(--mc-accent);
}

.btn:hover,
.btn-large:hover,
.btn-small:hover,
.btn-floating:hover {
  background-color: var(--mc-accent-hover);
}

.btn,
.btn-large,
.btn-small {
  color: var(--mc-on-accent);
  text-transform: none;
  font-weight: 800;
  border-radius: 12px;
}

/* Flat Buttons */
.btn-flat {
  text-transform: none;
}

/* Dropdown */
.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--mc-accent) !important;
}

/* Inputs / Focus */
.input-field input:focus + label,
.input-field textarea:focus + label {
  color: var(--mc-accent) !important;
}

.input-field input:focus,
.input-field textarea:focus {
  border-bottom: 1px solid var(--mc-accent) !important;
  box-shadow: 0 1px 0 0 var(--mc-accent) !important;
}

.input-field .prefix.active {
  color: var(--mc-accent) !important;
}

/* Checkbox */
[type="checkbox"]:checked + span:not(.lever):before {
  border-right: 2px solid var(--mc-accent) !important;
  border-bottom: 2px solid var(--mc-accent) !important;
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
  border: 2px solid var(--mc-accent) !important;
  background-color: var(--mc-accent) !important;
}

/* Radio */
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: var(--mc-accent) !important;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 2px solid var(--mc-accent) !important;
}

/* Switch */
.switch label input[type=checkbox]:checked + .lever {
  background-color: var(--mc-accent-border) !important;
}

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: var(--mc-accent) !important;
}

/* Pagination / Tabs / Progress */
.pagination li.active { background-color: var(--mc-accent) !important; }
.tabs .indicator { background-color: var(--mc-accent) !important; }
.tabs .tab a:hover,
.tabs .tab a.active { color: var(--mc-accent) !important; }
.progress .determinate,
.progress .indeterminate { background-color: var(--mc-accent) !important; }

/* =========================================================
   Base surfaces
   ========================================================= */

/* Nav: sticky + dezenter Gradient-Unterstrich */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

nav,
.nav-wrapper {
  background: var(--mc-surface) !important;
  color: var(--mc-text) !important;
  border-bottom: 1px solid var(--mc-border);
}

nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent2), var(--mc-accent3));
  opacity: .75;
}

nav a,
nav .brand-logo {
  color: var(--mc-text) !important;
}

.mc-brand {
  font-weight: 950 !important;
  letter-spacing: -0.03em;
}

.mc-brand .mc-brand-mark {
  color: var(--mc-text);
}

.mc-brand .mc-brand-mark2 {
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Nav CTA */
.mc-nav-cta {
  margin-left: 6px;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

/* Cards / Lists */
.card,
.modal,
.dropdown-content,
.collection,
.sidenav,
.collapsible {
  background: var(--mc-surface) !important;
  color: var(--mc-text) !important;
  border: 1px solid var(--mc-border);
}

.card {
  border-radius: 18px;
  box-shadow: var(--mc-shadow);
}

.card .card-content,
.card .card-action {
  color: var(--mc-text) !important;
}

.badge-status {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mc-border);
  font-size: 12px;
  display: inline-block;
  line-height: 1.2;
  background: var(--mc-surface-2);
}

.badge-accent {
  border-color: var(--mc-accent-border);
  background: var(--mc-accent-soft);
}

/* Footer */
.mc-footer {
  margin-top: 44px;
  padding: 34px 0 26px;
  border-top: 1px solid var(--mc-border);
  background: var(--mc-surface);
}

.mc-footer-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.mc-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mc-footer-links li { margin: 8px 0; }

.mc-footer-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--mc-border);
  color: var(--mc-muted);
  font-size: 12px;
}

/* =========================================================
   Collections (Darkmode sauber)
   ========================================================= */

.collection {
  border-radius: 12px;
  overflow: hidden;
}

.collection .collection-item {
  background-color: transparent !important;
  color: var(--mc-text) !important;
  border-bottom: 1px solid var(--mc-border) !important;
}

.collection .collection-item:last-child { border-bottom: 0 !important; }

.collection a.collection-item {
  color: var(--mc-text) !important;
}

.collection a.collection-item:hover {
  background-color: rgba(127,127,127,.10) !important;
}

/* =========================================================
   Collapsible (Darkmode + cleaner)
   ========================================================= */

ul.collapsible,
ul.collapsible > li {
  background-color: var(--mc-surface) !important;
  color: var(--mc-text) !important;
  border-color: var(--mc-border) !important;
}

ul.collapsible > li > .collapsible-header,
ul.collapsible > li > .collapsible-body {
  background-color: var(--mc-surface) !important;
  color: var(--mc-text) !important;
  border-bottom: 1px solid var(--mc-border) !important;
}

ul.collapsible > li > .collapsible-header:hover {
  background-color: rgba(127,127,127,.10) !important;
}

/* =========================================================
   Sections / Buttons
   ========================================================= */

.mc-section { margin-top: 46px; }

.mc-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px 0;
}

.mc-section-title h5 {
  position: relative;
  padding-left: 12px;
  margin: 0;
}

.mc-section-title h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  bottom: .25em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mc-accent), var(--mc-accent2));
  opacity: .95;
}

.btn-flat.mc-outline {
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  line-height: 36px;
  height: 36px;
  padding: 0 12px;
  color: var(--mc-text) !important;
}

.btn-flat.mc-outline:hover { background-color: rgba(127,127,127,.10); }

.btn-flat.mc-outline i.material-icons { line-height: 36px; }

.btn.mc-btn-primary,
.btn-small.mc-btn-primary {
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent2)) !important;
  color: var(--mc-on-accent) !important;
  font-weight: 900;
}

.btn.mc-btn-primary:hover,
.btn-small.mc-btn-primary:hover {
  filter: brightness(0.98);
}

.mc-gradient-text {
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent2), var(--mc-accent3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   HERO (Startseite + Subpages)
   ========================================================= */

.mc-hero-wrap {
  position: relative;
  padding: 64px 0 34px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--mc-border);
}

.mc-hero-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 360px at 18% 8%, var(--mc-glow-1), transparent 62%),
    radial-gradient(720px 360px at 82% 14%, var(--mc-glow-2), transparent 62%),
    radial-gradient(520px 260px at 80% 90%, var(--mc-glow-3), transparent 65%);
  opacity: 1;
  z-index: 0;
}

.mc-hero-wrap::after {
  /* sehr dezentes Grid für „Pro“-Look */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(127,127,127,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127,127,127,.06) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .25;
  z-index: 0;
}

.mc-hero-inner {
  position: relative;
  z-index: 1;
}

.mc-hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--mc-border);
  background: rgba(127,127,127,.06);
  font-size: 12px;
}

.mc-pill i.material-icons { color: var(--mc-accent); }

.mc-hero-title {
  margin: 16px 0 8px 0;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.mc-hero-sub { margin: 0; }

.mc-checklist {
  list-style: none;
  padding: 0;
  margin: 18px 0 0 0;
}

.mc-checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0;
}

.mc-checklist li i.material-icons {
  font-size: 20px;
  opacity: .95;
  margin-top: 1px;
  color: var(--mc-accent2);
}

.mc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Stat strip */
.mc-stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mc-stat {
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(127,127,127,.05);
}

.mc-stat-val {
  font-weight: 950;
  font-size: 18px;
  line-height: 1.1;
}

.mc-stat-lab {
  font-size: 12px;
  margin-top: 6px;
  color: var(--mc-muted);
}

/* Quick Card */
.mc-quick-card {
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--mc-accent-surface), rgba(127,127,127,.06)) !important;
}

.mc-quick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mc-quick-title {
  font-weight: 950;
  font-size: 18px;
  line-height: 1.2;
}

.mc-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mc-quick-item {
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(127,127,127,.06);
}

.mc-quick-label {
  font-size: 12px;
  color: var(--mc-muted);
}

.mc-quick-value {
  font-weight: 900;
  margin-top: 4px;
}

.mc-mini-price-row {
  display: flex;
  gap: 12px;
}

.mc-mini-price {
  flex: 1 1 0;
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(127,127,127,.06);
}

.mc-mini-price-val {
  font-weight: 950;
  font-size: 18px;
  line-height: 1.1;
}

.mc-mini-price-lab {
  font-size: 12px;
  margin-top: 4px;
}

.mc-soft-note {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed var(--mc-border);
  background: rgba(127,127,127,.04);
}

/* =========================================================
   Feature Cards
   ========================================================= */

.mc-feature-card {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.mc-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent2), var(--mc-accent3));
  opacity: .95;
}

.mc-feature-card:hover {
  transform: translateY(-2px);
  transition: transform .18s ease;
}

.mc-icon-bubble {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mc-accent-soft);
  border: 1px solid var(--mc-accent-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.mc-icon-bubble i.material-icons {
  font-size: 24px;
  color: var(--mc-accent);
  opacity: .95;
}

.mc-card-title {
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

/* =========================================================
   Price Plans
   ========================================================= */

.mc-plan-card {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.mc-plan-price {
  font-size: 32px;
  font-weight: 950;
  line-height: 1.05;
  margin-top: 6px;
}

.mc-plan-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0 0;
}

.mc-plan-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
  color: var(--mc-text);
}

.mc-plan-list li i.material-icons {
  font-size: 18px;
  margin-top: 2px;
  opacity: .9;
  color: var(--mc-accent2);
}

.mc-plan-recommended {
  border-color: var(--mc-accent-border) !important;
  box-shadow: 0 0 0 3px var(--mc-accent-ring);
  background: var(--mc-accent-surface) !important;
}

.mc-plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--mc-accent-border);
  background: var(--mc-accent-soft);
  font-weight: 900;
}

/* =========================================================
   Termine / Schedule (book.php)
   ========================================================= */

.mc-schedule-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mc-schedule {
  margin: 10px 0 0 0;
  border: 1px solid var(--mc-border) !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none !important;
}

.mc-schedule .collapsible-header i.material-icons {
  width: auto !important;
  margin-right: 0 !important;
}

ul.collapsible.mc-schedule > li > .collapsible-header.mc-schedule-header {
  background-color: rgba(127,127,127,.08) !important;
  border-bottom: 1px solid var(--mc-border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px !important;
  min-height: 60px;
}

.mc-schedule-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-schedule-topic-icon {
  opacity: .95;
  font-size: 22px;
  color: var(--mc-accent);
}

.mc-schedule-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-schedule-topic {
  font-weight: 900;
  line-height: 1.15;
}

.mc-schedule-sub {
  color: var(--mc-muted);
  font-size: 12px;
  line-height: 1.15;
}

ul.collapsible.mc-schedule > li > .collapsible-body.mc-schedule-body {
  background-color: var(--mc-surface) !important;
  border-bottom: 1px solid var(--mc-border) !important;
  padding: 0 14px 12px 14px !important;
}

.mc-schedule-body-inner { padding-top: 12px; }

.mc-session {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.mc-session + .mc-session { border-top: 1px dashed var(--mc-border); }

.mc-session-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  background: var(--mc-accent2);
  opacity: .55;
  border: 1px solid var(--mc-border);
  flex: 0 0 auto;
}

.mc-session-main { flex: 1 1 auto; min-width: 0; }
.mc-session-title { font-weight: 800; line-height: 1.25; }

.mc-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: var(--mc-muted);
  font-size: 12px;
  line-height: 1.25;
}

.mc-meta-item { display: inline-flex; align-items: center; gap: 4px; }

.mc-session-meta .material-icons { font-size: 16px; line-height: 1; }
.mc-session-cancelled { opacity: .65; }

/* =========================================================
   Info/FAQ Seite – fehlende Styles (waren vorher nicht definiert)
   ========================================================= */

.mc-info-bullets {
  display: grid;
  gap: 10px;
}

.mc-info-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  background: rgba(127,127,127,.06);
}

.mc-info-bullet i.material-icons {
  color: var(--mc-accent2);
  opacity: .95;
}

.mc-info-card {
  border-radius: 18px;
  overflow: hidden;
}

.mc-info-card .card-content { padding-top: 18px; }

.mc-step {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.mc-step + .mc-step { border-top: 1px dashed var(--mc-border); }

.mc-step-num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 950;
  background: var(--mc-accent-soft);
  border: 1px solid var(--mc-accent-border);
  color: var(--mc-text);
}

.mc-step-body { flex: 1 1 auto; min-width: 0; }

.mc-step-title {
  font-weight: 950;
  margin-bottom: 4px;
}

.mc-callout {
  border-radius: 18px;
  overflow: hidden;
  border-color: var(--mc-accent-border) !important;
  background:
    linear-gradient(180deg, var(--mc-accent-surface), rgba(127,127,127,.04)) !important;
}

.mc-callout-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-callout-row i.material-icons { color: var(--mc-accent); }

/* Small helpers */
.mc-tight { margin-top: 10px; }