/* =========================================================
   EIP-Media — Design System v3.0
   Ultramarin · Limette (immer Fläche, nie Text) · Space Grotesk
   ========================================================= */

:root{
  /* Hauptfarbe — Ultramarin */
  --blue-600:#1b33e0;
  --blue-700:#1429b5;
  --blue-400:#5468f0;
  --blue-200:#aeb9ff;
  --blue-050:#eef0ff;

  /* Signalakzent — Limette (immer Fläche, nie Text) */
  --lime:#c6ff00;
  --lime-deep:#9fcc00;

  /* Anker & Text */
  --ink-900:#0a0a0a;
  --petrol-800:#142b3a;
  --ink-500:#5a5f66;
  --ink-300:#9298a0;

  /* Flächen */
  --paper:#ffffff;
  --cream:#f7f5f0;
  --surface:#f4f4f2;
  --line:#e6e5e1;

  /* Radien */
  --r-card:12px;
  --r-button:8px;
  --r-md:8px;
  --r-sm:6px;

  /* Schatten */
  --shadow-button:0 2px 8px rgba(10,10,10,.10);
  --shadow-card:0 1px 3px rgba(10,10,10,.06);

  /* Schrift */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;

  /* Spacing (8pt) */
  --s-1:4px;--s-2:8px;--s-3:16px;--s-4:24px;
  --s-5:32px;--s-6:48px;--s-7:64px;--s-8:96px;

  --maxw:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:var(--s-8) 0}
.section--tight{padding:var(--s-7) 0}
@media(max-width:720px){.section{padding:var(--s-7) 0}}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;color:var(--ink-900)}
.h1,h1{font-size:clamp(34px,6vw,56px);line-height:1.02;letter-spacing:-.025em}
.h2,h2{font-size:clamp(28px,4vw,34px);line-height:1.1;letter-spacing:-.015em}
.h3,h3{font-size:22px;line-height:1.25;letter-spacing:-.01em;font-weight:600}
h4{font-size:18px;font-weight:600;letter-spacing:-.01em}
p{color:var(--ink-900)}
.lead{font-size:19px;color:var(--ink-500);line-height:1.6}
.muted{color:var(--ink-500)}

.eyebrow{
  font-family:var(--font-display);
  font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-600);
  display:inline-block;margin-bottom:var(--s-3);
}
.eyebrow--ondark{color:var(--blue-200)}
.eyebrow--onlime{color:rgba(10,10,10,.55)}

/* Headline-Akzent: ein Schlüsselwort */
.accent-underline{
  background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%);
  padding:0 .04em;
}
.accent-blue{color:var(--blue-600)}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  padding:14px 28px;border-radius:var(--r-button);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid transparent;cursor:pointer;
  line-height:1;text-align:center;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,color .2s ease,border-color .2s ease;
}
/* Fill-Sweep beim Hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-fill,rgba(255,255,255,.14));
  transform:translateX(-101%);
  transition:transform .36s cubic-bezier(.45,0,.18,1);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
/* Gleitender Pfeil */
.btn::after{content:"\2192";font-weight:700;display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,10,10,.12)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px}
.btn--primary{background:var(--lime);color:var(--ink-900);box-shadow:var(--shadow-button);--btn-fill:#aef000}
.btn--secondary{background:var(--blue-600);color:#fff;--btn-fill:var(--blue-700)}
.btn--dark{background:var(--ink-900);color:#fff;--btn-fill:#262626}
.btn--ghost{background:transparent;border-color:var(--blue-600);color:var(--blue-600);--btn-fill:var(--blue-050)}
.btn--ghost:hover{color:var(--blue-700);border-color:var(--blue-700)}
.btn--ghost-blue{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;--btn-fill:rgba(255,255,255,.16)}
.btn--ghost-blue:hover{border-color:#fff}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after{transition:none}
  .btn:hover{transform:none}
  .btn::before{display:none}
}
.btn-sub{display:block;font-family:var(--font-body);font-size:13px;color:var(--ink-500);margin-top:var(--s-3)}
.btn-sub--ondark{color:#ffffff}
.btn-sub--onlime{color:rgba(10,10,10,.6)}
.cta-group{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cta-group--center{align-items:center;text-align:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center}
.logo-word{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--ink-900)}
.logo-word .dot{color:var(--lime-deep)}
.nav-links{display:flex;align-items:center;gap:var(--s-5);list-style:none}
.nav-links a{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-900);transition:color .15s;position:relative}
.nav-links a:hover{color:var(--blue-600)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue-600);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:var(--s-3)}
.nav-cta .btn{padding:11px 20px;font-size:15px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink-900);margin:5px 0;transition:.2s}
.nav-cta-mobile{display:none}
/* Ressourcen-Dropdown */
.nav-dd{position:relative}
.nav-dd-toggle{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-900);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;line-height:1}
.nav-dd-toggle:hover{color:var(--blue-600)}
.nav-dd-toggle .chev{transition:transform .2s}
.nav-dd-menu{position:absolute;top:100%;left:0;margin-top:14px;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 12px 34px rgba(10,10,10,.12);padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd:hover .nav-dd-toggle .chev,.nav-dd.open .nav-dd-toggle .chev{transform:rotate(180deg)}
.nav-dd-menu li{width:100%}
.nav-dd-menu a{display:block;padding:11px 13px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-900)}
.nav-dd-menu a::after{display:none}
.nav-dd-menu a:hover{background:var(--blue-050);color:var(--blue-700)}
@media(max-width:920px){
  .nav-links{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 24px 16px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:16px}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .nav-cta-mobile{display:block;margin-top:14px}
  .nav-links .nav-cta-mobile a{display:inline-flex;width:100%;padding:15px 24px;border-bottom:0;font-size:16px}
  .nav-links .nav-cta-mobile a::after{transform:none}
  /* Dropdown im Mobil-Menü: inline aufklappbar */
  .nav-dd-toggle{display:flex;width:100%;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-dd-menu{position:static;opacity:1;visibility:hidden;transform:none;display:none;margin-top:0;border:0;box-shadow:none;border-radius:0;padding:4px 0 8px 16px;min-width:0}
  .nav-dd.open .nav-dd-menu{display:block;visibility:visible}
  .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:none}
  .nav-dd.open .nav-dd-menu{display:block}
  .nav-dd-menu a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
}

/* ---------- Hero ---------- */
.hero{background:var(--cream);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:center;padding-top:var(--s-8);padding-bottom:var(--s-8)}
.hero h1{margin:8px 0 var(--s-4)}
.hero .lead{max-width:34em;margin-bottom:var(--s-5)}
.hero-visual{position:relative}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-6);padding-top:var(--s-6);padding-bottom:var(--s-7)}
  .hero-visual{order:0;max-width:460px;margin:0 auto;width:100%}
  .hero .lead{margin-bottom:var(--s-4)}
}

/* ---------- Logo-Slider ---------- */
.logos{background:var(--cream);padding:var(--s-5) 0;overflow:hidden}
/* Untere Logo-Leiste direkt vor dem Footer: weiß (klare Trennung zum dunklen Footer) */
.logos:has(+ .site-footer){background:var(--paper)}
.logos-track{display:flex;align-items:center;gap:120px;width:max-content;animation:scroll 24s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
.logos-track img{height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.2s}
.logos-track img:hover{filter:grayscale(0);opacity:1}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5)}
.card--cream{background:var(--cream);border:0}
.card--dark{background:var(--ink-900);color:#fff;border:0}
.card--dark h2,.card--dark h3,.card--dark h4{color:#fff}
.card--lime-outline{background:var(--ink-900);color:#fff;border:1.5px solid var(--lime)}

.tag{
  display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-600);background:var(--blue-050);
  padding:5px 10px;border-radius:var(--r-sm);margin-bottom:var(--s-3);
}

/* Generic grids */
.grid{display:grid;gap:var(--s-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.section-head{max-width:680px;margin-bottom:var(--s-6)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{color:var(--ink-500);margin-top:var(--s-3);font-size:18px}

/* ---------- Problem / Benefit cards ---------- */
.benefit h3{margin-bottom:var(--s-2)}
.benefit p{color:var(--ink-500)}
.icon-badge{
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--blue-050);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s-4);
}
.icon-badge svg{width:26px;height:26px}

/* ---------- System steps ---------- */
.step{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center;margin-bottom:var(--s-6)}
.step--reverse .step-media{order:-1}
.step-num{
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--blue-600);letter-spacing:.04em;margin-bottom:var(--s-2);
}
.step h3{margin-bottom:var(--s-3)}
.step p{color:var(--ink-500)}
.step-media{background:var(--cream);border-radius:var(--r-card);padding:var(--s-5);display:flex;align-items:center;justify-content:center}
.step-media img{border-radius:var(--r-md);box-shadow:var(--shadow-card)}
@media(max-width:820px){
  .step{grid-template-columns:1fr;gap:var(--s-4)}
  .step--reverse .step-media{order:0}
}

/* ---------- Signature block: Limette ---------- */
.lime-block{background:var(--lime);color:var(--ink-900);border-radius:var(--r-card)}
.lime-block .eyebrow{color:rgba(10,10,10,.55)}
.lime-block h2{color:var(--ink-900);max-width:18em}
.lime-block p{color:rgba(10,10,10,.78);max-width:34em;margin-top:var(--s-3)}
.lime-block .inner{padding:var(--s-8) var(--s-7)}
@media(max-width:720px){.lime-block .inner{padding:var(--s-7) var(--s-4)}}

/* ---------- Signature block: Schwarz Ergebnis ---------- */
.result-block{background:var(--ink-900);color:#fff;border-radius:var(--r-card)}
.result-block .inner{padding:var(--s-7) var(--s-7)}
.result-block .eyebrow{color:var(--blue-200)}
.result-block h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-6)}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,6vw,60px);line-height:1;color:var(--lime);letter-spacing:-.02em}
.stat-label{color:var(--ink-300);font-size:14px;margin-top:var(--s-2)}
@media(max-width:720px){.stats{grid-template-columns:1fr;gap:var(--s-4)}}

/* ---------- Testimonials ---------- */
.tcard{border-radius:var(--r-card);padding:var(--s-5)}
.tcard--light{background:var(--paper);border:1px solid var(--line)}
.tcard--dark{background:var(--petrol-800);color:#fff}
.tcard .tlogo{height:38px;width:auto;object-fit:contain;margin-bottom:var(--s-4)}
.tcard h3{font-size:18px;font-weight:600;margin-bottom:var(--s-3)}
.tquote{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.4;color:inherit}
.tcard--light .tquote{color:var(--ink-900)}
.tperson{display:flex;align-items:center;gap:12px;margin-top:var(--s-4)}
.tperson .ini{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:15px;background:var(--petrol-800);color:#fff;flex:none}
.tcard--dark .tperson .ini{background:var(--blue-600);color:#fff}
.tname{font-family:var(--font-display);font-weight:600;font-size:14px}
.trole{font-size:12px;color:var(--ink-500)}
.tcard--dark .trole{color:var(--blue-200)}

/* ---------- Case studies ---------- */
.case{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.case-media{aspect-ratio:16/9;background:var(--cream);overflow:hidden}
.case-media img,.case-media iframe{width:100%;height:100%;object-fit:cover;border:0}
.case-body{padding:var(--s-5)}
.case-head{display:flex;align-items:center;gap:14px;margin-bottom:var(--s-4)}
.case-head img{height:42px;width:auto;max-width:120px;object-fit:contain}
.case-head h3{font-size:18px;font-weight:600}
.case h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);font-family:var(--font-display);margin:var(--s-4) 0 var(--s-2)}
.checklist{list-style:none}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;color:var(--ink-500);font-size:15px}
.checklist li svg{flex:none;width:18px;height:18px;margin-top:3px}

/* result-pill list (kundenergebnisse) */
.result-list{list-style:none}
.result-list li{display:flex;gap:10px;align-items:center;padding:7px 0;font-family:var(--font-display);font-weight:600;font-size:17px}
.result-list li svg{flex:none;width:20px;height:20px}

/* ---------- Steps / Process (So starten wir) ---------- */
.process{counter-reset:step}
.pstep{position:relative;padding:var(--s-5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.pstep .pnum{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;background:var(--blue-600);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4)}
.pstep h3{font-size:19px;margin-bottom:var(--s-2)}
.pstep p{color:var(--ink-500);font-size:15px}

/* ---------- Team ---------- */
.team-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.team-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.team-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4);text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s}
.team-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--blue-200)}
.team-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);margin-bottom:var(--s-3)}
.team-card .tname{font-size:17px}
.team-card .trole{font-size:13px;color:var(--ink-500);margin-top:2px}
@media(max-width:860px){.team-layout{grid-template-columns:1fr;gap:var(--s-5)}}
@media(max-width:420px){.team-cards{grid-template-columns:1fr 1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:var(--s-3);background:var(--paper);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink-900);
  padding:var(--s-4) var(--s-5);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .chev{flex:none;transition:transform .2s;color:var(--blue-600)}
.faq-item.open .faq-q .chev{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 var(--s-5)}
.faq-item.open .faq-a{max-height:520px;padding-bottom:var(--s-5)}
.faq-a p{color:var(--ink-500)}

/* ---------- Blog ---------- */
.post-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);display:block;transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.post-card .pimg{aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.post-card .pimg img{width:100%;height:100%;object-fit:cover}
.post-card .pbody{padding:var(--s-5)}
.post-date{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--ink-500);text-transform:uppercase}
.post-card h3{margin-top:var(--s-2);font-size:21px}

/* ---------- Article ---------- */
.article{max-width:760px;margin:0 auto}
.article-head{max-width:820px;margin:0 auto var(--s-6)}
.article .lead{margin-top:var(--s-4)}
.author{display:flex;align-items:center;gap:14px;margin-top:var(--s-5)}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.author .tname{font-size:16px}
.article-body h2{margin:var(--s-7) 0 var(--s-3)}
.article-body h3{margin:var(--s-5) 0 var(--s-2)}
.article-body h4{margin:var(--s-4) 0 var(--s-1);color:var(--blue-600);font-family:var(--font-display)}
.article-body p{margin-bottom:var(--s-3);color:var(--ink-900)}
.article-body ul{margin:0 0 var(--s-3) 22px;color:var(--ink-500)}
.article-body li{margin-bottom:6px}
.article-body blockquote{
  border-left:4px solid var(--lime);background:var(--cream);
  padding:var(--s-4) var(--s-5);border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s-5) 0;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.4;color:var(--ink-900)
}
.article-body table{width:100%;border-collapse:collapse;margin:var(--s-5) 0;font-size:14px}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.article-body th{background:var(--ink-900);color:#fff;font-family:var(--font-display);font-weight:600}
.article-body tr:nth-child(even) td{background:var(--cream)}

/* ---------- Legal pages ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{margin:var(--s-6) 0 var(--s-3);font-size:24px}
.legal p{color:var(--ink-500);margin-bottom:var(--s-3)}
.legal a{color:var(--blue-600)}
.legal strong{color:var(--ink-900)}

/* ---------- Footer ---------- */
.site-footer{background:var(--petrol-800);color:#fff;padding:var(--s-7) 0 var(--s-5)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-6);flex-wrap:wrap;padding-bottom:var(--s-5);border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .logo-word{color:#fff}
.site-footer .logo-word .dot{color:var(--lime)}
.footer-tagline{color:var(--blue-200);max-width:30em;margin-top:var(--s-3);font-size:15px}
.footer-socials{display:flex;gap:12px}
.footer-socials a{width:40px;height:40px;border-radius:var(--r-md);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:.15s}
.footer-socials a:hover{background:var(--blue-600)}
.footer-socials svg{width:18px;height:18px;fill:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-4);font-size:14px;color:var(--ink-300)}
.footer-links{display:flex;gap:var(--s-5);flex-wrap:wrap}
.footer-links a{color:var(--blue-200)}
.footer-links a:hover{color:#fff}

/* ---------- Utilities ---------- */
.center{text-align:center}
.mt-6{margin-top:var(--s-6)}
.mt-5{margin-top:var(--s-5)}
.mb-0{margin-bottom:0}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Breite Vergleichstabelle auf Mobil horizontal scrollbar */
@media(max-width:640px){
  .article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}

/* ---------- Vergleich (hervorgehobene EIP-Spalte) ---------- */
.compare-wrap{overflow-x:auto;padding-top:16px}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:660px}
.compare th,.compare td{padding:17px 22px;text-align:left;font-size:15px;vertical-align:middle}
.compare thead th{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-900)}
.compare thead th.c-alt{color:var(--ink-500);font-weight:600}
.compare tbody th{font-family:var(--font-display);font-weight:600;color:var(--ink-900);width:30%}
.compare tbody td{color:var(--ink-500)}
.compare tbody th,.compare tbody td{border-top:1px solid var(--line)}
.compare .c-alt-cell svg{width:17px;height:17px;vertical-align:-3px;margin-right:6px;color:var(--ink-300)}
/* EIP-Spalte als gehobene Karte */
.compare .c-eip{position:relative}
.compare thead th.c-eip{background:var(--blue-600);color:#fff;border-radius:14px 14px 0 0;text-align:center;padding-top:14px;padding-bottom:14px}
.compare thead th.c-eip .emp{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-200);margin-bottom:2px}
.compare tbody td.c-eip{background:var(--blue-050);color:var(--ink-900);font-family:var(--font-display);font-weight:600;border-top:1px solid #dee3ff}
.compare tbody tr:last-child td.c-eip{border-radius:0 0 14px 14px}
.compare td.c-eip svg{width:18px;height:18px;vertical-align:-4px;margin-right:6px;color:var(--blue-600)}

/* ---------- Consent-Banner ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin:0 auto;
  background:var(--ink-900);color:#fff;border-radius:var(--r-card);padding:22px 24px;
  box-shadow:0 12px 40px rgba(10,10,10,.28);font-family:var(--font-body)}
.consent h4{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;margin-bottom:6px}
.consent p{font-size:13px;line-height:1.5;color:var(--ink-300)}
.consent p a{color:var(--blue-200);text-decoration:underline}
.consent-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.consent-actions .btn{flex:1 1 auto;min-width:140px;padding:12px 18px;font-size:15px}
.btn--consent-deny{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;--btn-fill:rgba(255,255,255,.12)}
.btn--consent-deny:hover{border-color:#fff}
.consent-actions .btn::after{content:none}
@media(max-width:520px){.consent-actions .btn{flex:1 1 100%}}
.cookie-settings-link{background:none;border:0;padding:0;cursor:pointer;color:var(--blue-200);font:inherit}
.cookie-settings-link:hover{color:#fff}

/* ---------- Kosten-Rechner ---------- */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-6);scroll-margin-top:100px}
.calc + .calc{margin-top:var(--s-5)}
.calc h3{font-size:24px;margin:var(--s-3) 0 var(--s-2)}
.calc-intro{color:var(--ink-500);margin-bottom:var(--s-5);font-size:15px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
@media(max-width:640px){.calc-grid{grid-template-columns:1fr}}
.calc-field label{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-900);margin-bottom:7px}
.calc-field label .hint{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--ink-500);margin-top:3px}
.calc-input{position:relative;display:flex;align-items:center}
.calc-input input{width:100%;font-family:var(--font-body);font-size:17px;padding:13px 50px 13px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink-900);-moz-appearance:textfield;appearance:textfield}
.calc-input input::-webkit-outer-spin-button,.calc-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-input input:focus{outline:none;border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 3px var(--blue-050)}
.calc-input .unit{position:absolute;right:14px;color:var(--ink-500);font-size:14px;pointer-events:none}
.calc-result{margin-top:var(--s-5);background:var(--ink-900);border-radius:var(--r-card);padding:var(--s-5) var(--s-6);color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4)}
.calc-result .r-main{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,48px);color:var(--lime);line-height:1}
.calc-result .r-label{font-size:13px;color:var(--ink-300);margin-top:8px}
.calc-result .r-year{font-family:var(--font-display);font-weight:600;font-size:17px;color:#fff;text-align:right;max-width:14em}
.calc-result .r-year span{color:var(--lime)}
.calc-note{font-size:12px;color:var(--ink-300);margin-top:var(--s-4);text-align:center}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{font-family:var(--font-body);font-size:13px;color:var(--ink-500);margin-bottom:var(--s-4)}
.breadcrumb a{color:var(--ink-500)}
.breadcrumb a:hover{color:var(--blue-600)}
.breadcrumb .sep{color:var(--ink-300);margin:0 7px}

/* =========================================================
   Akzent-Erweiterungen (Blau & Limette)
   ========================================================= */

/* Voller Ultramarin-Space */
.section--blue{background:var(--blue-600);color:#fff;position:relative;overflow:hidden}
.section--blue > .wrap{position:relative;z-index:1}
.section--blue h1,.section--blue h2,.section--blue h3,.section--blue h4{color:#fff}
.section--blue .eyebrow{color:var(--blue-200)}
.section--blue .section-head p{color:var(--blue-200)}
/* dezente Limetten-Akzentfläche oben rechts (Fläche, nie Text) */
.section--blue::after{content:"";position:absolute;top:-90px;right:-90px;width:260px;height:260px;border-radius:50%;background:var(--lime);opacity:.10}

/* Prozess-Karten auf Blau (glasig) + Limetten-Nummernkreis */
.section--blue .pstep{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20)}
.section--blue .pstep h3{color:#fff}
.section--blue .pstep p{color:var(--blue-200)}
.section--blue .pstep .pnum{background:var(--lime);color:var(--ink-900)}

/* Benefit-Karten: feine Linie rundum + dezenter Hover */
.benefit.card{transition:transform .15s,box-shadow .15s,border-color .15s}
.benefit.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--blue-200)}

/* Case- & Post-Karten: feine Umrandung, beim Hover dezent blau (rundum) */
.case{transition:border-color .15s,box-shadow .15s,transform .15s}
.case:hover{border-color:var(--blue-400);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.post-card:hover{border-color:var(--blue-400)}

/* FAQ offen: feine Linie rundum dezent blau */
.faq-item.open{border-color:var(--blue-400);box-shadow:var(--shadow-card)}

/* Tag/Eyebrow auf Blau angepasst, falls in blauer Sektion */
.section--blue .tag{background:rgba(255,255,255,.14);color:#fff}

/* =========================================================
   Scroll-Reveal (FOUC-frei: nur aktiv mit html.js + Motion erlaubt)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  html.js .section-head,
  html.js .benefit,
  html.js .step,
  html.js .pstep,
  html.js .tcard,
  html.js .case,
  html.js .post-card,
  html.js .team-card,
  html.js .faq-item,
  html.js .lime-block,
  html.js .article-body > *{
    opacity:0;transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
    will-change:opacity,transform;
  }
  html.js .is-in{opacity:1;transform:none}
}

/* Hero-Inhalt sanft einblenden (ohne JS, beim Laden) */
@media (prefers-reduced-motion: no-preference){
  html.js .hero-grid > div > *{opacity:0;transform:translateY(16px);animation:heroIn .7s cubic-bezier(.4,0,.2,1) forwards}
  html.js .hero-grid > div > *:nth-child(1){animation-delay:.05s}
  html.js .hero-grid > div > *:nth-child(2){animation-delay:.15s}
  html.js .hero-grid > div > *:nth-child(3){animation-delay:.25s}
  html.js .hero-grid > div > *:nth-child(4){animation-delay:.35s}
  html.js .hero-visual{opacity:0;animation:heroIn .9s cubic-bezier(.4,0,.2,1) .25s forwards}
  @keyframes heroIn{to{opacity:1;transform:none}}
}