/* ============================================================
   easylocal — Preis-Regler (Startseite + Checkout)
   Wird von / und /checkout/ geladen. Eine Quelle für beide.
   ============================================================ */
/* ------------ Preis-Rechner (Slider) ------------ */
.calc {
  max-width: 1000px;
  margin: 0 auto;
}

.calc__ask {
  text-align: center;
  font: 600 18px/1.4 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--el-green-house);
  margin: 0 0 40px;
}

/* --- Slider --- */
.calc__slider {
  position: relative;
  max-width: 780px;
  margin: 0 auto 52px;
  padding: 56px 0 0;
}

.calc__track-wrap { position: relative; height: 28px; display: flex; align-items: center; }

/* Sichtbare Bahn (der echte Input liegt transparent darüber) */
.calc__track {
  position: absolute; left: 0; right: 0; height: 8px;
  background: var(--cream-deep);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(13,58,45,.08);
}
.calc__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--el-green-deep), var(--el-green));
  border-radius: 999px;
  transition: width .18s cubic-bezier(.4,0,.2,1);
}

/* Stufengrenzen als feine Marker auf der Bahn */
.calc__notch {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 2px; height: 8px;
  background: rgba(13,58,45,.16);
  border-radius: 2px;
  pointer-events: none;
}

.calc__handle {
  position: absolute; top: 50%;
  width: 28px; height: 28px;
  margin-left: -14px; margin-top: -14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--el-green);
  box-shadow: var(--shadow-frap);
  pointer-events: none;
  transition: left .18s cubic-bezier(.4,0,.2,1), transform .15s ease;
  z-index: 2;
}
.calc__range:active ~ .calc__handle,
.calc__range:focus-visible ~ .calc__handle { transform: scale(1.12); }
.calc__range:focus-visible ~ .calc__handle { box-shadow: var(--shadow-frap), 0 0 0 5px rgba(0,183,137,.28); }

/* Nativer Range-Input: unsichtbar, aber voll bedienbar (Maus, Touch, Tastatur) */
.calc__range {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%; height: 28px;
  margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: grab;
  z-index: 3;
}
.calc__range:active { cursor: grabbing; }
.calc__range:focus { outline: none; }
.calc__range::-webkit-slider-runnable-track { height: 28px; background: transparent; border: 0; }
.calc__range::-moz-range-track { height: 28px; background: transparent; border: 0; }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 0; cursor: grab;
}
.calc__range::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 0; cursor: grab;
}

/* Wert-Bubble über dem Handle */
.calc__bubble {
  position: absolute; top: 8px;
  transform: translateX(-50%);
  background: var(--el-green-house);
  color: #fff;
  font: 600 14px/1 var(--font-mono);
  letter-spacing: .04em;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  transition: left .18s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 12px rgba(13,58,45,.18);
}
.calc__bubble::after {
  content: ''; position: absolute; top: 100%; left: calc(50% + var(--arrow, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--el-green-house);
}

/* Tick-Beschriftung unter der Bahn */
.calc__ticks { position: relative; height: 34px; margin-top: 14px; }
.calc__tick {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
  background: none; border: 0; padding: 6px 4px;
  cursor: pointer;
  transition: color .18s ease;
  white-space: nowrap;
}
.calc__tick:hover { color: var(--el-green-deep); }
.calc__tick.is-active { color: var(--el-green-deep); font-weight: 700; }
.calc__tick--first { transform: translateX(-20%); }
.calc__tick--last  { transform: translateX(-80%); }

/* --- Ergebnis-Karte --- */
.calc__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.calc__card-head {
  background: var(--el-green-house);
  color: #fff;
  text-align: center;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 16px;
}
.calc__card-body {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 40px;
  padding: 38px;
}
@media (max-width: 860px) {
  .calc__card-body { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
}

.calc__left { display: grid; gap: 18px; align-content: start; }
.calc__plan-name { font: 700 26px/1.1 var(--font-sans); letter-spacing: -0.03em; color: var(--el-green-house); }
.calc__plan-desc { font: 400 14.5px/1.55 var(--font-sans); color: var(--ink-soft); margin: 0; }

.calc__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.calc__price .num {
  font: 700 62px/1 var(--font-sans);
  letter-spacing: -0.045em;
  color: var(--el-green-house);
  font-variant-numeric: tabular-nums;
}
.calc__price .per { font: 500 14px/1.3 var(--font-sans); color: var(--ink-soft); }
.calc__price.is-changing .num { animation: calcPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes calcPop {
  0%   { transform: translateY(6px) scale(.96); opacity: .45; }
  100% { transform: none; opacity: 1; }
}

.calc__basis {
  font: 500 13.5px/1.5 var(--font-sans);
  color: var(--el-green-deep);
  background: var(--el-green-wash);
  border-radius: 10px;
  padding: 11px 14px;
  margin: -4px 0 0;
}
.calc__basis b { font-weight: 700; }

.calc__cta { width: 100%; justify-content: center; }
.calc__cta[disabled] { opacity: .55; pointer-events: none; }
.calc__note {
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--ink-faint);
  text-align: center;
  margin: -8px 0 0;
}

.calc__right { display: grid; gap: 14px; align-content: start; }
@media (min-width: 861px) {
  .calc__right { border-left: 1px solid var(--line); padding-left: 40px; }
}
.calc__feat-head {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Stufen-Übersicht --- */
.calc__tiers {
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
}
@media (max-width: 900px) { .calc__tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .calc__tiers { grid-template-columns: 1fr; } }
.calc__tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid; gap: 5px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.calc__tier:hover { border-color: var(--el-green); transform: translateY(-2px); }
.calc__tier.is-active {
  border-color: var(--el-green);
  background: var(--el-green-wash);
  box-shadow: 0 0 0 1px var(--el-green);
}
.calc__tier-range {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.calc__tier.is-active .calc__tier-range { color: var(--el-green-deep); }
.calc__tier-price {
  font: 700 17px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--el-green-house);
}
.calc__tier-unit { font: 400 11.5px/1.3 var(--font-sans); color: var(--ink-soft); }

@media (max-width: 720px) {
  .calc__slider { padding-top: 52px; }
  .calc__price .num { font-size: 52px; }
  .calc__tick { font-size: 11px; }
}