/* ═══════════════════════════════════════════════════════════
   WellenFlitzer × Kutego – Kachel-Layout v2.10.1
   Branding: Primary #1496AF | Dark #00404F | Text #404040
   Font: Montserrat | Border-Radius: 4px (Buttons)
   v2.10.1: Trust-Bar iframe Schutz + Exit-Intent Overlay CSS-Fix (Checkout)
   v2.10.9: Timer-Fortschrittsbalken Hintergrund auf Weiss (kein Gruen mehr)
   v2.10.16: Wartelisten-CTA-Button (orange) im Laufzeit-Modal
   v2.10.53: Sofort-first (Badge "Sofort starten", Klappzeile fuer Spaetstarter) + Umlenk-Hinweis im Modal
   v2.10.54: gruener Trennstrich unter den Wochentags-Ueberschriften
   v2.10.55: Trennstrich in WellenFlitzer-Petrol (#1496AF)
   ═══════════════════════════════════════════════════════════ */

/* ── Montserrat Font Import ─────────────────────────────── */
@import url('/templates/fonts/montserrat_wght_400_500_600_700_800_68a53b9955649dc820c27e4888ea2bc5.css');

/* ── Globale Font-Basis für Kutego-Widget ────────────────── */
.course-module,
.course-module *,
#wf-kacheln,
#wf-kacheln * {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ── Alte Desktop-Tabelle ausblenden ─────────────────────── */
.courses-table.hidden-xs,
.courses-table {
  display: none !important;
}

/* ── Alte Mobile-Karten-Ansicht ausblenden ───────────────── */
[id^="mobile_courses"],
.visible-xs.mobile-filter,
.mobile-filter {
  display: none !important;
}

@media (max-width: 767px) {
  .course-module .panel,
  .course-module .panel-default,
  .course-module [class*="course-item"],
  .course-module [class*="rolling-courses-list"],
  .course-module .mobi-course,
  .course-module .mobile-course-list {
    display: none !important;
  }
  .mobile-filter,
  .visible-xs.mobile-filter,
  [id^="mobile_courses"] {
    display: none !important;
  }
}

/* ── Lade-Animation ──────────────────────────────────────── */
.wf-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: #6b7a82;
  font-size: 14px;
}
.wf-loader-icon {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(20, 150, 175, 0.2);
  border-top-color: #1496AF;
  border-radius: 50%;
  animation: wf-spin 0.8s linear infinite;
}
@keyframes wf-spin {
  to { transform: rotate(360deg); }
}

/* ── Info-Hinweis: Flexibler Starttermin (v2.10.29) ── */
.wf-start-hint {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: #e8f6f9 !important;
  border-left: 3px solid #1496AF !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  margin-bottom: 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #2a5a66 !important;
}
.wf-start-hint-icon {
  flex-shrink: 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: #1496AF !important;
}
.wf-start-hint-text {
  flex: 1 !important;
}

/* ── Wochentag-Gruppe (fortlaufende Kurse) ─────────── */
.wf-day-group {
  margin-bottom: 20px;
}
.wf-day-title {
  font-size: 13px;
  font-weight: 700;
  color: #00404F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 0 8px 0;
  border-bottom: 2px solid rgba(20, 150, 175, 0.6);   /* v2.10.55 (Ulf): Trennstrich in WellenFlitzer-Petrol #1496AF */
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.wf-day-title .wf-day-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.wf-day-title.closed .wf-day-arrow {
  transform: rotate(-90deg);
}
/* v2.10.53: Zusammenfassung rechts in der Tages-Ueberschrift ("3 Kurse sofort" / "ab 09.11.") */
.wf-day-title .wf-day-summary {
  margin-left: auto !important;
  margin-right: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #6b7a82 !important;
  white-space: nowrap !important;
}
.wf-day-title .wf-day-summary.wf-soon {
  color: #1b7f3b !important;
}

/* Datum-Gruppe (Blockkurse) – klappbar */
.wf-day-title.clickable {
  cursor: pointer;
  background: #f0f8fa;
  border-radius: 4px;
  padding: 10px 14px;
  border-bottom: none;
  color: #00404F;
}
.wf-day-title.clickable:hover {
  background: #e0f2f6;
}
.wf-day-body {
  display: none;
  padding: 4px 0;
}
.wf-day-body.open {
  display: block;
}

/* ── Kursname-Untergruppe (Blockkurse) ───────────────────── */
.wf-course-subgroup {
  margin: 8px 0;
}
.wf-course-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #404040;
  padding: 7px 12px;
  background: #f9f9f9;
  border-left: 3px solid #1496AF;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 4px 4px 0;
  margin-bottom: 4px;
}
.wf-course-subtitle:hover {
  background: #f0f8fa;
}
.wf-course-subtitle-price {
  color: #1496AF;
  font-weight: 700;
}
.wf-course-subbody {
  display: none;
  padding: 8px 0;
}
.wf-course-subbody.open {
  display: block;
}

/* ── Kachel-Grid ───────────────────────────────────────────── */
.wf-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 4px 0;
}

.wf-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 105px;
  padding: 12px 8px;
  border: 1.5px solid rgba(0, 64, 79, 0.18);
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  transition: all 0.18s ease;
  text-align: center;
}

.wf-tile:hover {
  border-color: #1496AF;
  background: rgba(20, 150, 175, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 64, 79, 0.1);
}

.wf-tile-time {
  font-size: 16px;
  font-weight: 700;
  color: #00404F;
  line-height: 1.3;
}

/* ── Startdatum auf Kachel (fortlaufende Kurse) ─────────── */
.wf-tile-date {
  font-size: 13px;
  color: #1496AF;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.3;
}
.wf-tile.waitlist-tile .wf-tile-date {
  color: #7a6200;
}
.wf-tile-date.wf-date-loading {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.wf-tile-date.wf-date-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ── Freie-Plätze-Anzeige auf Kachel ────────────────────── */
.wf-tile-places {
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}
.wf-tile-places.wf-places-visible {
  opacity: 1 !important;
}
.wf-tile-places.wf-places-urgent {
  color: #c62828 !important;
}
.wf-tile-places.wf-places-warning {
  color: #e65100 !important;
}
.wf-tile-places.wf-places-ok {
  color: #1b7f3b !important;   /* v2.10.53: gruen ab 3 freien Plaetzen (ersetzt den "Wenig Teilnehmer"-Balken) */
}
.wf-tile-places svg {
  flex-shrink: 0 !important;
}

/* ── Standort-Anzeige auf Kachel (alle Kategorien) ────────── */
.wf-tile-location {
  font-size: 11px;
  font-weight: 600;
  color: #6b7a82;
  margin-top: 3px;
  line-height: 1.3;
}

/* ── Wochentag-Badge auf Blockkachel ──────────────────── */
.wf-tile-day {
  font-size: 11px;
  font-weight: 700;
  color: #00404F;
  letter-spacing: 0;            /* v2.10.53: "5 Termine · täglich" einzeilig auf Mobil (vorher Versalien + Sperrung) */
  text-transform: none;
  background: rgba(0, 64, 79, 0.08);
  border-radius: 3px;
  padding: 1px 6px;
  margin-top: 3px;
  line-height: 1.6;
}
.wf-tile.waitlist-tile .wf-tile-day {
  color: #7a5800;
  background: rgba(180, 130, 0, 0.08);
}

/* ── CTA-Button auf der Kachel ───────────────────────────── */
.wf-tile-cta {
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  pointer-events: none;
  transition: background 0.18s ease;
}
.wf-tile-cta.available {
  background: #1496AF;
  color: #fff;
}
.wf-tile:hover .wf-tile-cta.available {
  background: #0d7a91;
}

/* ── Wartelisten-Kacheln ─────────────────────────────────── */
.wf-tile.waitlist-tile {
  border-color: rgba(180, 130, 0, 0.25);
  background: #fafafa;
  opacity: 0.85;
}
.wf-tile.waitlist-tile .wf-tile-time {
  color: #5a5a5a;
}
.wf-tile-cta.waitlist {
  background: rgba(180, 130, 0, 0.12);
  color: #7a5800;
  border-radius: 4px;
}

/* ── Ausgebuchte Kacheln ─────────────────────────────────── */
.wf-tile.booked-tile {
  opacity: 0.5;
  cursor: default;
}
.wf-tile.booked-tile:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(0, 64, 79, 0.18);
  background: #fff;
}
.wf-tile-cta.booked {
  background: rgba(160, 50, 50, 0.08);
  color: #a03030;
  border-radius: 4px;
}
/* v2.14.4: nachträglich als voll erkannte Kacheln (Prefetch-Retrofit, data-wf-full) —
   Kutegos Platzhalter-Datum ausblenden. Als CSS-Regel statt Inline-Style, weil der
   Badge-Pass im Sofort-Layout Inline-Styles der Datumszeile zurücksetzt. */
.wf-tile[data-wf-full="1"] .wf-tile-date {
  display: none !important;
}

/* ── Warteliste-Toggle (fortlaufende Kurse) ──────────────── */
.wf-waitlist-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 64, 79, 0.2);
}
.wf-waitlist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid rgba(20, 150, 175, 0.4);
  border-radius: 4px;
  background: transparent;
  color: #1496AF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.wf-waitlist-toggle:hover {
  background: rgba(20, 150, 175, 0.06);
}
.wf-toggle-arrow {
  transition: transform 0.2s ease;
  font-size: 10px;
}
.wf-waitlist-toggle.open .wf-toggle-arrow {
  transform: rotate(180deg);
}
.wf-waitlist-container {
  display: none;
  margin-top: 14px;
}
.wf-waitlist-container.open {
  display: block;
}
.wf-waitlist-day-group {
  margin-bottom: 16px;
}
.wf-waitlist-day-label {
  font-size: 12px;
  font-weight: 700;
  color: #9a8a60;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* ── Leerer Zustand ──────────────────────────────────────── */
.wf-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px dashed rgba(0, 64, 79, 0.2);
  margin: 20px 0;
}
.wf-empty-icon {
  margin-bottom: 12px;
  color: #1496AF;
}
.wf-empty-icon svg {
  width: 48px;
  height: 48px;
}
.wf-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #00404F;
  margin-bottom: 8px;
}
.wf-empty-text {
  font-size: 13px;
  color: #6b7a82;
  max-width: 320px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.wf-empty-link {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 22px;
  background: #1496AF;
  color: #fff !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease;
}
.wf-empty-link:hover {
  background: #0d7a91;
  color: #fff !important;
  text-decoration: none;
}

/* ── NEU-Ribbon (obere rechte Ecke der Kachel) ─────────── */
.wf-tile-new-badge {
  position: absolute;
  top: 9px;
  right: -20px;
  background: #e8472a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 24px;
  transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(232, 71, 42, 0.3);
  pointer-events: none;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 20;
}

.wf-footnote {
  margin-top: 16px;
  font-size: 11px;
  color: #6b7a82;
  line-height: 1.5;
}

.wf-pruef-footnote {
  margin: 16px 0 4px 0;
  padding: 0 4px;
  font-size: 12px;
  color: #6b7a82;
  line-height: 1.5;
  font-style: italic;
}

/* ── Wenig-Teilnehmer-Badge (oberer Rand der Kachel) ─────── */
.wf-tile-low-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #00404F;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 8px;
  pointer-events: none;
  line-height: 1.4;
  border-radius: 4px 4px 0 0;
  z-index: 10;
}

/* ── Badge-Farbvarianten ───────────────────────────────────── */
.wf-badge-beginner {
  background: #2e7d32;
}
.wf-badge-advanced {
  background: #5c3d8f;
}

/* ── v2.10.53: Sofort-first (Variante B) ──────────────────── */
.wf-tile-soon-badge {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1b7f3b !important;
  background: rgba(27, 127, 59, 0.10) !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  margin-top: 3px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}
.wf-tile-later .wf-tile-date {
  color: #6b7a82 !important;
}
/* v2.10.60: Badge fuer neu startende Kurse (Erstbelegung) - ersetzt die Frei-ab-Zeile */
.wf-tile-newstart-badge {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1496AF !important;
  background: rgba(20, 150, 175, 0.10) !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
.wf-later-toggle {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 0 0 !important;
  padding: 8px 12px !important;
  background: #f7fafb !important;
  border: 1px dashed rgba(0, 64, 79, 0.28) !important;
  border-radius: 4px !important;
  color: #00404F !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.18s ease !important;
}
.wf-later-toggle:hover {
  background: #eef6f8 !important;
}
.wf-later-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
}
.wf-later-title .wf-toggle-arrow {
  font-size: 10px !important;
  transition: transform 0.2s ease !important;
}
.wf-later-toggle.open .wf-toggle-arrow {
  transform: rotate(180deg) !important;
}
.wf-later-times {
  display: block !important;
  margin-top: 2px !important;
  color: #6b7a82 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: normal !important;
}
.wf-later-wrap {
  display: none !important;
  margin-top: 10px !important;
}
.wf-later-wrap.open {
  display: block !important;
}

/* ── v2.10.53: Umlenk-Hinweis "Frueher starten?" im Laufzeit-Modal (B+) ── */
.wf-alt-hint {
  display: block !important;
  background: #effaf3 !important;
  border-left: 3px solid #1b7f3b !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px 0 !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #404040 !important;
  line-height: 1.5 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.wf-alt-hint-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1b7f3b !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.wf-alt-hint-head svg {
  flex-shrink: 0 !important;
}
.wf-alt-hint-text {
  margin-bottom: 8px !important;
}
.wf-alt-hint-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.wf-alt-hint-btn {
  display: inline-block !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  border: 1.5px solid rgba(20, 150, 175, 0.5) !important;
  background: #fff !important;
  color: #1496AF !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.wf-alt-hint-btn.wf-primary {
  background: #1496AF !important;
  border-color: #1496AF !important;
  color: #fff !important;
}
.wf-alt-hint-btn:hover {
  filter: brightness(0.95) !important;
}

/* ── v2.10.58: Social-Proof-Zeile am Monats-Abo ───────────── */
.wf-social-proof {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #6b7a82 !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Kurs-Hinweistext auf Laufzeitauswahl-Seite (generisch) ─── */
.wf-course-hint {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 8px;
  background: #f0f8fa;
  border-left: 3px solid #00404F;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #404040;
  line-height: 1.5;
  width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.wf-course-hint-icon {
  color: #1496AF;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  margin-top: 1px;
}
.wf-course-hint-icon svg {
  width: 18px;
  height: 18px;
}
.wf-course-hint > span:last-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* ── Startdatum-Hinweis im Laufzeit-Modal ─────────────── */
.wf-startdate-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #e8f7fa;
  border-left: 3px solid #1496AF;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #404040;
  line-height: 1.5;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.wf-startdate-hint > span:last-child {
  min-width: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* ── Frühestes Startdatum pro Laufzeit ─────────────────── */
.wf-earliest-start {
  display: block;
  font-size: 12px;
  color: #1496AF;
  font-weight: 600;
  margin: 6px 0 4px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* ── Laufzeit-Modal: Kutego-Buttons im WellenFlitzer-Stil ── */
.swal2-popup .submitTerm,
.swal2-popup button.submitTerm,
.modal-body .submitTerm,
.modal-body button.submitTerm {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.18s ease !important;
}

/* ── Laufzeit-Modal: Gesamtlayout ────────────────────────── */
.swal2-popup,
.modal-content {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  border-radius: 4px !important;
}
.swal2-popup .swal2-title,
.modal-content .modal-title {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  color: #00404F !important;
  font-weight: 700 !important;
}

/* ── Laufzeit-Modal: Accordion Pricing Cards ── */
#termModal .modal-dialog {
  max-width: 600px !important;
  width: auto !important;
  box-sizing: border-box !important;
}
#termModal .modal-body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#termModal .modal-body .wf-term-accordion {
  border: 1.5px solid rgba(0, 64, 79, 0.15);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#termModal .modal-body .wf-term-accordion:hover {
  border-color: rgba(20, 150, 175, 0.3);
}
#termModal .modal-body .wf-term-accordion.wf-term-recommended {
  border: 2.5px solid #1496AF;
  box-shadow: 0 4px 16px rgba(20, 150, 175, 0.12);
}

/* Accordion Header (always visible) */
.wf-acc-header {
  display: flex;
  align-items: flex-start; /* v2.15.0 (Ulf): Preis oben ausgerichtet, nicht mittig/unten */
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
  gap: 12px;
}
.wf-acc-header:hover {
  background: rgba(20, 150, 175, 0.03);
}
.wf-term-recommended .wf-acc-header {
  padding: 16px 16px 14px;
}

/* Left side: name + badge */
.wf-acc-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wf-acc-name {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  color: #00404F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-term-recommended .wf-acc-name {
  font-size: 16px;
  color: #1496AF;
}
.wf-acc-badge {
  display: inline-block;
  background: #1496AF;
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  width: fit-content;
}

/* Right side: price + chevron */
.wf-acc-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wf-acc-price {
  text-align: right;
}
.wf-acc-price-amount {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #00404F;
}
.wf-term-recommended .wf-acc-price-amount {
  font-size: 22px;
  color: #1496AF;
}
.wf-acc-price-period {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #6b7a82;
  display: block;
  text-align: right;
}
.wf-acc-chevron {
  width: 24px;
  height: 24px;
  color: #8a9ba5;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.wf-term-accordion.wf-acc-open .wf-acc-chevron {
  transform: rotate(180deg);
}
.wf-term-recommended .wf-acc-chevron {
  color: #1496AF;
}

/* Accordion Body (expandable) – v2.8.1: overflow visible für offene Accordions */
.wf-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#termModal .modal-body .wf-term-accordion.wf-acc-open,
.swal2-popup .wf-term-accordion.wf-acc-open,
.wf-term-accordion.wf-acc-open {
  overflow: visible !important;
}
#termModal .modal-body .wf-term-accordion.wf-acc-open .wf-acc-body,
.swal2-popup .wf-term-accordion.wf-acc-open .wf-acc-body,
.wf-term-accordion.wf-acc-open .wf-acc-body {
  max-height: 600px;
  overflow: visible !important;
}
.wf-acc-body-inner {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(0, 64, 79, 0.08);
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Feature list inside accordion (v2.8.1: Spezifität erhöht gegen Kutego-Overrides) */
#termModal .modal-body .wf-term-features,
.swal2-popup .wf-term-features,
.wf-term-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 14px !important;
}
#termModal .modal-body .wf-term-features li,
.swal2-popup .wf-term-features li,
.wf-term-features li {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #404040 !important;
  font-weight: 400 !important;
  padding: 4px 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#termModal .modal-body .wf-term-features li > span,
.swal2-popup .wf-term-features li > span,
.wf-term-features li > span {
  color: #404040 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  flex-shrink: 1 !important;
}
#termModal .modal-body .wf-term-features li > span:last-child,
.swal2-popup .wf-term-features li > span:last-child,
.wf-term-features li > span:last-child {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  flex-shrink: 1 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}
#termModal .modal-body .wf-term-features li .wf-feat-icon,
.swal2-popup .wf-term-features li .wf-feat-icon,
.wf-term-features li .wf-feat-icon {
  flex: 0 0 auto !important;
  width: 20px !important;
  margin-top: 1px;
  color: #1496AF !important;
}
#termModal .modal-body .wf-term-features li .wf-feat-icon svg,
.swal2-popup .wf-term-features li .wf-feat-icon svg,
.wf-term-features li .wf-feat-icon svg {
  width: 16px !important;
  height: 16px !important;
}
#termModal .modal-body .wf-term-features li strong,
.swal2-popup .wf-term-features li strong,
.wf-term-features li strong {
  font-weight: 400 !important;
  color: inherit !important;
}

/* Prüfgebühr-Fußnote */
.wf-feat-note {
  font-size: 11px;
  color: #8a9ba5;
  padding: 2px 0 0 0;
  list-style: none;
  font-style: italic;
}

/* Platzgarantie-Highlight (v2.8.1: Spezifität erhöht) */
#termModal .modal-body .wf-term-features li.wf-feat-highlight .wf-feat-icon,
.swal2-popup .wf-term-features li.wf-feat-highlight .wf-feat-icon,
.wf-term-features li.wf-feat-highlight .wf-feat-icon {
  color: #00404F !important;
}
#termModal .modal-body .wf-term-features li.wf-feat-highlight,
.swal2-popup .wf-term-features li.wf-feat-highlight,
.wf-term-features li.wf-feat-highlight {
  background: #e8f7fa !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  margin: 4px -4px !important;
  font-weight: 500 !important;
  color: #00404F !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#termModal .modal-body .wf-term-features li.wf-feat-highlight > span,
.swal2-popup .wf-term-features li.wf-feat-highlight > span,
.wf-term-features li.wf-feat-highlight > span {
  color: #00404F !important;
  font-weight: 500 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  flex-shrink: 1 !important;
}
#termModal .modal-body .wf-term-features li.wf-feat-highlight > span:last-child,
.swal2-popup .wf-term-features li.wf-feat-highlight > span:last-child,
.wf-term-features li.wf-feat-highlight > span:last-child {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  flex-shrink: 1 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Flexibilitäts-Botschaft */
.wf-term-message {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #1496AF;
  text-align: center;
  padding: 10px 12px;
  background: rgba(20, 150, 175, 0.05);
  border-radius: 4px;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* CTA-Button im Accordion */
.wf-term-cta {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.wf-term-cta.wf-cta-primary {
  background: #1496AF;
  color: #fff;
}
.wf-term-cta.wf-cta-primary:hover {
  background: #0d7a91;
  box-shadow: 0 4px 12px rgba(20, 150, 175, 0.3);
}
.wf-term-cta.wf-cta-secondary {
  background: transparent;
  color: #1496AF;
  border: 1.5px solid rgba(20, 150, 175, 0.4);
}
.wf-term-cta.wf-cta-secondary:hover {
  background: rgba(20, 150, 175, 0.06);
  border-color: #1496AF;
}

/* Wochenpreis unter dem Hauptpreis */
.wf-week-price {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  color: #8a9ba5;
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
}

/* Tipp-Kasten (Monats-Abo) */
.wf-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(20, 150, 175, 0.06);
  border-left: 3px solid #1496AF;
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  margin: 8px 0 4px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  color: #00404F;
  line-height: 1.5;
  font-style: italic;
}
.wf-tip-box svg {
  color: #1496AF;
  margin-top: 1px;
}
/* v2.14.6: "wenige Teilnehmer"-Tipp in der Monats-Abo-Karte (vorher eigene Box über den Karten) */
.wf-tip-box.wf-tip-low {
  font-style: normal;
  margin: 6px 0 10px;
}
.wf-tip-box.wf-tip-low strong {
  font-weight: 600;
}

/* v2.14.7: Nachholtermine-Erklärung im Laufzeit-Modal — Info-Button in der Bullet-Zeile,
   Erklärungskasten klappt in der Karte auf */
.wf-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 1.5px solid #1496AF;
  border-radius: 50%;
  background: #fff;
  color: #1496AF;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.wf-info-btn:hover,
.wf-info-btn[aria-expanded="true"] {
  background: #1496AF;
  color: #fff;
}
.wf-nachhol-info {
  background: #f0f8fa;
  border-left: 3px solid #1496AF;
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #00404F;
}
.wf-nachhol-info strong {
  font-weight: 600;
}
/* v2.14.8: Zufriedenheitsgarantie über dem CTA jeder Karte */
.wf-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 10px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #3d4f57;
}
.wf-guarantee svg {
  color: #1b7f3b;
}
.wf-guarantee strong {
  color: #00404F;
  font-weight: 600;
}
/* aufgeklappte Erklärung darf die 600px-max-height der offenen Karte sprengen */
#termModal .modal-body .wf-term-accordion.wf-acc-open.wf-acc-tall .wf-acc-body,
.swal2-popup .wf-term-accordion.wf-acc-open.wf-acc-tall .wf-acc-body,
.wf-term-accordion.wf-acc-open.wf-acc-tall .wf-acc-body {
  max-height: 1600px !important;
}

/* Kursiver Hinweis "Endet automatisch" */
.wf-auto-end-hint {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #8a9ba5 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  padding: 6px 0 0 0 !important;
  margin-top: 4px !important;
  border-top: 1px solid rgba(0, 64, 79, 0.08) !important;
  list-style: none !important;
  display: block !important;
}

/* Startdatum im Accordion */
.wf-term-start-date {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  color: #1496AF;
  font-weight: 600;
  text-align: center;
  margin: 8px 0 10px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.wf-term-start-date svg {
  width: 14px;
  height: 14px;
}
.wf-term-start-date.wf-loaded {
  opacity: 1;
}

/* Modal-Intro-Text */
#termModal .modal-body .wf-term-intro {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  color: #6b7a82;
  text-align: center;
  padding: 8px 16px 16px;
  line-height: 1.5;
}

/* ══ Checkout-Komplett-Redesign: WellenFlitzer-Branding ═════════ */

/* Montserrat auf allen Checkout-Seiten.
 * v2.10.6: :not()-Selektoren schuetzen Icon-Font-Elemente (FontAwesome, Glyphicons,
 * Ladda, swimming-school-icons) vor dem font-family-Override. Ohne diese Ausnahme
 * werden Icon-Fonts durch Montserrat ersetzt und zeigen Kästchen statt Icons. */
body[class*="controller-checkout"] {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}
body[class*="controller-checkout"] *:not(i):not([class*="fa"]):not([class*="glyphicon"]):not([class*="icon-"]):not([class*="ladda"]):not([class*="swimming-school"]) {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

/* ── Stepper: WellenFlitzer-Teal ───────────────────────────────── */
body[class*="controller-checkout"] .steps li.active a .number,
body[class*="controller-checkout"] .steps li.done a .number {
  background: #1496AF !important;
  border-color: #1496AF !important;
  color: #fff !important;
}
body[class*="controller-checkout"] .steps li.active a .desc,
body[class*="controller-checkout"] .steps li.done a .desc {
  color: #1496AF !important;
}
body[class*="controller-checkout"] .steps li a .number {
  border-color: #b0c4cc !important;
}
/* Fortschrittsbalken ausblenden – Stepper reicht als Orientierung (UX Best Practice) */
body[class*="controller-checkout"] .progress-bar-success {
  background-color: #1496AF !important;
}
body[class*="controller-checkout"] .counter-container .progress-bar {
  background-color: #1496AF !important;
}
body[class*="controller-checkout"] .steps ~ .progress,
body[class*="controller-checkout"] .wizard > .content > .progress,
body[class*="controller-checkout"] .wizard .progress,
body[class*="controller-checkout"] .panel-body > .progress {
  display: none !important;
}
/* Timer-Fortschrittsbalken NICHT ausblenden */
body[class*="controller-checkout"] .counter-container .progress {
  display: block !important;
}

/* ── Timer-Redesign: kompakt, oben, beruhigend ───────────── */
body[class*="controller-checkout"] .counter-container {
  background: #f0fafb !important;
  border: 1px solid #b7dde6 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin-bottom: 6px !important; /* CSS-Fallback: ganz nach oben */
}
/* v2.13.12: Kutegos Original-h3 bleibt fuer den Countdown im DOM, ist aber unsichtbar -
   die kompakte wf-timer-zeile (JS) uebernimmt die Anzeige */
body[class*="controller-checkout"] .counter-container h3.wf-timer-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[class*="controller-checkout"] .counter-container h3 {
  color: #00404F !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}
body[class*="controller-checkout"] .wf-timer-zeile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #00404F !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 7px !important;
  line-height: 1.2 !important;
}
body[class*="controller-checkout"] .wf-timer-zeile svg { color: #1496AF !important; flex: 0 0 auto !important; }
body[class*="controller-checkout"] .wf-timer-text { color: #33565f !important; font-weight: 600 !important; }
body[class*="controller-checkout"] .wf-timer-zeit {
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
  color: #00404F !important;
  background: #fff !important;
  border: 1px solid #b7dde6 !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
}
body[class*="controller-checkout"] .wf-timer-zeile.wf-timer-knapp .wf-timer-zeit {
  color: #7a5200 !important;
  background: #fdf6e7 !important;
  border-color: #f0dcae !important;
}
body[class*="controller-checkout"] .wf-timer-zeile.wf-timer-knapp svg { color: #b58900 !important; }
body[class*="controller-checkout"] .counter-progress {
  background: #1496AF !important;
  border-radius: 4px !important;
}
/* Kutego malt die Balkenfarbe als Zeit-Ampel per Inline-Style (gruen->gelb->rot) -
   CI-fremd; !important im Stylesheet schlaegt den Inline-Style */
body[class*="controller-checkout"] #custom-progress-bar {
  background: linear-gradient(90deg, #1496AF 0%, #22b8d4 100%) !important;
  border-radius: 999px !important;
}
body[class*="controller-checkout"] .counter-container .progress {
  background: #ffffff !important;
  border-radius: 4px !important;
  height: 5px !important;
  margin-bottom: 0 !important;
}

/* ── Buttons: WellenFlitzer-Teal ─────────────────────────────── */
body[class*="controller-checkout"] .btn-primary,
body[class*="controller-checkout"] .button-next {
  background: #1496AF !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 12px 28px !important;
  box-shadow: 0 4px 12px rgba(20, 150, 175, 0.3) !important;
  transition: all 0.18s ease !important;
}
body[class*="controller-checkout"] .btn-primary:hover,
body[class*="controller-checkout"] .button-next:hover {
  background: #0d7a91 !important;
  border-color: #0d7a91 !important;
  box-shadow: 0 4px 12px rgba(20, 150, 175, 0.3) !important;
}

/* ── Abbrechen-Button: abgeschwächt ──────────────────────── */
body[class*="controller-checkout"] .btn.default,
body[class*="controller-checkout"] a[href*="checkout/cancel"],
body[class*="controller-checkout"] .button-cancel {
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  color: #33565f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 18px !important;
  box-shadow: none !important;
}
body[class*="controller-checkout"] .btn.default:hover,
body[class*="controller-checkout"] a[href*="checkout/cancel"]:hover {
  background: #f2f9fb !important;
  border-color: #b7dde6 !important;
  color: #33565f !important;
}

/* ── Panel-Headers: WellenFlitzer-Stil ──────────────────── */
body[class*="controller-checkout"] .panel-heading {
  background: transparent !important;
  color: #00404F !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  padding: 10px 0 0 !important;
  text-align: center !important;   /* mittig ueber dem zentrierten Stepper (Ulf 30.08.) */
}
body[class*="controller-checkout"] .panel-body {
  padding-top: 10px !important;
}
/* Whitespace zwischen Stepper und Formular reduzieren */
body[class*="controller-checkout"] .steps + .content,
body[class*="controller-checkout"] .steps + .progress + .content,
body[class*="controller-checkout"] .steps + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body[class*="controller-checkout"] .wizard > .content {
  padding-top: 5px !important;
  margin-top: 0 !important;
}
body[class*="controller-checkout"] .panel-default {
  border-color: rgba(0, 64, 79, 0.15) !important;
  border-radius: 4px !important;
}

/* ── Checkout Cleanup: Redundanzen entfernen ────────── */
/* H1 komplett ausblenden (Kursinfo steht in Booking Summary) */
body[class*="controller-checkout"] h1 {
  display: none !important;
}
/* "In nur 4 Schritten" Text ausblenden */
body[class*="controller-checkout"] h1 + p,
body[class*="controller-checkout"] h1 + br + p {
  display: none !important;
}

/* ── Optionale Felder ausblenden: Titel + Festnetz-Telefon (alle Schritte) ─ */
/* v2.10.50: Nur Festnetz ('telefon'/'phone') ausblenden, Mobiltelefon bleibt sichtbar */
body[class*="controller-checkout"] .form-group:has(label[for*="title"]),
body[class*="controller-checkout"] .form-group:has(label[for*="titel"]),
body[class*="controller-checkout"] .form-group:has(select[name*="title"]),
body[class*="controller-checkout"] .form-group:has(label[for*="phone"]):not(:has(label[for*="mobile"])),
body[class*="controller-checkout"] .form-group:has(input[name*="phone"]):not(:has(input[name*="mobile"])) {
  display: none !important;
}
/* ── Geburtsdatum nur auf Schritt 1 ausblenden (Schritt 2 = Teilnehmer braucht es) ─ */
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(label[for*="birthday"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(label[for*="geburtsdatum"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(label[for*="birth"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(input[name*="birthday"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(input[name*="geburtsdatum"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(input[name*="birth"]),
body[class*="controller-checkout"][class*="action-step1"] .form-group:has(input[type="date"]) {
  display: none !important;
}

/* ── Formular-Inputs: Portal-Stil (46px, runde Ecken; Guideline aus dem Kundenportal) ── */
body[class*="controller-checkout"] input.form-control,
body[class*="controller-checkout"] select.form-control {
  height: 46px !important;
  border-radius: 8px !important;
  border: 1px solid #c8d8dd !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  color: #404040 !important;
  box-shadow: none !important;
}
body[class*="controller-checkout"] textarea.form-control {
  border-radius: 8px !important;
  border: 1px solid #c8d8dd !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  min-height: 110px !important;
  box-shadow: none !important;
}
body[class*="controller-checkout"] label,
body[class*="controller-checkout"] .control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #404040 !important;
}
body[class*="controller-checkout"] h3.form-section {
  color: #00404F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #e3ecef !important;
  padding-bottom: 6px !important;
}

/* ── Formular-Inputs: Fokus-Farbe ────────────────────── */
body[class*="controller-checkout"] .form-control:focus {
  border-color: #1496AF !important;
  box-shadow: 0 0 0 2px rgba(20, 150, 175, 0.15) !important;
}

/* ── iOS-Zoom-Fix: min 16px auf Inputs verhindert Auto-Zoom ─ */
@media (max-width: 767px) {
  body[class*="controller-checkout"] input[type="text"],
  body[class*="controller-checkout"] input[type="email"],
  body[class*="controller-checkout"] input[type="tel"],
  body[class*="controller-checkout"] input[type="number"],
  body[class*="controller-checkout"] input[type="password"],
  body[class*="controller-checkout"] input[type="date"],
  body[class*="controller-checkout"] input[type="search"],
  body[class*="controller-checkout"] textarea,
  body[class*="controller-checkout"] select,
  body[class*="controller-checkout"] .form-control {
    font-size: 16px !important;
  }
}

/* ── Geoapify Adress-Autocomplete Dropdown ───────────── */
.wf-address-autocomplete {
  position: relative;
}
.wf-ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(20, 150, 175, 0.3);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0, 64, 79, 0.12);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.wf-ac-dropdown.wf-ac-visible {
  display: block;
}
.wf-ac-item {
  padding: 8px 12px;
  font-size: 13px;
  color: #404040;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.4;
}
.wf-ac-item:last-child {
  border-bottom: none;
}
.wf-ac-item:hover,
.wf-ac-item.wf-ac-active {
  background: #f0fafb;
  color: #00404F;
}
.wf-ac-item small {
  display: block;
  font-size: 11px;
  color: #6b7a82;
  margin-top: 1px;
}
.wf-ac-loading {
  padding: 10px 12px;
  font-size: 12px;
  color: #6b7a82;
  text-align: center;
}
.wf-ac-powered {
  padding: 4px 12px;
  font-size: 10px;
  color: #b0b0b0;
  text-align: right;
  border-top: 1px solid #f0f0f0;
}

/* ── WF Trust-Signal-Leiste ────────────────────────────────── */
.wf-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  background: #f0fafb;
  border: 1px solid rgba(20, 150, 175, 0.15);
  border-radius: 4px;
  margin: 12px 0;
  font-size: 12px;
  color: #404040;
  line-height: 1.5;
}
.wf-trust-bar .wf-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.wf-trust-bar .wf-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #1496AF;
}
.wf-trust-bar .wf-trust-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.wf-trust-bar a {
  color: #1496AF;
  font-weight: 600;
  text-decoration: none;
}
.wf-trust-bar .wf-trust-text {
  display: inline;
  color: #404040;
  font-size: 12px;
}
.wf-trust-bar a:hover {
  text-decoration: underline;
}

/* ── Booking Summary (nicht ausklappbar, alle Infos direkt) ── */
.wf-order-summary {
  background: #fff;
  border: 1.5px solid rgba(20, 150, 175, 0.25);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 6px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 64, 79, 0.08);
}
.wf-order-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: #00404F;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(0, 64, 79, 0.08);
}
.wf-summary-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 20px !important;
  font-size: 13px;
  line-height: 1.4;
}
.wf-sg-item {
  display: flex !important;
  align-items: flex-start;
  gap: 7px;
  color: #404040;
  min-width: 0;
}
.wf-sg-item svg {
  flex-shrink: 0;
  color: #1496AF;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.wf-sg-label {
  color: #6b7a82;
  font-size: 11px;
  font-weight: 500;
  display: block;
  line-height: 1.2;
}
.wf-sg-value {
  font-weight: 600;
  color: #00404F;
  display: block;
}
.wf-sg-price .wf-sg-value {
  color: #1496AF;
  font-weight: 700;
}
/* Stepper-Icons statt Nummern */
body[class*="controller-checkout"] .nav-pills.steps {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 10px 20px !important;
  margin-bottom: 0 !important;
}
body[class*="controller-checkout"] .nav-pills.steps li {
  flex: 0 0 auto !important;
  text-align: center !important;
  float: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}
body[class*="controller-checkout"] .nav-pills.steps li > a {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
body[class*="controller-checkout"] .steps li .desc {
  display: none !important;
}
.wf-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e8edf0;
  color: #6b7a82;
  transition: all 0.2s ease;
  flex-shrink: 0;
  z-index: 2;
}
.wf-step-icon svg {
  width: 18px;
  height: 18px;
}
/* Zustaende (v2.13.12): done = Haken auf hellem Petrol (geschafft, klickbar zurueck),
   active = gefuellt mit Ring (hier bist du), future = blass (kommt noch) */
body[class*="controller-checkout"] .steps li.done .wf-step-icon {
  background: #e7f4f7 !important;
  border: 2px solid #b7dde6 !important;
  color: #1496AF !important;
}
body[class*="controller-checkout"] .steps li.done a { cursor: pointer !important; }
body[class*="controller-checkout"] .steps li.done a:hover .wf-step-icon {
  background: #d6ecf2 !important;
}
body[class*="controller-checkout"] .steps li.active .wf-step-icon {
  background: #1496AF !important;
  border: 2px solid #1496AF !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(20, 150, 175, .18) !important;
}
body[class*="controller-checkout"] .steps li:not(.active):not(.done) .wf-step-icon {
  background: #fff !important;
  border: 2px solid #e3ecef !important;
  color: #b9c6cb !important;
}
body[class*="controller-checkout"] .steps li .number {
  display: none !important;
}
/* Verbindungslinien zwischen Icons */
.wf-step-connector {
  display: block;
  width: 40px;
  height: 2px;
  background: #d5d8dc;
  flex-shrink: 0;
}
body[class*="controller-checkout"] .steps li.done .wf-step-connector {
  background: #1496AF;
}
body[class*="controller-checkout"] .steps li.active .wf-step-connector {
  background: #d5d8dc; /* Linie NACH dem aktiven Schritt liegt noch vor einem */
}
@media (max-width: 480px) {
  .wf-step-connector { width: 22px !important; }
  .wf-step-icon { width: 36px !important; height: 36px !important; }
}

/* ── WF Kontakt-Widget im Checkout ─────────────────────── */
.wf-checkout-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 12px;
  color: #6b7a82;
  margin-top: 12px;
}
.wf-checkout-contact a {
  color: #1496AF;
  font-weight: 600;
  text-decoration: none;
}
.wf-checkout-contact a:hover {
  text-decoration: underline;
}

/* ── Superchat-Widget im Checkout ausblenden ──────── */
body[class*="controller-checkout"] #superchat-widget-root,
body[class*="controller-checkout"] #superchat-widget,
body[class*="controller-checkout"] [id^="superchat-widget"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Scroll-to-Top-Button im Checkout ausblenden ──────── */
body[class*="controller-checkout"] #topcontrol {
  display: none !important;
  visibility: hidden !important;
}

/* ── Cookie-Banner: auf Checkout-Seiten kompakter + nicht hinter CTA ─ */
body[class*="controller-checkout"] .cc-window {
  max-width: 420px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  z-index: 10000 !important;
}
@media (max-width: 767px) {
  body[class*="controller-checkout"] .cc-window {
    bottom: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
}

/* ── Sticky Bottom CTA Bar (Mobile) ─────────────────── */
.wf-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .wf-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1.5px solid rgba(20, 150, 175, 0.2);
    box-shadow: 0 -4px 16px rgba(0, 64, 79, 0.12);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .wf-sticky-cta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .wf-sticky-cta-info {
    flex: 1;
    min-width: 0;
  }
  .wf-sticky-cta-kurs {
    font-weight: 700;
    font-size: 14px;
    color: #00404F;
    line-height: 1.3;
  }
  .wf-sticky-cta-start {
    font-size: 12px;
    color: #6b7a82;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
  }
  .wf-sticky-cta-price {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .wf-sticky-cta-price-amount {
    font-weight: 700;
    font-size: 16px;
    color: #1496AF;
    line-height: 1.2;
  }
  .wf-sticky-cta-price-unit {
    font-size: 11px;
    color: #6b7a82;
    font-weight: 400;
    line-height: 1.2;
  }
  .wf-sticky-cta-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: #1496AF;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s ease;
    letter-spacing: 0.3px;
  }
  .wf-sticky-cta-btn:hover,
  .wf-sticky-cta-btn:active {
    background: #0d7a91;
  }
  /* Letzter Schritt: Submit-Button – gleiche Teal-Farbe, kein visueller Bruch */
  .wf-sticky-cta-btn.wf-cta-final {
    background: #1496AF;
    font-size: 15px;
    letter-spacing: 0.2px;
  }
  .wf-sticky-cta-btn.wf-cta-final:hover,
  .wf-sticky-cta-btn.wf-cta-final:active {
    background: #0d7a91;
  }
  /* Desktop Booking Summary auf Mobile ausblenden */
  .wf-order-summary {
    display: none !important;
  }
  /* Platz unten schaffen damit Content nicht hinter der Bar verschwindet */
  body[class*="controller-checkout"] {
    padding-bottom: 120px !important;
  }
}

/* ── Smart Start: Starttermin-Vorauswahl ───────────────── */
.wf-smart-start {
  text-align: center;
  padding: 20px;
}
.wf-smart-start-date {
  font-size: 20px;
  font-weight: 700;
  color: #00404F;
  margin: 12px 0 6px;
}
.wf-smart-start-label {
  font-size: 13px;
  color: #6b7a82;
  margin-bottom: 16px;
}
.wf-smart-start-confirm {
  display: inline-block;
  padding: 12px 32px;
  background: #1496AF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-bottom: 12px;
}
.wf-smart-start-confirm:hover {
  background: #0d7a91;
  box-shadow: 0 4px 12px rgba(20, 150, 175, 0.3);
}
.wf-smart-start-alt {
  display: block;
  font-size: 13px;
  color: #1496AF;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  margin: 8px auto 0;
  font-weight: 500;
}
.wf-smart-start-alt:hover {
  color: #0d7a91;
}

/* SweetAlert2 Deny-Button als Text-Link stylen */
.wf-smart-start-alt-btn,
button.wf-smart-start-alt-btn {
  background: transparent !important;
  border: 1.5px solid #1496AF !important;
  color: #1496AF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 8px 20px !important;
  box-shadow: none !important;
  transition: all 0.18s ease !important;
}
.wf-smart-start-alt-btn:hover,
button.wf-smart-start-alt-btn:hover {
  background: #f0fafb !important;
  color: #0d7a91 !important;
  border-color: #0d7a91 !important;
}

/* SweetAlert2 Popup im WF-Stil */
.swal2-popup {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  border-radius: 6px !important;
}
.swal2-title {
  color: #00404F !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* ══ Mobile-Optimierung: größere Kacheln und Schrift ═════════════ */
@media (max-width: 767px) {
  .wf-tiles {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  .wf-tile {
    min-height: 120px;
    padding: 16px 10px;
  }
  .wf-tile-time {
    font-size: 20px;
  }
  .wf-tile-date {
    font-size: 15px;
    margin-top: 4px;
  }
  .wf-tile-cta {
    font-size: 14px;
    padding: 8px 18px;
    margin-top: 8px;
  }
  .wf-tile-day {
    font-size: 13px;
    padding: 2px 8px;
  }
  .wf-tile-low-badge {
    font-size: 14px;
    padding: 5px 10px;
  }
  .wf-tile-location {
    font-size: 13px;
  }
  .wf-tile-places {
    font-size: 10px !important;
    margin-top: 3px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .wf-tile-places svg {
    display: none !important;
  }
  .wf-day-title {
    font-size: 15px;
    padding: 8px 0 10px 0;
  }
  .wf-course-subtitle {
    font-size: 15px;
    padding: 9px 14px;
  }

  /* Laufzeit-Modal Accordion: Mobile */
  .wf-acc-name {
    font-size: 14px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .wf-term-recommended .wf-acc-name {
    font-size: 15px;
  }
  .wf-acc-badge {
    white-space: nowrap !important;
    font-size: 8px !important;
  }
  #termModal .modal-body .wf-term-features li strong,
  .swal2-popup .wf-term-features li strong,
  .wf-term-features li strong {
    font-weight: 400 !important;
    color: inherit !important;
  }
  .wf-acc-price-amount {
    font-size: 18px;
  }
  .wf-term-recommended .wf-acc-price-amount {
    font-size: 20px;
  }
  /* v2.8.1: Mobile Feature-Text mit erhöhter Spezifität */
  #termModal .modal-body .wf-term-features li,
  .swal2-popup .wf-term-features li,
  .wf-term-features li {
    font-size: 14px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    color: #404040 !important;
    font-weight: 400 !important;
    text-overflow: unset !important;
  }
  #termModal .modal-body .wf-term-features li > span,
  .swal2-popup .wf-term-features li > span,
  .wf-term-features li > span {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    color: #404040 !important;
    font-weight: 400 !important;
  }

  /* Modal-Texte: Umbruch auf Mobile erzwingen */
  #termModal .modal-dialog {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }
  #termModal .modal-body {
    overflow-x: hidden !important;
  }
  .wf-course-hint,
  .wf-startdate-hint,
  #termModal .modal-body .wf-term-features li.wf-feat-highlight,
  .swal2-popup .wf-term-features li.wf-feat-highlight,
  .wf-term-features li.wf-feat-highlight,
  .wf-term-intro,
  .wf-term-message {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: unset !important;
  }
  .wf-course-hint > span,
  .wf-startdate-hint > span,
  #termModal .modal-body .wf-term-features li.wf-feat-highlight > span,
  .swal2-popup .wf-term-features li.wf-feat-highlight > span,
  .wf-term-features li.wf-feat-highlight > span {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
  }
  .wf-acc-body-inner {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .wf-term-message {
    font-size: 13px;
  }
  .wf-acc-header {
    padding: 12px 14px;
    /* v2.15.0 (Ulf): mobil wieder nebeneinander, Preis oben — aber die Preis-Spalte darf
       höchstens die Hälfte einnehmen und der Titel darf umbrechen (v2.14.8 hatte gestapelt,
       das wirkte "verrutscht") */
    align-items: flex-start;
    gap: 10px;
  }
  .wf-acc-left {
    flex: 1 1 0;
    min-width: 0;
  }
  .wf-acc-right {
    flex: 0 1 auto;
    max-width: 50%;
    gap: 6px;
    align-items: flex-start;
  }
  .wf-acc-name {
    white-space: normal;
    line-height: 1.25;
  }
  .wf-acc-price-period {
    line-height: 1.3;
    white-space: normal;
  }
  .wf-acc-chevron {
    margin-top: 2px;
  }

  /* Checkout Mobile */
  /* Stepper: horizontal mit Connectors */
  body[class*="controller-checkout"] .nav-pills.steps {
    padding: 8px 12px !important;
    margin-bottom: 0 !important;
  }
  body[class*="controller-checkout"] .panel-body {
    padding-top: 8px !important;
  }
  .wf-step-icon {
    width: 32px;
    height: 32px;
  }
  .wf-step-icon svg {
    width: 15px;
    height: 15px;
  }
  .wf-step-connector {
    width: 24px;
  }
  /* Trust-Bar: horizontal bleiben, kompakter */
  .wf-trust-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
    padding: 8px 12px;
    margin: 8px 0;
  }
  /* Booking Summary: auf Mobile ausgeblendet (Infos in Sticky Bottom CTA Bar) */
  .wf-smart-start-date {
    font-size: 18px;
  }
  .wf-smart-start-confirm {
    font-size: 14px;
    padding: 10px 24px;
    width: 100%;
  }
}

/* ── v2.6.46: Cancel-Button im Smart-Start-Dialog ─────── */
.swal2-cancel {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Exit-Intent Overlay & Modal v2.8.0
   ═══════════════════════════════════════════════════════════ */
.wf-exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.wf-exit-overlay.wf-exit-visible {
  opacity: 1;
  pointer-events: auto;
}
.wf-exit-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 440px;
  width: 90vw;
  padding: 32px 28px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.wf-exit-overlay.wf-exit-visible .wf-exit-modal {
  transform: translateY(0);
  opacity: 1;
}
.wf-exit-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 150ms;
}
.wf-exit-close:hover {
  color: #404040;
}
.wf-exit-headline {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #00404F;
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.wf-exit-text {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  color: #404040;
  line-height: 1.6;
  margin: 0 0 20px 0;
}
.wf-exit-features {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.wf-exit-feature {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  background: #f0fafb;
  border-radius: 8px;
}
.wf-exit-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #1496AF;
}
.wf-exit-feature-icon svg {
  width: 28px;
  height: 28px;
}
.wf-exit-feature-label {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #00404F;
  line-height: 1.35;
}
.wf-exit-cta-primary {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: #1496AF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 150ms;
  margin-bottom: 12px;
}
.wf-exit-cta-primary:hover {
  background: #0d7a91;
}
.wf-exit-cta-secondary {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  color: #1496AF;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 8px;
  background: none;
  border: none;
}
.wf-exit-cta-secondary:hover {
  text-decoration: underline;
}
.wf-exit-dismiss {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
}
.wf-exit-dismiss:hover {
  color: #666;
}
.wf-exit-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: #f8fafb;
  border-radius: 8px;
}
.wf-exit-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  color: #404040;
}
.wf-exit-trust-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.wf-exit-trust-icon svg {
  width: 16px;
  height: 16px;
}
.wf-exit-divider {
  border: none;
  border-top: 1px solid #e8eef0;
  margin: 16px 0;
}
@media (max-width: 480px) {
  .wf-exit-modal {
    padding: 24px 20px 20px;
  }
  .wf-exit-headline {
    font-size: 18px;
  }
  .wf-exit-features {
    flex-direction: column;
    gap: 8px;
  }
  .wf-exit-feature {
    flex-direction: row;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
    padding: 8px 12px;
  }
  .wf-exit-feature-icon {
    margin-bottom: 0;
  }
  .wf-exit-feature-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════
   v2.8.5 HOTFIX: Feature-Text Flex-Collapse-Fix
   Problem: Auf frischen Profilen ohne Cache brechen Feature-Texte
   buchstabenweise um (Flex-Child-Kollaps). Ursache: word-break
   aus Kutego-Kontext greift UND li-Breite wird nicht erzwungen.
   Lösung: word-break:normal + volle Breite + flex:1 1 auto auf
   allen Ebenen der Feature-Liste erzwingen.
   ═══════════════════════════════════════════════════════════ */

/* Alle Ebenen der Feature-Liste gegen break-all absichern */
#termModal .modal-body .wf-term-features,
#termModal .modal-body .wf-term-features li,
#termModal .modal-body .wf-term-features li > span,
.swal2-popup .wf-term-features,
.swal2-popup .wf-term-features li,
.swal2-popup .wf-term-features li > span,
.wf-term-features,
.wf-term-features li,
.wf-term-features li > span {
  word-break: normal !important;
  hyphens: manual !important;
}

/* Li muss volle Container-Breite bekommen, nicht auf 0 schrumpfen */
#termModal .modal-body .wf-term-features li,
.swal2-popup .wf-term-features li,
.wf-term-features li {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* Text-Span: wachsen dürfen, nicht auf 0 schrumpfen */
#termModal .modal-body .wf-term-features li > span:not(.wf-feat-icon),
.swal2-popup .wf-term-features li > span:not(.wf-feat-icon),
.wf-term-features li > span:not(.wf-feat-icon) {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Icon-Span: feste Breite, nicht schrumpfen, nicht wachsen */
#termModal .modal-body .wf-term-features li > .wf-feat-icon,
.swal2-popup .wf-term-features li > .wf-feat-icon,
.wf-term-features li > .wf-feat-icon {
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

/* Accordion-Body + Body-Inner: volle Breite, nicht kollabieren, display:block */
#termModal .modal-body .wf-term-accordion .wf-acc-body,
.swal2-popup .wf-term-accordion .wf-acc-body,
.wf-term-accordion .wf-acc-body,
#termModal .modal-body .wf-term-accordion .wf-acc-body-inner,
.swal2-popup .wf-term-accordion .wf-acc-body-inner,
.wf-term-accordion .wf-acc-body-inner {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* UL: display:block (nicht flex!) damit li volle Breite bekommt */
#termModal .modal-body .wf-term-features,
.swal2-popup .wf-term-features,
.wf-term-features {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* LI: display:flex in ROW (nicht column!), volle Breite */
#termModal .modal-body .wf-term-features li,
.swal2-popup .wf-term-features li,
.wf-term-features li {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Accordion-Container selbst: volle Breite sicherstellen */
#termModal .modal-body .wf-term-accordion,
.swal2-popup .wf-term-accordion,
.wf-term-accordion {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* KILL column-count / column-width / writing-mode im gesamten Accordion
   (Kutego/Bootstrap setzt diese manchmal auf Modal-Inhalten → erklärt die
   schmalen Buchstaben-Spalten) */
#termModal .modal-body .wf-term-accordion,
#termModal .modal-body .wf-term-accordion *,
.swal2-popup .wf-term-accordion,
.swal2-popup .wf-term-accordion *,
.wf-term-accordion,
.wf-term-accordion * {
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
  -webkit-column-count: auto !important;
  -webkit-column-width: auto !important;
  -moz-column-count: auto !important;
  -moz-column-width: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
}

/* v2.9.1 Revert: kein Shadow DOM mehr - Light-DOM mit hoher Spezifitaet.
 *
 * Die Trust-Bar und das Exit-Intent-Modal werden jetzt direkt im Light-DOM
 * gerendert. Die benoetigten Resets (writing-mode, column-count, etc.) werden
 * beim Einfuegen per inline-style und/oder via injizierter <style>-Tag am
 * Ende des <head> gesetzt, damit sie Kutego's asynchrone Regeln schlagen.
 *
 * Die Overlay-Backdrop-Regel bleibt hier als Fallback fuer den Fall, dass
 * Kutego versucht, einen multi-column layout auf #wf-exit-overlay zu legen.
 */

/* Overlay (Backdrop) - Fallback-Reset */
html body #wf-exit-overlay {
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
}

/* Trust-Bar-Wrapper - Fallback-Reset (inline-styles in JS haben Vorrang,
 * aber wenn ein User-CSS die inline-styles ueberschreibt, greifen diese hier). */
html body .wf-trust-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 12px 0 !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
}

html body .wf-trust-bar {
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
}

html body .wf-trust-item {
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  white-space: nowrap !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   v2.10.1 HOTFIX: Checkout Trust-Bar + Exit-Intent CSS-Fix
   
   Problem 1: Trust-Bar (iframe) wird im Checkout nicht angezeigt.
   Ursache: Kutego-CSS versteckt iframes oder kollabiert den Wrapper.
   
   Problem 2: Exit-Intent-Popup hat kaputtes CSS-Styling.
   Ursache: Kutego column-count/writing-mode Overrides durchbrechen
   das Layout trotz !important-Regeln im injizierten <style>-Tag.
   
   Lösung: Maximale Spezifität (html body + ID/Klasse) mit !important
   auf allen relevanten Elementen. Zusätzlich: iframe-spezifische
   Schutzregeln gegen generische Kutego-iframe-Hides.
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1: Trust-Bar Wrapper + iframe Schutz ────────────── */

/* Wrapper: Block-Level, volle Breite, sichtbar erzwingen */
html body .wf-trust-wrapper,
body[class*="controller-checkout"] .wf-trust-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
  float: none !important;
  position: static !important;
  overflow: visible !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
  /* Gegen Kutego flex-child Kollaps */
  flex: 1 0 100% !important;
  order: -1 !important;
}

/* iframe selbst: sichtbar, volle Breite, Mindesthöhe */
html body .wf-trust-wrapper .wf-trust-iframe,
html body .wf-trust-wrapper iframe,
body[class*="controller-checkout"] .wf-trust-wrapper iframe,
body[class*="controller-checkout"] iframe.wf-trust-iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  border: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: static !important;
  float: none !important;
  overflow: hidden !important;
  background: transparent !important;
  color-scheme: light !important;
  /* Gegen generische iframe-Hides */
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
}

/* ── FIX 2: Exit-Intent Overlay Komplett-Reset ───────────── */

/* Overlay Backdrop: alles zurücksetzen */
html body #wf-exit-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
  -webkit-column-count: auto !important;
  -webkit-column-width: auto !important;
  -moz-column-count: auto !important;
  -moz-column-width: auto !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: auto !important;
}

/* Wildcard-Reset: ALLE Kinder des Overlays */
html body #wf-exit-overlay,
html body #wf-exit-overlay * {
  column-count: auto !important;
  column-width: auto !important;
  columns: auto !important;
  -webkit-column-count: auto !important;
  -webkit-column-width: auto !important;
  -moz-column-count: auto !important;
  -moz-column-width: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  word-break: normal !important;
  hyphens: manual !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

/* Modal-Card */
html body #wf-exit-overlay .wf-exit-modal {
  background: #fff !important;
  border-radius: 16px !important;
  max-width: 440px !important;
  width: 90vw !important;
  padding: 32px 28px 24px !important;
  position: relative !important;
  display: block !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: visible !important;
  float: none !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Headline */
html body #wf-exit-overlay .wf-exit-modal h3 {
  display: block !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #00404F !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Description */
html body #wf-exit-overlay .wf-exit-modal p.wf-exit-desc {
  display: block !important;
  font-size: 14px !important;
  color: #404040 !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Close Button */
html body #wf-exit-overlay .wf-exit-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 4px !important;
  z-index: 10 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Trust Section */
html body #wf-exit-overlay .wf-exit-trust {
  display: block !important;
  margin: 0 0 20px 0 !important;
  padding: 12px 14px !important;
  background: #f8fafb !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  width: auto !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Trust Items */
html body #wf-exit-overlay .wf-exit-trust-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: #404040 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #wf-exit-overlay .wf-exit-trust-item:last-child {
  margin-bottom: 0 !important;
}

/* Trust Icons */
html body #wf-exit-overlay .wf-exit-trust-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  color: #1496AF !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #wf-exit-overlay .wf-exit-trust-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Trust Text */
html body #wf-exit-overlay .wf-exit-trust-text {
  display: inline !important;
  color: #404040 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Primary CTA */
html body #wf-exit-overlay .wf-exit-cta-primary {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  background: #1496AF !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  box-sizing: border-box !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

html body #wf-exit-overlay .wf-exit-cta-primary:hover {
  background: #0d7a91 !important;
}

/* Secondary CTA */
html body #wf-exit-overlay .wf-exit-cta-secondary {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #1496AF !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  margin: 0 0 8px 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #wf-exit-overlay .wf-exit-cta-secondary:hover {
  text-decoration: underline !important;
}

/* Dismiss */
html body #wf-exit-overlay .wf-exit-dismiss {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #999 !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── Mobile Responsive für Exit-Intent ───────────────────── */
@media (max-width: 480px) {
  html body #wf-exit-overlay .wf-exit-modal {
    padding: 24px 20px 20px !important;
    width: 95vw !important;
  }
  html body #wf-exit-overlay .wf-exit-modal h3 {
    font-size: 18px !important;
  }
  html body #wf-exit-overlay .wf-exit-modal p.wf-exit-desc {
    font-size: 13px !important;
  }
  html body #wf-exit-overlay .wf-exit-cta-primary {
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
}

/* ── v2.10.16: Wartelisten-CTA-Button (orange) im Laufzeit-Modal ── */
.wf-cta-waitlist {
  background: #e67e22 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  transition: background 0.2s ease !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}
.wf-cta-waitlist:hover {
  background: #d35400 !important;
}

/* ══════════════════════════════════════════════════════════════
   v2.10.32/33: Sommer-Karte Styles – Orange-Variante (#ff8c00)
   Spiegelt alle Petrol-Elemente des Monatsabos in Orange
   ══════════════════════════════════════════════════════════════ */

/* Sommer-Karte Box: Orange Umrandung + Schatten (wie wf-term-recommended) */
.wf-term-sommer {
  border: 2.5px solid #ff8c00 !important;
  box-shadow: 0 4px 16px rgba(255, 140, 0, 0.12) !important;
}
.wf-term-sommer .wf-acc-header {
  padding: 16px 16px 14px;
}
.wf-term-sommer .wf-acc-header:hover {
  background: rgba(255, 140, 0, 0.03);
}

/* Sommer-Karte Name: Orange (wie Monatsabo in Petrol) */
.wf-term-sommer .wf-acc-name {
  font-size: 16px;
  color: #e07800;
}

/* Sommer-Badge */
.wf-badge-sommer {
  background: #ff8c00 !important;
  color: #fff !important;
}

/* Sommer-Karte Preis: Orange */
.wf-term-sommer .wf-acc-price-amount {
  font-size: 22px;
  color: #ff8c00 !important;
}

/* Sommer-Karte Chevron: Orange */
.wf-term-sommer .wf-acc-chevron {
  color: #ff8c00 !important;
}

/* Sommer-Karte Feature-Highlight: Orange Hintergrund */
.wf-term-sommer .wf-term-features li.wf-feat-highlight {
  background: #fff3e0 !important;
  color: #5d3200 !important;
}
.wf-term-sommer .wf-term-features li.wf-feat-highlight .wf-feat-icon {
  color: #5d3200 !important;
}
.wf-term-sommer .wf-term-features li.wf-feat-highlight > span {
  color: #5d3200 !important;
}

/* Sommer-Karte Feature-Icons: Orange */
.wf-term-sommer .wf-term-features li .wf-feat-icon {
  color: #ff8c00 !important;
}

/* Sommer-Karte CTA: Orange Primary */
.wf-term-sommer .wf-term-cta.wf-cta-primary {
  background: #ff8c00 !important;
  color: #fff !important;
}
.wf-term-sommer .wf-term-cta.wf-cta-primary:hover {
  background: #e07800 !important;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3) !important;
}

/* Sommer Tipp-Box (sonnig/warm) */
.wf-tip-sommer {
  background: rgba(255, 140, 0, 0.06) !important;
  border-left-color: #ff8c00 !important;
}
.wf-tip-sommer svg {
  color: #ff8c00 !important;
}

/* Sommer-Karte Startdatum: komplett Orange */
.wf-term-sommer .wf-term-start-date {
  color: #ff8c00 !important;
}
.wf-term-sommer .wf-term-start-date svg {
  color: #ff8c00 !important;
}
.wf-term-sommer .wf-term-start-date span {
  color: #ff8c00 !important;
}
.wf-term-sommer .wf-term-start-date strong {
  color: #ff8c00 !important;
}

/* ── "Weitere Laufzeiten anzeigen" Link ─────────────────────── */
.wf-weitere-link {
  display: block;
  text-align: center;
  padding: 14px 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1496AF;
  text-decoration: underline;
  cursor: pointer;
}
.wf-weitere-link:hover {
  color: #0d7a91;
}

/* ── Opening Special (Lila-Variante) ─────────────────────── */
/* v2.10.48: Analog zur Sommer-Karte (Orange), aber in Lila (#7c3aed) */
.wf-term-opening {
  border: 2.5px solid #7c3aed !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12) !important;
}
.wf-term-opening .wf-acc-header {
  padding: 16px 16px 14px;
}
.wf-term-opening .wf-acc-header:hover {
  background: rgba(124, 58, 237, 0.03);
}

/* Opening-Karte Name: Lila */
.wf-term-opening .wf-acc-name {
  font-size: 16px;
  color: #6d28d9;
}

/* Opening-Badge */
.wf-badge-opening {
  background: #7c3aed !important;
  color: #fff !important;
}

/* Opening-Karte Preis: Lila */
.wf-term-opening .wf-acc-price-amount {
  font-size: 22px;
  color: #7c3aed !important;
}

/* Opening-Karte Chevron: Lila */
.wf-term-opening .wf-acc-chevron {
  color: #7c3aed !important;
}

/* Opening-Karte Feature-Highlight: Lila Hintergrund */
.wf-term-opening .wf-term-features li.wf-feat-highlight {
  background: #f3e8ff !important;
  color: #3b0764 !important;
}
.wf-term-opening .wf-term-features li.wf-feat-highlight .wf-feat-icon {
  color: #3b0764 !important;
}
.wf-term-opening .wf-term-features li.wf-feat-highlight > span {
  color: #3b0764 !important;
}

/* Opening-Karte Feature-Icons: Lila */
.wf-term-opening .wf-term-features li .wf-feat-icon {
  color: #7c3aed !important;
}

/* Opening-Karte CTA: Lila Primary */
.wf-term-opening .wf-term-cta.wf-cta-primary {
  background: #7c3aed !important;
  color: #fff !important;
}
.wf-term-opening .wf-term-cta.wf-cta-primary:hover {
  background: #6d28d9 !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

/* Opening Tipp-Box (lila/violett) */
.wf-tip-opening {
  background: rgba(124, 58, 237, 0.06) !important;
  border-left-color: #7c3aed !important;
}
.wf-tip-opening svg {
  color: #7c3aed !important;
}

/* Opening-Karte Startdatum: komplett Lila */
.wf-term-opening .wf-term-start-date {
  color: #7c3aed !important;
}
.wf-term-opening .wf-term-start-date svg {
  color: #7c3aed !important;
}
.wf-term-opening .wf-term-start-date span {
  color: #7c3aed !important;
}
.wf-term-opening .wf-term-start-date strong {
  color: #7c3aed !important;
}

/* ═══════════════════════════════════════════════════════════
   v2.11.0 — Kundenportal /account/ (body.wf-account)
   Komplett gescoped: greift NUR, wenn das JS body.wf-account setzt.
   Buchungsstrecke und alle anderen Seiten bleiben unberuehrt.
   ═══════════════════════════════════════════════════════════ */

/* ── Grundfläche & Typo ── */
body.wf-account .main {
  background: #f4f8f9 !important;
  padding-top: 10px !important;
}
body.wf-account .main h1,
body.wf-account .main h2,
body.wf-account .main h3 {
  font-family: 'Montserrat', 'Open Sans', sans-serif !important;
  color: #00404F !important;
  font-weight: 700 !important;
}
body.wf-account .main > .container > .row > .col-md-12 > h1 {
  font-size: 26px !important;
  margin: 6px 0 18px !important;
}
body.wf-account #overview > h1 {
  font-size: 22px !important;
  margin-top: 0 !important;
}
body.wf-account .tab-pane > h1 {
  font-size: 20px !important;
  margin-top: 0 !important;
}

/* ── Sidebar → moderne Pill-Navigation ── */
body.wf-account .ver-inline-menu {
  background: transparent !important;
  border: 0 !important;
}
body.wf-account .ver-inline-menu li {
  margin-bottom: 4px !important;
}
body.wf-account .ver-inline-menu li a {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  color: #33565f !important;
  font-family: 'Montserrat', 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  transition: background .15s, border-color .15s !important;
  display: flex !important; /* v2.12.1: Icon + Text + Badge in einer Zeile halten */
  align-items: center !important;
  white-space: nowrap !important;
}
body.wf-account .ver-inline-menu li a:hover {
  background: #eaf5f8 !important;
  border-color: #bfdde5 !important;
  color: #00404F !important;
}
body.wf-account .ver-inline-menu li.active a,
body.wf-account .ver-inline-menu li.active a:hover {
  background: #1496AF !important;
  border-color: #1496AF !important;
  color: #fff !important;
}
body.wf-account .ver-inline-menu li a i {
  color: #1496AF !important;
  width: 18px !important;
  height: auto !important; /* Metronic setzt 37px Hoehe - macht die Pills ~20px zu hoch */
  line-height: 1 !important;
  font-size: 14px !important;
  text-align: center !important;
  background: transparent !important; /* Metronic gibt den Icons sonst eine helle Kachel */
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
}
body.wf-account .ver-inline-menu li.active a i {
  color: #fff !important;
  background: transparent !important;
}
body.wf-account .ver-inline-menu li .after {
  display: none !important;
}
body.wf-account .ver-inline-menu li.active:after,
body.wf-account .ver-inline-menu li.active:before {
  display: none !important; /* Metronic zeichnet den blauen Aktiv-Pfeil als Pseudo-Element */
}
/* Zaehler-Badges: dezente Petrol-Pille statt greller Kreis (Ulf-Feedback 28.08.);
 * Metronic positioniert sie absolut im Menue -> zurueck in den Textfluss */
body.wf-account .ver-inline-menu li a .badge {
  position: static !important;
  background: #e0f2f7 !important;
  color: #1496AF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  padding: 0 6px !important;
  border-radius: 9px !important;
  float: none !important; /* v2.12.1: float liess die Badge bei langen Namen unter den Text rutschen (Ulf) */
  flex: 0 0 auto !important;
  margin: -1px 0 -1px auto !important; /* 18px-Badge streckt die Flex-Pill sonst um 2px */
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account .ver-inline-menu li.active a .badge {
  background: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}
/* Chip-Nav: Scrollbar nie anzeigen (Scrollen per Touch/Maus-Drag bleibt) */
body.wf-account .ver-inline-menu {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.wf-account .ver-inline-menu::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── Original-Kacheln bleiben als Datenquelle im DOM, unsichtbar ── */
body.wf-account .wf-kp-src-hidden {
  display: none !important;
}

/* ── Dashboard-Container ── */
body.wf-account .wf-kp-dash {
  margin-bottom: 24px !important;
}

/* Hero: naechster Termin */
body.wf-account .wf-kp-hero {
  background: linear-gradient(120deg, #1496AF 0%, #00404F 100%) !important;
  border-radius: 14px !important;
  color: #fff !important;
  padding: 22px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 6px 18px rgba(0, 64, 79, .18) !important;
}
body.wf-account .wf-kp-hero-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  opacity: .85 !important;
  margin-bottom: 6px !important;
}
body.wf-account .wf-kp-hero-main {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
body.wf-account .wf-kp-hero-sub {
  font-size: 15px !important;
  opacity: .9 !important;
  margin-top: 4px !important;
}
body.wf-account .wf-kp-hero-link {
  display: inline-block !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
  opacity: .9 !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-hero-link:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}
body.wf-account .wf-kp-hero-cta {
  display: inline-block !important;
  background: #fff !important;
  color: #00404F !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 9px 18px !important;
  margin-top: 12px !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-hero-cta:hover {
  background: #e6f4f8 !important;
}
body.wf-account .wf-kp-hero-empty .wf-kp-hero-main {
  font-size: 20px !important;
  opacity: .95 !important;
}
/* Hero als 2-Spalten-Raster: links Infos, rechts die Aktion - konsistent mit den
 * Termin-Karten (Ulf 30.08.). Mobil steht die Aktion unter den Infos. */
body.wf-account .wf-kp-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 18px !important;
  align-items: center !important;
}
body.wf-account .wf-kp-hero > *:not(.wf-kp-hero-act) { grid-column: 1 !important; }
body.wf-account .wf-kp-hero-act {
  grid-column: 2 !important;
  grid-row: 1 / span 8 !important;
  align-self: center !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.wf-account .wf-kp-hero-link { margin-top: 12px !important; }
/* Grid-Items werden blockifiziert - "inline-block" wirkt hier nicht. Ohne justify-self
 * ziehen sich Link und CTA ueber die volle Spalte und fangen Klicks im Leerraum. */
body.wf-account .wf-kp-hero > .wf-kp-hero-link,
body.wf-account .wf-kp-hero > .wf-kp-hero-cta { justify-self: start !important; }
@media (max-width: 767px) {
  body.wf-account .wf-kp-hero { grid-template-columns: minmax(0, 1fr) !important; }
  body.wf-account .wf-kp-hero-act {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    margin-top: 12px !important;
  }
  body.wf-account .wf-kp-hero-link { margin-top: 10px !important; }
}

/* Hero-Aktion "Abmelden": weiss mit roter Schrift, wie die Buttons in den Termin-Karten (Ulf 28.08.) */
body.wf-account .wf-kp-hero-btn {
  display: inline-block !important;
  background: #fff !important;
  border: 1px solid #e5b4ae !important;
  border-radius: 8px !important;
  color: #c0392b !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-hero-btn:hover {
  background: #fdf1ef !important;
  color: #c0392b !important;
}
/* Klickbare Termin-Karten (oeffnen Kutegos Termin-Optionen wie im Original-Kalender) */
body.wf-account .wf-kp-clickable {
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s !important;
}
body.wf-account .wf-kp-clickable:hover {
  border-color: #1496AF !important;
  box-shadow: 0 2px 10px rgba(20, 150, 175, .15) !important;
}
body.wf-account .wf-kp-next-open {
  flex: 0 0 auto !important;
  color: #bfd6dc !important;
  padding-left: 4px !important;
}
body.wf-account .wf-kp-clickable:hover .wf-kp-next-open {
  color: #1496AF !important;
}

/* "Weitere Termine anzeigen" unter den Termin-Karten */
body.wf-account .wf-kp-more {
  display: block !important;
  text-align: center !important;
  color: #1496AF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-more:hover {
  text-decoration: underline !important;
  color: #00404F !important;
}

/* ── Kompakte Termin-Karten (ersetzen Kutegos "Naechste Termine"-Tabelle) ── */
body.wf-account .wf-kp-next {
  margin-bottom: 16px !important;
}
body.wf-account .wf-kp-next-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 4px rgba(0, 64, 79, .05) !important;
}
body.wf-account .wf-kp-next-date {
  flex: 0 0 auto !important;
  min-width: 110px !important;
}
body.wf-account .wf-kp-next-date b {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #00404F !important;
}
body.wf-account .wf-kp-next-date span {
  font-size: 13px !important;
  color: #1496AF !important;
  font-weight: 600 !important;
}
body.wf-account .wf-kp-next-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.wf-account .wf-kp-next-info b {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #00404F !important;
}
body.wf-account .wf-kp-next-info span {
  font-size: 12px !important;
  color: #8aa0a6 !important;
}
body.wf-account .wf-kp-next-action {
  flex: 0 0 auto !important;
}
/* Der echte Kutego-Abmelden-Button, dezent umgestylt */
body.wf-account .wf-kp-checkout {
  background: #fff !important;
  border: 1px solid #e5b4ae !important;
  border-radius: 8px !important;
  color: #c0392b !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account .wf-kp-checkout:hover {
  background: #fdf1ef !important;
  color: #c0392b !important;
}

/* Kinder-Karten */
body.wf-account .wf-kp-kids {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
body.wf-account .wf-kp-kid {
  flex: 1 1 260px !important;
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 8px rgba(0, 64, 79, .06) !important;
}
body.wf-account .wf-kp-kid-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
body.wf-account .wf-kp-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e0f2f7 !important;
  color: #1496AF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
body.wf-account .wf-kp-kid-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #00404F !important;
}
body.wf-account .wf-kp-item {
  border-top: 1px solid #eef4f6 !important;
  padding: 10px 0 2px !important;
}
body.wf-account .wf-kp-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
body.wf-account .wf-kp-item-top b {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #00404F !important;
}
body.wf-account .wf-kp-badge {
  background: #e4f6ea !important;
  color: #1d7a3f !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  white-space: nowrap !important;
}
body.wf-account .wf-kp-item-line {
  font-size: 13px !important;
  color: #404040 !important;
  margin: 2px 0 !important;
}
body.wf-account .wf-kp-item-line i {
  color: #1496AF !important;
  width: 16px !important;
  text-align: center !important;
}
body.wf-account .wf-kp-item-muted {
  color: #8aa0a6 !important;
  font-size: 12px !important;
}
body.wf-account .wf-kp-empty {
  background: #fff !important;
  border: 1px solid #cfe3e8 !important;
  border-radius: 14px !important;
  color: #33565f !important;
  padding: 22px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}
body.wf-account .wf-kp-empty .wf-kp-hero-cta {
  background: #1496AF !important;
  color: #fff !important;
}

/* Schnellzugriff-Leiste */
body.wf-account .wf-kp-quick {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body.wf-account .wf-kp-quick a {
  flex: 1 1 130px !important;
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  color: #00404F !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 13px 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
}
body.wf-account .wf-kp-quick a:hover {
  background: #eaf5f8 !important;
  border-color: #bfdde5 !important;
}
body.wf-account .wf-kp-quick a i {
  display: block !important;
  color: #1496AF !important;
  font-size: 18px !important;
  margin-bottom: 6px !important;
}
body.wf-account .wf-kp-alert {
  display: block !important;
  color: #c0392b !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

/* ── Einträge (account-block) → Karten-Optik ── */
body.wf-account .tab-pane .account-block {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  padding: 14px 8px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 64, 79, .05) !important;
}
body.wf-account .tab-pane .account-block h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #8aa0a6 !important;
  margin: 4px 0 3px !important;
}
body.wf-account .tab-pane .label {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

/* Stornierte/beendete Eintraege: eingeklappt + gedimmt */
body.wf-account .wf-kp-old {
  display: none !important;
}
body.wf-account .wf-kp-show-old .wf-kp-old {
  display: block !important;
}
body.wf-account .wf-kp-show-old .wf-kp-old .account-block {
  opacity: .6 !important;
}
body.wf-account .wf-kp-toggle {
  display: block !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #cfe3e8 !important;
  border-radius: 10px !important;
  color: #1496AF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px !important;
  margin-top: 4px !important;
  cursor: pointer !important;
}
body.wf-account .wf-kp-toggle:hover {
  background: #eaf5f8 !important;
}

/* Umfrage-Panel dezenter unterm Dashboard */
body.wf-account #overview .panel {
  border-radius: 12px !important;
  border-color: #e3ecef !important;
  box-shadow: none !important;
}
body.wf-account #overview > h2 {
  font-size: 16px !important;
}

/* Buttons in Panels in WF-Petrol */
body.wf-account .tab-pane .btn-primary,
body.wf-account .wf-account-auth .btn-primary {
  background: #1496AF !important;
  border-color: #1496AF !important;
  border-radius: 8px !important;
}

/* ── Login/Registrierung (wf-account-auth): nur Politur ── */
body.wf-account-auth .main {
  background: #f4f8f9 !important;
}
body.wf-account-auth .main .btn-primary,
body.wf-account-auth .main .btn.green {
  background: #1496AF !important;
  border-color: #1496AF !important;
  border-radius: 8px !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  body.wf-account .ver-inline-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
  }
  body.wf-account .ver-inline-menu li {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
  body.wf-account .ver-inline-menu li a i {
    background: transparent !important;
    width: auto !important;
    margin-right: 4px !important;
  }
  body.wf-account .ver-inline-menu li a .badge {
    float: none !important;
    margin-left: 6px !important;
  }
  body.wf-account .ver-inline-menu li a {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
  }
  body.wf-account .ver-inline-menu li a i {
    display: inline-block !important;
    float: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  body.wf-account .ver-inline-menu li a .badge {
    float: none !important;
    margin: 0 0 0 6px !important;
  }
  body.wf-account .wf-kp-hero-main {
    font-size: 21px !important;
  }
  body.wf-account .wf-kp-kid {
    flex-basis: 100% !important;
  }
  /* Termin-Karten mobil: Datum+Zeit oben, Kurs darunter, Abmelden rechts */
  body.wf-account .wf-kp-next-item {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }
  body.wf-account .wf-kp-next-date {
    min-width: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex: 1 1 100% !important;
  }
  body.wf-account .wf-kp-next-info {
    flex: 1 1 60% !important;
  }
  body.wf-account .wf-kp-next-action {
    margin-left: auto !important;
  }

  /* Listen-Karten kompakt: Feldpaare zweispaltig, #-Spalte weg, Kurs/Bezeichnung volle Breite */
  body.wf-account .tab-pane .account-block {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
  }
  body.wf-account .tab-pane .account-block > div {
    flex: 1 1 50% !important;
    min-width: 50% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  body.wf-account .tab-pane .account-block > div.col-xs-12,
  body.wf-account .tab-pane .account-block > div.col-sm-5,
  body.wf-account .tab-pane .account-block > div.col-sm-8 {
    flex-basis: 100% !important;
  }
  body.wf-account #contracts .account-block > div:first-child,
  body.wf-account #cards .account-block > div:first-child {
    display: none !important; /* laufende Nr. ist mobil verzichtbar */
  }
  body.wf-account .tab-pane .account-block h4 {
    margin: 8px 0 2px !important;
  }
  body.wf-account .tab-pane .account-block .clearfix {
    display: none !important;
  }
  body.wf-account .tab-pane .account-block .text-right {
    text-align: left !important;
  }
}

/* ── Konsistenz-Paket (Ulf 29.08.: einheitliche Buttons, CI-konformes Modal) ── */

/* Hero: Standort-Zeile */
body.wf-account .wf-kp-hero-meta {
  font-size: 13px !important;
  opacity: .85 !important;
  margin-top: 4px !important;
}
body.wf-account .wf-kp-hero-meta i {
  margin-right: 4px !important;
}

/* Einheitliche Button-Basis im gesamten Kundenportal */
body.wf-account .tab-pane .btn,
body.wf-account .wf-kp-dash .btn,
body.wf-account .swal2-popup .btn {
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Destruktive Aktionen (Abmelden, Loeschen): weiss mit roter Schrift */
body.wf-account .tab-pane .btn-danger,
body.wf-account .swal2-popup .btn-danger {
  background: #fff !important;
  border: 1px solid #e5b4ae !important;
  color: #c0392b !important;
}
body.wf-account .tab-pane .btn-danger:hover,
body.wf-account .swal2-popup .btn-danger:hover {
  background: #fdf1ef !important;
  color: #c0392b !important;
}
/* Status-Haekchen (Rechnung bezahlt, keine Aktion): weiches Gruen */
body.wf-account .tab-pane .btn-success.no-action {
  background: #e4f6ea !important;
  border: 1px solid #cdeeda !important;
  color: #1d7a3f !important;
  cursor: default !important;
}
/* Sekundaer (Download, Lupe im E-Mail-Verlauf): neutral mit Petrol-Akzent */
body.wf-account .tab-pane .btn-default,
body.wf-account .tab-pane .btn-warning {
  background: #fff !important;
  border: 1px solid #cfe3e8 !important;
  color: #1496AF !important;
}
body.wf-account .tab-pane .btn-default:hover,
body.wf-account .tab-pane .btn-warning:hover {
  background: #eaf5f8 !important;
  color: #00404F !important;
}

/* Formularfelder in den Panels (Gutschein einloesen, Dokumente hochladen) */
body.wf-account .tab-pane .form-control {
  border-radius: 8px !important;
  border-color: #cfe3e8 !important;
}
body.wf-account .tab-pane .form-control:focus {
  border-color: #1496AF !important;
  box-shadow: 0 0 0 2px rgba(20, 150, 175, .15) !important;
}

/* ── Kutego-Modal (SweetAlert) in CI ── */
body.wf-account .swal2-popup {
  border-radius: 14px !important;
  font-family: 'Open Sans', sans-serif !important;
  padding: 24px !important;
}
body.wf-account .swal2-popup h1,
body.wf-account .swal2-popup h2,
body.wf-account .swal2-popup h3,
body.wf-account .swal2-popup .swal2-title {
  font-family: 'Montserrat', sans-serif !important;
  color: #00404F !important;
  font-weight: 700 !important;
}
body.wf-account .swal2-popup .swal2-content,
body.wf-account .swal2-popup .swal2-html-container {
  color: #404040 !important;
}
/* Info-Icon in Petrol statt Standard-Blau */
body.wf-account .swal2-icon.swal2-info {
  border-color: #9fd3e0 !important;
  color: #1496AF !important;
}
/* Tabellen im Termin-Modal */
body.wf-account .swal2-popup table {
  width: 100% !important;
}
body.wf-account .swal2-popup table td,
body.wf-account .swal2-popup table th {
  padding: 8px 10px !important;
  vertical-align: middle !important;
}
/* swal-eigene Bestaetigungs-Buttons (z. B. "Wirklich abmelden?") */
body.wf-account .swal2-styled.swal2-confirm {
  background: #1496AF !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.wf-account .swal2-styled.swal2-confirm:hover {
  background: #0f7d92 !important;
}
body.wf-account .swal2-styled.swal2-cancel {
  background: #fff !important;
  border: 1px solid #cfe3e8 !important;
  color: #33565f !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.wf-account .swal2-styled.swal2-cancel:hover {
  background: #eaf5f8 !important;
  color: #00404F !important;
}
body.wf-account .swal2-close {
  color: #8aa0a6 !important;
}
body.wf-account .swal2-close:hover {
  color: #c0392b !important;
}

/* Guthaben-Hinweis im Schnellzugriff (Review-Finding: Information war ersatzlos entfallen) */
body.wf-account .wf-kp-good {
  display: block !important;
  color: #1d7a3f !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

/* Anwesenheits-Badges in der Termin-Historie */
body.wf-account .wf-kp-stat {
  flex: 0 0 auto !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  white-space: nowrap !important;
}
body.wf-account .wf-kp-stat-ok { background: #e4f6ea !important; color: #1d7a3f !important; }
body.wf-account .wf-kp-stat-warn { background: #fdf3e0 !important; color: #ad6a00 !important; }
body.wf-account .wf-kp-stat-bad { background: #fdecea !important; color: #c0392b !important; }
body.wf-account .wf-kp-stat-neutral { background: #eef4f6 !important; color: #55707a !important; }

/* Guthaben-Karte im Gutschein-Tab (Ulf 30.08.: Guthaben war nur in der Kachel sichtbar) */
body.wf-account .wf-kp-guthaben {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #e4f6ea !important;
  border: 1px solid #bfe4cd !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
}
body.wf-account .wf-kp-guthaben-icon {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #cceedb !important;
  color: #1d7a3f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
body.wf-account .wf-kp-guthaben-text b {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: #1d7a3f !important;
}
body.wf-account .wf-kp-guthaben-text span { font-size: 12px !important; color: #4a7d5f !important; }

/* Kennzeichnung gebuchter Nachholtermine in der Terminliste (Ulf 30.08.) */
body.wf-account .wf-kp-nh-tag {
  flex: 0 0 auto !important;
  background: #fdf6e7 !important;
  border: 1px solid #f0dcae !important;
  border-radius: 9px !important;
  color: #7a5200 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  white-space: nowrap !important;
}
body.wf-account .wf-kp-past-head {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #00404F !important;
  margin: 18px 0 8px !important;
}
/* erste Zwischenueberschrift steht direkt unter der H1 - dort kein Extra-Abstand.
 * Muss NACH .wf-kp-past-head stehen: gleiche Spezifitaet + beide !important,
 * sonst gewinnt die margin-Kurzschreibweise oben. */
body.wf-account .wf-kp-list-head { margin-top: 0 !important; }
body.wf-account .wf-kp-past .wf-kp-next-item {
  opacity: .85 !important;
}

/* ── Vertraege/Karten als neu gerenderte Block-Karten (Ulf 29.08.) ── */
body.wf-account .wf-kp-block {
  width: 100% !important;
  padding: 2px 8px !important; /* Ausgleich fuer das schmale account-block-Padding auf Desktop */
  /* Kartenmuster (Ulf 29.08.): links Infos, rechts die Aktions-Buttons vertikal zentriert -
   * gilt fuer ALLE Panel-Karten (Nachholung, Platz-Alarm, Rechnungen usw.) */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
}
body.wf-account .wf-kp-block > *:not(.wf-kp-block-actions) {
  grid-column: 1;
}
body.wf-account .wf-kp-block .wf-kp-item-top {
  margin-bottom: 6px !important;
}
body.wf-account .wf-kp-block .wf-kp-item-top b {
  font-size: 15px !important;
}
body.wf-account .wf-kp-block-meta {
  margin-top: 6px !important;
}
/* Aktions-Buttons in Karten: kompakt und beschriftet statt nacktes Icon-Kaestchen
 * (Ulf 30.08.: "Vertrag kuendigen sieht komisch aus") */
body.wf-account .wf-kp-block-actions .btn {
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 13px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
body.wf-account .wf-kp-block-actions .btn i { margin-right: 2px !important; }
@media (max-width: 767px) {
  /* Vertrags-/Kartenkarten haben mehrere Infozeilen - der Button quetscht sich sonst
   * daneben; mobil steht er unter den Infos (Ulf 30.08.) */
  body.wf-account .wf-kp-block { grid-template-columns: minmax(0, 1fr) !important; }
  body.wf-account .wf-kp-block-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
  }
}
/* Kuendigen/Entfernen: zurueckhaltend (weiss mit roter Schrift) statt Signalfarbe */
body.wf-account .wf-kp-block-actions .btn.red,
body.wf-account .wf-kp-block-actions .btn.btn-danger,
body.wf-account .wf-kp-block-actions .btn.red-thunderbird {
  background: #fff !important;
  border: 1px solid #e5b4ae !important;
  color: #c0392b !important;
}
body.wf-account .wf-kp-block-actions .btn.red:hover,
body.wf-account .wf-kp-block-actions .btn.btn-danger:hover,
body.wf-account .wf-kp-block-actions .btn.red-thunderbird:hover {
  background: #fdecea !important;
  color: #a5301f !important;
}

body.wf-account .wf-kp-block-actions {
  margin-top: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  grid-column: 2;
  grid-row: 1 / span 8; /* ueber alle Info-Zeilen -> vertikal mittig */
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}
/* Zentrierte Kutego-Restspalten (Rechnungen, Platz-Alarm) mobil linksbuendig */
@media (max-width: 767px) {
  body.wf-account .tab-pane .account-block .text-center {
    text-align: left !important;
  }
  body.wf-account .wf-kp-block {
    flex-basis: 100% !important;
    padding: 0 !important; /* mobil bringt der account-block selbst 12px/14px mit */
  }
}

/* ── Alle Kategorien (Ulf 29.08.): E-Mail-Verlauf, Gutscheine/Dokumente, Nachrichten, Stammdaten ── */

/* Formular-Karte (Gutscheine einloesen, Dokumente hochladen) */
body.wf-account .wf-kp-formcard {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 2px 8px rgba(0, 64, 79, .06) !important;
  max-width: 560px !important;
}
body.wf-account .wf-kp-formcard h2 {
  font-size: 16px !important;
  margin: 14px 0 8px !important;
}
body.wf-account .wf-kp-formcard p {
  color: #55707a !important;
}
body.wf-account .tab-pane input[type="file"] {
  border: 1px solid #cfe3e8 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  width: 100% !important;
  background: #fff !important;
}

/* E-Mail-Verlauf: Tabelle als Karte */
body.wf-account #emails table {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
body.wf-account #emails th {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #8aa0a6 !important;
  border-bottom: 1px solid #eef4f6 !important;
  padding: 10px 12px !important;
  background: #fff !important;
}
body.wf-account #emails td {
  padding: 10px 12px !important;
  border-top: 1px solid #eef4f6 !important;
  vertical-align: middle !important;
}
body.wf-account #emails tr:hover td {
  background: #fbfeff !important;
}

/* Kutego-gruene Buttons (Speichern, Neue Nachricht, Tools) -> Petrol */
body.wf-account .btn.green,
body.wf-account .btn.green:focus {
  background: #1496AF !important;
  border-color: #1496AF !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account .btn.green:hover {
  background: #0f7d92 !important;
  border-color: #0f7d92 !important;
  color: #fff !important;
}
body.wf-account .btn.default {
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}
body.wf-account .form-control {
  border-radius: 8px !important;
  border-color: #cfe3e8 !important;
}
body.wf-account .form-control:focus {
  border-color: #1496AF !important;
  box-shadow: 0 0 0 2px rgba(20, 150, 175, .15) !important;
}

/* ── Nachrichten-Seite (/messages/, body.wf-account-msgs) ── */
body.wf-account-msgs .inbox-nav li a.btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  color: #33565f !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account-msgs .inbox-nav li a.btn:hover {
  background: #eaf5f8 !important;
  border-color: #bfdde5 !important;
  color: #00404F !important;
}
body.wf-account-msgs .inbox-nav li.active a.btn {
  background: #1496AF !important;
  border-color: #1496AF !important;
  color: #fff !important;
}
body.wf-account-msgs .inbox-nav li a.btn i {
  color: #1496AF !important;
  background: transparent !important;
  margin-right: 6px !important;
}
body.wf-account-msgs .inbox-nav li.active a.btn i {
  color: #fff !important;
}
body.wf-account-msgs .inbox-nav li.compose-btn a.btn {
  background: #00404F !important;
  border-color: #00404F !important;
  color: #fff !important;
}
body.wf-account-msgs .inbox-nav li.compose-btn a.btn:hover {
  background: #062d36 !important;
}
body.wf-account-msgs .inbox-nav li.compose-btn a.btn i {
  color: #fff !important;
}
body.wf-account-msgs .inbox-nav li b {
  display: none !important; /* Metronic-Pfeil-Sprite am aktiven Eintrag */
}
body.wf-account-msgs .table-container table {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}
body.wf-account-msgs .table-container th {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #8aa0a6 !important;
  background: #fff !important;
  border-bottom: 1px solid #eef4f6 !important;
}
body.wf-account-msgs .table-container td {
  vertical-align: middle !important;
  border-top: 1px solid #eef4f6 !important;
}
body.wf-account-msgs .table-container .btn {
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account-msgs .table-container .btn.red,
body.wf-account-msgs .table-container .btn-danger {
  background: #fff !important;
  border: 1px solid #e5b4ae !important;
  color: #c0392b !important;
}
body.wf-account-msgs .table-container .btn.blue,
body.wf-account-msgs .table-container .btn-info,
body.wf-account-msgs .table-container .btn-primary {
  background: #fff !important;
  border: 1px solid #cfe3e8 !important;
  color: #1496AF !important;
}
body.wf-account-msgs .main {
  background: #f4f8f9 !important;
}
body.wf-account-msgs .main h1 {
  font-family: 'Montserrat', sans-serif !important;
  color: #00404F !important;
  font-weight: 700 !important;
}

/* ── Stammdaten (/account/settings/): Tabs, Profil, Untermenue ── */
body.wf-account .profile .nav-tabs {
  border-bottom: 1px solid #e3ecef !important;
  margin-bottom: 18px !important;
}
body.wf-account .profile .nav-tabs > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #33565f !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.wf-account .profile .nav-tabs > li.active > a,
body.wf-account .profile .nav-tabs > li.active > a:hover,
body.wf-account .profile .nav-tabs > li.active > a:focus {
  color: #1496AF !important;
  border: 0 !important;
  border-bottom: 2px solid #1496AF !important;
  background: transparent !important;
}
body.wf-account .profile .nav-tabs > li > a:hover {
  color: #00404F !important;
  background: transparent !important;
}
body.wf-account .profile .list-group a,
body.wf-account .profile ul.profile-usermenu a {
  color: #33565f !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
}
body.wf-account .profile label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #55707a !important;
}

/* ── Nachholtermine (Ulf 29.08.): Uebersichts-Highlight, Panel, Modal-Umbau ── */

/* Highlight auf der Uebersicht */
body.wf-account .wf-kp-nachhol {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  background: #fdf6e7 !important;
  border: 1px solid #f0dcae !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}
body.wf-account .wf-kp-nachhol-icon {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f6e7c6 !important;
  color: #ad6a00 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
body.wf-account .wf-kp-nachhol-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.wf-account .wf-kp-nachhol-text b {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #7a5200 !important;
}
body.wf-account .wf-kp-nachhol-text span {
  font-size: 12px !important;
  color: #9a7a30 !important;
}
body.wf-account .wf-kp-nachhol-btn {
  flex: 0 0 auto !important;
  /* Ton der Box statt Petrol (Ulf 30.08.) */
  background: #ad6a00 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-nachhol-btn:hover {
  background: #8a5400 !important;
  color: #fff !important;
}

/* Offene Rechnungen: roter Hinweis GANZ OBEN, ueber dem Hero (Ulf 29.08.).
   Bewusst kraeftiger als das Amber-Nachhol-Banner - Geld schlaegt Termin. */
body.wf-account .wf-kp-offen {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  background: #fdecec !important;
  border: 1px solid #f0b6b6 !important;
  border-left: 4px solid #c0392b !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}
/* Icon + Text bilden eine untrennbare Zeile; nur der Button darf in die naechste rutschen */
body.wf-account .wf-kp-offen-haupt {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 260px !important;
  min-width: 0 !important;
}
body.wf-account .wf-kp-offen-icon {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f7d3d3 !important;
  color: #b02a1c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
body.wf-account .wf-kp-offen-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.wf-account .wf-kp-offen-text b {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #8e2018 !important;
}
body.wf-account .wf-kp-offen-text span {
  font-size: 12px !important;
  color: #a4554d !important;
}
body.wf-account .wf-kp-offen-btn {
  flex: 0 0 auto !important;
  background: #c0392b !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  text-decoration: none !important;
}
body.wf-account .wf-kp-offen-btn:hover {
  background: #9c2c20 !important;
  color: #fff !important;
}
@media (max-width: 560px) {
  body.wf-account .wf-kp-offen-btn { width: 100% !important; text-align: center !important; }
}

/* Zusatz im Hero-Status-Badge ("Abgemeldet Nachholtermin gewaehlt") - leiser als der Status */
body.wf-account .wf-kp-hero-stat em {
  font-style: normal;
  font-weight: 500;
  opacity: .8;
}
body.wf-account .wf-kp-hero-stat em::before {
  content: '\00b7';
  margin: 0 5px;
  opacity: .7;
}

/* Primaer-Aktion (Nachholen) - Selektor stark genug fuer .tab-pane .btn-warning/.btn-info */
body.wf-account .wf-kp-primary,
body.wf-account .tab-pane .wf-kp-primary,
body.wf-account .tab-pane .btn-warning.wf-kp-primary,
body.wf-account .swal2-popup .wf-kp-primary {
  background: #1496AF !important;
  border: 1px solid #1496AF !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wf-account .wf-kp-primary:hover,
body.wf-account .tab-pane .btn-warning.wf-kp-primary:hover,
body.wf-account .swal2-popup .wf-kp-primary:hover {
  background: #0f7d92 !important;
  border-color: #0f7d92 !important;
  color: #fff !important;
}

/* Modal: Filter-Haken + Datums-Gruppen + Karten */
body.wf-account .swal2-popup {
  width: min(680px, 94vw) !important;
}
body.wf-account .wf-kp-catchup {
  text-align: left !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  margin-top: 10px !important;
}
body.wf-account .wf-kp-catchup-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  position: sticky !important;
  top: 0 !important;
  background: #fff !important;
  padding: 4px 0 8px !important;
  z-index: 2 !important;
}
body.wf-account .wf-kp-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #eaf5f8 !important;
  border: 1px solid #bfdde5 !important;
  border-radius: 20px !important;
  color: #00404F !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  margin: 0 !important;
}
body.wf-account .wf-kp-chip input {
  accent-color: #1496AF !important;
  margin: 0 !important;
}
body.wf-account .wf-kp-chip:has(input:not(:checked)) {
  background: #fff !important;
  border-color: #e3ecef !important;
  color: #8aa0a6 !important;
}
body.wf-account .wf-kp-catchup-day {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00404F !important;
  margin: 14px 0 6px !important;
}
body.wf-account .wf-kp-catchup-item {
  margin-bottom: 6px !important;
}
@media (max-width: 767px) {
  /* Gleiches Kartenmuster wie in der Terminliste: links Infos (Z1 Zeit + freie Plaetze,
   * Z2 Kurs - Standort), rechts der Nachholen-Button vertikal zentriert (Ulf 29.08.) */
  body.wf-account .wf-kp-catchup-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
    padding: 10px 12px !important;
  }
  body.wf-account .wf-kp-catchup-item > *:not(.wf-kp-next-action) { grid-column: 1; }
  body.wf-account .wf-kp-catchup-item .wf-kp-next-action {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin: 0 !important;
  }
  body.wf-account .wf-kp-nachhol-btn { width: auto !important; }
  /* Zeit + freie Plaetze in EINER Zeile halten, Kurs + Standort in der zweiten */
  body.wf-account .wf-kp-catchup-item .wf-kp-next-date {
    display: flex !important;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    min-width: 0;
  }
  body.wf-account .wf-kp-catchup-item .wf-kp-next-date b,
  body.wf-account .wf-kp-catchup-item .wf-kp-next-date span { white-space: nowrap; }
  body.wf-account .wf-kp-catchup-item .wf-kp-next-info {
    display: flex !important;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  body.wf-account .wf-kp-catchup-item .wf-kp-next-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Button kompakter, damit die Info-Spalte nicht umbricht */
  body.wf-account .wf-kp-catchup-item .wf-kp-next-action .btn {
    padding: 8px 11px !important;
    font-size: 12px !important;
  }
  body.wf-account .wf-kp-catchup-item .wf-kp-next-info { flex-wrap: nowrap; }
  body.wf-account .wf-kp-catchup-item .wf-kp-lang { display: none; } /* "Uhr"/"Plaetze" mobil weg */
  body.wf-account .wf-kp-catchup-item .wf-kp-next-info b { white-space: nowrap; } /* Pin + Ort zusammen */
  body.wf-account .wf-kp-catchup-item .wf-kp-next-info span { display: none; } /* Kursname: steht im Modal-Titel */
}
/* Freie Plaetze: dezent neben Kurs + Standort */
body.wf-account .wf-kp-frei {
  color: #1496AF !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* ── Mobiler Header aufgeraeumt (Ulf 29.08.): Burger redundant, Abstaende kompakt ── */
@media (max-width: 767px) {
  /* Burger enthaelt nur "Startseite" + Suche - das Haus-Icon im Pre-Header tut dasselbe */
  body.wf-account .mobi-toggler,
  body.wf-account-msgs .mobi-toggler {
    display: none !important;
  }
  body.wf-account .header .container,
  body.wf-account-msgs .header .container {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
  }
  body.wf-account .logo-wrapper,
  body.wf-account-msgs .logo-wrapper {
    padding: 6px 0 !important;
  }
  body.wf-account .site-logo img,
  body.wf-account-msgs .site-logo img {
    max-height: 32px !important;
    width: auto !important;
  }
  body.wf-account #logo-update,
  body.wf-account-msgs #logo-update {
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* Breadcrumb-Pfad ("Start > Kundenkonto") bringt mobil nichts */
  body.wf-account .breadcrumbs ul.breadcrumb,
  body.wf-account-msgs .breadcrumbs ul.breadcrumb {
    display: none !important;
  }
  body.wf-account .breadcrumbs h1,
  body.wf-account-msgs .breadcrumbs h1 {
    margin: 12px 0 4px !important;
    font-size: 22px !important;
  }
}

/* Status-Badge im Hero (v2.12.1: statt Nachholen-Button; erscheint, wenn der naechste
 * Termin nicht mehr abmeldbar ist, z. B. "Abgemeldet") */
body.wf-account .wf-kp-hero-stat {
  display: inline-block;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
}
/* Status-Badge in den kompakten Termin-Karten */
body.wf-account .wf-kp-next-stat {
  display: inline-block;
  background: #eee3f5;
  border-radius: 9px;
  color: #7a4a9e;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}
/* Nicht buchbare Zukunfts-Termine (showCourseDay < 1, kein Preview) wie in
 * Kutegos Kalender durchstreichen - visuelle Vorwarnung vor dem Fehler-Modal */
body.wf-account .wf-kp-next-aus .wf-kp-next-date b,
body.wf-account .wf-kp-next-aus .wf-kp-next-info b {
  text-decoration: line-through !important;
  color: #8aa0a6 !important;
}
/* Direktaktionen in der Termin-Karte (v2.13.0) */
body.wf-account .wf-kp-next-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
body.wf-account .wf-kp-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  text-decoration: none !important;
  white-space: nowrap;
}
body.wf-account .wf-kp-act-abm { background: #fff; border: 1px solid #e5b4ae; color: #c0392b !important; }
body.wf-account .wf-kp-act-abm:hover { background: #fdecea; }
body.wf-account .wf-kp-act-nach { background: #fdf6e7; border: 1px solid #f0dcae; color: #7a5200 !important; }
body.wf-account .wf-kp-act-nach:hover { background: #f6e7c6; }
body.wf-account .wf-kp-act-wieder { background: #eaf5f8; border: 1px solid #bfdde5; color: #1496AF !important; }
body.wf-account .wf-kp-act-zahn { background: #eef2f3; border: 1px solid #dde5e8; color: #55707a !important; padding: 7px 9px; }
body.wf-account .wf-kp-act-grp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.wf-account .wf-kp-act-wer { font-size: 12px; font-weight: 600; color: #55707a; }
body.wf-account .wf-kp-stat-abg { background: #eee3f5; color: #7a4a9e; }
/* Auto-Forward: das Zwischen-Modal unsichtbar halten, bis der Zielzustand da ist */
.wf-kp-fwd .swal2-container { visibility: hidden !important; }
/* Universeller Ausblender - schlaegt auch die "display: flex !important"-Kartenregeln.
 * (Ohne das verlor der Standort-Filter im Nachhol-Modal gegen die Karten-Regel, Ulf 29.08.) */
body.wf-account .wf-kp-aus,
.wf-kp-aus {
  display: none !important;
}

/* ── Terminliste Desktop (v2.13.5, Ulf 29.08.): eine Zeile pro Termin statt vier Bloecke,
 * feste Spalten (Datum/Zeit+Badge | Kurs+Teilnehmer | Aktionen | Pfeil) und begrenzte
 * Kartenbreite - auf breiten Screens wurden die Inhalte sonst weit auseinandergerissen. ── */
@media (min-width: 768px) {
  body.wf-account .wf-kp-appt,
  body.wf-account .wf-kp-past { max-width: 1080px; }
  body.wf-account .wf-kp-appt .wf-kp-next-item {
    padding: 11px 18px !important;
    gap: 18px !important;
    margin-bottom: 6px !important;
  }
  /* Datum + Zeit + Badge in EINER Zeile, feste Spaltenbreite -> alle Karten fluchten */
  body.wf-account .wf-kp-appt .wf-kp-next-date {
    flex: 0 0 215px !important;
    min-width: 215px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    white-space: nowrap;
  }
  body.wf-account .wf-kp-appt .wf-kp-next-date b { display: inline !important; }
  /* Kurs + Teilnehmer/Ort nebeneinander statt untereinander */
  body.wf-account .wf-kp-appt .wf-kp-next-info {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  body.wf-account .wf-kp-appt .wf-kp-next-info { overflow: hidden !important; }
  body.wf-account .wf-kp-appt .wf-kp-next-info b {
    display: inline !important;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.wf-account .wf-kp-appt .wf-kp-next-info span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Status-Badge direkt hinter dem Kurs (Reihenfolge Zeit - Kurs - Status), der freie
   * Platz sammelt sich danach, damit die Aktionen rechts buendig bleiben */
  body.wf-account .wf-kp-appt .wf-kp-next-info { flex: 0 1 auto !important; }
  body.wf-account .wf-kp-appt .wf-kp-stat-slot {
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
  }
  body.wf-account .wf-kp-appt .wf-kp-next-act {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    max-width: 45%;
  }
  /* Mehr-Teilnehmer-Gruppen nebeneinander - aber in einer eigenen, eingerueckten Zeile,
   * sonst quetschen sie Kurs/Teilnehmer/Ort auf "S..." zusammen */
  body.wf-account .wf-kp-appt .wf-kp-act-grp { flex-wrap: nowrap !important; }
  body.wf-account .wf-kp-appt .wf-kp-next-item:has(.wf-kp-act-wer) { flex-wrap: wrap !important; }
  body.wf-account .wf-kp-appt .wf-kp-next-item:has(.wf-kp-act-wer) .wf-kp-next-act {
    flex-basis: 100% !important;
    max-width: none !important;
    margin: 6px 0 0 233px !important;
    justify-content: flex-start !important;
    order: 2; /* nach dem Pfeil -> Buttons in Zeile 2, Pfeil bleibt oben rechts */
  }
  body.wf-account .wf-kp-appt .wf-kp-next-item:has(.wf-kp-act-wer) .wf-kp-next-open {
    order: 1;
    margin-left: auto !important;
  }
}

/* Termin-Karten: Status-Badge inline hinter der Uhrzeit (alle Viewports) */
body.wf-account .wf-kp-next-date .wf-kp-stat {
  margin-left: 6px !important;
  vertical-align: middle;
}
@media (max-width: 767px) {
  /* Links Infos (Z1 Datum/Zeit+Badge, Z2 Kurs-Teilnehmer-Ort), rechts Aktivitaet:
   * Buttons + Pfeil als vertikal zentrierte Spalten (Ulf 29.08.) */
  body.wf-account .wf-kp-appt .wf-kp-next-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 8px;
    row-gap: 5px;
    align-items: center;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }
  /* Badge steht mobil direkt neben Datum/Zeit (Zeile 1), Kurs-Zeile darunter */
  body.wf-account .wf-kp-appt .wf-kp-stat-slot {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    margin: 0 !important;
  }
  body.wf-account .wf-kp-appt .wf-kp-ze { display: none; } /* Endzeit mobil: Platz fuer Badge+Buttons */
  body.wf-account .wf-kp-appt .wf-kp-next-date { grid-row: 1; grid-column: 1; display: flex; gap: 6px; align-items: center; min-width: 0; flex-wrap: wrap; }
  body.wf-account .wf-kp-appt .wf-kp-next-date b { display: inline !important; white-space: nowrap; }
  body.wf-account .wf-kp-appt .wf-kp-next-date span { white-space: nowrap; }
  body.wf-account .wf-kp-appt .wf-kp-next-date .wf-kp-stat {
    margin-left: 0 !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  /* Aktions-Buttons mobil kompakter, damit Datum + Badge in eine Zeile passen */
  body.wf-account .wf-kp-appt .wf-kp-act { padding: 6px 10px !important; font-size: 11px !important; }
  body.wf-account .wf-kp-appt .wf-kp-act-zahn { padding: 6px 8px !important; }
  body.wf-account .wf-kp-appt .wf-kp-next-info { grid-row: 2; grid-column: 1 / 3; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
  body.wf-account .wf-kp-appt .wf-kp-next-info b { white-space: nowrap; }
  body.wf-account .wf-kp-appt .wf-kp-next-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.wf-account .wf-kp-appt .wf-kp-next-act { grid-row: 1 / span 2; grid-column: 3; align-self: center; justify-self: end; margin: 0; }
  body.wf-account .wf-kp-appt .wf-kp-next-open { grid-row: 1 / span 2; grid-column: 4; align-self: center; margin: 0; }
  /* Eigene Buttons-Zeile, wenn Zeile 1 durch ein Status-Badge oder mehrere Teilnehmer
   * schon voll ist - sonst ueberlappen Badge und Button (Ulf 29.08.) */
  body.wf-account .wf-kp-appt .wf-kp-next-act:has(.wf-kp-act-wer),
  body.wf-account .wf-kp-appt .wf-kp-next-item:has(.wf-kp-stat-slot) .wf-kp-next-act {
    grid-row: 3;
    grid-column: 1 / 4;
    justify-self: start;
  }
}

/* Nachhol-Modal: fuer wen wird gebucht */
body.wf-account .wf-kp-catchup-wer,
.wf-kp-catchup-wer {
  background: #fdf6e7;
  border: 1px solid #f0dcae;
  border-radius: 8px;
  color: #7a5200;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  padding: 8px 12px;
  text-align: left;
}

/* == Checkout Schritt 3: Zahlarten-UX (v2.13.3) ========================== */

/* Empfohlene Zahlart = eigene Karte, Bankdaten liegen darin */
#paymentMethodContainer #sepa-container.wf-pay-reco {
  border: 2px solid #1496AF !important;
  border-radius: 12px !important;
  background: #f2f9fb !important;
  padding: 4px 14px 14px !important;
  margin: 0 0 18px !important;
}
#sepa-container.wf-pay-reco .separator { display: none !important; }
#paymentMethodContainer .paymentMethodRow {
  padding: 12px 4px !important;
  min-height: 56px !important;
  align-items: center !important;
}
.wf-pay-badge {
  display: inline-block !important;
  margin-left: 8px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #1496AF !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  vertical-align: middle !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}
/* Zeilen-Layout selbst definieren, damit es unabhaengig von Kutegos Basis-CSS
   ueberall gleich sitzt: Radio | Icon + Name (+ Sublabel in Zeile 2) | Haken rechts */
#paymentMethodContainer .paymentMethodRow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}
#paymentMethodContainer .paymentMethodRow > .radio {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#paymentMethodContainer .nameRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#paymentMethodContainer .methodIcon { flex: 0 0 auto !important; line-height: 0 !important; }
#paymentMethodContainer .methodName {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #111 !important;
}
#paymentMethodContainer .paymentMethodDetails { margin-left: auto !important; }
.wf-pay-sub {
  flex-basis: 100% !important;
  width: 100% !important;
  order: 9 !important;
  display: block !important;
  font-size: 13px !important;
  color: #667a80 !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Bankdaten-Block INNERHALB der Lastschrift-Karte */
#sepa-container .wf-pay-bank {
  border-top: 1px solid #cfe9f0 !important;
  margin: 4px 0 0 !important;
  padding: 14px 0 0 !important;
  /* KEIN display-!important hier: Kutego blendet #sepa-payment per inline-Style
     ein/aus, je nach gewaehlter Zahlart. Ein !important wuerde das aushebeln
     (gleiche Falle wie der Standort-Filter im Nachhol-Modal, 29.08.). */
}
#sepa-container .wf-pay-bank h3.form-section {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  border: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
#sepa-container .wf-pay-bank .form-group {
  margin: 0 0 12px !important;      /* Bootstrap-Row-Negativmargins neutralisieren */
  padding: 0 !important;
}
#sepa-container .wf-pay-bank,
#sepa-container .wf-pay-bank * { box-sizing: border-box !important; }
#sepa-container .wf-pay-bank .control-label {
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 0 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #404040 !important;
}
#sepa-container .wf-pay-bank .col-md-5,
#sepa-container .wf-pay-bank .col-md-3,
#sepa-container .wf-pay-bank .input-icon {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#sepa-container .wf-pay-bank .form-control {
  width: 100% !important;
  height: 46px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #c8d8dd !important;
  padding: 8px 12px !important;
}
#sepa-container .wf-pay-bank .form-control:focus {
  border-color: #1496AF !important;
  box-shadow: 0 0 0 3px rgba(20,150,175,.15) !important;
}
#sepa-container .wf-pay-bank .form-group.wf-pay-auto { display: none !important; }

.wf-pay-iban-hint {
  font-size: 13px !important;
  color: #667a80 !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
}
.wf-pay-iban-hint.wf-pay-ok { color: #2e7d54 !important; font-weight: 600 !important; }
.wf-pay-iban-hint.wf-pay-warn { color: #96700f !important; font-weight: 600 !important; }

/* Uebrige Zahlarten */
.wf-pay-alt { margin-top: 4px !important; }
.wf-pay-alt-titel {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #8aa0a6 !important;
  margin: 0 0 6px !important;
}
.wf-pay-alt [id$="-container"] {
  border: 1px solid #e2e8ea !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 0 12px !important;
  background: #fff !important;
}
.wf-pay-alt .separator { display: none !important; }

@media (max-width: 767px) {
  #paymentMethodContainer #sepa-container.wf-pay-reco { padding: 2px 10px 12px !important; }
  #paymentMethodContainer .paymentMethodRow { padding: 10px 2px !important; }
  #paymentMethodContainer .methodName { font-size: 15px !important; font-weight: 600 !important; }
  .wf-pay-sub { font-size: 12.5px !important; }
  .wf-pay-badge { font-size: 10.5px !important; padding: 2px 8px !important; }
  #paymentMethodContainer .paymentMethodIcon { max-height: 26px !important; width: auto !important; }
  .wf-pay-alt [id$="-container"] { padding: 0 10px !important; }
}


/* == Checkout-Redesign v2.13.11: Portal-Design-Sprache ======================
   Guideline (abgeleitet aus dem Kundenportal wf-kp):
   Akzent #1496AF · Dunkel #00404F · Text #404040 · Muted #6b7a82 · Border #e3ecef
   Karten weiss/Radius 10 · Hero-Gradient 120deg Petrol->Dunkel/Radius 14
   Montserrat: Titel 700 · Label 13px/600 · Aktionen Radius 10 */

/* "Deine Buchung": dezente Info-Karte (Ulf 30.08.: Uebersicht nur mitgeben,
   der visuelle Nachdruck gehoert dem Verkaufsabschluss/CTA - kein Hero) */
body[class*="controller-checkout"] .wf-order-summary {
  background: #fbfdfe !important;
  border: 1px solid #e3ecef !important;
  border-left: 3px solid #1496AF !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
}
body[class*="controller-checkout"] .wf-order-summary-title {
  color: #6b7a82 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  margin: 0 0 6px !important;
}
body[class*="controller-checkout"] .wf-order-summary,
body[class*="controller-checkout"] .wf-order-summary * {
  color: #00404F !important;
}
body[class*="controller-checkout"] .wf-order-summary small,
body[class*="controller-checkout"] .wf-order-summary .text-muted,
body[class*="controller-checkout"] .wf-order-summary .wf-summary-label {
  color: #6b7a82 !important;
  font-weight: 400 !important;
}
body[class*="controller-checkout"] .wf-order-summary b,
body[class*="controller-checkout"] .wf-order-summary strong,
body[class*="controller-checkout"] .wf-order-summary .wf-summary-value {
  color: #00404F !important;
  font-weight: 600 !important;
}
body[class*="controller-checkout"] .wf-order-summary a {
  color: #1496AF !important;
}
body[class*="controller-checkout"] .wf-order-summary .fa,
body[class*="controller-checkout"] .wf-order-summary [class*="icon"] {
  color: #8aa0a6 !important;
}

/* Teilnehmer-Karten (Schritt 2) im Portal-Kartenstil; Auswahl wie wf-pay-reco */
body[class*="controller-checkout"] .select-students {
  background: #fff !important;
  border: 2px solid #e3ecef !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  transition: border-color .15s, background .15s !important;
}
body[class*="controller-checkout"] .select-students:hover {
  border-color: #b7dde6 !important;
}
body[class*="controller-checkout"] .select-students.active {
  border-color: #1496AF !important;
  background: #f2f9fb !important;
  box-shadow: 0 2px 8px rgba(20, 150, 175, .15) !important;
}
/* Karten-Innenleben: Preis nicht am Namen kleben lassen; Tabelle fuellt die Karte */
body[class*="controller-checkout"] .select-students table { width: 100% !important; }
body[class*="controller-checkout"] .select-students .student-price-cell {
  padding-left: 12px !important;
  font-weight: 700 !important;
  color: #00404F !important;
  white-space: nowrap !important;
}
/* "Teilnehmer hinzufuegen": Fremd-Gruen -> Portal-Outline */
body[class*="controller-checkout"] .btn.green {
  background: #fff !important;
  border: 1px solid #1496AF !important;
  border-radius: 10px !important;
  color: #1496AF !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}
body[class*="controller-checkout"] .btn.green:hover {
  background: #f2f9fb !important;
}
body[class*="controller-checkout"] .studentRemove {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Auswahl-Haken in den Zahlarten: petrol statt Bootstrap-Gruen (Guideline: Signale petrol) */
body[class*="controller-checkout"] .paymentMethodDetails .fa,
body[class*="controller-checkout"] .paymentMethodDetails i {
  color: #1496AF !important;
}

/* Mobil: Aktionen in voller Breite, Hero kompakt */
@media (max-width: 767px) {
  body[class*="controller-checkout"] .wf-order-summary {
    padding: 11px 13px !important;
  }
  body[class*="controller-checkout"] .panel-heading { font-size: 15.5px !important; }
  body[class*="controller-checkout"] .btn-primary,
  body[class*="controller-checkout"] .button-next {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    padding: 14px 20px !important;
  }
  /* Ladda umhuellt die Buttons mit einem Inline-Span - width:100% braucht den Block-Wrapper
     (gleiche Falle wie beim Schritt-4-CTA, gilt aber fuer ALLE Schritte) */
  body[class*="controller-checkout"] span:has(> .btn-primary),
  body[class*="controller-checkout"] span:has(> .button-next) {
    display: block !important;
    width: 100% !important;
  }
  body[class*="controller-checkout"] .btn.default,
  body[class*="controller-checkout"] a[href*="checkout/cancel"] {
    width: 100% !important;
    text-align: center !important;
    margin-top: 8px !important;
    /* v2.15.2 (Ulf): "Zurück zur Kursübersicht" ragte mobil 50 px über den Pill-Rand hinaus —
       Bootstraps .btn hat white-space:nowrap, die halbe Spalte (182 px) ist schmaler als der Text.
       Umbruch erlauben (zweizeilig, zentriert) statt Überlauf. */
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 11px 10px !important;
  }
}


/* == Schritt 4 (Bestaetigen): Zusammenfassung als Portal-Karten (v2.13.11) ==
   Struktur: .checkout-box > .row > .box-header h3 (grau) + table.table */
body[class*="action-step4"] .checkout-box {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  padding: 2px 14px 8px !important;
  margin-bottom: 12px !important;
}
body[class*="action-step4"] .checkout-box h3 {
  background: transparent !important;
  color: #00404F !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 0 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e3ecef !important;
}
body[class*="action-step4"] .checkout-box table.table { margin-bottom: 4px !important; }
body[class*="action-step4"] .checkout-box table.table td,
body[class*="action-step4"] .checkout-box table.table th {
  border: 0 !important;
  padding: 5px 10px 5px 0 !important;
  font-size: 13.5px !important;
  color: #404040 !important;
  vertical-align: top !important;
}
body[class*="action-step4"] .checkout-box table.table td:first-child {
  color: #6b7a82 !important;
}
/* Lange Inhalte muessen in der Karte umbrechen - kein H-Scroll. table-layout:fixed
   zwingt die Tabelle auf Containerbreite (Bootstrap laesst sie sonst am Inhalt wachsen) */
body[class*="action-step4"] .checkout-box table.table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}
body[class*="action-step4"] .checkout-box table.table td,
body[class*="action-step4"] .checkout-box table.table th {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body[class*="action-step4"] .checkout-box table.table td:first-child { width: 38% !important; }
body[class*="action-step4"] .checkout-box table.price td:first-child,
body[class*="action-step4"] .checkout-box table.amount td:first-child { width: 62% !important; }
/* Preisdetails: Betraege rechts + kraeftig, Endsumme in Petrol */
body[class*="action-step4"] .checkout-box table.price td:last-child,
body[class*="action-step4"] .checkout-box table.amount td:last-child {
  text-align: right !important;
  font-weight: 600 !important;
  color: #00404F !important;
}
body[class*="action-step4"] .checkout-box table.amount td:first-child {
  text-align: right !important;
  white-space: normal !important;
}
body[class*="action-step4"] .checkout-box table.amount.bordered td {
  border-top: 1px solid #e3ecef !important;
  font-size: 15px !important;
}
/* Einwilligungen: klare Zeilen mit Luft, Links petrol */
body[class*="action-step4"] .checkbox { margin: 12px 0 !important; }
body[class*="action-step4"] .checkbox label {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #404040 !important;
  line-height: 1.5 !important;
}
body[class*="action-step4"] .checkbox label a { color: #1496AF !important; font-weight: 600 !important; }
/* Finaler CTA: der wichtigste Button der Strecke - volle Breite, satt.
   white-space:normal + max-width: Bootstrap-nowrap sprengt sonst schmale Viewports */
body[class*="action-step4"] .btn-primary,
body[class*="action-step4"] .button-next {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  font-size: 16px !important;
  padding: 15px 24px !important;
}
body[class*="action-step4"] span:has(> .btn-primary) {
  display: block !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  body[class*="action-step4"] .checkout-box { padding: 2px 12px 8px !important; }
  body[class*="action-step4"] .checkout-box table.table td { font-size: 13px !important; }
}


/* == Meldungen im Checkout: Portal-Stil statt Bootstrap-Vollfarbe (v2.13.11) ==
   Fehler = helle rote Tint-Karte mit Akzentkante (wie Portal-Abmelde-Aktionen),
   Erfolg = gruene Tint-Karte, Info/Warnung analog. Volltonflaechen vermeiden. */
body[class*="controller-checkout"] .alert {
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: 12px 40px 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  position: relative !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body[class*="controller-checkout"] .alert .close {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;
  opacity: .55 !important;
  font-size: 18px !important;
  text-shadow: none !important;
}
body[class*="controller-checkout"] .alert .close:hover { opacity: .9 !important; }
body[class*="controller-checkout"] .alert-danger,
body[class*="controller-checkout"] .alert.payment-error {
  background: #fdecea !important;
  border-color: #e5b4ae !important;
  border-left: 3px solid #c0392b !important;
  color: #a63325 !important;
}
body[class*="controller-checkout"] .alert-danger .close { color: #a63325 !important; }
body[class*="controller-checkout"] .alert-success {
  background: #e4f2ea !important;
  border-color: #b3d9c4 !important;
  border-left: 3px solid #2e7d54 !important;
  color: #256a47 !important;
}
body[class*="controller-checkout"] .alert-success .close { color: #256a47 !important; }
body[class*="controller-checkout"] .alert-warning {
  background: #fdf6e7 !important;
  border-color: #f0dcae !important;
  border-left: 3px solid #b58900 !important;
  color: #7a5200 !important;
}
body[class*="controller-checkout"] .alert-info {
  background: #f2f9fb !important;
  border-color: #b7dde6 !important;
  border-left: 3px solid #1496AF !important;
  color: #00404F !important;
}

/* Feld-Fehler (jquery.validate): rote Kante am Feld + kleiner Hinweistext */
body[class*="controller-checkout"] .form-control.error,
body[class*="controller-checkout"] .has-error .form-control {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important;
}
body[class*="controller-checkout"] label.error {
  display: block !important;
  color: #c0392b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Checkbox-Fehler (Schritt 4 Einwilligungen): ganze Zeile dezent markieren */
body[class*="controller-checkout"] .checkbox label.error {
  margin-left: 0 !important;
}
body[class*="controller-checkout"] .checkbox.has-error label,
body[class*="controller-checkout"] .has-error .checkbox label {
  color: #a63325 !important;
}
body[class*="controller-checkout"] #terms_error.has-error {
  color: #a63325 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}


/* == Feinschliff v2.13.13 (Ulf-Live-Review 30.08.) ========================= */
/* Timer-Chip nur zeigen, wenn der Countdown wirklich tickt */
body[class*="controller-checkout"] .wf-timer-zeit:empty { display: none !important; }
/* Grauer Kasten hinter den Teilnehmer-Karten (Kutego portlet-title, #eee) - unnoetig */
body[class*="controller-checkout"] .portlet-title:has(.select-students) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
/* Abstaende: Stepper dichter an die Ueberschrift, Inhalt dichter an den Stepper */
body[class*="controller-checkout"] .nav-pills.steps {
  margin: 6px 0 2px !important;
  padding: 0 !important;
}
body[class*="controller-checkout"] .panel-body { padding-top: 4px !important; }

/* ══════════════ Einstellungen /account/settings/ (v2.13.15, Ulf 30.08.) ══════════════
 * Kutego liefert dort Metronic-Optik (Unterstrich-Tabs, graue wells, nackte Tabelle).
 * Hier auf Portal-CI gebracht: Karten, Petrol-Akzente, Montserrat, runde Ecken. */
body.wf-account-settings .main { background: #f4f8f9 !important; }
body.wf-account-settings h1,
body.wf-account-settings h2,
body.wf-account-settings h3,
body.wf-account-settings h4 {
  font-family: 'Montserrat', sans-serif !important;
  color: #00404F !important;
}
/* Haupt-Tabs (Uebersicht | Einstellungen) als Portal-Chips */
body.wf-account-settings .tab-style-1 .nav-tabs {
  border-bottom: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
body.wf-account-settings .tab-style-1 .nav-tabs > li { margin: 0 !important; float: none !important; }
body.wf-account-settings .tab-style-1 .nav-tabs > li > a {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  color: #33565f !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
}
body.wf-account-settings .tab-style-1 .nav-tabs > li.active > a,
body.wf-account-settings .tab-style-1 .nav-tabs > li.active > a:hover,
body.wf-account-settings .tab-style-1 .nav-tabs > li.active > a:focus {
  background: #1496AF !important;
  border: 1px solid #1496AF !important;
  color: #fff !important;
}
body.wf-account-settings .tab-style-1 .nav-tabs > li > a:hover {
  background: #eaf5f8 !important;
  border-color: #bfdde5 !important;
}
/* Profil-Spalte, Info-Tabelle und Adress-Box als weisse Karten */
body.wf-account-settings .tab-pane.active > .col-md-3 > .profile-userpic,
body.wf-account-settings .tab-pane.active > .col-md-3 > ul.list-unstyled,
body.wf-account-settings .tab-pane.active > .col-md-9 > .col-md-8,
body.wf-account-settings .tab-pane.active > .col-md-9 > .col-md-4 { padding: 0 !important; }
body.wf-account-settings .well {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  color: #33565f !important;
}
body.wf-account-settings .table {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
body.wf-account-settings .table > tbody > tr > td {
  border-top: 1px solid #f2f7f8 !important;
  padding: 11px 16px !important;
  color: #33565f !important;
  font-size: 14px !important;
}
body.wf-account-settings .table > tbody > tr:first-child > td { border-top: 0 !important; }
body.wf-account-settings .table > tbody > tr > td:first-child {
  color: #55707a !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
body.wf-account-settings .table .fa { color: #1496AF !important; }
body.wf-account-settings .table a { color: #1496AF !important; }
/* Profilbild + "Bearbeiten"-Overlay */
body.wf-account-settings .profile-userpic img,
body.wf-account-settings img.img-responsive {
  border-radius: 12px !important;
  border: 1px solid #e3ecef !important;
  background: #fff !important;
}
body.wf-account-settings a.profile-edit,
body.wf-account-settings .profile-edit {
  background: #00404F !important;
  border-radius: 0 12px 0 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  opacity: 1 !important;
  padding: 6px 12px !important;
}
body.wf-account-settings a.profile-edit:hover { background: #1496AF !important; color: #fff !important; }
body.wf-account-settings .profile-edit a { color: #fff !important; }
/* Linkliste unter dem Bild als Karten-Zeilen */
body.wf-account-settings ul.list-unstyled.profile-nav,
body.wf-account-settings ul.list-unstyled.block {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 12px !important;
  border-left: 3px solid #1496AF !important;
  padding: 4px 0 !important;
  margin-top: 10px !important;
}
body.wf-account-settings ul.profile-nav li a,
body.wf-account-settings ul.list-unstyled.block li a {
  display: block !important;
  padding: 10px 16px !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #f2f7f8 !important;
  color: #33565f !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.wf-account-settings ul.profile-nav li:first-child a { border-top: 0 !important; }
body.wf-account-settings ul.profile-nav li { background: transparent !important; }
body.wf-account-settings ul.profile-nav li a:hover,
body.wf-account-settings ul.list-unstyled.block li a:hover { background: #eaf5f8 !important; color: #00404F !important; }
/* Metronic faerbt die Profil-Spalte grau - im Portal steht sie auf hellem Grund */
body.wf-account-settings .profile-usermenu,
body.wf-account-settings .profile-sidebar,
body.wf-account-settings .profile-userpic { background: transparent !important; }
/* Formular-Panels im Einstellungen-Tab */
body.wf-account-settings .profile-account .tab-content > .tab-pane.active {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
}
body.wf-account-settings .control-label,
body.wf-account-settings label.control-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #33565f !important;
}
body.wf-account-settings .form-control,
body.wf-account-settings .input-group .form-control {
  border-radius: 8px !important;
  border-color: #cfe3e8 !important;
  box-shadow: none !important;
}
body.wf-account-settings .input-group-addon {
  background: #f4f8f9 !important;
  border-color: #cfe3e8 !important;
  border-radius: 8px 0 0 8px !important;
  color: #55707a !important;
}
body.wf-account-settings .bs-select .btn,
body.wf-account-settings .btn-group .btn.dropdown-toggle {
  border-radius: 8px !important;
  border-color: #cfe3e8 !important;
  background: #fff !important;
  color: #33565f !important;
  font-family: 'Montserrat', sans-serif !important;
  box-shadow: none !important;
}
body.wf-account-settings .alert {
  border-radius: 12px !important;
  border: 1px solid #e3ecef !important;
  background: #f8fbfc !important;
  color: #33565f !important;
  box-shadow: none !important;
}
body.wf-account-settings .alert-success { background: #e4f6ea !important; border-color: #bfe4cd !important; color: #1d7a3f !important; }
body.wf-account-settings .alert-danger { background: #fdecea !important; border-color: #f3c9c3 !important; color: #8e2f24 !important; }
body.wf-account-settings .alert-warning { background: #fdf6e7 !important; border-color: #f0dcae !important; color: #7a5200 !important; }
@media (max-width: 767px) {
  body.wf-account-settings .tab-style-1 .nav-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  /* Profilbild nimmt mobil sonst den halben Bildschirm ein */
  body.wf-account-settings .profile-userpic img,
  body.wf-account-settings img.img-responsive {
    max-width: 150px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  body.wf-account-settings .table > tbody > tr > td { padding: 9px 12px !important; font-size: 13px !important; }
  body.wf-account-settings .profile-account .tab-content > .tab-pane.active { padding: 14px !important; }
}


/* == Cross-Standort-Hinweis (v2.14.0) =====================================
   Portal-Sprache: helle Info-Karte mit Petrol-Akzentkante. Bewusst ruhig -
   der Hinweis soll helfen, nicht den eigenen Standort schlechtreden.
   Notfall-Variante (nichts frei) etwas praesenter in Amber. */
.wf-cross {
  position: relative !important;
  background: #f2f9fb !important;
  border: 1px solid #b7dde6 !important;
  border-left: 3px solid #1496AF !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 16px !important;
  font-family: 'Montserrat', sans-serif !important;
}
/* Wegklicken (Ulf 31.08.). 34px Trefferflaeche, damit es auch mobil sicher trifft. */
.wf-cross-x {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6b7a82 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background .15s, color .15s !important;
}
.wf-cross-x:hover { background: #dceef3 !important; color: #00404F !important; }
.wf-cross-x:focus-visible { outline: 2px solid #1496AF !important; outline-offset: 2px !important; }
/* Kopfzeile darf nicht unter das X laufen */
.wf-cross .wf-cross-kopf { padding-right: 32px !important; }
/* Immer nur ein Hinweis: Starttermin-Hinweis weicht der Cross-Karte */
.wf-start-hint.wf-start-hint-aus { display: none !important; }
.wf-cross-kopf {
  color: #00404F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.wf-cross-text {
  color: #404040 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.wf-cross-weg {
  color: #6b7a82 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
}
.wf-cross-cta {
  display: inline-block !important;
  margin-top: 10px !important;
  background: #1496AF !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.wf-cross-cta:hover { background: #117e93 !important; color: #fff !important; text-decoration: none !important; }
/* Notfall: kein freier Termin am eigenen Standort */
.wf-cross-notfall {
  background: #fdf6e7 !important;
  border-color: #f0dcae !important;
  border-left-color: #b58900 !important;
}
.wf-cross-notfall .wf-cross-kopf { color: #7a5200 !important; }

/* Stufe 2: im Laufzeit-Modal, kompakter */
.wf-cross-modal {
  background: #f2f9fb !important;
  border: 1px solid #b7dde6 !important;
  border-left: 3px solid #1496AF !important;
  border-radius: 10px !important;
  padding: 11px 13px !important;
  margin: 0 0 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  text-align: left !important;
}
.wf-cross-modal-kopf { color: #00404F !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 3px !important; }
.wf-cross-modal-text { color: #404040 !important; font-size: 13px !important; line-height: 1.45 !important; }
.wf-cross-modal-weg { color: #6b7a82 !important; font-size: 12px !important; margin-top: 5px !important; }
.wf-cross-modal-cta {
  display: inline-block !important;
  margin-top: 8px !important;
  background: #fff !important;
  border: 1px solid #1496AF !important;
  color: #1496AF !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  text-decoration: none !important;
}
.wf-cross-modal-cta:hover { background: #e7f4f7 !important; color: #1496AF !important; text-decoration: none !important; }

@media (max-width: 767px) {
  .wf-cross { padding: 12px 14px !important; }
  .wf-cross-kopf { font-size: 14.5px !important; }
  .wf-cross-cta { display: block !important; text-align: center !important; }
}

/* ── v2.16.0: Home-Bildschirm-Hinweis im Portal-Dashboard (Kunden-App Stufe 0) ── */
body.wf-account .wf-kp-homehint {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  position: relative !important;
  background: #f2f9fb !important;
  border: 1px solid #b7dde6 !important;
  border-radius: 12px !important;
  padding: 14px 42px 14px 14px !important;
  margin: 12px 0 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #404040 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}
body.wf-account .wf-kp-homehint.wf-kp-aus { display: none !important; }
body.wf-account .wf-kp-homehint-icon {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #1496AF !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
}
body.wf-account .wf-kp-homehint-text { flex: 1 1 auto !important; min-width: 0 !important; }
body.wf-account .wf-kp-homehint-text b {
  display: block !important;
  color: #00404F !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  margin-bottom: 3px !important;
}
body.wf-account .wf-kp-homehint-text i { color: #1496AF !important; }
body.wf-account .wf-kp-homehint-x {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: #6b7a82 !important;
  font-size: 24px !important;
  line-height: 34px !important;
  padding: 0 !important;
  cursor: pointer !important;
}
body.wf-account .wf-kp-homehint-install {
  display: inline-block !important;
  margin-top: 8px !important;
  background: #1496AF !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(20,150,175,.3) !important;
}
body.wf-account .wf-kp-homehint-install.wf-kp-aus { display: none !important; }

/* ── v2.17.0: Kunden-App, App-Modus (body.wf-app) ── */
body.wf-app .cc-window,
body.wf-app .cc-revoke,
body.wf-app .back-to-top { display: none !important; }
body.wf-app.wf-app-tabbar-on { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
.wf-app-tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9990 !important;
  display: flex !important;
  background: #fff !important;
  border-top: 1px solid #e3ecef !important;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -4px 14px rgba(0,64,79,.08) !important;
}
.wf-app-tab {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 50px !important;
  color: #6b7a82 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.wf-app-tab i { font-size: 20px !important; line-height: 1 !important; }
.wf-app-tab.wf-app-tab-aktiv { color: #1496AF !important; }
.wf-app-tab:active { background: #f2f9fb !important; }
.wf-app-sheet {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: 9995 !important;
  background: rgba(0,64,79,.45) !important;
  display: flex !important;
  align-items: flex-end !important;
}
.wf-app-sheet-box {
  width: 100% !important;
  background: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}
.wf-app-sheet-kopf {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #00404F !important;
  font-size: 15px !important;
  padding: 6px 4px 8px !important;
}
.wf-app-sheet-x { border: 0 !important; background: transparent !important; font-size: 26px !important; color: #6b7a82 !important; width: 40px !important; height: 40px !important; }
.wf-app-sheet-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 8px !important;
  border-top: 1px solid #eef3f5 !important;
  color: #00404F !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.wf-app-sheet-item i { width: 22px !important; text-align: center !important; color: #1496AF !important; font-size: 17px !important; }
body.wf-account .wf-app-push {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #fff !important;
  border: 2px solid #1496AF !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #404040 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  box-shadow: 0 2px 8px rgba(20,150,175,.15) !important;
}
body.wf-account .wf-app-push.wf-kp-aus { display: none !important; }
body.wf-account .wf-app-push-icon {
  flex: 0 0 auto !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: #1496AF !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important;
}
body.wf-account .wf-app-push-text { flex: 1 1 auto !important; min-width: 0 !important; }
body.wf-account .wf-app-push-text b { display: block !important; color: #00404F !important; font-weight: 700 !important; font-size: 14.5px !important; margin-bottom: 3px !important; }
body.wf-account .wf-app-push-btns { display: flex !important; gap: 8px !important; margin-top: 10px !important; }
body.wf-account .wf-app-push-ja,
body.wf-account .wf-app-push-spaeter {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  border-radius: 10px !important; padding: 10px 14px !important; cursor: pointer !important;
}
body.wf-account .wf-app-push-ja { background: #1496AF !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px rgba(20,150,175,.3) !important; }
body.wf-account .wf-app-push-spaeter { background: #fff !important; color: #33565f !important; border: 1px solid #e3ecef !important; }
.wf-app-hinweis {
  background: #fdf6e7 !important; color: #7a5200 !important;
  border-left: 3px solid #e0a800 !important; border-radius: 0 10px 10px 0 !important;
  padding: 10px 14px !important; margin: 0 0 10px !important;
  font-family: 'Montserrat', sans-serif !important; font-size: 13.5px !important; line-height: 1.45 !important;
}
.wf-app-hinweis b { display: block !important; margin-bottom: 2px !important; }
.wf-app-dialog {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: 9998 !important;
  background: rgba(0,64,79,.5) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 24px !important;
}
.wf-app-dialog-box {
  width: 100% !important; max-width: 360px !important;
  background: #fff !important; border-radius: 16px !important;
  padding: 18px 18px 14px !important;
  box-shadow: 0 10px 30px rgba(0,64,79,.25) !important;
  font-family: 'Montserrat', sans-serif !important; color: #404040 !important;
}
.wf-app-dialog-titel { font-size: 16px !important; font-weight: 700 !important; color: #00404F !important; margin: 0 0 8px !important; }
.wf-app-dialog-text { font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 16px !important; }
.wf-app-dialog-btns { display: flex !important; gap: 10px !important; justify-content: flex-end !important; }
.wf-app-dialog-nein,
.wf-app-dialog-ja {
  font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
  border-radius: 10px !important; padding: 11px 16px !important; cursor: pointer !important; min-height: 46px !important;
}
.wf-app-dialog-nein { background: #fff !important; color: #33565f !important; border: 1px solid #e3ecef !important; }
.wf-app-dialog-ja { background: #1496AF !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px rgba(20,150,175,.3) !important; }
.wf-app-dialog-ja.wf-app-dialog-rot { background: #c0392b !important; box-shadow: 0 4px 12px rgba(192,57,43,.3) !important; }

/* == Standort-/Kurs-Auswahl ueber den Kurskacheln (v2.17.6) ================
   Karte im Portal-Stil, zwei native Selects (robust, Handy-Picker). Steht
   UNTER dem Starttermin-Hinweis, VOR den Kacheln. */
.wf-wahl {
  background: #fff !important;
  border: 1px solid #e3ecef !important;
  border-radius: 10px !important;
  padding: 12px 14px 14px !important;
  margin: 0 0 16px !important;
  font-family: 'Montserrat', sans-serif !important;
}
.wf-wahl-titel {
  color: #6b7a82 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}
.wf-wahl-reihe { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
.wf-wahl-feld { flex: 1 1 220px !important; display: block !important; margin: 0 !important; min-width: 0 !important; }
.wf-wahl-label {
  display: block !important;
  color: #00404F !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
}
.wf-wahl-select {
  -webkit-appearance: none !important; appearance: none !important;
  width: 100% !important; height: 44px !important;
  border: 1px solid #b7dde6 !important; border-radius: 8px !important;
  background: #f2f9fb url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231496AF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  color: #00404F !important;
  font-family: 'Montserrat', sans-serif !important; font-size: 15px !important; font-weight: 700 !important;
  padding: 0 36px 0 12px !important; line-height: 44px !important;
  cursor: pointer !important; box-shadow: none !important;
}
.wf-wahl-select:hover { border-color: #1496AF !important; }
.wf-wahl-select:focus { outline: none !important; border-color: #1496AF !important; box-shadow: 0 0 0 3px rgba(20, 150, 175, .15) !important; }
.wf-wahl-select option[disabled] { color: #9aa9af !important; }
@media (max-width: 767px) {
  .wf-wahl { padding: 10px 12px 12px !important; margin-bottom: 12px !important; }
  .wf-wahl-feld { flex-basis: 100% !important; }
  .wf-wahl-select { font-size: 16px !important; }  /* verhindert iOS-Zoom */
}