/**
 * webflow-legacy.css
 *
 * Custom-CSS, das auf der funktionierenden Webflow-Seite
 * (janbahmann.de/rechner/kalorienrechner) im Site-Head-Code stand und beim
 * Astro-Nachbau nicht mitgewandert ist.
 *
 * WICHTIG: global einbinden (public/ + <link>) oder <style is:global>.
 * Astro-scoped Styles bekommen ein [data-astro-cid-...] angehaengt und greifen
 * dann NICHT mehr fuer Elemente, die erst zur Laufzeit von JS erzeugt werden
 * (nice-select) bzw. fuer :root-Variablen.
 */

/* ---------------------------------------------------------------- *
 * 1) Range-Slider: weiche Bewegung
 * ---------------------------------------------------------------- */
.range-slider_handle.transition {
  transition: left 0.3s ease;
}
.range-slider_fill.transition {
  transition: width 0.3s ease;
}

/* ---------------------------------------------------------------- *
 * 2) "Berechnen"-Button: weisser Text, keine Unterstreichung
 * ---------------------------------------------------------------- */
.button-orange.is-icon.max-width-full-mobile-landscape.w-inline-block,
.button-orange.is-icon.max-width-full-mobile-landscape.w-inline-block:hover,
.button-orange.is-icon.max-width-full-mobile-landscape.w-inline-block:focus {
  text-decoration: none !important;
  color: #fff !important;
}
.button-orange.is-icon.max-width-full-mobile-landscape.w-inline-block > div:first-child,
.button-orange.is-icon.max-width-full-mobile-landscape.w-inline-block .icon-embed-custom-6-copy {
  color: #fff !important;
}

/* ---------------------------------------------------------------- *
 * 3) Geschlechts-Buttons (Schritt 1)
 *    Die .active-Klasse setzt radio-toggle_switch.js - das zugehoerige
 *    CSS fehlte bisher, deshalb blieb der Button optisch tot.
 * ---------------------------------------------------------------- */
.woman-button.active,
.woman-button:hover,
.woman-button:focus-within {
  background-color: #d55555;
  cursor: pointer;
}
.woman-button.active .embed-calc_icon svg path,
.woman-button:hover .embed-calc_icon svg path,
.woman-button:focus-within .embed-calc_icon svg path,
.woman-button.active .radio-text-calc,
.woman-button:hover .radio-text-calc,
.woman-button:focus-within .radio-text-calc {
  fill: #fff;
  color: #fff;
  cursor: pointer;
}
.woman-button.man.active,
.woman-button.man:hover,
.woman-button.man:focus-within {
  background-color: #0076b7;
  cursor: pointer;
}
.woman-button.man.active .embed-calc_icon svg path,
.woman-button.man:hover .embed-calc_icon svg path,
.woman-button.man:focus-within .embed-calc_icon svg path,
.woman-button.man.active .radio-text-calc,
.woman-button.man:hover .radio-text-calc,
.woman-button.man:focus-within .radio-text-calc {
  fill: #fff;
  color: #fff;
  cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * 4) Tooltips duerfen nicht hinter anderen Bloecken verschwinden
 * ---------------------------------------------------------------- */
.w-dropdown {
  z-index: auto !important;
}

/* ---------------------------------------------------------------- *
 * 5) iOS: kein Auto-Zoom beim Fokussieren von Eingabefeldern
 *
 * Der Selektor ist bewusst so global wie im Webflow-Site-Head, aus dem die
 * Regel stammt. Er trifft alle 46 Rechner-Inputs; ein Ueberlauf entsteht dabei
 * nicht (bei 390px geprueft). Die Datei wird nur von /kalorienrechner geladen,
 * und dort liegt jedes Input in #email-form. Cookiebot bringt seine eigene
 * Einbettung mit und ist nicht betroffen. Kaeme auf dieser Seite je ein
 * fremdes Formular dazu, waere der Selektor auf dessen Container einzugrenzen.
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
  input {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------- *
 * 6) nice-select (Trainings-Dropdowns)
 *    MUSS global sein: nice-select baut sein Markup zur Laufzeit,
 *    die generierten Knoten haben KEIN data-astro-cid-Attribut.
 * ---------------------------------------------------------------- */
:root {
  --list-bg-color: #fff;
  --list-text-color: inherit;
  --list-text-color-hover: inherit;
  --current-field-text-color: inherit;
  --select-field-arrow-color: #000;
  --border-color-active: #000;
  --border-color-hover: #dcdcdd;
  --list-item-bg-color: #ededed;
  --select-field-padding-left: 12px;
  --select-field-padding-right: 12px;
  --list-padding-top-bottom: 10px;
  --list-max-height: 150px;
  --list-item-padding-left: 18px;
  --list-item-padding-right: 18px;
  --list-item-min-height: 40px;
  --list-item-line-height: 40px;
}
.nice-select {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  clear: both;
  padding-left: var(--select-field-padding-left);
  padding-right: var(--select-field-padding-right);
  position: relative;
  text-align: left !important;
  transition: all 0.2s ease-in-out;
  user-select: none;
  white-space: nowrap;
}
.nice-select:hover {
  border-color: var(--border-color-hover);
}
.nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: var(--border-color-active);
}
.nice-select:after {
  border-bottom: 2px solid var(--select-field-arrow-color);
  border-right: 2px solid var(--select-field-arrow-color);
  content: "";
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  width: 5px;
}
.nice-select.open:after {
  transform: rotate(-135deg);
}
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled:after {
  border-color: #ccc;
}
.nice-select.wide {
  width: 100%;
}
.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}
.nice-select.right {
  float: right;
}
.nice-select.right .list {
  left: auto;
  right: 0;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small:after {
  height: 4px;
  width: 4px;
}
.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}
.nice-select .list {
  background-color: var(--list-bg-color);
  color: var(--list-text-color);
  border-radius: 5px;
  box-shadow: 0 7px 20px 0 rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  overflow-x: hidden;
  max-height: var(--list-max-height);
  padding: var(--list-padding-top-bottom) 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(-21px);
  transition:
    all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
    opacity 0.15s ease-out;
  z-index: 999999;
}
.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: var(--list-item-line-height);
  list-style: none;
  min-height: var(--list-item-min-height);
  outline: none;
  padding-left: var(--list-item-padding-left);
  padding-right: var(--list-item-padding-right);
  text-align: left;
  transition: all 0.2s;
}
.nice-select .option:first-child {
  display: none;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
  font-weight: 700;
}
.nice-select .option:hover {
  color: var(--list-text-color-hover);
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}
span.current {
  color: var(--current-field-text-color);
}
.no-csspointerevents .nice-select .list {
  display: none;
}
.no-csspointerevents .nice-select.open .list {
  display: block;
}