/* =========================================================================
   Pharma Kodex – Funktionen & Preise (neues Design)
   Nutzt die hp-* Klassen aus home.css (Hero, Sektionen, CTA, Buzzword-Marker)
   und ergänzt hier die Pricing-Toggles + Preiskarten.
   ========================================================================= */

/* ── Pricing: Umschalter (Privat/Gewerbe + Monat/Jahr) ── */
.pr-switches { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.pr-switch {
  display: inline-flex; padding: .3rem; border-radius: 999px;
  background: #eef2f7; border: 1px solid var(--pk-border);
}
.pr-switch button {
  border: none; background: transparent; cursor: pointer;
  padding: .5rem 1.3rem; border-radius: 999px;
  font-size: .92rem; font-weight: 600; color: var(--pk-muted);
  transition: background .18s, color .18s, box-shadow .18s;
  display: inline-flex; align-items: center; gap: .45rem;
}
.pr-switch button.active {
  background: #fff; color: var(--pk-blue-dark);
  box-shadow: 0 2px 8px rgba(20,41,77,.10);
}
.pr-switch button .pr-save {
  font-size: .72rem; font-weight: 700; color: #fff;
  background: var(--pk-blue); padding: .08rem .45rem; border-radius: 999px;
}
.pr-switch button:not(.active) .pr-save { background: var(--pk-muted); }

/* ── Preiskarten ── */
.pr-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: stretch; }
.pr-card {
  flex: 1 1 320px; max-width: 380px;
  background: #fff; border: 1px solid var(--pk-border); border-radius: 20px;
  padding: 2.2rem; display: flex; flex-direction: column;
  position: relative; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26,60,110,.10); }
.pr-card.is-featured {
  border-color: var(--pk-blue);
  box-shadow: 0 18px 50px rgba(26,60,110,.16);
}
.pr-badge {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--pk-blue); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .35rem 1rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(26,60,110,.25);
}
.pr-card-name { font-size: 1.05rem; font-weight: 700; color: var(--pk-blue-dark); }
.pr-card-desc { font-size: .9rem; color: var(--pk-muted); line-height: 1.5; margin-top: .35rem; min-height: 2.7em; }
.pr-price { margin: 1.3rem 0 .3rem; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.pr-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--pk-blue-dark); line-height: 1; }
.pr-period { font-size: .95rem; color: var(--pk-muted); font-weight: 500; }
.pr-sub { font-size: .82rem; color: var(--pk-muted); min-height: 1.3em; }
.pr-sub .pr-strike { text-decoration: line-through; opacity: .7; margin-right: .35rem; }
.pr-sub .pr-save-text { color: #1f9d57; font-weight: 600; }
.pr-vat { font-size: .76rem; color: #94a3b8; margin-top: .15rem; min-height: 1.1em; }
.pr-features { list-style: none; padding: 0; margin: 1.4rem 0 1.6rem; }
.pr-features li { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; font-size: .94rem; color: var(--pk-text); }
.pr-features .bi { color: var(--pk-blue); margin-top: 3px; flex-shrink: 0; }
.pr-card .hp-btn-primary, .pr-card .hp-btn-ghost { margin-top: auto; justify-content: center; }

/* Gewerbe-spezifische Elemente standardmäßig versteckt (JS blendet ein) */
.pr-only-business { display: none; }

/* ── Funktionen: Vergleichs-/Hinweisband ── */
.fn-note {
  background: #fafbfd; border: 1px solid var(--pk-border); border-radius: 16px;
  padding: 1.6rem 1.8rem; display: flex; align-items: center; gap: 1.1rem;
}
.fn-note-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px;
  background: var(--pk-accent-light, #e8edf4); color: var(--pk-blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.fn-note-text { font-size: .98rem; color: var(--pk-muted); line-height: 1.6; }
.fn-note-text strong { color: var(--pk-blue-dark); }

@media (max-width: 575.98px) {
  .pr-card { flex-basis: 100%; max-width: 100%; }
  .pr-switch button { padding: .5rem 1rem; font-size: .86rem; }
}

/* ── Kontakt-/Anfrage-Modal (zweispaltig: Bild links, Formular rechts) ── */
#contactModal .modal-dialog { max-width: 880px; }
#contactModal .modal-content { overflow: hidden; }
.cm-split { display: flex; align-items: stretch; }
.cm-aside {
  flex: 0 0 42%; position: relative; min-height: 100%;
  background: var(--pk-blue-dark);
}
.cm-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-aside-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,41,77,.25) 0%, rgba(18,41,77,.82) 100%);
}
.cm-aside-content { position: relative; padding: 1.8rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.cm-aside-content .cm-aside-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-bottom: .5rem; }
.cm-aside-content h4 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .5rem; }
.cm-aside-content p { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0; }
.cm-aside-points { list-style: none; padding: 0; margin: 1rem 0 0; }
.cm-aside-points li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: rgba(255,255,255,.92); padding: .2rem 0; }
.cm-aside-points .bi { color: #9cc3f0; }
.cm-main { flex: 1 1 58%; padding: 1.8rem; min-width: 0; }
.cm-main-intro { font-size: .92rem; color: var(--pk-muted); line-height: 1.55; margin-bottom: 1.2rem; }

@media (max-width: 575.98px) {
  #contactModal .modal-dialog { max-width: 100%; }
  .cm-split { flex-direction: column; }
  .cm-aside { flex-basis: auto; min-height: 160px; }
  .cm-aside-content { justify-content: flex-end; padding: 1.2rem; }
}

/* ── Passwort-Reset-Seite ── */
.pk-reset-card {
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 18px;
  padding: 2.2rem;
  box-shadow: 0 18px 44px rgba(20,41,77,.08);
}
.pk-reset-card .form-control { padding: .7rem .85rem; border-radius: 10px; }
.pk-reset-card .form-control:focus { border-color: var(--pk-blue); box-shadow: 0 0 0 3px rgba(26,60,110,.12); }