/* ==========================================================================
   MFM Fahrtkosten-Rechner – Integration ins Seiten-Design
   Override (update-sicher, via mu-plugin geladen NACH frontend.css).
   Angleichung an mfm.energy + Fairness-Bloecke: Teal #0F766E statt Tuerkis
   #2dd4bf, Montserrat, flache Karte mit Teal-Rand statt schwebender Box mit
   dunklem "Chatbot"-Header.
   Doppelte Klassen-Selektoren (.x.x) erzwingen hoehere Spezifitaet als das
   Plugin — wirkt unabhaengig von der Ladereihenfolge.
   ========================================================================== */

/* 1) Akzentfarben umdefinieren — kaskadiert durch alle var()-Nutzungen */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator,
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget {
  --mfm-teal: #0F766E;
  --mfm-teal-dark: #115E59;
  --mfm-teal-light: #5eead4;
}

/* 2) Container: flache Karte mit Teal-Rand (wie Fairness-Bloecke/Badges),
      etwas breiter, weicherer Teal-Schatten statt harter schwarzer Box */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator {
  max-width: 640px;
  border: 1px solid #99F6E4;
  box-shadow: 0 6px 24px rgba(15, 118, 110, 0.10);
}

/* 3) Header: Teal-Flaeche statt near-black Slate (= "So rechnen wir ab"-Spalte) */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-fahrtkosten-header {
  background: #0F766E;
  border-bottom: 3px solid #115E59;
}
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-fahrtkosten-title {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #ffffff;
}
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-fahrtkosten-subtitle {
  color: #CCFBF1;                 /* helles Teal auf Teal-Grund lesbar */
}

/* 4) Primaerbutton: weiss auf Teal + Montserrat (wie Seiten-CTAs) */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-button,
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-fahrtkosten-content .mfm-button {
  color: #ffffff;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-button:hover,
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-fahrtkosten-content .mfm-button:hover {
  color: #ffffff;
}

/* 5) Preis + Bruttosumme in Montserrat (harmoniert mit Fairness-Headlines) */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-result-price,
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-sum-block .mfm-detail-gross span:last-child {
  font-family: Montserrat, -apple-system, sans-serif;
}
/* Bruttosumme in dunklem Teal statt hellem Tuerkis (Lesbarkeit auf hell) */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-sum-block .mfm-detail-gross span:last-child {
  color: #115E59;
}

/* 6) Sekundaere CTA-Buttons unter dem Ergebnis: weisser Text auf Teal */
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-cta-button {
  color: #ffffff;
}
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-cta-button:hover,
.mfm-fahrtkosten-calculator.mfm-fahrtkosten-calculator .mfm-cta-phone:hover {
  color: #ffffff;
}

/* 7) Sidebar-Widget: Header + Button + Preis mitziehen (hardcodete Farben) */
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-header {
  background: #0F766E;
  border-bottom: 2px solid #115E59;
}
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-button {
  background: #0F766E;
  border-color: #0F766E;
  color: #ffffff;
}
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-button:hover {
  background: #115E59;
}
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-result-price,
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-detail-total span:last-child,
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-details-link {
  color: #115E59;
}
.mfm-fahrtkosten-widget.mfm-fahrtkosten-widget .mfm-widget-result-main {
  border-bottom-color: #0F766E;
}