:root{
  --navy: #150F45;
  --navy-2: #1E1660;
  --pink: #E80CC0;
  --pink-2: #C40FA6;
  --purple: #6B21D8;
  --blue: #1E7FD6;
  --cyan: #23C4E8;
  --bg: #ffffff;
  --bg-tint: #F5F6FB;
  --border: #E7E7F0;
  --text: #1A1830;
  --text-muted: #6B6E85;
  --radius: 16px;
  --gradient-hero: linear-gradient(135deg,#0C0660 0%,#061676 25%,#022A9B 50%,#7C10C6 75%,#FE01FC 100%);
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
h1,h2,h3{font-family: var(--font-heading); color: var(--navy); font-weight:700; line-height:1.15;}
h2{font-size:2rem;}
#fuer-wen h2, #themen h2, #ueber-uns h2, #finanz-oekosystem h2, #faq h2{font-size:2.52rem;}
h3{font-size:1.1rem;}

.container{
  max-width:1235px;
  margin:0 auto;
  padding:0 24px;
}
.text-center{text-align:center;}

.section{padding:88px 0;}
#fuer-wen{padding:126px 0;}
#themen{padding:126px 0;}
#ueber-uns{padding:126px 0;}
#finanz-oekosystem{padding:126px 0;}
.section-tinted{background:#F1F5FB;}
.section-accent{
  background:url("../Verlaeufe/3.png");
  background-size:cover;
  background-position:top left;
  background-repeat:no-repeat;
}
.section-sub{color:var(--text-muted);margin-top:10px;font-size:1.197rem;}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:6px 14px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
}
.badge-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);}
.badge-outline-cyan{background:rgba(35,196,232,.08);color:#00BCE5;border:1px solid rgba(35,196,232,.4);font-weight:400;font-size:.944rem;}
.badge-muted{background:#DEE5F3;color:#00279A;margin-bottom:14px;text-transform:uppercase;font-size:.858rem;padding:6.6px 15.4px;}
.badge-pink{background:#F503FC;color:#fff;font-size:.72rem;}
.badge-cyan{background:#00BCE5;color:#fff;font-size:.72rem;}
.badge-navy{background:#00279A;color:#fff;font-size:.72rem;}
.badge-star{height:1.2em;width:auto;flex:none;margin-right:5px;filter:brightness(0) invert(1);}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{opacity:.9;}
.btn-primary{background:#F503FC;color:#fff;}
.btn-dark{background:var(--navy);color:#fff;}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--border);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-partner{background:#150F45;color:#fff;padding:8px 18px;font-size:.85rem;}
.partner-cta{margin-top:32px;}
.partner-cta .section-sub{max-width:1000px;margin-left:auto;margin-right:auto;font-size:.9576rem;font-style:italic;}
.partner-cta .btn-partner{margin-top:18px;}

/* Intro Hero (Coming Soon) */
.intro-hero{
  position:relative;
  background:url("../Verlaeufe/4.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  padding:162px 0;
}
.intro-hero .hero-copy h1{font-size:4.43rem;}
.intro-hero .hero-sub{font-size:.99rem;}
.fingraph{
  position:relative;
  width:100%;max-width:480px;height:420px;
  margin:0 auto;
}
.fingraph-lines{position:absolute;inset:0;width:100%;height:100%;}
.fingraph-lines line{stroke:rgba(255,255,255,.26);stroke-width:.15;animation:fingraphLine 6s ease-in-out infinite;}
.fingraph-lines line:nth-child(2n){animation-delay:1s;animation-duration:7s;}
.fingraph-lines line:nth-child(3n){animation-delay:2s;animation-duration:5s;}
.fingraph-lines line:nth-child(5n){animation-delay:.6s;animation-duration:8s;}
.fingraph-dot{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:left,top;
}
.fingraph-dot--magenta{background:#F503FC;}
.fingraph-dot--cyan{background:#00BCE5;}
.fingraph-dot--lilac{background:#EDD2F3;}
.fingraph-node{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:8px 16px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  animation:fingraphFloat 5s ease-in-out infinite;
  transition:opacity .35s ease, filter .35s ease, box-shadow .35s ease;
  will-change:left,top;
}
.fingraph-node--cyan{background:rgba(35,196,232,.08);border:1px solid rgba(35,196,232,.45);color:#6EE0F5;box-shadow:0 0 8px rgba(35,196,232,.35);text-shadow:0 0 6px rgba(35,196,232,.6);}
.fingraph-node--pink{background:rgba(232,12,192,.08);border:1px solid rgba(232,12,192,.45);color:#F5A6E8;box-shadow:0 0 8px rgba(232,12,192,.35);text-shadow:0 0 6px rgba(232,12,192,.6);}
.fingraph-node--neutral{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.2);text-shadow:0 0 6px rgba(255,255,255,.35);}
.fingraph-node--active{background:#fff;color:var(--navy);border:1px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.25);}
.fingraph-node.is-lit{filter:brightness(1.35) saturate(1.4);box-shadow:0 0 18px rgba(255,255,255,.55);}
.fingraph-node.is-dim{opacity:.3;filter:grayscale(70%);}
.fingraph-lines line.is-hot{stroke:rgba(255,255,255,.6);stroke-width:.28;}

@keyframes fingraphFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-8px);}
}
@keyframes fingraphLine{
  0%,100%{opacity:.65;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .fingraph-node,.fingraph-dot,.fingraph-lines line{animation:none;}
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:19px;
  min-height:72px;
  padding-top:20.22px;padding-bottom:20.22px;
}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:var(--font-heading);font-weight:800;font-size:1rem;letter-spacing:.02em;color:var(--navy);text-transform:uppercase;flex-shrink:0;margin-left:27px;}
.logo-img{height:57.00px;width:auto;display:block;flex-shrink:0;}
.logo-tagline{font-family:var(--font-body);font-weight:400;font-size:.72rem;letter-spacing:.01em;text-transform:none;color:#B8BCC8;display:inline-block;white-space:nowrap;transform-origin:left center;}
.main-nav{display:flex;gap:28px;font-weight:500;font-size:.95rem;}
.main-nav a:hover{color:var(--pink);}
.header-actions{display:flex;align-items:center;gap:12px;}
.header-actions .btn{align-self:center;}
.header-actions-mobile{display:none;}

/* Hero */
.hero{
  position:relative;
  background:url("../Verlaeufe/4.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  padding:80px 0 100px;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}
/* Grid items default to min-width:auto, which lets their content's
   natural (unwrapped) width force the track wider than the viewport.
   Pinning it to 0 keeps text wrapping in control of the width instead. */
.hero-inner > *{min-width:0;}
.hero-copy h1{
  color:#fff;
  font-size:3.1rem;
  margin:18px 0 20px;
}
.hero-sub{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:28px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

.hero-visual{position:relative;min-height:340px;}
.finance-card{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius);
  padding:22px;
  width:100%;
  max-width:360px;
  margin:60px auto 0;
  box-shadow:0 30px 60px rgba(20,11,74,.35);
  position:relative;
}
.finance-card-header{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-weight:700;
  color:var(--navy);margin-bottom:18px;font-size:.95rem;
}
.finance-card-icon{width:24px;height:24px;object-fit:contain;}
.progress-list li{
  display:grid;
  grid-template-columns:100px 1fr 40px;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  font-size:.85rem;
}
.progress-list li:last-child{margin-bottom:0;}
.progress-label{color:var(--text);font-weight:500;}
.progress-track{
  height:7px;background:#EFEFF5;border-radius:999px;overflow:hidden;
}
.progress-fill{
  display:block;height:100%;border-radius:999px;
  width:var(--bar-width,0%);
  animation:fillBar 1.3s cubic-bezier(.25,.8,.3,1) both;
}
.fill-pink{background:linear-gradient(90deg,#E80CC0,#F857D6);}
.fill-purple{background:linear-gradient(90deg,#7C3AED,#A855F7);}
.fill-indigo{background:linear-gradient(90deg,#4338CA,#6366F1);}
.fill-cyan{background:linear-gradient(90deg,#1E7FD6,#23C4E8);}
.progress-list li:nth-child(1) .progress-fill{animation-delay:.2s;}
.progress-list li:nth-child(2) .progress-fill{animation-delay:.35s;}
.progress-list li:nth-child(3) .progress-fill{animation-delay:.5s;}
.progress-list li:nth-child(4) .progress-fill{animation-delay:.65s;}
.progress-value{color:var(--text-muted);font-weight:600;text-align:right;}

@keyframes fillBar{
  from{width:0%;}
  to{width:var(--bar-width);}
}

.floating-tag{
  position:absolute;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(13px) saturate(160%);
  -webkit-backdrop-filter:blur(13px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:12px;
  padding:10px 16px;
  font-size:.8rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}
.tag-top{top:39px;right:10px;z-index:2;}
.tag-bottom{
  left:10px;bottom:12px;
  background:rgba(255,255,255,.54);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  box-shadow:0 15px 30px rgba(20,11,74,.25);
  max-width:300px;
}
.tag-bottom strong{display:block;font-size:.82rem;color:#fff;white-space:nowrap;}
.tag-bottom small{color:rgba(255,255,255,.8);font-weight:500;font-size:.72rem;}
.tag-icon{
  display:inline-flex;
  color:var(--cyan);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(255,255,255,.5));
}

/* Hero visual — subtle motion */
.tag-top{animation:floatTagTop 6s ease-in-out infinite;}
.tag-bottom{animation:floatCardAlt 7s ease-in-out infinite 1.2s;}

@keyframes floatCardAlt{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}
@keyframes floatTagTop{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@media (prefers-reduced-motion: reduce){
  .finance-card,.tag-top,.tag-bottom,.progress-fill{animation:none;}
}

/* Audience cards */
.audience-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:48px;
}
.audience-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.audience-card:hover{box-shadow:0 20px 40px rgba(20,11,74,.08);transform:translateY(-3px);}
.audience-card p{color:var(--text-muted);font-size:.9rem;margin-top:8px;}
.icon-box{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.audience-card-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.audience-card-header .icon-box{flex-shrink:0;}
.audience-card-header h3{margin:0;}
.icon-purple{background:rgba(0,39,154,.1);color:#00279A;width:55px;height:55px;margin-bottom:0;}
.icon-cyan-custom{background:rgba(0,188,229,.1);color:#00BCE5;width:55px;height:55px;margin-bottom:0;}
.icon-magenta-custom{background:rgba(245,3,252,.1);color:#F503FC;width:55px;height:55px;margin-bottom:0;}
.icon-violet-custom{background:rgba(106,53,218,.1);color:#6A35DA;width:55px;height:55px;margin-bottom:0;}
.icon-blue{background:#E4F1FD;color:#1E7FD6;}
.icon-pink{background:#FCE6F5;color:#E80CC0;}
.icon-navy{background:#E9EAF7;color:#150F45;}

/* Topics panel */
.topics-panel{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:48px;
  box-shadow:0 20px 50px rgba(20,11,74,.05);
}
.topics-sidebar{
  padding:14px;
  border-right:1px solid var(--border);
}
.topics-sidebar li{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-radius:10px;
  font-size:.92rem;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  margin-bottom:4px;
}
.topics-sidebar li:hover{background:#F5F3FF;}
.topics-sidebar li.active{
  background:#EDE8FF;
  color:#00279A;
  font-weight:700;
}
.topics-sidebar li .t-icon{
  width:56.25px;height:56.25px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:inherit;
}
.t-icon img{width:37.5px;height:37.5px;object-fit:contain;display:block;}
.t-icon[data-icon="konsum"] img,
.t-icon[data-icon="absicherung"] img{width:56.25px;height:56.25px;}
.t-icon[data-icon="sparen"] img,
.t-icon[data-icon="altersvorsorge"] img,
.t-icon[data-icon="alltag"] img{width:45px;height:45px;}
.topics-content{padding:32px 36px;}
.topics-content-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.topics-content-header .t-icon{
  width:56.25px;height:56.25px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#5B21D6;
}
.topics-content h3{font-size:1.5rem;}
.topics-content > p.desc{color:var(--text-muted);margin:8px 0 22px;font-size:.95rem;}
.eyebrow{
  font-size:.864rem;font-weight:700;letter-spacing:.06em;
  color:var(--text-muted);text-transform:uppercase;
  margin:20px 0 12px;
  border-top:1px solid var(--border);
  padding-top:20px;
}
.topics-content .eyebrow:first-of-type{border-top:none;padding-top:0;}
.themen-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.themen-grid li{
  background:#F1F5FB;
  border-radius:8px;
  padding:10px 14px;
  font-size:.88rem;
  display:flex;align-items:center;gap:8px;
}
.themen-grid li::before{
  content:"";width:6px;height:6px;border-radius:999px;background:#00279A;flex:none;
}
.takeaway-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.9rem;margin-bottom:8px;color:var(--text);
}
.takeaway-list li svg{flex:none;color:#16A34A;margin-top:2px;}

/* Trust grid */
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.trust-section{padding:50px 0;}
.trust-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.trust-card:hover{box-shadow:0 20px 40px rgba(20,11,74,.08);transform:translateY(-3px);}
.trust-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.trust-star{width:35px;height:35px;object-fit:contain;display:block;flex-shrink:0;}
.trust-card h3{font-size:1rem;margin:0;}
.trust-card p{color:var(--text-muted);font-size:.88rem;}

/* Partner showcase */
.partner-showcase{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:40px auto 0;
  height:240px;
}
.partner-showcase-logos{
  position:relative;
  z-index:2;
  width:375px;
  height:156.25px;
}
.partner-showcase-logo{
  position:absolute;
  inset:0;
  margin:auto;
  width:auto;height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  opacity:0;
  animation:partner-showcase-fade 15s infinite;
}
.partner-showcase-logo:nth-child(1){animation-delay:0s;}
.partner-showcase-logo:nth-child(2){animation-delay:3s;}
.partner-showcase-logo:nth-child(3){animation-delay:6s;}
.partner-showcase-logo:nth-child(4){animation-delay:9s;}
.partner-showcase-logo:nth-child(5){animation-delay:12s;}
@keyframes partner-showcase-fade{
  0%{opacity:0;}
  3%{opacity:1;}
  17%{opacity:1;}
  20%{opacity:0;}
  100%{opacity:0;}
}

/* Roadmap */
.roadmap{margin-top:120px;}
.roadmap-line{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  position:relative;margin-bottom:-24px;
}
.roadmap-line::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,#E80CC0,#23C4E8,#150F45);
  z-index:0;
}
.roadmap-line .node{justify-self:start;}
.node{
  width:44px;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.85rem;
  position:relative;z-index:1;
  box-shadow:0 8px 18px rgba(20,11,74,.2);
}
.node-pink{background:#F503FC;}
.node-cyan{background:#00BCE5;}
.node-navy{background:#00279A;}
.roadmap-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:56px;
}
.roadmap-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;
  position:relative;overflow:hidden;
}
.roadmap-card .badge{margin-bottom:16px;}
.roadmap-card-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.roadmap-card-header .icon-box{width:55px;height:55px;flex-shrink:0;margin-bottom:0;}
.roadmap-card-header h3{margin:0;}
.roadmap-card-image{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease;
}
.roadmap-card-image img{width:100%;height:100%;object-fit:cover;display:block;}
@media (hover:hover) and (pointer:fine){
  .roadmap-card-hover:hover .roadmap-card-image{opacity:1;visibility:visible;}
}
.roadmap-card-hover.is-active .roadmap-card-image{opacity:1;visibility:visible;}
.roadmap-card p{color:var(--text-muted);font-size:.9rem;margin-top:6px;}

/* Testimonial */
.testimonial-section{
  background:url("../Verlaeufe/4.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.testimonial{
  display:flex;align-items:center;gap:40px;
}
.testimonial-photo{
  width:225px;height:225px;border-radius:16px;flex:none;
  object-fit:cover;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.testimonial .quote{font-family:var(--font-heading);font-size:1.4rem;font-weight:600;color:#fff;line-height:1.35;}
.testimonial .author{margin-top:16px;font-weight:700;color:#fff;}
.testimonial .role{color:rgba(255,255,255,.75);font-size:.9rem;}

/* FAQ */
.faq-list{max-width:760px;margin:44px auto 0;}
.faq-item{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:20px 22px;margin-bottom:12px;cursor:pointer;
}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:.98rem;gap:16px;
}
.faq-toggle{
  width:24px;height:24px;border-radius:999px;background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-size:1rem;color:var(--navy);
}
.faq-answer{
  max-height:0;overflow:hidden;
  color:var(--text-muted);font-size:.92rem;line-height:1.6;
  transition:max-height .25s ease, margin-top .25s ease;
}
.faq-item.open .faq-answer{margin-top:14px;}

/* Footer CTA */
.footer-cta{
  position:relative;
  background:url("../Verlaeufe/4.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:90px 0;
  overflow:hidden;
  margin-top:40px;
}
.footer-cta-stars{
  position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 55%, rgba(255,255,255,.3) 50%, transparent 51%);
  background-size:500px 500px;
}
.footer-cta-inner{position:relative;}
.logo-light{justify-content:center;color:#fff;margin-bottom:24px;letter-spacing:.05em;}
.footer-logo-img{height:63px;width:auto;display:block;}
.footer-logo-below{display:flex;justify-content:center;margin-top:32px;}
.footer-cta h2{color:#fff;font-size:2.2rem;margin-bottom:10px;}
.footer-cta p{color:rgba(255,255,255,.85);margin-bottom:28px;}
.footer-cta .hero-cta{justify-content:center;}

.site-footer{background:#fff;padding:24px 0;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--text-muted);flex-wrap:wrap;gap:12px;
}
.footer-links{display:flex;gap:20px;}
.footer-links a:hover{color:var(--pink);}

/* Responsive */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-copy h1{font-size:2.4rem;}
  .intro-hero .hero-copy h1{font-size:2.88rem;}
  .fingraph{display:none;}
  /* Keep the floating tags anchored close to the card instead of
     spreading across the full stacked-column width, but let the card
     itself use the available width (instead of desktop's fixed
     360px cap) so the progress bars aren't squeezed down thin */
  .hero-visual{max-width:480px;margin:0 auto;}
  .finance-card{max-width:none;}
  .audience-grid{grid-template-columns:repeat(2,1fr);}
  .topics-panel{grid-template-columns:1fr;}
  .topics-sidebar{
    display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);
    scroll-snap-type:x proximity;
    scroll-padding-left:14px;
    -webkit-mask-image:linear-gradient(to right, #000 92%, transparent 100%);
    mask-image:linear-gradient(to right, #000 92%, transparent 100%);
  }
  .topics-sidebar li{white-space:nowrap;scroll-snap-align:start;}
  .trust-grid{grid-template-columns:1fr;}
  .roadmap-cards{grid-template-columns:1fr;}
  .roadmap-line{display:none;}
  .testimonial{flex-direction:column;text-align:center;}
}
/* Covers phones in landscape orientation (roughly 640-900px wide),
   which don't fit the full desktop header (logo tagline + two buttons).
   Also matched by height/orientation so wide phones in landscape
   (e.g. iPhone Pro Max at ~930px) get the compact header too, since
   width alone can't reliably tell a landscape phone from a tablet. */
@media (max-width:900px), (orientation:landscape) and (max-height:500px){
  .logo{margin-left:0;}
  .logo-tagline{display:none;}
  .logo-img{height:68.40px;}
  .header-actions .btn{padding:10px 16px;font-size:.85rem;}
  .header-actions-desktop{display:none;}
  .header-actions-mobile{display:inline-flex;}
}
@media (max-width:640px){
  .audience-grid{grid-template-columns:1fr;}
  .themen-grid{grid-template-columns:1fr;}
  #finanz-oekosystem{background:#fff;}

  /* Prevent horizontal overflow on small screens */
  .container{padding:0 20px;}
  .badge{white-space:normal;text-align:center;}

  /* Bring oversized headings down to a mobile-appropriate size
     so text keeps a comfortable margin instead of running edge to edge */
  .intro-hero{padding:96px 0 80px;}
  .intro-hero .hero-copy h1{font-size:3rem;}
  h2{font-size:1.6rem;}
  #fuer-wen h2, #themen h2, #ueber-uns h2, #finanz-oekosystem h2, #faq h2{font-size:1.8rem;}
}
/* Narrow phones: the wide horizontal logo lockup plus the login button
   no longer both fit at full size without breaking the minimum gaps
   above, so shrink the logo just on these widths to keep the gaps. */
@media (max-width:480px){
  .logo-img{height:47.18px;}
}
/* Very narrow phones: even the reduced size above overflows, so shrink
   further just on these widths to keep the minimum gaps. */
@media (max-width:364px){
  .logo-img{height:39.31px;}
}

/* Phones in landscape (short viewport height): there's enough width to
   show the "Finanziell glücklich" graphic beside the text again, just
   with everything scaled down to fit the limited vertical space. */
@media (orientation:landscape) and (max-height:500px) and (min-width:560px){
  .hero{padding:36px 0;}
  .hero .hero-inner{grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;}
  .hero .hero-copy h1{font-size:1.6rem;margin:10px 0 12px;}
  .hero .hero-sub{font-size:.92rem;margin-bottom:16px;}
  /* Only narrow the box here — leave min-height, margin and padding at
     their portrait values so the finance card and the two floating tags
     keep the exact same spacing as in the portrait layout. */
  .hero .hero-visual{max-width:280px;margin:0 auto;}

  /* The "coming soon" intro hero has the same short-viewport problem:
     a 4.43rem heading and 162px of vertical padding, both sized for
     desktop, otherwise stay active on wide landscape phones (e.g.
     iPhone SE/14/14 Pro Max at 667-932px) since it only got scaled
     down below the 640px portrait breakpoint. */
  .intro-hero{padding:48px 0;}
  .intro-hero .hero-copy h1{font-size:2.52rem;}
}