/* ==== Variablen (WP-nahe Defaults) ==== */
:root{
  --sl-primary:#0073AA;         /* aktiv: Buttons/Segmente/Headings */
  --sl-heading:#0073AA;         /* Uschi / Uschi & Klaus */
  --sl-success:#008000;         /* Häkchen + Support-Zeile */
  --sl-text:#1d2327;            /* WP-Body-Text */
  --sl-muted:#6c7781;           /* WP-muted */
  --sl-bg:#ffffff;
  --sl-soft:#f6f7f7;            /* helle Flächen */
  --sl-border:#dcdcde;          /* WP-Ränder */
  --sl-radius:10px;
  --sl-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==== Base ==== */
.sl-pricing { font-family: var(--sl-font), sans-serif; color: var(--sl-text); }
.sl-pricing * { box-sizing: border-box; }
.sl-pricing .sl-pricing-container { margin-top: 8px; line-height: 1.55; }

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

/* ================= Segmented Control: Monats/Jahr ================ */
.sl-pricing .sl-toggle-buttons{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--sl-border);
  border-radius:12px;
  padding:4px;
  overflow:hidden;
  margin: 0 0 12px 0;
}

.sl-pricing .sl-toggle-buttons button{
  appearance:none;
  background:transparent;
  border:0;
  margin:0;
  padding:10px 16px;
  line-height:1;
  font-weight:700;
  color: var(--sl-text);
  border-radius:10px; /* aktive Pill */
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .02s ease;
}

.sl-pricing .sl-toggle-buttons button.active{
  background: var(--sl-primary);
  color:#fff;
}

.sl-pricing .sl-toggle-buttons button:active{ transform: translateY(1px); }

/* Jahres-Badge (grün) im “jährlich”-Button */
.sl-pricing .sl-discount-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  font-size:.8rem;
  font-weight:800;
  border-radius:999px;
  background: var(--sl-success);
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
}

/* ================= Segmented Control: Mitarbeiter ================= */
.sl-pricing .sl-employee-buttons{
  display:grid;
  grid-template-columns: repeat(8, 1fr);  /* Vollbreite: 8 gleich breite Spalten */
  gap:0;
  background:#fff;
  border:1px solid var(--sl-border);
  border-radius:12px;
  padding:4px;
  overflow:hidden;
  margin: 0 0 8px 0;
}

.sl-pricing .sl-employee-buttons button{
  appearance:none;
  background:transparent;
  border:0;
  margin:0;
  padding:8px 0;
  height:40px;
  line-height:24px;
  border-radius:10px;            /* aktive Pill */
  color: var(--sl-text);
  font-weight:700;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .02s ease;
}

.sl-pricing .sl-employee-buttons button.active{
  background: var(--sl-primary);
  color:#fff;
}

.sl-pricing .sl-employee-buttons button:focus-visible,
.sl-pricing .sl-toggle-buttons button:focus-visible{
  outline:2px solid var(--sl-primary);
  outline-offset:2px;
}

/* Hinweistext 8+ unter dem Segment */
.sl-pricing #sl-flat-rate-info{
  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-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: #eef6fb; } /* zartes Blau wie Original */

.sl-pricing .sl-plan-title{
  margin:0 0 4px;
  font-size:2rem;
  font-weight:700;               /* weniger fett */
  color: var(--sl-heading);      /* #0073AA */
  letter-spacing:.2px;
}
.sl-pricing .sl-plan-subline{
  margin:0 0 14px;
  color: var(--sl-muted);
  font-weight:600;
}

.sl-pricing .sl-price{
  font-size:1.9rem;
  font-weight:700;
  margin: 10px 0 4px;
}
.sl-pricing .sl-yearly-total{
  color: var(--sl-muted);
  margin: 0 0 12px;
}

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

/* Preis-Animation */
.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 ================= */
/* Kein ::before-Häkchen – Häkchen kommt aus JS als <span class="sl-check">✔</span> */
.sl-pricing .sl-feature-list{
  list-style:none;
  padding-left:0;
  margin: 10px 0 0;
}
.sl-pricing .sl-feature-list > li{
  margin:10px 0;
  padding-left: 0;
  position:relative;
}
.sl-pricing .sl-check{
  color: var(--sl-success);
  font-weight:700;
  display:inline-block;
  width:1.2em;
}

/* Togglebare Hauptpunkte */
.sl-pricing .sl-feature-toggle{
  cursor:pointer; user-select:none;
}
.sl-pricing .sl-toggle-icons{ margin-left:8px; font-weight:800; }

/* Unterliste */
.sl-pricing .sl-sublist{
  margin:8px 0 0 24px;
  padding-left:0;
}
.sl-pricing .sl-sublist li{
  list-style:disc;
  margin: 6px 0 6px 16px;
}

/* ================= TSE-Box ================= */
.sl-pricing .sl-tse-container{
  border: 1px dashed var(--sl-border);
  border-radius: var(--sl-radius);
  padding:12px;
  margin-top:14px;
  background:#fff;
}
.sl-pricing .sl-tse-toggle{ position:relative; display:inline-block; width:48px; height:26px; vertical-align:middle; }
.sl-pricing .sl-tse-toggle input{ opacity:0; width:0; height:0; }
.sl-pricing .sl-slider{ position:absolute; cursor:pointer; inset:0; background:#c7ccd6; transition:.2s; border-radius:26px; }
.sl-pricing .sl-slider:before{ content:""; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:#fff; transition:.2s; border-radius:50%; }
.sl-pricing .sl-tse-toggle input:checked + .sl-slider{ background: var(--sl-primary); }
.sl-pricing .sl-tse-toggle input:checked + .sl-slider:before{ transform: translateX(22px); }

/* ================= Zusatzprodukte ================= */
.sl-pricing .sl-addons-title{
  font-size:1.6rem;
  color: var(--sl-heading);
  margin:22px 0 12px;
  font-weight:700;
}
.sl-pricing .sl-addons-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.sl-pricing .sl-addon-box{
  background:#fff;
  border:1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding:14px;
}
.sl-pricing .sl-addon-box h3{
  margin:0 0 8px;
  font-size:1.35rem;
  color: var(--sl-heading);
  font-weight:700;
}
.sl-pricing .sl-addon-inline{
  font-weight:700;
  margin:8px 0 0;
}

/* ================= Responsive ================= */
@media (max-width: 900px){
  .sl-pricing .sl-pricing-plans{ grid-template-columns:1fr; }
  .sl-pricing .sl-addons-container{ grid-template-columns:1fr; }
}