/* ═══════════════════════════════════════════════════════════════
   PENSIONSKASSENSUCHE.CH — GLOBALES DESIGN-SYSTEM
   Wird auf allen Seiten NACH dem Inline-<style> geladen und
   überschreibt daher die alte Farbwelt/Komponenten zentral.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────── */
:root{
  /* Layout */
  --side: 150px;

  /* Marke */
  --navy:      #0a1c47;   /* Headlines, Text */
  --navy2:     #00133f;   /* Tiefes Navy — Footer, Preisbox */
  --navy3:     #001a46;
  --navy-soft: #12295c;

  --green:      #5eb3b4;  /* Primär-Akzent (Oliv/Limette) */
  --green-dark: #3e9a9c;  /* Hover */
  --green-lite: #9fdcdc;
  --green-tint: #ecf6f6;  /* Flächen, Icon-Kreise */

  /* Legacy-Alias: bestehende Seiten nutzen var(--orange) → jetzt Grün */
  --orange:  #5eb3b4;
  --orange2: #3e9a9c;
  --blue:    #0a1c47;

  /* Flächen & Linien — türkis-neutral abgestimmt */
  --gray:    #f3f8f8;
  --gray2:   #fafcfc;
  --border:  #dfeaea;
  --border2: #ebf3f3;
  --muted:   #56617a;
  --light:   #8d95a6;

  --radius:   18px;
  --radius-s: 12px;
  --shadow:   0 2px 4px rgba(10,28,71,.03), 0 12px 32px rgba(10,28,71,.06);
  --shadow-l: 0 4px 8px rgba(10,28,71,.04), 0 24px 60px rgba(10,28,71,.10);
}

body{
  background:#fff;
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Lange Komposita (z. B. "Freizügigkeitsguthaben") dürfen den Viewport
   nicht sprengen — auf schmalen Screens umbrechen statt überlaufen. */
h1, h2, h3, h4, h5, p, li, a, span, td{ overflow-wrap:break-word; hyphens:manual; -webkit-hyphens:manual; }

/* ── 2. SEITENRÄNDER ─────────────────────────────────────────── */
/* nav ist bewusst NICHT dabei: die Navi-Pille hat ihr eigenes,
   symmetrisches Innenmass (siehe Abschnitt 3). */
.hero, .section, .section.gray, .section-dark, .when-section,
.cta-banner, .page-hero, .content-wrap-full, footer{
  padding-left: var(--side) !important;
  padding-right: var(--side) !important;
}

/* ── 3. NAVIGATION ───────────────────────────────────────────── */
/* Weisser Header über die volle Breite — dezenter Bottom-Border,
   dunkle Schrift auf weissem Grund. */
nav{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  border-radius:0 !important;
  padding-left:var(--side) !important;
  padding-right:var(--side) !important;
  gap:8px;
  background:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  border-bottom:1px solid rgba(10,28,71,.08) !important;
  box-shadow:0 1px 2px rgba(10,28,71,.04), 0 4px 18px rgba(10,28,71,.06) !important;
  transition:box-shadow .25s ease, background .25s ease;
}

/* Freigestellte weisse Wortmarke (pks_logo_weiss.png) auf dem türkisen
   Header. Der Header nutzt selbst das Seitenraster (--side), das Logo
   fluchtet daher ohne Zusatzabstand mit Hero-Text und Footer-Logo. */
.nav-logo{
  display:flex !important;
  align-items:center;
  flex-shrink:0;
  margin-left:0 !important;
}
.nav-logo a{ display:block; transition:opacity .18s ease; }
.nav-logo a:hover{ opacity:.82; }
nav{ overflow:visible !important; }
.nav-logo{ overflow:visible !important; }
.nav-logo img{
  height:56px !important;
  width:auto !important;
  margin:0 !important;
  display:block;
  filter:none !important;
}
.nav-links{ margin-left:auto !important; }
.nav-hamburger{ margin-left:auto; }
@media (max-width:700px){
  .nav-logo img{ height:42px !important; margin:0 !important; }
  /* Mobil ist die Pille schmaler — normaler Innenabstand statt Rasterflucht */
  .nav-logo{ margin-left:0 !important; }
}

.nav-links a{
  color:var(--navy) !important;
  font-weight:600;
  letter-spacing:.005em;
  transition:color .18s ease, opacity .18s ease;
}
.nav-links a:not(.nav-cta):hover{ color:var(--green-dark) !important; opacity:1; }
.nav-links a::after{ background:var(--green-dark) !important; transition:transform .22s ease; }
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--green-dark) !important; }

/* CTA: türkise Pille mit weisser Schrift auf weissem Header. */
.nav-links a.nav-cta, .nav-cta{
  background:var(--green-dark) !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 2px 10px rgba(94,179,180,.24);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-links a.nav-cta:hover, .nav-cta:hover{
  background:var(--green-dark) !important;
  color:#fff !important;
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(94,179,180,.34);
}

.nav-hamburger span{ background:var(--navy) !important; }

.lang-trigger{
  border-color:rgba(10,28,71,.18) !important;
  background:transparent !important;
  color:var(--navy) !important;
}
.lang-trigger:hover{ background:rgba(10,28,71,.05) !important; }
.lang-trigger svg{ transition:transform .2s ease; }
.lang-dropdown button.active{ background:var(--green) !important; color:#fff !important; }
.lang-dropdown button:not(.active):hover{ background:var(--green-tint) !important; color:var(--navy) !important; }

.nav-hamburger span{ background:var(--navy) !important; transition:transform .22s ease, opacity .18s ease; }
/* Mobiles Menü sitzt bündig unter dem durchgehenden Header */
.nav-mobile{
  top:78px !important;
  left:0 !important;
  right:0 !important;
  border-radius:0 0 20px 20px !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-l) !important;
}
@media (max-width:700px){
  .nav-mobile{ top:64px !important; }
}
.nav-mobile a{ color:var(--navy) !important; border-bottom-color:var(--border2) !important; }
.nav-mobile .mob-cta{ background:var(--green) !important; color:#fff !important; }
.nav-mobile .mob-lang button.active{ background:var(--green) !important; color:#fff !important; border-color:var(--green) !important; }

/* ── 4. BUTTONS ──────────────────────────────────────────────── */
.btn{
  background:var(--green) !important;
  color:#fff !important;
  border-radius:50px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  padding:15px 30px !important;
  font-size:13.5px !important;
  box-shadow:0 2px 10px rgba(94,179,180,.26);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{
  background:var(--green-dark) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(94,179,180,.32);
}
.btn-ghost{
  background:transparent !important;
  color:var(--navy) !important;
  border:1.5px solid var(--border) !important;
  box-shadow:none !important;
}
.btn-ghost:hover{ background:var(--gray) !important; border-color:var(--navy) !important; }
.section-dark .btn, .cta-banner .btn, .why-dark .btn{ box-shadow:0 4px 18px rgba(0,0,0,.22); }

/* ── 5. TYPOGRAFIE / AKZENTE ─────────────────────────────────── */
h1 u, h2 u, h3 u,
.section h2 u, .section-dark h2 u, .when-section h2 u,
.cta-banner h2 u, .page-hero h1 u, .hero h1 u{
  text-decoration:underline !important;
  text-decoration-color:var(--green) !important;
  text-decoration-thickness:4px !important;
  text-underline-offset:5px !important;
  text-decoration-skip-ink:none !important;
}
.hero h1 .hl, .accent, .hl{ color:var(--green) !important; }
.section .eyebrow-top, .when-eyebrow, .eyebrow{
  color:var(--green) !important;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.section h2, .when-section h2{ color:var(--navy) !important; }
.section .sub{ color:var(--muted) !important; }

/* ── 6. SEKTIONEN / FLÄCHEN ──────────────────────────────────── */
.section.gray{ background:var(--gray) !important; }

.section-dark{
  background:linear-gradient(160deg,#12295c 0%,var(--navy) 45%,var(--navy2) 100%) !important;
}

/* "Warum Pensionskassensuche" — hell türkis statt Navy */
.section.why-dark{
  background:linear-gradient(180deg,#eaf5f5 0%,#dbeeee 100%) !important;
  color:var(--navy) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}
.section.why-dark h2{ color:var(--navy) !important; }
.section.why-dark .sub{ color:var(--muted) !important; }
.why-grid .why-item{ border-color:rgba(47,138,141,.18) !important; }
.why-item h4{ color:var(--navy) !important; }
.why-item p{ color:var(--muted) !important; }
.why-item a{ color:var(--green-dark) !important; font-weight:700 !important; }
.why-item a:hover{ color:#2f8a8d !important; }

/* CTA vor dem Footer: hell — setzt sich klar vom türkisen Footer ab */
.cta-banner, .faq-cta{
  background:linear-gradient(180deg,#fbfdfd 0%,var(--green-tint) 100%) !important;
  border-top:1px solid var(--border) !important;
}
.cta-banner h2, .faq-cta h2{ color:var(--navy) !important; }
.cta-banner p, .faq-cta p{ color:var(--muted) !important; }
.cta-banner .btn, .faq-cta a{
  background:var(--green-dark) !important;
  color:#fff !important;
  box-shadow:0 4px 16px rgba(62,154,156,.3) !important;
}
.cta-banner .btn:hover, .faq-cta a:hover{
  background:#2f8a8d !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(62,154,156,.4) !important;
}
.section-dark h2, .why-dark h2{ color:#fff !important; }
.section-dark h3, .why-dark .sub{ color:rgba(255,255,255,.72) !important; }
.after-list li::before{ color:var(--green) !important; }

/* Subpage-Hero: hell statt dunkel — passend zum neuen Look */
.page-hero{
  background:linear-gradient(180deg,var(--green-tint) 0%,#fafbf5 55%,#fff 100%) !important;
  border-bottom:1px solid var(--border) !important;
  color:var(--navy) !important;
}
.page-hero h1{ color:var(--navy) !important; letter-spacing:-.02em; }
.page-hero p{ color:var(--muted) !important; }
.orange-bar{ background:var(--green) !important; }

/* ── 7. KARTEN ───────────────────────────────────────────────── */
.when-card, .svc-card, .pricing-card, .step-card, .stat-box,
.contact-card, .form-card, .doc-card, .ds-card, .imp-card, .werte-item{
  border-radius:var(--radius) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.when-card:hover, .svc-card:hover, .step-card:hover, .contact-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-l) !important;
}
.when-icon-wrap{
  background:var(--green-tint) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  box-shadow:0 6px 16px rgba(10,28,71,.06);
}
.when-card h4{ color:var(--navy) !important; }
.when-card p{ color:var(--muted) !important; }

/* Helle Icon-Fläche — passend zum zweifarbigen Icon-Set */
.svc-card-left{
  background:#eaf4f4 !important;
  border-right:1px solid var(--border) !important;
}
.svc-card h4{ color:var(--navy) !important; }
.svc-card-right p{ color:var(--muted) !important; opacity:1 !important; }
.svc-link{ color:var(--green-dark) !important; font-weight:700 !important; }
.svc-more a{ border-color:var(--green) !important; color:var(--green-dark) !important; transition:background .18s ease,color .18s ease; }
.svc-more a:hover{ background:var(--green) !important; color:#fff !important; }
.svc-tagline{ color:var(--muted) !important; }


/* ── 8. PREISE ───────────────────────────────────────────────── */
/* Preis-Hero hell — konsistent mit den übrigen Unterseiten */
.hero-pricing{
  background:linear-gradient(180deg,var(--green-tint) 0%,#fafbf5 60%,#fff 100%) !important;
  color:var(--navy) !important;
  border-bottom:none !important;
}
.hero-pricing-text h1{ color:var(--navy) !important; letter-spacing:-.025em; }
.hero-pricing-text p{ color:var(--muted) !important; }
.hero-spacer{ display:none !important; }
.pricing-wrap{ background:#fff !important; padding-top:20px !important; }

/* Preis-Hierarchie: Betrag dominiert, Zusatz darunter */
.pco-top .price{
  font-size:44px !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  letter-spacing:-.025em !important;
  line-height:1 !important;
  margin-top:4px !important;
  font-variant-numeric:tabular-nums;
}
.pco-top .note{
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--muted) !important;
  order:3;
  margin-top:12px;
}
.pco-top{ display:flex; flex-direction:column; align-items:center; }
.pco-top .label{ order:1; }
.pco-top .price{ order:2; }
.pco-services .ic{ background:var(--green-tint) !important; }
.pco-services .ic svg{ stroke:var(--navy) !important; stroke-width:1.6 !important; }
.pco-services .val.free{ color:var(--green-dark) !important; }
.pco-cta{
  background:var(--green) !important;
  box-shadow:0 2px 10px rgba(94,179,180,.26);
  transition:background .18s ease, transform .18s ease;
}
.pco-cta:hover{ background:var(--green-dark) !important; transform:translateY(-1px); }
.pco-trust svg{ stroke:var(--green) !important; }
.pricing-card{ box-shadow:var(--shadow-l) !important; }
/* Preisflächen: dunkles Petrol statt Navy — bleibt Akzent, passt zur Palette */
.pc-head, .pay-price{
  background:linear-gradient(160deg,#3e9a9c 0%,#2f8a8d 55%,#256e71 100%) !important;
}
.pay-price .pp-free b{ color:#fff !important; }
.pay-price .pp-link{ color:#fff !important; text-decoration:underline; text-underline-offset:3px; }
.pay-price .pp-link:hover{ opacity:.8; }
.pc-amount{ color:#fff !important; }
.pc-label{ color:rgba(255,255,255,.6) !important; }
.pc-val.free{ color:var(--green-dark) !important; }
.pc-row{ border-bottom-color:var(--border2) !important; }

/* ── 9. FAQ ──────────────────────────────────────────────────── */
.faq-item{ border-bottom-color:var(--border) !important; }
.faq-item:first-child{ border-top-color:var(--border) !important; }
.faq-q{ color:var(--navy) !important; }
.faq-ic{ color:var(--green) !important; transition:transform .2s ease; }
.faq-q::after{ border-right-color:var(--green) !important; border-bottom-color:var(--green) !important; }
.faq-a{ color:var(--muted) !important; }
.faq-a a{ color:var(--green-dark) !important; }
.faq-cta a{ background:var(--green) !important; }

/* ── 10. FORMULARE ───────────────────────────────────────────── */
input, select, textarea{ font-family:'Montserrat',Helvetica,Arial,sans-serif; }
input:focus, select:focus, textarea:focus{
  border-color:var(--green) !important;
  box-shadow:0 0 0 3px rgba(94,179,180,.14) !important;
  outline:none !important;
}
.hero-row input, .hero-row select{ border-color:var(--border) !important; }

/* ── 11. FOOTER — Türkis, ruhig gesetzt ──────────────────────── */
footer{
  background:#2f8a8d !important;      /* etwas satter als der Header → Tiefe */
  border-top:none !important;
  padding-top:64px !important;
  padding-bottom:48px !important;
  grid-template-columns:1.8fr 1fr 1fr 1.1fr !important;
  gap:48px !important;
  align-items:start;
}
footer .footer-logo{
  margin-bottom:18px;
  display:inline-block;
  background:#ffffff;
  padding:8px 26px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.10);
  line-height:0;
}
footer .footer-logo img{
  filter:none !important;
  height:56px !important;
  width:auto !important;
  margin:0 !important;
  opacity:1;
}

.footer-badge{ color:rgba(255,255,255,.66) !important; }
.footer-tagline{ color:rgba(255,255,255,.72) !important; }
.footer-info{ color:rgba(255,255,255,.62) !important; line-height:1.9 !important; font-size:12.5px !important; }
.footer-info a{ color:rgba(255,255,255,.62) !important; }
.footer-info a:hover{ color:#fff !important; }

.footer-col h5{
  color:#fff !important;
  opacity:1 !important;
  letter-spacing:.13em !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  margin-bottom:16px !important;
}
.footer-col a{
  color:rgba(255,255,255,.8) !important;
  margin-bottom:10px !important;
  font-size:13px !important;
  transition:color .16s ease;
}
.footer-col a:hover{ color:#fff !important; }

.footer-contact a, .footer-contact .fc-hours{ color:rgba(255,255,255,.8) !important; }
.footer-contact .fc-hours{ color:rgba(255,255,255,.6) !important; }
.footer-contact svg{ stroke:rgba(255,255,255,.6) !important; }
.footer-contact a:hover{ color:#fff !important; }
.footer-contact a:hover svg{ stroke:#fff !important; }

.footer-bottom{
  background:#256e71 !important;
  border-top:1px solid rgba(255,255,255,.1) !important;
  color:rgba(255,255,255,.62) !important;
  padding-left:var(--side) !important;
  padding-right:var(--side) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ── 12. TRUST-BAR ───────────────────────────────────────────── */
.trust-bar{
  background:var(--gray);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:34px var(--side);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.trust-item{ display:flex; align-items:flex-start; gap:16px; text-align:left; }
.trust-item svg{
  width:34px; height:34px; flex-shrink:0;
  stroke:var(--navy); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.trust-item h5{ font-size:14px; font-weight:700; color:var(--navy); margin:0 0 5px; }
.trust-item p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

/* ── 13. ANIMATIONEN ─────────────────────────────────────────── */
/* .js-reveal wird von reveal.js gesetzt — ohne JS bleibt alles sichtbar. */
.js-reveal .fade-up{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.js-reveal .fade-up.visible{ opacity:1 !important; transform:none !important; }
.js-reveal .fade-up.d1{ transition-delay:.08s; }
.js-reveal .fade-up.d2{ transition-delay:.16s; }
.js-reveal .fade-up.d3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1 !important; transform:none !important; }
}

/* ── 14. RESPONSIVE ──────────────────────────────────────────── */
/* Zwischenbereich: Navi kompakter, damit auch die laengeren
   FR/IT-Labels neben dem Logo Platz haben. */
@media (max-width:1320px){
  .nav-links a{ padding:0 12px; }
  .nav-links a::after{ left:12px; right:12px; }
}
@media (max-width:1024px){
  :root{ --side:78px; }
  nav{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
  footer{ grid-template-columns:1fr 1fr 1fr !important; }
  footer > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:700px){
  :root{ --side:26px; }
  nav{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
  footer{ grid-template-columns:1fr 1fr !important; gap:26px !important; padding-top:40px !important; }
  footer > div:first-child{ grid-column:1 / -1; }
  footer .footer-logo img{ height:42px !important; }
  .trust-bar{ grid-template-columns:1fr; gap:20px; padding:28px var(--side); }
  .footer-bottom{ justify-content:center; text-align:center; font-size:11px !important; }
}
@media (max-width:460px){
  footer{ grid-template-columns:1fr !important; }
}

/* ── 15. NO-MOTION OVERRIDE ─────────────────────────────────────
   User-Wunsch: keine Bewegungen, kein Scroll-Fade auf der ganzen Seite. */
html{ scroll-behavior:auto !important; }
*,*::before,*::after{
  animation-duration:.001ms !important;
  animation-delay:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  transition-delay:0s !important;
}
.fade-up{ opacity:1 !important; transform:none !important; }
/* Hover-Transforms (nach oben schieben) unterbinden — Farbwechsel bleiben */
.svc-card:hover,
.jopt:hover,
.pco-cta:hover,
.btn:hover,
.nav-cta:hover,
.lang-trigger:hover{ transform:none !important; }

/* ── 16. KEINE AUTOMATISCHE SILBENTRENNUNG ──────────────────────
   User-Wunsch: keine "Vorsor-ge" / "pensi-onskassenguthaben"-Brüche mehr. */
*{ -webkit-hyphens:manual !important; hyphens:manual !important; }

/* Mobile-only Zeilenumbruch im Titel (verhindert Wort-Trennung "pensionskassensu-che.ch") */
.show-mob{ display:none; }
@media (max-width:700px){ .show-mob{ display:inline; } }
/* Mobile: Trennstrich zwischen ALLEN why-items (ausser letztem) — vorher fehlte Strich zwischen w3 & w4 */
@media (max-width:700px){
  .why-item{ border-bottom:1px solid rgba(255,255,255,0.12) !important; }
  .why-item:last-child{ border-bottom:none !important; }
}