/**
 * Angebotsmodell (V2): ein offener Kurs mit festen Terminen – alles andere nach Wunsch.
 *
 * Bausteine: Ort-/Format-Auswahl (.mo-chooser, .mo-picker), Status-Tags auf Karten
 * (.mo-tags), Verfügbarkeits-Pillen im Seminar-Hero (.mo-avail), Terminliste und
 * Buchungsbox (.mo-box, .mo-dates), Hinweisband (.mo-band).
 * Markup: inc/offer-model.php. Farben/Variablen kommen aus site-v2.css (.mv-v2).
 */

/* ============================================================
   Ort-/Format-Auswahl (Formular)
   ============================================================ */
body.mv-v2 .mo-chooser { display: grid; gap: 1.15rem; }
body.mv-v2 .mo-group { min-width: 0; margin: 0; padding: 0; border: 0; }
body.mv-v2 .mo-legend {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.6rem; padding: 0;
  font-size: 0.92rem; font-weight: 800; line-height: 1.2; color: var(--mv-ink);
}
body.mv-v2 .mo-step {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--mv-navy); color: #fff; font-size: 0.78rem; font-weight: 800;
}
body.mv-v2 .mo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body.mv-v2 .mo-chip { position: relative; display: inline-flex; cursor: pointer; }
body.mv-v2 .mo-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
body.mv-v2 .mo-chip > span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px; border: 2px solid var(--mv-line);
  background: #fff; color: var(--mv-ink);
  font-size: 0.92rem; font-weight: 700; line-height: 1.2;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
body.mv-v2 .mo-chip > span svg { flex: none; }
body.mv-v2 .mo-chip:hover > span { border-color: var(--mv-navy-3); }
body.mv-v2 .mo-chip input:checked + span {
  background: var(--mv-navy); border-color: var(--mv-navy); color: #fff;
  box-shadow: 0 6px 16px rgba(15, 29, 47, 0.22);
}
body.mv-v2 .mo-chip input:focus-visible + span { outline: 3px solid var(--mv-amber); outline-offset: 2px; }
body.mv-v2 .mo-hint { margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.5; color: #6b7280; }
body.mv-v2 .mo-hint strong { font-weight: 700; color: var(--mv-ink); }
body.mv-v2 .mo-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.95rem 1.4rem;
  border: 0; border-radius: 999px;
  background: var(--mv-amber); color: var(--mv-navy);
  font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.2; cursor: pointer;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.36);
  transition: background 0.2s ease, transform 0.2s ease;
}
body.mv-v2 .mo-submit:hover { background: var(--mv-amber-hi); transform: translateY(-1px); }
body.mv-v2 .mo-submit:focus-visible { outline: 3px solid var(--mv-navy); outline-offset: 3px; }
body.mv-v2 .mo-note { margin: 0; text-align: center; font-size: 0.78rem; line-height: 1.45; color: #6b7280; }

/* Dunkle Variante (auf Navy-Flächen) */
body.mv-v2 .mo-chooser--dark .mo-legend { color: #fff; }
body.mv-v2 .mo-chooser--dark .mo-step { background: var(--mv-amber); color: var(--mv-navy); }
body.mv-v2 .mo-chooser--dark .mo-chip > span {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); color: #fff;
}
body.mv-v2 .mo-chooser--dark .mo-chip:hover > span { border-color: #fff; }
body.mv-v2 .mo-chooser--dark .mo-chip input:checked + span {
  background: var(--mv-amber); border-color: var(--mv-amber); color: var(--mv-navy);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}
body.mv-v2 .mo-chooser--dark .mo-hint,
body.mv-v2 .mo-chooser--dark .mo-note { color: rgba(255, 255, 255, 0.66); }
body.mv-v2 .mo-chooser--dark .mo-hint strong { color: #fff; }

/* ============================================================
   Wunschformat-Leiste im Katalog
   ============================================================ */
body.mv-v2 .mo-picker-wrap { padding: 2rem 1.5rem 0; }
body.mv-v2 .mo-picker {
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 80rem; margin: 0 auto; padding: 1.15rem 1.35rem;
  border-radius: 26px; background: var(--mv-amber-soft); border: 1px solid #fbe8b8;
}
@media (min-width: 900px) {
  body.mv-v2 .mo-picker { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.2rem 1.75rem; }
}
body.mv-v2 .mo-picker__intro { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
body.mv-v2 .mo-picker__intro strong { font-size: 1.02rem; font-weight: 800; color: var(--mv-ink); }
body.mv-v2 .mo-picker__intro span { font-size: 0.86rem; line-height: 1.45; color: #5b4a1e; }
body.mv-v2 .mo-picker__groups { display: flex; flex-wrap: wrap; gap: 0.9rem 1.75rem; }
body.mv-v2 .mo-picker__group { min-width: 0; margin: 0; padding: 0; border: 0; }
body.mv-v2 .mo-picker__group legend {
  margin: 0 0 0.4rem; padding: 0;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mv-amber-dark);
}

/* ============================================================
   Status-Tags und Orts-/Format-Zeile auf Seminarkarten
   ============================================================ */
body.mv-v2 .mo-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin: 0 0 0.9rem; }
body.mv-v2 .mo-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.24rem 0.75rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.01em;
}
body.mv-v2 .mo-tag::before { content: ""; flex: none; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: currentColor; }
body.mv-v2 .mo-tag--open { background: var(--mv-amber); color: var(--mv-navy); }
body.mv-v2 .mo-tag--partner { background: #fff; border: 1px solid #f6d58b; color: var(--mv-amber-dark); }
body.mv-v2 .mo-tag--wish { background: #eaeff6; color: var(--mv-navy-2); }
body.mv-v2 .mo-meta { font-size: 0.76rem; line-height: 1.4; color: #6b7280; }
body.mv-v2 .mo-pill {
  display: inline-flex; align-items: center; padding: 0.12rem 0.6rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; line-height: 1.4; white-space: nowrap;
}
body.mv-v2 .mo-pill--partner { background: #fff; border: 1px solid #f6d58b; color: var(--mv-amber-dark); }
body.mv-v2 .mo-pill--open { background: var(--mv-amber); color: var(--mv-navy); }

/* Datums-Hinweis „Partner“ auf Karten */
body.mv-v2 .mo-next-note { display: block; margin-top: 0.1rem; font-size: 0.68rem; font-weight: 700; color: var(--mv-amber-dark); }

/* ============================================================
   Seminar-Hero: „Buchbar als …“
   ============================================================ */
body.mv-v2 .mo-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 1.5rem; }
body.mv-v2 .mo-avail__label { margin-right: 0.2rem; font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
body.mv-v2 .mo-avail__pill {
  display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem; font-weight: 700; color: #fff;
}
body.mv-v2 .mo-avail__pill--open { background: var(--mv-amber); border-color: var(--mv-amber); color: var(--mv-navy); }
body.mv-v2 .mo-avail__sep { width: 1px; height: 1rem; margin: 0 0.15rem; background: rgba(255, 255, 255, 0.3); }

/* ============================================================
   Buchungsbox (Hero-Karte der Seminarseite)
   ============================================================ */
body.mv-v2 .mo-box__kicker { margin: 0 0 0.5rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mv-amber-dark); }
body.mv-v2 .mo-box__title { margin: 0 0 0.35rem; font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--mv-ink); }
body.mv-v2 .mo-box__text { margin: 0 0 1.1rem; font-size: 0.88rem; line-height: 1.55; color: #5b6676; }
body.mv-v2 .mo-box__price { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 1.1rem; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--mv-soft); }
body.mv-v2 .mo-box__price span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; }
body.mv-v2 .mo-box__price b { font-size: 1.05rem; font-weight: 800; line-height: 1.25; text-align: right; color: var(--mv-ink); }
body.mv-v2 .mo-box__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 1rem 0 0; font-size: 0.82rem; }
body.mv-v2 .mo-box__links a { font-weight: 700; color: var(--mv-amber-dark); text-decoration: underline; text-underline-offset: 3px; }

body.mv-v2 .mo-dates { display: grid; gap: 0.55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
body.mv-v2 .mo-dates a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.8rem; border-radius: 18px;
  border: 1px solid var(--mv-line); background: #fff;
  color: var(--mv-ink); text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
body.mv-v2 .mo-dates a:hover { border-color: #f6d58b; background: var(--mv-amber-soft); transform: translateY(-1px); }
body.mv-v2 .mo-dates .mv-date { flex: none; width: 46px; height: 50px; border-radius: 13px; }
body.mv-v2 .mo-dates .mv-date b { font-size: 1.15rem; }
body.mv-v2 .mo-dates .mv-date i { margin-top: 2px; font-size: 0.58rem; }
body.mv-v2 .mo-dates__body { min-width: 0; flex: 1; }
body.mv-v2 .mo-dates__when { display: block; font-size: 0.9rem; font-weight: 800; line-height: 1.3; }
body.mv-v2 .mo-dates__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin-top: 0.15rem; font-size: 0.76rem; line-height: 1.4; color: #6b7280; }
body.mv-v2 .mo-dates__title { display: block; margin-top: 0.1rem; font-size: 0.8rem; font-weight: 700; color: #3b4658; }
body.mv-v2 .mo-dates__go { flex: none; color: var(--mv-amber-dark); }

body.mv-v2 .mo-empty {
  margin: 0 0 1rem; padding: 0.95rem 1rem; border-radius: 18px;
  background: var(--mv-amber-soft); border: 1px dashed #f6d58b;
  font-size: 0.88rem; line-height: 1.55; color: #5b4a1e;
}
body.mv-v2 .mo-empty strong { display: block; margin-bottom: 0.15rem; color: var(--mv-ink); }

body.mv-v2 .mo-alt { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--mv-line); }
body.mv-v2 .mo-alt summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  cursor: pointer; list-style: none;
  font-size: 0.92rem; font-weight: 800; line-height: 1.3; color: var(--mv-ink);
}
body.mv-v2 .mo-alt summary::-webkit-details-marker { display: none; }
body.mv-v2 .mo-alt summary::after {
  content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mv-amber-soft); color: var(--mv-amber-dark);
  font-size: 1.1rem; font-weight: 800; line-height: 1;
}
body.mv-v2 .mo-alt[open] summary::after { content: "–"; }
body.mv-v2 .mo-alt .mo-chooser { margin-top: 1rem; }
body.mv-v2 .mo-partner-block { margin: 0 0 1.1rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--mv-line); }

/* ============================================================
   Hinweisband (Terminübersicht)
   ============================================================ */
body.mv-v2 .mo-band {
  display: grid; gap: 1rem;
  margin: 0 0 2rem; padding: 1.3rem 1.5rem; border-radius: 26px;
  background: var(--mv-amber-soft); border: 1px solid #fbe8b8;
}
@media (min-width: 900px) { body.mv-v2 .mo-band { grid-template-columns: 1fr 1fr; gap: 2rem; } }
body.mv-v2 .mo-band h2 { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 800; color: var(--mv-ink); }
body.mv-v2 .mo-band p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #5b4a1e; }
body.mv-v2 .mo-band a { font-weight: 700; color: var(--mv-amber-dark); text-decoration: underline; text-underline-offset: 3px; }
body.mv-v2 tr.mo-row--open { box-shadow: inset 4px 0 0 var(--mv-amber); background: linear-gradient(90deg, rgba(245, 158, 11, 0.09), transparent 45%); }
body.mv-v2 .mo-table-empty { padding: 2.5rem 1rem; text-align: center; }

/* Links im Button-Look + Feinschliff */
body.mv-v2 a.mo-submit { text-decoration: none; }
body.mv-v2 .mo-submit--inline { display: inline-flex; width: auto; }
body.mv-v2 .mo-box .mo-dates { margin: 0 0 0.9rem; }
body.mv-v2 .mo-partner-block .mo-box__kicker { margin-bottom: 0.6rem; }
body.mv-v2 .mo-partner-block .mo-dates { margin: 0; }
body.mv-v2 #termine .mo-alt { margin-top: 1.5rem; }
body.mv-v2 #termine .mo-chooser { max-width: 36rem; }

/* Mobil: Die Sticky-Anfrageleiste (Seminarseiten) darf nicht von der
   Beratungs-Bubble und dem Cookie-Button überdeckt werden. */
@media (max-width: 1023.98px) {
	body:has(.ms-mobile-cta) #ms-seminar-advice-root {
		bottom: 5.25rem;
	}
	body:has(.ms-mobile-cta) .alber-cookie__fab {
		bottom: 5.25rem;
	}
}