/* ============================================================
   global.css — Shared styles for finanzimpulse-vranic.de
   Variables, Reset, Nav, Footer, Sticky Bar, Scroll Animations
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
  --navy: #0f1f3d;
  --navy-light: #1a2d52;
  --gold: #c9953c;
  --gold-dark: #8a6b2b;
  --gold-light: #ddb366;
  --gold-pale: #f5eddd;
  --warm-white: #faf8f5;
  --warm-bg: #f3f0eb;
  --text: #2a2a2a;
  --text-light: #555555;
  --text-muted: #6e6e6e;
  --border: #e8e4de;
  --white: #ffffff;
  --green-soft: #1e8e4e;
  --green: #27ae60;
  --red-soft: #c0392b;
  --shadow-sm: 0 2px 8px rgba(15,31,61,.06);
  --shadow-md: 0 8px 32px rgba(15,31,61,.08);
  --shadow-lg: 0 16px 56px rgba(15,31,61,.1);
  --radius: 12px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-padding-top:56px; -webkit-font-smoothing:antialiased; text-size-adjust:100%; overflow-x:hidden; }
[id] { scroll-margin-top:56px; }
body { font-family:'Outfit',sans-serif; color:var(--text); background:var(--warm-white); line-height:1.65; overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4 { font-family:'DM Serif Display',serif; font-weight:400; line-height:1.2; }
a { text-decoration:none; color:inherit; transition:color var(--transition); }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { max-width:1080px; margin:0 auto; padding:0 28px; }
.container-wide { max-width:1200px; margin:0 auto; padding:0 28px; }

/* ===== SKIP LINK (BFSG) ===== */
.skip-link {
  position:absolute; top:-100%; left:16px; z-index:9999;
  background:var(--navy); color:var(--white); padding:12px 24px; border-radius:0 0 8px 8px;
  font-weight:600; font-size:14px; transition:top .2s;
}
.skip-link:focus { top:0; }

/* ===== FOCUS VISIBLE (BFSG) ===== */
:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ===== STICKY NAV ===== */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(250,248,245,.99);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow var(--transition);
}
.nav.scrolled { box-shadow:0 4px 20px rgba(0,0,0,.06); }

/* Both layout variants: .nav .container and .nav-inner */
.nav .container { display:flex; align-items:center; justify-content:space-between; height:52px; }
.nav-inner {
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; height:52px;
}

.nav-logo {
  font-family:'DM Serif Display',serif; font-size:15px; color:var(--navy);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  outline:none !important;
}
.nav-logo:focus-visible { outline:none !important; }
.nav-logo-mark {
  width:30px; height:30px; background:var(--navy); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-family:'DM Serif Display',serif; font-size:14px;
}
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links > a:not(.nav-cta) {
  font-size:14px; font-weight:500; color:var(--text-light);
  position:relative; transition:color .3s ease;
}
.nav-links > a:not(.nav-cta)::after {
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--gold); transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav-links > a:not(.nav-cta):hover { color:var(--navy); }
.nav-links > a:not(.nav-cta):hover::after { width:100%; }

/* Nav dropdown */
.nav-dropdown-wrapper { position:relative; }
.nav-dropdown-wrapper > a {
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font-size:14px; font-weight:500; color:var(--text-light); transition:color .3s ease;
}
.nav-dropdown-wrapper:hover > a { color:var(--navy); }
.nav-dropdown-chevron { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; margin-top:1px; }
.nav-dropdown-wrapper:hover .nav-dropdown-chevron { transform:rotate(180deg); }
.nav-dropdown {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--white); border-radius:var(--radius); padding:8px 0;
  min-width:240px; box-shadow:0 12px 40px rgba(15,31,61,.12);
  opacity:0; visibility:hidden; transition:all .25s ease;
  border:1px solid var(--border);
}
.nav-dropdown-wrapper:hover .nav-dropdown,
.nav-dropdown-wrapper:focus-within .nav-dropdown {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display:flex; align-items:center; gap:10px; padding:10px 20px;
  font-size:13px; font-weight:500; color:var(--text-light); transition:all .2s;
  white-space:nowrap;
}
.nav-dropdown a::after { display:none; }
.nav-dropdown a:hover { background:var(--gold-pale); color:var(--navy); }
.nav-dropdown a svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.8; flex-shrink:0; stroke-linecap:round; stroke-linejoin:round; }

/* Nav CTA */
.nav-cta {
  background:var(--navy); color:var(--white) !important; padding:10px 22px; border-radius:8px;
  font-size:13px; font-weight:600; letter-spacing:.3px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 8px rgba(15,31,61,.15);
}
.nav-cta:hover { background:var(--gold); color:var(--navy) !important; transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,149,60,.3); }
.nav-cta::after { display:none !important; }
.nav-cta:active { transform:scale(.96); transition-duration:.1s; }

/* Burger button — only visible on mobile */
.burger { display:none; width:36px; height:36px; border:none; background:none; cursor:pointer; padding:6px; position:relative; z-index:1001 }
.burger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all .35s cubic-bezier(.4,0,.2,1); position:absolute; left:6px }
.burger span:nth-child(1) { top:10px }
.burger span:nth-child(2) { top:17px; width:18px }
.burger span:nth-child(3) { top:24px }
.burger.open span:nth-child(1) { top:17px; transform:rotate(45deg) }
.burger.open span:nth-child(2) { opacity:0; width:0 }
.burger.open span:nth-child(3) { top:17px; transform:rotate(-45deg) }

/* Mobile overlay menu */
.mobile-menu { position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(250,248,245,.99); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; visibility:hidden; transition:all .4s cubic-bezier(.4,0,.2,1) }
.mobile-menu.mm-open { opacity:1; visibility:visible }
.mobile-menu a { font-family:'DM Serif Display',serif; font-size:28px; color:var(--navy); opacity:0; transform:translateY(16px); transition:all .35s ease }
.mobile-menu.mm-open a, .mobile-menu.mm-open .mm-group, .mobile-menu.mm-open button.mm-a11y { opacity:1; transform:translateY(0) }
.mobile-menu.mm-open > :nth-child(1) { transition-delay:.1s }
.mobile-menu.mm-open > :nth-child(2) { transition-delay:.16s }
.mobile-menu.mm-open > :nth-child(3) { transition-delay:.22s }
.mobile-menu.mm-open > :nth-child(4) { transition-delay:.28s }
.mobile-menu.mm-open > :nth-child(5) { transition-delay:.34s }
.mobile-menu.mm-open > :nth-child(6) { transition-delay:.40s }
.mobile-menu.mm-open > :nth-child(7) { transition-delay:.46s }
.mm-group { opacity:0; transform:translateY(16px); transition:all .35s ease; display:flex; flex-direction:column; align-items:center; gap:0; }
.mm-group-toggle { font-family:'DM Serif Display',serif; font-size:28px; color:var(--navy); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0; }
.mm-group-toggle svg { width:16px; height:16px; stroke:var(--navy); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.mm-group-toggle.mm-expanded svg { transform:rotate(180deg); }
.mm-group-items { display:none; flex-direction:column; align-items:center; gap:6px; padding-top:10px; }
.mm-group-items.mm-show { display:flex; }
.mm-group-items a { font-family:'Outfit',sans-serif !important; font-size:16px !important; color:var(--text-light) !important; font-weight:500; }
.mm-group-items a:hover { color:var(--gold-dark) !important; }
.mobile-menu .mm-cta { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; background:var(--gold); color:var(--navy); padding:16px 40px; border-radius:10px; margin-top:12px }
.mobile-menu .mm-a11y { font-family:'Outfit',sans-serif; font-size:13px; color:var(--text-muted); border:1px solid var(--border); padding:10px 20px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:none; margin-top:4px; opacity:0; transform:translateY(16px); transition:all .35s ease; }
.mobile-menu .mm-a11y svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2 }

/* Mobile nav */
@media(max-width:900px) {
  .nav-links { display:none !important; }
  .burger { display:block }
  .nav .container { gap:12px; }
  .nav-inner { height:52px; }
  .mobile-menu { gap:20px; }
  .mobile-menu a { font-size:24px; }
  .mobile-menu .mm-cta { padding:14px 32px; font-size:14px; }
  .mm-a11y { margin-top:8px; font-size:13px; padding:10px 20px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:none; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:8px; cursor:pointer; font-family:'Outfit',sans-serif; }
  .mm-a11y svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
  .mm-a11y:hover { color:var(--gold); border-color:var(--gold); }
}

/* ===== FOOTER ===== */
.footer { background:var(--navy); padding:0; }

/* ===== COMBINED FOOTER ===== */
.site-footer {
  background:var(--navy); padding:0; position:relative;
}
.ft-main {
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px;
  max-width:1080px; margin:0 auto; padding:64px 28px 48px;
}

/* Left — Newsletter Card */
.ft-nl-card {
  background:linear-gradient(135deg, var(--white) 0%, #f9f7f3 100%);
  border-radius:16px; padding:36px 32px;
  border:1px solid rgba(201,149,60,.12);
  box-shadow:0 8px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.03);
}
.ft-nl-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--gold-pale); color:var(--gold-dark);
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; padding:5px 14px; border-radius:20px;
  margin-bottom:14px;
}
.ft-nl-badge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ft-nl-card h3 {
  font-family:'DM Serif Display',serif; font-size:23px;
  color:var(--navy); font-weight:400; margin-bottom:6px;
}
.ft-nl-sub {
  font-size:13px; color:var(--text-light); line-height:1.6;
  margin-bottom:18px;
}
.ft-nl-topics {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;
}
.ft-nl-topic {
  font-size:11px; font-weight:500; color:var(--text-muted);
  padding:4px 10px; border-radius:5px;
  background:var(--warm-bg); border:1px solid var(--border);
}
.ft-nl-form {
  display:flex; gap:10px; margin-bottom:10px;
}
.ft-nl-form input {
  flex:1; padding:12px 16px; border:1px solid var(--border);
  border-radius:10px; background:var(--warm-white);
  font-family:'Outfit',sans-serif; font-size:13px; color:var(--text);
  outline:none; transition:border-color .2s;
}
.ft-nl-form input:focus { border-color:var(--gold); }
.ft-nl-form input::placeholder { color:var(--text-muted); opacity:.5; }
.ft-nl-form button {
  background:var(--navy); color:var(--white); border:none;
  padding:12px 24px; border-radius:10px; font-weight:700; font-size:13px;
  cursor:pointer; font-family:'Outfit',sans-serif; white-space:nowrap;
  transition:all .25s; box-shadow:0 2px 8px rgba(15,31,61,.15);
}
.ft-nl-form button:hover { background:var(--gold); color:var(--navy); transform:translateY(-1px); }
.ft-nl-legal {
  font-size:11px; color:var(--text-muted); line-height:1.5;
}
.ft-nl-legal a { color:var(--gold-dark); }
.ft-nl-legal a:hover { color:var(--gold); }

/* Right — Navigation columns */
.ft-right { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.ft-nav-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px;
}
.ft-nav-col h4 {
  font-family:'Outfit',sans-serif; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px;
  color:var(--gold); opacity:.6; margin-bottom:18px;
}
.ft-nav-col a {
  display:block; font-size:14px; color:rgba(255,255,255,.55);
  padding:6px 0; transition:all .25s; letter-spacing:.1px;
}
.ft-nav-col a:hover { color:var(--white); }
.ft-nav-col a.ft-active { color:var(--white); font-weight:600; }

.ft-cta-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--gold);
  margin-top:20px; transition:all .25s; letter-spacing:.2px;
}
.ft-cta-link:hover { color:var(--gold-light); gap:12px; }
.ft-cta-link svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:inherit; }

/* Social icons — stroke style consistent with site */
.ft-social {
  display:flex; gap:10px; margin-top:4px;
}
.ft-social a {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.ft-social a:hover {
  background:rgba(201,149,60,.12); border-color:rgba(201,149,60,.25);
  transform:translateY(-2px);
}
.ft-social a svg {
  width:15px; height:15px;
  stroke:rgba(255,255,255,.45); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .25s;
}
.ft-social a:hover svg { stroke:var(--gold); }

/* Bottom bar */
.ft-bottom {
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 28px;
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.ft-copy {
  font-size:11px; color:rgba(255,255,255,.3); letter-spacing:.2px;
}
.ft-bottom-links {
  display:flex; gap:16px;
}
.ft-bottom-links a {
  font-size:11px; color:rgba(255,255,255,.3); transition:color .2s;
}
.ft-bottom-links a:hover { color:rgba(255,255,255,.6); }

@media(max-width:700px) {
  .ft-main { grid-template-columns:1fr; gap:28px; padding:48px 28px 36px; }
  .ft-bottom { flex-direction:column; gap:8px; text-align:center; }
  .ft-nl-form { flex-direction:column; }
  .ft-nav-row { gap:6px 16px; }
}

/* Footer meta — two rows, centered */
.footer-meta {
  padding:32px 0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.footer-links {
  display:flex; align-items:center; gap:8px;
}
.footer-links a {
  color:rgba(255,255,255,.6); font-size:13px; padding:4px 8px;
  border-radius:4px; transition:all .2s;
}
.footer-links a:hover { color:var(--white); background:rgba(255,255,255,.05); }
.footer-links .sep {
  color:rgba(255,255,255,.2); font-size:11px; user-select:none;
}
.footer-copy {
  color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.2px;
}

@media(max-width:600px) {
  .footer-nl-row { flex-direction:column; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
}

/* ===== STICKY BOTTOM BAR ===== */
.sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:var(--navy); padding:14px 0;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.sticky-bar.visible { transform:translateY(0); }
.sticky-bar.fading { opacity:0; transform:translateY(20px); pointer-events:none; }
.sticky-bar .container {
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.sticky-bar-text {
  font-size:14px; color:rgba(255,255,255,.75);
}
.sticky-bar-text strong { color:var(--white); }
@media(max-width:480px) {
  .sticky-bar-text { display:none; }
}

/* ===== CONSENT ROW (shared between footer + popup) ===== */
.consent-row { display:flex; align-items:flex-start; gap:10px; margin-top:14px; }
.consent-row input[type="checkbox"] { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer; }
.consent-row label { font-size:12px; line-height:1.5; cursor:pointer; }
.consent-row a { text-decoration:underline; }
.consent-light label { color:rgba(255,255,255,.72); }
.consent-light a { color:rgba(255,255,255,.85); }
.consent-dark label { color:var(--text-muted); }
.consent-dark a { color:var(--navy); }
.doi-notice {
  margin-top:10px; font-size:11px; line-height:1.5;
  display:flex; align-items:center; gap:6px;
}
.doi-notice::before {
  content:''; width:14px; height:14px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.doi-notice.light { color:rgba(255,255,255,.65); }
.doi-notice.dark { color:var(--text-muted); }

/* ===== SCROLL ANIMATIONS ===== */
/* WICHTIG: Kein translateY/translateX auf .reveal — das verschiebt Layout-Positionen
   und macht Scroll-Anchoring kaputt. Nur opacity für saubere Fade-Ins. */
.reveal {
  opacity:0;
  transition:opacity .8s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity:1; }

.reveal-delay-1 { transition-delay:.15s; }
.reveal-delay-2 { transition-delay:.3s; }
.reveal-delay-3 { transition-delay:.45s; }
.reveal-delay-4 { transition-delay:.6s; }

/* Skip animations on page navigation (set via JS) */
.no-reveal .reveal, .no-reveal .reveal.visible { opacity:1 !important; transition:none !important; }
.no-reveal .pain-moment, .no-reveal .process-step, .no-reveal .bs-cat { opacity:1 !important; transition:none !important; }
.no-reveal .pain-statement, .no-reveal .pain-context, .no-reveal .pain-pivot { opacity:1 !important; transition:none !important; }
.no-reveal .process-num { transition:none !important; }

/* Horizontal slide reveals — also opacity only */
.reveal.reveal-left { opacity:0; }
.reveal.reveal-left.visible { opacity:1; }
.reveal.reveal-right { opacity:0; }
.reveal.reveal-right.visible { opacity:1; }

/* ===== ACCESSIBILITY BUTTON + PANEL ===== */
.nav-a11y-btn { width:34px; height:34px; border-radius:50%; background:transparent; border:1.5px solid rgba(15,31,61,.15); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; padding:0; flex-shrink:0 }
.nav-a11y-btn:hover { background:var(--navy); color:var(--gold); border-color:var(--navy) }
.nav-a11y-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

.a11y-panel { position:fixed; top:70px; right:24px; z-index:801; width:280px; background:var(--navy); border-radius:16px; padding:24px; box-shadow:0 16px 48px rgba(15,31,61,.3); opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .3s }
.a11y-panel.a11y-open, .a11y-panel.a11y-panel-open { opacity:1; visibility:visible; transform:translateY(0) }
.a11y-panel h4 { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:var(--white); margin-bottom:18px; display:flex; align-items:center; gap:8px }
.a11y-panel h4 svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2 }

/* ===== STICKY CTA (Mobile) ===== */
.sticky-cta { display:none; position:fixed; bottom:0; left:0; right:0; z-index:99; background:var(--navy); padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); box-shadow:0 -4px 20px rgba(0,0,0,.15) }
.sticky-cta.visible { transform:translateY(0) }
.sticky-cta-inner { display:flex; align-items:center; gap:12px; max-width:480px; margin:0 auto }
.sticky-cta-text { flex:1; min-width:0 }
.sticky-cta-text span { display:block; font-size:13px; font-weight:600; color:var(--white); line-height:1.3 }
.sticky-cta-text small { font-size:11px; color:rgba(255,255,255,.55); font-weight:400 }
.sticky-cta-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--navy); font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; padding:10px 20px; border-radius:8px; border:none; cursor:pointer; transition:all .25s; text-decoration:none }
.sticky-cta-btn:hover { background:var(--gold-light); transform:translateY(-1px) }
.sticky-cta-btn::after { content:'\2192'; font-size:14px }

@media(max-width:900px) {
  .a11y-panel { right:12px; width:calc(100vw - 24px); max-width:300px }
  .sticky-cta { display:block }
}