/* =========================================================================
   Pharma Kodex – Custom CSS (ergänzend zu Bootstrap 5)
   ========================================================================= */

/* ── Inter (lokal/self-hosted) ── */
@font-face { font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/inter/inter-v18-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter/inter-v18-latin-regular.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter/inter-v18-latin-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter/inter-v18-latin-700.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("../fonts/inter/inter-v18-latin-800.woff2") format("woff2"); }

/* ── Marken-Variablen (Pharma-Kodex-Blau) ── */
:root {
  --pk-blue: #1a3c6e;
  --pk-blue-dark: #12294d;
  --pk-blue-hover: #15325a;
  --pk-light: #f5f7fa;
  --pk-text: #1a1e26;
  --pk-muted: #6b7280;
  --pk-border: #e2e5ea;
  /* Bootstrap-Primary auf Marken-Blau mappen (kein Sass-Rebuild nötig) */
  --bs-primary: #1a3c6e;
  --bs-primary-rgb: 26, 60, 110;
  --bs-link-color: #1a3c6e;
  --bs-link-hover-color: #12294d;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--pk-text);
  background: #fff;
}

/* Bootstrap .btn-primary / .bg-primary auf Marken-Blau */
.btn-primary { --bs-btn-bg: var(--pk-blue); --bs-btn-border-color: var(--pk-blue);
  --bs-btn-hover-bg: var(--pk-blue-hover); --bs-btn-hover-border-color: var(--pk-blue-hover);
  --bs-btn-active-bg: var(--pk-blue-dark); --bs-btn-active-border-color: var(--pk-blue-dark); }
.bg-primary { background-color: var(--pk-blue) !important; }
.text-primary { color: var(--pk-blue) !important; }
a { color: var(--pk-blue); }
a:hover { color: var(--pk-blue-dark); }

/* ── Logo/Brand ── */
.pk-brand { font-weight: 800; letter-spacing: -0.02em; color: var(--pk-blue-dark); text-decoration: none; display: flex; align-items: center; }
.pk-brand span { font-weight: 300; }
.pk-brand:hover { color: var(--pk-blue-dark); }
.pk-brand-logo { height: 42px; width: auto; display: block; }

/* ── Navbar (hell, damit das dunkle Logo gut sichtbar ist) ── */
.pk-navbar {
  /* Glasmorphism: halbtransparent + Blur, edel & dezent steril */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  padding-top: .6rem; padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(26, 60, 110, 0.06), 0 8px 30px rgba(20, 41, 77, 0.06);
}
/* Fallback: Browser ohne backdrop-filter bekommen soliden Hintergrund */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pk-navbar { background: #fff; }
}
.pk-navbar .nav-link { color: var(--pk-text); font-weight: 500; padding: .4rem 1rem; }
.pk-navbar .nav-link:hover, .pk-navbar .nav-link.active { color: var(--pk-blue); }
/* Mehr Luft zwischen den Navigationspunkten (nur Desktop) */
@media (min-width: 992px) {
  .pk-navbar .navbar-nav .nav-item { margin: 0 1rem; }
}
.pk-navbar .navbar-toggler { border-color: var(--pk-border); color: var(--pk-blue-dark); }
.pk-navbar .navbar-toggler:focus { box-shadow: none; }
.pk-navbar .navbar-toggler .bi { font-size: 1.5rem; }
.pk-btn-nav { padding: .45rem 1.2rem; border-radius: 8px; }
/* Einloggen: dunkel umrandet (statt hell); Kostenlos starten: gefülltes Blau */
.pk-navbar .btn-outline-light.pk-btn-nav {
  color: var(--pk-blue-dark); border-color: var(--pk-border);
}
.pk-navbar .btn-outline-light.pk-btn-nav:hover {
  color: #fff; background: var(--pk-blue-dark); border-color: var(--pk-blue-dark);
}
.pk-navbar .btn-light.pk-btn-nav {
  color: #fff; background: var(--pk-blue); border-color: var(--pk-blue);
}
.pk-navbar .btn-light.pk-btn-nav:hover {
  color: #fff; background: var(--pk-blue-dark); border-color: var(--pk-blue-dark);
}

/* Inhalt unter der fixed Navbar */
body { padding-top: 0; }
.pk-page { padding-top: 72px; }

/* ── Hero ── */
.pk-hero {
  background: linear-gradient(135deg, var(--pk-blue) 0%, var(--pk-blue-dark) 100%);
  color: #fff; padding: 6rem 0 5rem;
}
.pk-hero h1 { font-weight: 800; letter-spacing: -0.02em; }
.pk-hero .lead { color: rgba(255,255,255,.88); }
.pk-hero-badge {
  display: inline-block; background: rgba(255,255,255,.15);
  border-radius: 999px; padding: .3rem 1rem; font-size: .85rem; font-weight: 600;
  margin-bottom: 1.25rem;
}

/* ── Sections ── */
.pk-section { padding: 4.5rem 0; }
.pk-section-light { background: var(--pk-light); }
.pk-section-title { font-weight: 800; letter-spacing: -0.01em; color: var(--pk-blue-dark); }
.pk-section-sub { color: var(--pk-muted); max-width: 640px; }

/* ── Feature-/Zielgruppen-Cards ── */
.pk-card {
  background: #fff; border: 1px solid var(--pk-border); border-radius: 16px;
  padding: 1.75rem; height: 100%; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(26,60,110,.10); border-color: var(--pk-blue); }
.pk-card-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: linear-gradient(135deg, var(--pk-blue), var(--pk-blue-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
}
.pk-card h5 { font-weight: 700; color: var(--pk-blue-dark); }
.pk-card p { color: var(--pk-muted); margin-bottom: 0; }

/* ── Pricing ── */
.pk-price-card {
  background: #fff; border: 1px solid var(--pk-border); border-radius: 18px;
  padding: 2rem; height: 100%; display: flex; flex-direction: column;
}
.pk-price-card.is-featured { border: 2px solid var(--pk-blue); box-shadow: 0 12px 40px rgba(26,60,110,.12); position: relative; }
.pk-price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--pk-blue); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .25rem .9rem; border-radius: 999px;
}
.pk-price-name { font-weight: 700; color: var(--pk-blue-dark); font-size: 1.15rem; }
.pk-price-amount { font-size: 2.4rem; font-weight: 800; color: var(--pk-blue-dark); }
.pk-price-amount small { font-size: .9rem; font-weight: 500; color: var(--pk-muted); }
.pk-price-features { list-style: none; padding: 0; margin: 1.25rem 0; }
.pk-price-features li { padding: .4rem 0; color: var(--pk-text); display: flex; align-items: start; gap: .5rem; }
.pk-price-features li .bi { color: var(--pk-blue); margin-top: 2px; }

/* ── Legal / Textseiten ── */
.pk-legal { padding: 3rem 0 4rem; max-width: 820px; }
.pk-legal h1 { font-weight: 800; color: var(--pk-blue-dark); margin-bottom: 1.5rem; }
.pk-legal h2 { font-weight: 700; color: var(--pk-blue-dark); font-size: 1.25rem; margin-top: 2rem; }
.pk-legal p, .pk-legal li { color: #374151; line-height: 1.7; }
.pk-legal .pk-placeholder { background: #fff7ed; color: #9a3412; padding: 0 .35rem; border-radius: 4px; font-weight: 600; }

/* ── Footer ── */
.pk-footer { background: var(--pk-blue-dark); color: rgba(255,255,255,.72); }
.pk-brand-footer { font-size: 1.4rem; color: #fff; }
/* Logo im dunklen Footer: das dunkelblaue Logo wird per Filter hell dargestellt */
.pk-footer-logo { height: 54px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.pk-footer-tagline { color: rgba(255,255,255,.6); font-size: .9rem; max-width: 360px; }
.pk-footer-head { color: #fff; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .9rem; }
.pk-footer-links li { margin-bottom: .5rem; }
.pk-footer-links a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .9rem; }
.pk-footer-links a:hover { color: #fff; }
.pk-footer-divider { border-color: rgba(255,255,255,.15); margin: 2rem 0 1.25rem; }
.pk-footer-copy { color: rgba(255,255,255,.55); font-size: .82rem; }

/* ── CTA-Band ── */
.pk-cta {
  background: linear-gradient(135deg, var(--pk-blue) 0%, var(--pk-blue-dark) 100%);
  color: #fff; border-radius: 20px; padding: 3rem;
}
.pk-cta h2 { font-weight: 800; }

/* ── Toast ── */
.pk-toast-container { position: fixed; top: 88px; right: 20px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; }
.pk-toast {
  display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 360px;
  background: #fff; border: 1px solid var(--pk-border); border-left: 4px solid var(--pk-blue);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
  opacity: 0; transform: translateX(20px); transition: opacity .25s, transform .25s;
}
.pk-toast.is-visible { opacity: 1; transform: translateX(0); }
.pk-toast--success { border-left-color: #059669; }
.pk-toast--error, .pk-toast--danger { border-left-color: #dc2626; }
.pk-toast--warning { border-left-color: #d97706; }
.pk-toast-icon { font-size: 1.1rem; }
.pk-toast--success .pk-toast-icon { color: #059669; }
.pk-toast--error .pk-toast-icon, .pk-toast--danger .pk-toast-icon { color: #dc2626; }
.pk-toast--warning .pk-toast-icon { color: #d97706; }
.pk-toast--info .pk-toast-icon { color: var(--pk-blue); }
.pk-toast-msg { flex: 1; font-size: .88rem; color: var(--pk-text); }
.pk-toast-close { border: none; background: none; font-size: 1.3rem; line-height: 1; color: #9ca3af; cursor: pointer; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .pk-navbar .navbar-nav { padding: 1rem 0; }
  .pk-hero { padding: 4.5rem 0 3.5rem; }
}