/* ============================================================================
   Abo-Auswahl auf Registrierung + /abo/ — nutzt das „Für Ihren Betrieb"-
   Kartendesign (.isb-plan, betrieb-rework.css) und ergänzt nur die Register-
   Interaktivität: Monats/Jahres-Toggle, Auswahl-Status, aufklappbare Tabelle.
   Aufbau in js/register-plan-cards.js. Wrapper: .isr-abo (+ .isb-page).
   ========================================================================== */

.isr-abo{ padding:0; margin:0; }
.isr-abo .isb-plans{ margin:0; max-width:100%; gap:16px; }
/* Grid-Tracks dürfen unter ihre Content-Breite schrumpfen (sonst horizontaler Overflow im Formular). */
.isr-abo .isb-plan{ min-width:0; }
.isr-abo .isb-plan-feats li{ overflow-wrap:anywhere; }

/* Karten im schmalen Formular etwas kompakter als auf der Betrieb-Seite. */
.isr-abo .isb-plan{ padding:20px 16px; }
.isr-abo .isb-plan-name{ font-size:16.5px; }
.isr-abo .isb-plan-price{ font-size:26px; margin:4px 0 1px; }
.isr-abo .isb-plan-tag{ margin-bottom:12px; }
.isr-abo .isb-plan-feats li{ font-size:13.5px; }
.isr-abo .isb-plan-feats .isb-ico{ width:15px; height:15px; margin-top:1px; }

/* Das PB-Register-Formular stylt sein Feld-<ul> als Flex-Grid (2 Spalten). Das
   darf die Feature-Liste (ist auch ein <ul>) NICHT erwischen -> Spalten-Richtung
   + saubere <li> erzwingen (sonst laufen die Bullets horizontal ineinander). */
.isr-abo ul.isb-plan-feats{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:9px; margin:0 0 14px; padding:0; list-style:none; width:auto; height:auto; flex:1 1 auto; align-items:stretch; align-content:flex-start; }
.isr-abo ul.isb-plan-feats > li{ display:flex !important; position:static !important; float:none !important; width:100% !important; height:auto !important; min-height:0 !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; align-items:flex-start; }

/* ── Monats/Jährlich-Toggle ─────────────────────────────────────────────── */
.isr-cycle{ display:flex; justify-content:center; margin:16px 0 12px; }
.isr-cycle-inner{ display:inline-flex; background:#e7edf3; border:1px solid #cdd8e4; border-radius:12px; padding:5px; gap:5px; overflow:visible; }
.isr-cycle-opt{ position:relative; border:0; background:transparent; font:inherit; font-weight:700; font-size:14.5px; color:var(--isb-navy);
  padding:10px 22px; border-radius:9px; cursor:pointer; transition:.15s; line-height:1; }
.isr-cycle-opt:hover:not(.active){ background:rgba(255,255,255,.55); }
.isr-cycle-opt.active{ background:var(--isb-navy); color:#fff; box-shadow:0 3px 9px rgba(20,35,63,.24); }
/* „Jährlich" als goldene Aktion — zieht den Klick aufs Jahres-/Gründer-Angebot. */
.isr-cycle-opt.isr-cycle-gold{ color:#a5781a; }
.isr-cycle-opt.isr-cycle-gold:not(.active){ background:#fff3cf; }
.isr-cycle-opt.isr-cycle-gold:hover:not(.active){ background:#ffe9ad; }
.isr-cycle-opt.isr-cycle-gold.active{ background:var(--isb-gold); color:#3a2e00; box-shadow:0 3px 10px rgba(201,141,0,.34); }
.isr-cycle-tag{ position:absolute; top:-9px; right:-9px; background:var(--isb-gold); color:#3a2e00; font-size:10px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:20px; box-shadow:0 2px 6px rgba(201,141,0,.32); white-space:nowrap; transition:opacity .15s; }
/* Aktiv (Button voll gold) -> Badge weg, sonst Gold-auf-Gold-Matsch. */
.isr-cycle-opt.isr-cycle-gold.active .isr-cycle-tag{ opacity:0; visibility:hidden; }
.isr-cycle-hint{ text-align:center; font-size:13.5px; color:var(--isb-muted); margin:0 0 18px; }
.isr-cycle-hint b{ color:var(--isb-navy); font-weight:800; }

/* Aktions-Hinweis — nur im Monats-Modus (im Jahres-Modus trägt die Pro-Karte die
   Aktion). Klickbar: schaltet auf Jahresabo. */
.isr-abo .isr-promo-note{ display:none; }
.isr-abo .isr-promo-note.on{ display:flex; align-items:flex-start; justify-content:center; text-align:center; gap:9px; margin:0 auto 24px; max-width:660px;
  padding:11px 15px; background:#fff8e6; border:1px solid #f0dda2; border-radius:11px; font-size:13px; color:#5a4300;
  line-height:1.45; cursor:pointer; transition:background .15s, border-color .15s; }
.isr-abo .isr-promo-note.on:hover{ background:#fdf3d8; border-color:#e6ca75; }
.isr-abo .isr-promo-note .isb-ico{ width:17px; height:17px; color:#c98d00; flex:none; margin-top:1px; }
.isr-abo .isr-promo-note b{ color:#c98d00; }
.isr-abo .isr-promo-note u{ color:var(--isb-navy); font-weight:700; text-decoration-color:var(--isb-navy); white-space:nowrap; }

/* ── Karten: klickbar + Auswahl-Status ──────────────────────────────────── */
.isr-abo .isb-plan{ cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.isr-abo .isb-plan:not(.is-feat):not(.is-promo):hover{ border-color:#cfd9e4; }
.isr-abo .isb-plan.is-selected{ box-shadow:0 0 0 3px rgba(54,175,216,.38); border-color:var(--isb-cyan); }
/* Ausgewählte Pro-Aktion: goldene Auswahl-Umrandung (statt cyan). */
.isr-abo .isb-plan.is-promo.is-selected{ box-shadow:0 0 0 3px rgba(243,177,0,.55); border-color:var(--isb-gold); }
.isr-abo .isb-plan.is-inquire{ cursor:default; }

/* Jahres-Ersparnis unter dem Preis (navy, dezent) */
.isr-abo .isb-plan-save{ font-size:12px; font-weight:700; color:var(--isb-navy); margin:2px 0 0; }
.isr-abo .isb-plan-save .strike{ color:var(--isb-muted); text-decoration:line-through; font-weight:500; margin-left:4px; }

/* „Ausgewählt"-Button (navy) — schlägt outline/primary/gold */
.isb-page a.isb-btn-sel,
.isb-page a.isb-btn-sel:visited{ background:var(--isb-navy); color:#fff; border-color:var(--isb-navy); }
.isb-page a.isb-btn-sel:hover{ background:var(--isb-navy-deep); color:#fff; }

/* Karten-Button ist rein visuell (Klick liegt auf der ganzen Karte) */
.isr-abo .isb-plan:not(.is-inquire) a.isb-btn{ cursor:pointer; }

/* ── Aufklappbare Vergleichstabelle ─────────────────────────────────────── */
.isr-cmp-toggle{ display:flex; align-items:center; justify-content:center; gap:8px; margin:24px auto 0;
  background:transparent; border:1px solid var(--isb-line); border-radius:10px; padding:11px 20px;
  font:inherit; font-weight:700; font-size:14.5px; color:var(--isb-navy); cursor:pointer; transition:.15s; }
.isr-cmp-toggle:hover{ border-color:var(--isb-cyan); color:var(--isb-cyan-deep); }
.isr-chev{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.isr-cmp-toggle.open .isr-chev{ transform:rotate(180deg); }
.isr-cmp-wrap{ display:none; margin-top:18px; overflow-x:auto; }
.isr-cmp-wrap.open{ display:block; }

/* Pro-Spalte in der Tabelle im Jahres-Modus dezent gold markieren */
.isr-abo .inst-cmp__plan.is-promo .inst-cmp__name{ color:#c98d00; }

@media (max-width:520px){
  .isr-cycle-opt{ padding:10px 16px; }
}

/* ── Read-only-Bestätigung im Zahlungsschritt (claim-register.js, Schritt 3) ─
   Zeigt die bezahlten Tiers zentriert + nicht klickbar; gewähltes hervorgehoben,
   die anderen ausgegraut. Nicht unter .isb-page -> literale Farben. */
.inst-pay-summary__confirm{ text-align:center; }
.inst-pay-summary__title{ font-size:14px; font-weight:800; color:#1e456c; margin:0 0 12px; letter-spacing:.01em; }
.isr-confirm{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 0 4px; }
.isr-cf{ min-width:148px; border:1px solid #e6ebf1; border-radius:12px; padding:15px 20px; text-align:center; background:#fff; transition:opacity .15s; }
.isr-cf.is-sel{ border-color:#1e456c; box-shadow:0 0 0 2px rgba(30,69,108,.18); }
.isr-cf.is-dim{ opacity:.46; }
.isr-cf-name{ font-size:16px; font-weight:800; color:#1e456c; }
.isr-cf-price{ font-size:13.5px; color:#56657a; font-weight:600; margin-top:3px; }
.isr-cf-badge{ display:inline-block; margin-top:9px; font-size:12px; font-weight:800; color:#1e456c; background:#eef4fb; border-radius:20px; padding:3px 11px; }
.isr-cf-change{ display:inline-block; margin-top:14px; font-size:13px; color:#2a93b8; }

/* ── Register-Formular (WPPB) ans Karten-Design angleichen ────────────────────
   Das Formular liegt AUSSERHALB von .isb-page -> literale Farben (wie die
   Pay-Summary oben). Kleine Uppercase-Labels, saubere Inputs mit Cyan-Focus,
   flache Cyan-Buttons. Die Abo-Karten (.isr-abo) bleiben unberuehrt/breit. */
#wppb-register-user{ max-width:1040px; margin-left:auto; margin-right:auto; }

/* Labels: klein, uppercase, dezent */
#wppb-register-user li.wppb-form-field > label{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#56657a; margin:0 0 6px;
}

/* Inputs */
#wppb-register-user input[type=text],
#wppb-register-user input[type=email],
#wppb-register-user input[type=password]{
  width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid #e6ebf1;
  border-radius:10px; font:inherit; font-size:15px; color:#14233f; background:#fff;
  box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
#wppb-register-user input[type=text]:focus,
#wppb-register-user input[type=email]:focus,
#wppb-register-user input[type=password]:focus{
  outline:none; border-color:#36afd8; box-shadow:0 0 0 3px rgba(54,175,216,.18);
}
#wppb-register-user li.wppb-form-field{ margin:0 0 16px; }

/* Konto-Schritt: schmale, zentrierte Spalte (Abo-Karten bleiben breit) */
#wppb-register-user #inst-account-head,
#wppb-register-user li.email,
#wppb-register-user li.password,
#wppb-register-user li.confirm_password{
  flex:0 0 100% !important; float:none; clear:both; width:100%; max-width:460px; margin-left:auto; margin-right:auto;
}
#inst-account-head{ text-align:center; margin-bottom:20px; }
.inst-wz-h{ font-size:21px; font-weight:800; letter-spacing:-.01em; color:#1e456c; margin:0 0 4px; }
.inst-wz-sub{ font-size:14px; color:#56657a; }

/* Wizard-Buttons: flach, cyan, primaer */
#wppb-register-user .inst-wz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#36afd8; color:#fff; border:0; border-radius:10px; font:inherit; font-weight:700;
  font-size:16px; padding:14px 32px; cursor:pointer; box-shadow:none; text-transform:none;
  letter-spacing:0; min-width:250px; transition:background .15s;
}
#wppb-register-user .inst-wz-btn:hover{ background:#2a93b8; }
#wppb-register-user .inst-wz-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Zurueck-Links dezent */
#wppb-register-user .inst-wz-back{ color:#56657a; text-decoration:none; font-size:13.5px; }
#wppb-register-user .inst-wz-back:hover{ color:#1e456c; }

/* Button-Fuesse + Checkliste zentrieren */
#inst-foot1, #inst-foot2, #inst-foot3{ text-align:center; }
#wppb-register-user .inst-pwreq, #wppb-register-user .inst-pwmatch{ max-width:460px; margin-left:auto; margin-right:auto; }

/* ── Register-Kopf: eigener Hero + verbundener Fortschritts-Stepper ───────────
   Ersetzt den blanken Elementor-Titel "Registrieren" (Widget 8160a00) durch
   einen designten Kopf, der zum Rest passt. */
.elementor-element-8160a00{ display:none !important; }

.inst-reg-hero{ text-align:center; max-width:560px; margin:4px auto 26px; }
/* id-Scope + !important, sonst zwingt Astras h1 die Groesse/Farbe auf. */
#wppb-register-user h1.inst-reg-title{ font-size:30px !important; line-height:1.15; font-weight:800 !important;
  letter-spacing:-.02em; color:#1e456c !important; margin:0 0 8px !important; }
.inst-reg-lead{ font-size:15px; color:#56657a; margin:0; }

.inst-steps{ display:flex; align-items:flex-start; justify-content:center; max-width:500px; margin:0 auto 30px; padding:0; }
.inst-stp{ position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; }
.inst-stp-c{ position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#eef2f6; color:#8a97a8; border:2px solid #eef2f6; font-weight:800; font-size:14.5px;
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s; }
.inst-stp-chk{ width:19px; height:19px; display:none; }
.inst-stp-t{ margin-top:9px; font-size:12.5px; font-weight:700; color:#8a97a8; text-align:center; transition:color .2s; }
/* Verbindungslinie zum vorigen Punkt */
.inst-stp:not(:first-child)::before{ content:""; position:absolute; top:17px; left:-50%; width:100%; height:2px; background:#e6ebf1; z-index:0; transition:background .2s; }
/* aktiver Schritt (navy) */
.inst-stp.on .inst-stp-c{ background:#1e456c; border-color:#1e456c; color:#fff; box-shadow:0 0 0 4px rgba(30,69,108,.12); }
.inst-stp.on .inst-stp-t{ color:#1e456c; }
.inst-stp.on::before{ background:#1e456c; }
/* erledigter Schritt (gruen, Haken statt Zahl) */
.inst-stp.ok .inst-stp-c{ background:#1c7a4a; border-color:#1c7a4a; color:#fff; }
.inst-stp.ok .inst-stp-num{ display:none; }
.inst-stp.ok .inst-stp-chk{ display:block; }
.inst-stp.ok .inst-stp-t{ color:#1c7a4a; }
.inst-stp.ok::before{ background:#1c7a4a; }
@media (max-width:520px){ .inst-reg-title{ font-size:24px; } .inst-stp-t{ font-size:11px; } }

/* ── Astra faerbt JEDEN <button>:hover/:focus gelb (Button-Hover-BG =
   --ast-global-color-7 = #ffcd57). Trifft unsere echten <button> (Monat/Jahr-
   Toggle, "Alle Funktionen vergleichen"). Den Wert im Register-Scope neutral
   setzen -> kein Gelb mehr; unsere eigenen Hover-States gewinnen per Spezifitaet. */
#wppb-register-user, .isr-abo{ --ast-global-color-7: transparent; }
/* Vergleichs-Toggle: auf Hover nur Rahmen/Text, BG transparent (nicht gelb). */
.isr-cmp-toggle:hover, .isr-cmp-toggle:focus{ background:transparent; }