/* =========================
   Variablen & Basis (Fallbacks – werden via PHP-Inline-Style überschrieben)
   ========================= */
:root {
  --sl-primary: #308AC9;
  --sl-heading: #308AC9;
  --sl-success: #6e7e00;
  --sl-text: #2D3161;
  --sl-muted: #2D3161;
  --sl-price: #333333;
  --sl-bg: #ffffff;
  --sl-soft: #f6f7f7;
  --sl-border: #dcdcde;
  --sl-hover: #f8f9fa;
  --sl-radius: 5px;
  --sl-pill-radius: 5px;
  --sl-font-body: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sl-font-head: "League Spartan", "LeagueSpartan", Impact, sans-serif;
  --sl-price-size: 32px;
  --sl-h2-size: 34px;
  --sl-uschi-bg: #fcfdff;
  --sl-klaus-bg: #F0F8FF;
  --sl-uschi-title-font: "League Spartan", "LeagueSpartan", Impact, sans-serif;
  --sl-klaus-title-font: "League Spartan", "LeagueSpartan", Impact, sans-serif;
  --sl-price-font: League Spartan;
}

.sl-pricing {
  font-family: var(--sl-font-body) !important;
  color: var(--sl-text);
  font-size: 16px;
  line-height: 1.55;
}
.sl-pricing * { box-sizing: border-box; }

/* =========================
   Labels
   ========================= */
.sl-pricing .sl-label {
  display: block;
  font-size: 18px;
  font-weight: 400;
  margin: 8px 0 6px;
  color: var(--sl-text);
}

/* =========================
   Segmented Control: Laufzeit
   ========================= */
.sl-pricing .sl-toggle-buttons {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 0;
  overflow: hidden;
  margin: 0 0 12px 0;
}
.sl-pricing .sl-toggle-buttons button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: var(--sl-text);
  border-radius: var(--sl-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .02s ease;
}
.sl-pricing .sl-toggle-buttons button:hover { background: var(--sl-hover); }
.sl-pricing .sl-toggle-buttons button.active { background: var(--sl-primary); color: #fff; }
.sl-pricing .sl-toggle-buttons button:focus-visible { outline: 2px solid #005f8a; outline-offset: 2px; }
.sl-pricing .sl-toggle-buttons button:active { transform: translateY(1px); }

/* Badge (z.B. -60€) */
.sl-pricing .sl-discount-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--sl-pill-radius);
  background: var(--sl-success);
  color: #fff;
  border: 1px solid rgba(0,0,0,.06);
  line-height: 1.1;
}

/* =========================
   Segmented Control: Mitarbeiter
   ========================= */
.sl-pricing #sl-employee-buttons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 0;
  overflow: hidden;
  margin: 0 0 8px 0;
}
.sl-pricing #sl-employee-buttons button {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--sl-text);
  border-radius: var(--sl-radius);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .02s ease;
}
.sl-pricing #sl-employee-buttons button:hover { background-color: var(--sl-hover); }
.sl-pricing #sl-employee-buttons button.active { background-color: var(--sl-primary); color: #fff; }
.sl-pricing #sl-employee-buttons button:focus-visible { outline: 2px solid #005f8a; outline-offset: 2px; }
.sl-pricing #sl-employee-buttons button:active { transform: translateY(1px); }

/* Flat-rate-Info: standardmäßig versteckt, JS zeigt bei 8+ */
.sl-pricing .sl-flat-rate-text {
  display: none;
  margin: 10px 0 0;
  font-size: .95rem;
  color: var(--sl-muted);
}

/* =========================
   Plan-Karten
   ========================= */
.sl-pricing .sl-pricing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.sl-pricing .sl-plan {
  background: var(--sl-uschi-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.sl-pricing #sl-klaus-plan {
  background: var(--sl-klaus-bg);
}

/* Titel */
.sl-pricing .sl-plan-title {
  margin: 0 0 4px;
  font-size: var(--sl-h2-size, 34px);
  font-family: var(--sl-font-head), sans-serif !important;
  font-weight: 300 !important;
  color: var(--sl-heading) !important;
  text-align: center !important;
  letter-spacing: .2px;
}
.sl-pricing #sl-uschi-plan .sl-plan-title {
  font-family: var(--sl-uschi-title-font) !important;
}
.sl-pricing #sl-klaus-plan .sl-plan-title {
  font-family: var(--sl-klaus-title-font) !important;
}

/* Subline */
.sl-pricing .sl-plan-subline {
  margin: 0 0 16px;
  font-weight: 400;
  font-size: 18px !important;
  color: var(--sl-text) !important;
  text-align: center !important;
}

/* Preis */
.sl-pricing .sl-price {
  font-size: var(--sl-price-size, 32px) !important;
  font-weight: 700;
  font-family: var(--sl-price-font) !important;
  color: var(--sl-price) !important;
  text-align: center !important;
  margin: 12px 0 28px !important;
}
.sl-pricing .sl-price-value {
  font-family: var(--sl-price-font) !important;
}

/* Jahrespreis: standardmäßig versteckt, .sl-yearly-visible für Default-Zustand */
.sl-pricing .sl-yearly-total {
  display: none;
  color: var(--sl-muted);
  text-align: center;
  margin: 0 0 12px;
}
.sl-pricing .sl-yearly-total.sl-yearly-visible {
  display: block;
}
.sl-pricing .sl-price + .sl-yearly-total {
  margin-top: -12px;
  margin-bottom: 16px;
}

.sl-pricing .sl-support-info {
  color: var(--sl-success);
  font-weight: 700;
  margin: 10px 0 4px;
}

.sl-pricing .sl-price-value.animated { animation: sl-bump .32s ease; }
@keyframes sl-bump { 0% { transform: scale(1) } 25% { transform: scale(1.05) } 100% { transform: scale(1) } }

/* =========================
   Feature-Liste
   ========================= */
.sl-pricing .sl-feature-list {
  list-style: none;
  padding-left: 36px !important;
  margin: 10px 0 0;
  font-size: 16px;
}
.sl-pricing .sl-feature-list > li {
  margin: 0 0 15px !important;
  padding-left: 0;
  line-height: 1.5;
  position: relative;
}
.sl-pricing .sl-feature-list > li::before {
  content: "✔";
  color: var(--sl-success);
  position: absolute;
  left: -2.4em;
  top: 0.08em;
  width: 2em;
  line-height: 1;
  font-weight: 700;
}
.sl-pricing .sl-feature-list > li.has-children {
  cursor: pointer;
  user-select: none;
}
.sl-pricing .sl-feature-list > li .sl-feature-toggle { cursor: pointer; }
.sl-pricing .sl-feature-list > li .sl-toggle-icons { font-weight: 700; margin-left: 8px; }

/* Sublisten & Toggle-Icons – Standard (ohne JS): alles sichtbar, Icons versteckt */
.sl-pricing .sl-toggle-icons { display: none; }
.sl-pricing .sl-sublist {
  margin: 8px 0 0 26px;
  padding-left: 0;
}
.sl-pricing .sl-sublist li {
  list-style: disc;
  margin: 6px 0 6px 18px;
  line-height: 1.45;
}

/* =========================
   Progressive Enhancement (.sl-js wird von JS gesetzt)
   ========================= */
.sl-pricing.sl-js .sl-toggle-icons { display: inline; }
.sl-pricing.sl-js .sl-sublist { display: none; }
.sl-pricing.sl-js .has-children .minus { display: none; }

/* Aufgeklappter Zustand */
.sl-pricing.sl-js .has-children.sl-open > .sl-sublist { display: block; }
.sl-pricing.sl-js .has-children.sl-open .plus { display: none; }
.sl-pricing.sl-js .has-children.sl-open .minus { display: inline; }

/* =========================
   Zusatzprodukte
   ========================= */
.sl-pricing .sl-addons-title {
  font-size: 1.6rem;
  font-family: var(--sl-font-head), sans-serif !important;
  font-weight: 300 !important;
  color: var(--sl-heading) !important;
  margin: 28px 0 16px;
  text-align: left;
}
.sl-pricing .sl-addons-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sl-pricing .sl-addon-box {
  display: flex;
  flex-direction: column;
  background: #f8f9fa !important;
  border: 1px solid var(--sl-border);
  border-left: 4px solid var(--sl-primary);
  border-radius: var(--sl-radius);
  padding: 20px 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sl-pricing .sl-addon-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Titel */
.sl-pricing .sl-addon-box h3 {
  margin: 0;
  font-size: 20px !important;
  font-family: var(--sl-font-body) !important;
  color: var(--sl-heading) !important;
  font-weight: 700;
  letter-spacing: .1px;
}

/* Preis: prominent unter dem Titel */
.sl-pricing .sl-addon-price {
  margin: 6px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sl-border);
  font-size: 22px !important;
  font-weight: 700;
  font-family: var(--sl-price-font) !important;
  color: var(--sl-heading) !important;
  line-height: 1.3;
}

/* Beschreibung */
.sl-pricing .sl-addon-desc {
  flex: 1;
}
.sl-pricing .sl-addon-box p,
.sl-pricing .sl-addon-box li {
  color: var(--sl-muted) !important;
  line-height: 1.6;
  font-size: 15px;
}
.sl-pricing .sl-addon-box p + p {
  margin-top: 8px;
}
.sl-pricing .sl-addon-box b,
.sl-pricing .sl-addon-box strong {
  color: var(--sl-heading) !important;
}
.sl-pricing .sl-addon-box ul {
  padding-left: 20px;
  margin: 8px 0 0;
}
.sl-pricing .sl-addon-box li {
  margin: 6px 0;
}
.sl-pricing .sl-addon-inline {
  font-weight: 700;
  margin: 8px 0 0;
}

/* TSE-Sonderbox: volle Breite, andere Akzentfarbe */
.sl-pricing .sl-addon-tse {
  grid-column: 1 / -1;
  border-left-color: var(--sl-success);
  background: #f9faf5 !important;
}
.sl-pricing .sl-addon-tse h3 {
  color: var(--sl-text) !important;
}
.sl-pricing .sl-addon-tse .sl-addon-price {
  color: var(--sl-text) !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 800px) {
  .sl-pricing .sl-pricing-plans { grid-template-columns: 1fr; }
  .sl-pricing .sl-addons-container { grid-template-columns: 1fr; }
  .sl-pricing .sl-addon-price { font-size: 18px !important; }
}