/* ============================================================
   Shared Design System — Kapitalanlage Berater
   Motion-, Tiefen- und Lesbarkeits-Layer über dem bestehenden
   CI-DESIGN-SYSTEM.md. Ergänzt jede Seite um dieselben Tokens,
   ohne bestehende Klassen/IDs zu verändern.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;

  --shadow-tint:        0 8px 30px rgba(21,23,28,.07), 0 2px 8px rgba(21,23,28,.05);
  --shadow-tint-lg:      0 28px 64px rgba(21,23,28,.16), 0 8px 20px rgba(21,23,28,.08);
  --shadow-accent-glow:  0 14px 34px rgba(15,107,92,.20);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#0F6B5C;color:#fff}

/* Visible keyboard focus everywhere — accessibility, not optional */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #0F6B5C;outline-offset:3px;border-radius:4px;
}

/* Tabular numerals for all figures — keeps digits from jittering when they update */
.tnum,.rm-irr-val,.rm-stat-val,.sb-num,.qs-val,.pt-stat-row .v,.dc-v,.hb-row .v,.hb-result-2,
.pc-percent,.rm-title,.d-cashflow,.result-main *{font-variant-numeric:tabular-nums}

/* Ultra-subtle grain — breaks the flat digital surface, imperceptible but felt */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll-progress bar — injected by motion.js */
#scrollProgress{position:fixed;top:0;left:0;height:2px;width:0%;background:#0F6B5C;z-index:10000}

/* Reveal-on-scroll — premium version: fade + lift + soften-in, spring-timed */
.fade-in{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(6px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             filter var(--dur-slow) var(--ease-out);
  will-change:opacity,transform,filter;
}
.fade-in.vis{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* Buttons — consistent spring lift + press feedback across every page */
.btn-dark,.btn-outline,.btn-primary,.btn-secondary,.nav-cta,.pt-cta-btn,.calc-cta-1,.calc-cta-2,
.fin-cta,.cta-btn,button{
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-spring);
}
.btn-dark:hover,.nav-cta:hover,.pt-cta-btn:hover,.calc-cta-1:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent-glow)}
.btn-outline:hover,.btn-secondary:hover{transform:translateY(-2px)}
.btn-dark:active,.btn-outline:active,.nav-cta:active,.pt-cta-btn:active,.calc-cta-1:active{transform:translateY(0) scale(.97)}

/* Cards — soft tinted lift, replaces harsh flat borders on hover */
.card,.team-card,.usp-item,.calc-card,.detail-card,.hebel-box,.proj-tile,.wissen-card,.program-card{
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}

/* Active nav link */
.nav-links a.active{color:#15171C;font-weight:500}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  #scrollProgress{display:none}
  body::after{display:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fade-in{opacity:1;transform:none;filter:none}
}

/* ============================================================
   Cookie-Consent-Banner + Einstellungen — injiziert von js/consent.js
   Bewusst mit fest verdrahteten Markenfarben statt CSS-Variablen,
   da jede Seite ihr eigenes Variablen-Schema hat (--primary vs.
   --color-primary) — analog zu #scrollProgress oben.
   ============================================================ */
.pc-consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:20000;
  background:#15171C;color:#FAFAF8;
  padding:1.25rem 1.5rem;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
  transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.pc-consent-banner.pc-visible{transform:translateY(0)}
.pc-consent-text{font-size:13px;line-height:1.7;color:rgba(250,250,248,.75);max-width:640px}
.pc-consent-text a{color:#4FA896;text-decoration:underline}
.pc-consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.pc-consent-btn{font-family:inherit;font-size:13px;font-weight:500;padding:.65rem 1.25rem;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.pc-consent-btn-primary{background:#0F6B5C;color:#fff}
.pc-consent-btn-primary:hover{background:#0C5A4D}
.pc-consent-btn-secondary{background:transparent;color:#FAFAF8;border-color:rgba(255,255,255,.25)}
.pc-consent-btn-secondary:hover{border-color:rgba(255,255,255,.5)}
/* Modal hat hellen Hintergrund (anders als der dunkle Banner) — eigene Variante mit dunklem Text */
.pc-consent-btn-secondary-modal{background:transparent;color:#15171C;border-color:#CFCCC2}
.pc-consent-btn-secondary-modal:hover{border-color:#15171C}
.pc-consent-btn-ghost{background:transparent;color:rgba(250,250,248,.6);text-decoration:underline;padding:.65rem .25rem}

.pc-consent-modal-overlay{
  position:fixed;inset:0;z-index:20001;background:rgba(21,23,28,.7);
  display:none;align-items:center;justify-content:center;padding:1rem;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
}
.pc-consent-modal-overlay.pc-visible{display:flex}
.pc-consent-modal{background:#FFFFFF;color:#15171C;max-width:520px;width:100%;padding:2rem;border-radius:12px;max-height:85vh;overflow-y:auto}
.pc-consent-modal h3{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:500;margin-bottom:.75rem}
.pc-consent-modal > p{font-size:13px;color:#6B7280;line-height:1.7;margin-bottom:1.5rem}
.pc-consent-row{border-top:1px solid #E5E3DC;padding:1rem 0}
.pc-consent-row:first-of-type{border-top:none}
.pc-consent-row-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;margin-bottom:.4rem}
.pc-consent-row-desc{font-size:12px;color:#6B7280;line-height:1.6}
.pc-consent-modal-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem;justify-content:flex-end}
.pc-consent-switch{position:relative;width:38px;height:22px;flex-shrink:0}
.pc-consent-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pc-consent-switch-track{position:absolute;inset:0;background:#CFCCC2;border-radius:11px;transition:background .2s}
.pc-consent-switch-track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}
.pc-consent-switch input:checked + .pc-consent-switch-track{background:#0F6B5C}
.pc-consent-switch input:checked + .pc-consent-switch-track::after{transform:translateX(16px)}
.pc-consent-switch input:disabled + .pc-consent-switch-track{opacity:.6;cursor:not-allowed}
@media(max-width:640px){
  .pc-consent-banner{justify-content:flex-start;text-align:left}
  .pc-consent-actions{width:100%}
  .pc-consent-btn{flex:1}
}
@media (prefers-reduced-motion: reduce){
  .pc-consent-banner{transition:none}
}

/* ============================================================
   Termin-Buchungs-Modal — injiziert von js/termin-modal.js
   Gleiche Konventionen wie .pc-consent-* oben (feste Farben statt
   Variablen, da seitenübergreifend genutzt).
   ============================================================ */
.pc-termin-modal-overlay{
  position:fixed;inset:0;z-index:20002;background:rgba(21,23,28,.7);
  display:none;align-items:center;justify-content:center;padding:1rem;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
}
.pc-termin-modal-overlay.pc-visible{display:flex}
.pc-termin-modal{position:relative;background:#FFFFFF;color:#15171C;max-width:440px;width:100%;padding:2rem;border-radius:12px;max-height:90vh;overflow-y:auto}
.pc-termin-modal h3{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:500;margin-bottom:.5rem}
.pc-termin-modal > p{font-size:13px;color:#6B7280;line-height:1.6;margin-bottom:1.25rem}
.pc-termin-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:22px;line-height:1;color:#9CA3AF;cursor:pointer;padding:.25rem}
.pc-termin-close:hover{color:#15171C}
.pc-termin-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.pc-termin-input,.pc-termin-select{width:100%;padding:.75rem .9rem;margin-bottom:.6rem;border:1px solid #CFCCC2;border-radius:6px;font-family:inherit;font-size:13px;color:#15171C;background:#FFFFFF}
.pc-termin-input:focus,.pc-termin-select:focus{outline:none;border-color:#0F6B5C}
textarea.pc-termin-input{resize:vertical;min-height:52px}
.pc-termin-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:11px;color:#6B7280;line-height:1.5;margin:.4rem 0 1rem}
.pc-termin-consent input{margin-top:2px;flex-shrink:0}
.pc-termin-consent a{color:#0F6B5C}
.pc-termin-btn{width:100%;padding:.85rem;background:#0F6B5C;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:background .2s}
.pc-termin-btn:hover{background:#0C5A4D}
.pc-termin-btn:disabled{opacity:.6;cursor:not-allowed}
.pc-termin-disclaimer{font-size:10px;color:#9CA3AF;margin-top:.75rem;line-height:1.5}
.pc-termin-success{display:none;background:#E6F2EF;border-radius:8px;padding:1rem;font-size:13px;color:#15171C;line-height:1.6}
.pc-termin-success.pc-visible{display:block}
.pc-termin-success span{color:#6B7280;font-weight:300}
.pc-termin-error{font-size:12px;color:#C0392B;margin-top:.75rem}
@media(max-width:480px){
  .pc-termin-row{grid-template-columns:1fr}
}