/*!
 * Mawimbi Bausteine: kursfinder.css
 * Nur --mw-* Variablen aus core/mw-core.css verwenden, nichts hart codieren.
 * Layout reagiert auf die Breite des Bausteins (Container Query), nicht auf das Fenster.
 */
.mw-kf {
  container-type: inline-size;
  container-name: mwkf;
  display: block;
  width: 100%;
}

.mw-kf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mw-s3) var(--mw-s5);
  margin-bottom: var(--mw-s5);
}
.mw-kf__title { margin-bottom: var(--mw-s1); }
.mw-kf__intro { max-width: 52ch; }
.mw-kf__curwrap { display: grid; gap: var(--mw-s1); }

/* Waehrung */
.mw-kf__cur {
  display: inline-flex;
  padding: 3px;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
}
.mw-kf__curopt { position: relative; display: block; }
.mw-kf__curopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mw-kf__curopt span {
  display: block;
  min-width: 3.4rem;
  padding: .5rem .9rem;
  text-align: center;
  border-radius: var(--mw-radius-pill);
  font-weight: var(--mw-fw-strong);
  font-size: var(--mw-fs-s);
  line-height: 1.2;
  transition: background var(--mw-dur) var(--mw-ease), color var(--mw-dur) var(--mw-ease);
}
.mw-kf__curopt input:checked + span { background: var(--mw-accent); color: var(--mw-accent-ink); }
.mw-kf__curopt input:focus-visible + span { outline: 3px solid var(--mw-focus); outline-offset: 2px; }

/* Raster */
.mw-kf__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mw-s5);
  align-items: start;
}
.mw-kf__steps { min-width: 0; counter-reset: mwkf; }

.mw-kf__step {
  border: 0;
  margin: 0 0 var(--mw-s5);
  padding: 0;
  min-width: 0;
}
.mw-kf__legend {
  display: flex;
  align-items: center;
  gap: var(--mw-s2);
  margin-bottom: var(--mw-s3);
  padding: 0;
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-l);
  font-weight: var(--mw-fw-strong);
  line-height: 1.2;
}
.mw-kf__legend::before {
  counter-increment: mwkf;
  content: counter(mwkf);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--mw-radius-pill);
  background: var(--mw-accent);
  color: var(--mw-accent-ink);
  font-size: var(--mw-fs-s);
  font-family: var(--mw-font);
}

/* Auswahlkacheln */
.mw-kf__choices,
.mw-kf__hours {
  display: grid;
  gap: var(--mw-s2);
}
.mw-kf__choices--levels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.mw-kf__choices--formats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.mw-kf__hours { grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); }

.mw-kf__ctitle { display: block; font-weight: var(--mw-fw-strong); line-height: 1.25; }
.mw-kf__csub { display: block; margin-top: .2rem; font-size: var(--mw-fs-s); line-height: 1.35; color: var(--mw-ink-2); }
.mw-choice > input:checked + span .mw-kf__csub { color: var(--mw-ink); }
.mw-kf__hour > span { text-align: center; padding: .7rem .5rem; }
.mw-choice.is-disabled > input { cursor: not-allowed; }
.mw-choice.is-disabled > span { opacity: .55; border-style: dashed; }

.mw-kf__hint { margin-top: var(--mw-s2); }

/* Personen und Zaehler */
.mw-kf__people { margin-top: var(--mw-s3); }
.mw-kf__fixed { display: flex; align-items: baseline; gap: var(--mw-s2); }
.mw-kf__stepper { display: flex; align-items: center; gap: var(--mw-s3); flex-wrap: wrap; margin-top: var(--mw-s3); }
.mw-kf__stepperctl {
  display: inline-flex;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
  overflow: hidden;
}
.mw-kf__stepbtn {
  width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--mw-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.mw-kf__stepbtn:hover { background: var(--mw-surface-2); }
.mw-kf__num {
  width: 3.2rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: var(--mw-fw-strong);
  -moz-appearance: textfield;
  appearance: textfield;
}
.mw-kf__num::-webkit-outer-spin-button,
.mw-kf__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mw-kf__rental { display: grid; gap: var(--mw-s2); }
.mw-kf__rental [hidden] { display: none; }

/* Datum und Name */
.mw-kf__when { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--mw-s4); }
.mw-kf__field { display: grid; gap: var(--mw-s1); align-content: start; }
.mw-kf__field > label { font-weight: var(--mw-fw-strong); }
.mw-kf__input {
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius);
  background: var(--mw-surface);
  color: var(--mw-ink);
}

/* Zusammenfassung */
.mw-kf__sum { min-width: 0; }
.mw-kf__sumcard {
  padding: var(--mw-pad);
  background: var(--mw-surface);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  box-shadow: var(--mw-shadow);
}
.mw-kf__sumtitle {
  margin-bottom: var(--mw-s3);
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-l);
  font-weight: var(--mw-fw-strong);
}
.mw-kf__lines { display: grid; gap: var(--mw-s2); }
.mw-kf__line { display: flex; justify-content: space-between; gap: var(--mw-s3); align-items: baseline; }
.mw-kf__line dt { color: var(--mw-ink-2); }
.mw-kf__line dd { margin: 0; text-align: right; font-weight: var(--mw-fw-strong); white-space: nowrap; }
.mw-kf__line--lead dt { color: var(--mw-ink); font-weight: var(--mw-fw-strong); }
.mw-kf__line--lead dd { font-weight: var(--mw-fw); color: var(--mw-ink-2); }
.mw-kf__line--sub { font-size: var(--mw-fs-s); }
.mw-kf__line--sub dd { font-weight: var(--mw-fw); }

.mw-kf__bar {
  display: grid;
  gap: var(--mw-s3);
  padding: var(--mw-pad);
  background: var(--mw-surface);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  box-shadow: var(--mw-shadow);
  margin-top: var(--mw-s3);
}
.mw-kf__bartext { display: grid; gap: .15rem; justify-items: start; }
.mw-kf__barlabel { font-size: var(--mw-fs-xs); font-weight: var(--mw-fw-strong); letter-spacing: var(--mw-ls-label); text-transform: var(--mw-tt-label); color: var(--mw-ink-2); }
.mw-kf__total { font-family: var(--mw-font-display); font-size: var(--mw-fs-xxl); font-weight: var(--mw-fw-strong); line-height: 1.05; }
.mw-kf__demo {
  display: inline-block;
  margin-top: .25rem;
  padding: .1rem .6rem;
  border-radius: var(--mw-radius-pill);
  background: var(--mw-warn-soft);
  color: var(--mw-warn);
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
}
.mw-kf__cta { width: 100%; }
.mw-kf__ctanote { text-align: center; }
.mw-kf__error { padding: var(--mw-s4); border: var(--mw-border) solid var(--mw-bad); border-radius: var(--mw-radius); color: var(--mw-bad); background: var(--mw-bad-soft); }

/* Breite Darstellung: Zusammenfassung rechts, klebt beim Scrollen */
@container mwkf (min-width: 820px) {
  .mw-kf__grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--mw-s6); }
  .mw-kf__sum { position: sticky; top: var(--mw-s4); }
}

/* Schmale Darstellung: Preisleiste klebt unten im Baustein */
@container mwkf (max-width: 819px) {
  .mw-kf__sum { display: contents; }
  .mw-kf__bar {
    position: sticky;
    bottom: var(--mw-s2);
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--mw-s3) var(--mw-s4);
    border-radius: var(--mw-radius);
  }
  .mw-kf__total { font-size: var(--mw-fs-xl); }
  .mw-kf__cta { width: auto; }
  .mw-kf__ctanote { display: none; }
}
@container mwkf (max-width: 460px) {
  .mw-kf__bar { gap: var(--mw-s2) var(--mw-s3); padding: var(--mw-s3); }
  .mw-kf__total { font-size: var(--mw-fs-l); }
  .mw-kf__demo { white-space: normal; line-height: 1.25; border-radius: var(--mw-radius-s); }
  .mw-kf__cta { padding-inline: .9rem; font-size: var(--mw-fs-s); }
}

/* Zusaetze: Kennzeichen, Anfrage-Hinweis, Verleih */
.mw-kf__tag {
  display: inline-block;
  margin-top: .3rem;
  padding: 0 .5rem;
  border-radius: var(--mw-radius-pill);
  background: var(--mw-warn-soft);
  color: var(--mw-warn);
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
  line-height: 1.5;
}
.mw-kf__request {
  padding: var(--mw-s3) var(--mw-s4);
  border: var(--mw-border) dashed var(--mw-line-strong);
  border-radius: var(--mw-radius);
  background: var(--mw-surface-2);
  color: var(--mw-ink);
}
.mw-kf__request[hidden], .mw-kf__hours[hidden], .mw-kf__rentalopts[hidden], .mw-kf__ratesnote[hidden], .mw-kf__demo[hidden] { display: none; }
.mw-kf__rentalopts { display: grid; gap: var(--mw-s3); margin-top: var(--mw-s2); }
.mw-kf__choices--items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.mw-kf__stepperctl--wide .mw-kf__vout { display: grid; place-items: center; min-width: 6.5rem; padding: 0 .4rem; font-weight: var(--mw-fw-strong); text-align: center; }
.mw-kf__stepbtn[disabled] { opacity: .35; cursor: not-allowed; }
.mw-kf__ratesnote { max-width: 18rem; }