/* ============================================================
   EGH Gebaeudeservice / 07 - ANGEBOTSPLANER

   Das Stueck Seite, das am meisten verkauft. Wer wissen will,
   was Reinigung kostet, bekommt hier in vier Handgriffen eine
   Zahl, statt ein Formular ausfuellen und warten zu muessen.

   Die Sektion kippt als einzige neben dem Fuss auf Marineblau.
   Das ist kein Schmuck: Der Farbwechsel markiert die Stelle,
   an der es um Geld geht, und hebt sie aus dem hellen Fluss
   der Seite heraus, ohne dass ein Kasten darum liegen muss.

   Links wird eingestellt, rechts steht das Ergebnis. Rechts
   klebt am oberen Rand mit, damit die Zahl nie aus dem Bild
   faellt, waehrend man unten weitere Leistungen anhakt.
   ============================================================ */

.planer__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  margin-top: var(--stack-4);
}

/* --- Steuerung --------------------------------------------- */
.planer__block { padding-block: var(--stack-3); border-top: var(--hair) solid var(--regel); }
.planer__block:first-child { border-top: 0; padding-top: 0; }

.planer__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: var(--stack-2);
}
.planer__label > span:first-child {
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--auf-grund-2);
}
.planer__anzeige {
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Der Schieber. Eigene Spur und eigener Griff, weil die
   Voreinstellung der Browser auf dunklem Grund fast
   unsichtbar ist. Der Griff ist 26 Pixel hoch: alles darunter
   trifft man mit dem Daumen nicht zuverlaessig. */
.planer__schieber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
.planer__schieber::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--fuellung, 0%), rgba(242,243,241,0.18) var(--fuellung, 0%));
}
.planer__schieber::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--fuellung, 0%), rgba(242,243,241,0.18) var(--fuellung, 0%));
}
.planer__schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7.5px;
  background: var(--gold);
  border: 3px solid var(--grund);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold);
}
.planer__schieber::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--gold);
  border: 3px solid var(--grund);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold);
}
.planer__schieber:focus-visible { outline-offset: 6px; }

.planer__spanne {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  color: var(--auf-grund-2);
  margin-top: 0.4rem;
}

/* Die genaue Zahl zum Tippen. Wer 1.340 Quadratmeter hat,
   soll sie nicht mit dem Daumen suchen muessen. */
.planer__genau { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--stack-2); flex-wrap: wrap; }
.planer__genau label { font-size: var(--t-sm); color: var(--auf-grund-2); }
.planer__genau input {
  width: 7rem;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  background: rgba(242, 243, 241, 0.06);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-1);
  color: var(--auf-grund);
  font-family: var(--font-kopf);
  font-variant-numeric: tabular-nums;
}
.planer__genau input:focus-visible { border-color: var(--gold); }
.planer__genau span { font-size: var(--t-sm); color: var(--auf-grund-2); }

/* --- Leistungen als Schalter -------------------------------- */
.planer__wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  border-top: var(--hair) solid var(--regel);
}
.planer__posten {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 0.25rem;
  border-bottom: var(--hair) solid var(--regel);
  cursor: pointer;
  min-height: 54px;
}
.planer__posten input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.planer__posten b { font-family: var(--font-kopf); font-weight: 500; font-size: var(--t-sm); }
.planer__posten small {
  margin-left: auto;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  color: var(--auf-grund-2);
  white-space: nowrap;
}

/* --- Intervall und Anzahl ---------------------------------- */
.planer__takt { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.planer__takt button {
  flex: 1 1 8rem;
  min-height: 48px;
  padding: 0.7rem 1rem;
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--auf-grund-2);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-1);
  transition: color var(--d-schnell) var(--e-weich),
              border-color var(--d-schnell) var(--e-weich),
              background-color var(--d-schnell) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) {
  .planer__takt button:hover { color: var(--auf-grund); border-color: var(--gold); }
}
.planer__takt button[aria-pressed="true"] { color: var(--auf-gold); background: var(--gold); border-color: var(--gold); }

.planer__zaehler { display: flex; align-items: center; gap: 0.75rem; }
.planer__zaehler button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-1);
  color: var(--auf-grund);
  font-family: var(--font-kopf);
  font-size: 1.15rem;
  transition: border-color var(--d-schnell) var(--e-weich), color var(--d-schnell) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) {
  .planer__zaehler button:hover { border-color: var(--gold); color: var(--gold); }
}
.planer__zaehler output {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

/* --- Ergebnis ---------------------------------------------- */
.planer__ergebnis {
  position: sticky;
  top: 88px;
  background: rgba(242, 243, 241, 0.05);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
}
.planer__titel {
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-bottom: var(--stack-2);
}
.planer__liste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: var(--hair) solid var(--regel);
  font-size: var(--t-sm);
}
.planer__liste li span:last-child { font-family: var(--font-kopf); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.planer__leer { font-size: var(--t-sm); color: var(--auf-grund-2); padding: 0.6rem 0; }

.planer__summe { margin-top: var(--stack-3); padding-top: var(--stack-2); border-top: 2px solid var(--gold); }
.planer__summe > span {
  display: block;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-bottom: 0.5rem;
}
.planer__preis {
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.planer__preis > span { display: block; }
.planer__preis small {
  display: block;
  font-family: var(--font-kopf);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-top: 0.7rem;
}

.planer__ergebnis .knopf { width: 100%; margin-top: var(--stack-3); }
.planer__hinweis { font-size: 0.8125rem; line-height: 1.55; color: var(--auf-grund-2); margin-top: var(--stack-2); }

@media (max-width: 900px) {
  .planer__raster { grid-template-columns: minmax(0, 1fr); }
  .planer__ergebnis { position: static; }
}