/* =========================================================
   ESG – Global Styles (zentral, für alle Seiten)
   ========================================================= */

/* ---------- 1) Root & Reset ---------- */
:root{
  --brand:#17B3A1;
  --dark:#5f5f62;
  --text:#2b2b2b;
  --muted:#7a7a7a;
  --light:#f6f6f6;
  --white:#fff;

  /* Services */
  --svc-pad:22px;
  --svc-icon:44px;
  --svc-gap:12px;
  --svc-radius:12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }

/* ---------- 2) Layout & Utilities ---------- */
.container{ width:min(1200px,92%); margin:0 auto; }
.grid{ display:grid; gap:24px; }
.logo{ height:60px; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand); color:#fff; border:0;
  padding:.8rem 1.1rem; border-radius:.4rem;
  text-decoration:none; font-weight:600;
  transition:transform .12s, box-shadow .12s, opacity .2s;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.btn:hover{ transform:translateY(-1px); }
.btn, .arrow, .navlinks a, .nav-toggle{ min-height:44px; min-width:44px; }

/* ---------- 3) Header & Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #eee;
  transform:translateZ(0);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand{
  display:flex; align-items:center; gap:.75rem;
  font-weight:800; letter-spacing:.4px; color:#333; text-decoration:none;
}

.navlinks{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.navlinks a{
  color:#333; text-decoration:none; font-weight:600;
  padding:10px 12px; border-radius:6px;
}
.navlinks a.active, .navlinks a:hover{ background:#f1fffd; color:#0e8c7d; }

/* --- Mobile Nav (global, mit spürbarer Animation) --- */
.nav-toggle{
  display:none; background:transparent; border:0;
  padding:8px; margin-left:auto; cursor:pointer;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; background:#333;
  border-radius:2px; margin:5px 0; transition:transform .2s, opacity .2s;
}

@media (max-width:720px){
  .nav-toggle{ display:inline-block; }
  .navbar{ height:auto; padding:10px 0; gap:10px; }

  .navlinks{
    position:fixed; left:0; right:0; top:var(--header-h,64px);
    background:#fff; border-bottom:1px solid #eee; box-shadow:0 8px 20px rgba(0,0,0,.06);
    padding:10px 16px 14px; display:grid; gap:8px; text-align:left;

    /* deutlicher Slide-Down mit leichter Skalierung */
    transform-origin: top;
    transform: translateY(-18px) scaleY(.96);
    opacity:0; visibility:hidden; pointer-events:none;

    transition:
      transform .28s cubic-bezier(.2,.7,.2,1),
      opacity   .22s ease,
      visibility 0s linear .28s;  /* nach dem Ausblenden unsichtbar */
    will-change: transform, opacity;
    z-index:1001;
  }
  .navlinks a{ display:block; padding:12px 14px; border-radius:8px; }

  .site-header.open .navlinks{
    transform: translateY(0) scaleY(1);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:
      transform .28s cubic-bezier(.2,.7,.2,1),
      opacity   .22s ease,
      visibility 0s;               /* sofort sichtbar beim Öffnen */
  }

  /* Burger-Icon Rotation */
  .site-header.open .nav-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.open .nav-toggle .bar:nth-child(2){ opacity:0; }
  .site-header.open .nav-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* Scrim für offene Nav (global) */
.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transition:opacity .22s ease;
  z-index:900;
}
.site-header.open ~ .nav-scrim{ opacity:1; visibility:visible; }

@media (prefers-reduced-motion:reduce){
  .navlinks, .nav-scrim{ transition:none !important; transform:none !important; }
}

/* ---------- 4) Sections ---------- */
.section{ padding:56px 0; }
.section h2{ font-size:32px; margin:0 0 10px; }
.section .lead{ color:#555; font-size:1.1rem; margin:0 0 18px; }

/* ---------- 5) Hero ---------- */
.hero{
  position:relative; min-height:68vh;
  background:url('assets/hero.png') center/cover no-repeat;
  display:grid; place-items:center; color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.hero-inner{ position:relative; z-index:1; text-align:left; width:min(1100px,92%); }
.hero h1{ font-size:clamp(28px, 5vw, 48px); margin:0 0 8px; }
.hero .bullets{ display:flex; flex-direction:column; gap:8px; margin:18px 0 22px; }
.hero .bullet{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.45); border-left:4px solid var(--brand);
  padding:.5rem .75rem; border-radius:.4rem; font-weight:600;
}

/* ---------- 6) Feature Cards ---------- */
.features{ padding:48px 0; background:#fff; }
.feature-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.card{
  background:#f8f8f8; border:1px solid #eee; border-radius:18px;
  padding:28px; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.card .icon{
  width:96px; height:96px; margin:0 auto 14px; border-radius:50%;
  background:#e9ecef; display:grid; place-items:center; font-size:34px; color:#555;
}

/* ---------- 7) Team (Carousel) ---------- */
.team{ background:#6b6b6e; color:#fff; padding:54px 0 36px; }
.team h2{ text-align:center; margin:0 0 6px; font-size:32px; }
.team p.small{ text-align:center; color:#e8e8e8; margin:0 0 26px; }

.team-slider{ display:flex; align-items:center; gap:12px; }
.team-viewport{ flex:1; overflow:hidden; cursor:grab; touch-action:pan-y; }
.team-viewport.dragging{ cursor:grabbing; }

.team-track{ display:flex; gap:20px; transition:transform .35s; will-change:transform; align-items:flex-start; }
.team-track .team-card{ flex:0 0 calc((100% - 40px)/3); }
@media (max-width:1000px){ .team-track .team-card{ flex:0 0 calc((100% - 20px)/2); } }
@media (max-width:640px){  .team-track .team-card{ flex:0 0 100%; } }

.team-card{ position:relative; background:transparent; padding:0; border-radius:0; box-shadow:none; overflow:visible; color:#333; }
.team-card .card-clip{
  position:relative; background:#fff; border-radius:14px; padding:22px;
  filter:none; z-index:1; display:flex; flex-direction:column; align-items:center;
  overflow:hidden; /* sorgt dafür, dass Inhalte die Rundung respektieren */
}
/* Die Kurven gibt es nicht mehr – diese Regel bitte komplett entfernen */

.badge{
  display:block; background:var(--brand); color:#fff;
  padding:.6rem 1rem; border-radius:.6rem; font-weight:700; font-size:1rem;
  letter-spacing:.3px; text-align:center; margin:0 auto 1rem;
}
.team-card h4{ margin:.2rem 0 .4rem; text-align:center; }
.kontaktline{ color:#666; margin:.35rem 0; font-size:.95rem; text-align:center; }
.kontaktline a{ color:#0e8c7d; text-decoration:none; }

.arrow{
  background:#333; color:#fff; border:0; font-size:1.8rem; line-height:1;
  padding:6px 10px; cursor:pointer; border-radius:8px; transition:background .2s;
}
.arrow:hover{ background:#555; }

/* ---------- 8) CTA & Footer ---------- */
.cta-stripe{
  background:#6b6b6e; color:#dff8f5; padding:42px 0;
  border-top:1px solid rgba(255,255,255,.2);
}
.cta-stripe .container{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; }
.cta-stripe a{ justify-self:start; }

.site-footer{
  background:#6b6b6e; color:#fff; padding:40px 0 60px;
  border-top:1px solid rgba(255,255,255,.25);
}
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.footer-links a{ color:#c6fffa; text-decoration:none; margin-right:14px; }
.footer-col h4{ margin:0 0 10px; }
.footer-col p{ margin:.2rem 0; }
.footer-col address{ font-style:normal; color:#eee; }

/* ---------- 9) Forms & Tables ---------- */
form label{ display:block; font-weight:600; margin:.7rem 0 .2rem; }
input[type="text"], input[type="email"], textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid #ccc; font-size:1rem;
}
textarea{ min-height:160px; resize:vertical; }
form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
form .actions{ margin-top:16px; }

table{ width:100%; border-collapse:collapse; }
th,td{ padding:12px; border-bottom:1px solid #eee; text-align:left; }

/* ---------- 10) Page FX (global für jede Seite) ---------- */
#page-fx{
  opacity:0; transform:translateY(6px); filter:blur(2px);
  transition:opacity .38s, transform .38s, filter .38s;
  will-change:opacity, transform, filter;
}
#page-fx.fx-in{ opacity:1; transform:none; filter:blur(0); }
#page-fx.fx-out{ opacity:0; transform:translateY(6px); filter:blur(2px); }

/* ---------- 11) Services (Leistungen) ---------- */
.card.service{
  padding:var(--svc-pad); text-align:left;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  border:1px solid #eee; border-radius:14px;
}
.card.service header{
  display:grid; grid-template-columns:var(--svc-icon) 1fr;
  column-gap:var(--svc-gap); align-items:center; min-height:var(--svc-icon);
  margin:0 0 10px;
}
.card.service header .icon{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:var(--svc-icon) !important; height:var(--svc-icon) !important; flex:0 0 var(--svc-icon) !important;
  border-radius:var(--svc-radius) !important; font-size:22px !important; line-height:1 !important;
  background:rgba(23,179,161,.12); color:#0e8c7d; margin:0 !important; padding:0 !important;
}
.card.service h3{ margin:0; font-weight:800; font-size:1.2rem; line-height:1.15; color:var(--text); }
.card.service .kicker{ margin:2px 0 0; font-size:.95rem; color:var(--muted); }
.card.service ul{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.card.service li{ display:flex; gap:10px; align-items:flex-start; font-size:.98rem; color:var(--text); }
.card.service li::before{
  content:""; margin-top:.55em; width:7px; height:7px; border-radius:999px; background:var(--brand); flex:0 0 7px;
}
.cards-2col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:980px){ .cards-2col{ grid-template-columns:1fr; } }

/* ---------- 12) LEISTUNGEN – Scrollytelling ---------- */
.page-leistungen{
  --step-bg:#ffffff; --step-ink:#0f172a; --step-muted:#64748b;
  --step-brand:#17B3A1; --step-accent:#0e8c7d; --step-line:#e5e7eb;
  --step-shadow:0 12px 32px rgba(0,0,0,.10);
  --header-h:64px;
  --step-gap:42vh;

  --detail-top: calc(var(--header-h));
  --range-offset: 0px;
  --range-h: auto;

  scroll-snap-type:y proximity;
  overscroll-behavior-y: contain;
}

/* Intro */
.page-leistungen .intro{
  max-width:1200px; margin:0 auto; padding:18px 16px; border-bottom:1px solid var(--step-line);
}
.page-leistungen .intro h1{ margin:.2rem 0 .2rem; font-size:clamp(28px,3.2vw,40px); }
.page-leistungen .intro p{ margin:0; color:var(--step-muted); font-size:clamp(14px,1.2vw,16px); }

/* Layout */
.page-leistungen .scrolly{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:28px;
  grid-template-areas:"steps detail"; color:var(--step-ink);
}
.page-leistungen .scrolly .steps{ display:block; }

/* Left Rail */
.page-leistungen .steps{
  grid-area:steps; position:relative; padding:18px 0 0;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-leistungen .steps::before{
  content:""; position:absolute; left:28px; top:0; bottom:0; width:3px; border-radius:999px; background:#eaf7f4;
}

/* Step Cards */
.page-leistungen .step{
  position:relative; width:calc(100% - 22px); margin:var(--step-gap) 0;
  border:1px solid var(--step-line); border-radius:16px; background:#fff;
  box-shadow:var(--step-shadow); padding:14px 16px 14px 48px; min-height:120px; display:block;
  transform:scale(.96); opacity:.66; filter:saturate(.9) blur(1.5px);
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease, filter .22s ease, opacity .22s ease;
  cursor:pointer; scroll-snap-align:center; scroll-snap-stop:always;
}
.page-leistungen .step:last-child{ margin-bottom:0; }
.page-leistungen .step::before{
  content:""; position:absolute; left:28px; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:#d7f4ef; border:3px solid #bff0e8;
  box-shadow:0 0 0 6px rgba(23,179,161,.08);
}
.page-leistungen .step h2{ margin:0; font-size:clamp(18px,2.2vw,22px); font-weight:900; }
.page-leistungen .step p{ margin:0; color:var(--step-muted); font-size:clamp(13px,1.2vw,15px); }
.page-leistungen .pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px;
  border:1px solid #cfeee9; background:#f4fffd; color:#0e8c7d; font-weight:800; font-size:.9rem;
}
.page-leistungen .step.is-active{
  border-color:#cfeee9; box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform:scale(1.04); opacity:1; filter:none;
}
.page-leistungen .step.is-active::before{ background:var(--step-brand); border-color:#a6ebdf; box-shadow:0 0 0 8px rgba(23,179,161,.12); }

/* End-Spacer */
.page-leistungen #end-spacer{ height:0; pointer-events:none; }

/* Right Spalte */
.page-leistungen .detail-wrap{
  grid-area:detail; position:relative;
  margin-top: var(--range-offset); height: var(--range-h);
}
.page-leistungen .detail-stick{ position:sticky; top:var(--detail-top); }

/* Detail-Karte */
.page-leistungen .detail-card{
  height:clamp(280px, 40svh, 480px);
  border:1px solid var(--step-line); border-radius:18px; background:#fff;
  box-shadow:var(--step-shadow); display:grid; grid-template-rows:auto 1fr; row-gap:8px;
  overflow:hidden; contain:layout paint;
}

/* Kopf */
.page-leistungen .detail-head{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, #effdfb, #ffffff 85%);
  border-radius:18px 18px 0 0; padding:12px 14px 10px; border-bottom:1px solid var(--step-line);
}
.page-leistungen .head-row{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
}
.page-leistungen .ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:rgba(23,179,161,.12); color:#0e8c7d; font-size:28px; font-weight:900;
}
.page-leistungen .head-text .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem;
  border:1px solid #cfeee9; background:#f4fffd; color:#0e8c7d; border-radius:999px; font-weight:900; font-size:.85rem;
}
.page-leistungen .title{ margin:.25rem 0 .05rem; font-size:clamp(20px,2vw,24px); font-weight:900; }
.page-leistungen .kicker{ margin:0; color:var(--step-muted); }
.page-leistungen .head-meta{ font-weight:800; color:#0e8c7d; text-align:right; }
.page-leistungen .counter{ font-variant-numeric: tabular-nums; }

/* Body */
.page-leistungen .detail-body{
  padding:10px 14px 12px; overflow:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; min-height:140px;
}
.page-leistungen .detail-body::-webkit-scrollbar{ display:none; }

/* Reveal */
.page-leistungen .swap{ animation:fadeSlide .28s ease both; }
.page-leistungen .list{ margin:6px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.page-leistungen .list li{ display:flex; gap:8px; align-items:flex-start; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.page-leistungen .list li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--step-brand); margin-top:.5em; flex:0 0 8px; }
.page-leistungen .list li.show{ opacity:1; transform:none; }

/* ---------- Mobile Layout (≤900px) ---------- */
@media (max-width:900px){
  body.page-leistungen{ overflow:hidden; }

  .page-leistungen .scrolly{
    position:relative; grid-template-columns:1fr; grid-template-areas:"detail" "steps";
  }

  .page-leistungen .steps,
  .page-leistungen .detail-wrap{
    position:fixed; left:0; right:0;
    top:var(--stage-top, 120px);
    height:calc(100svh - var(--stage-top, 120px));
    margin:0 !important; padding:14px 16px;
    background: linear-gradient(180deg,#f8fdfc 0%, #ffffff 20%);
    z-index:100; overflow:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 -12px 24px rgba(0,0,0,.06);
    transition:transform .35s ease; will-change:transform;
  }

  .page-leistungen .steps::before{ left:22px; }
  .page-leistungen .step{
    margin:16px 0 !important; padding:12px 14px 12px 44px;
    box-shadow:0 8px 20px rgba(0,0,0,.05); border-color:#e9f3f1;
    transform:none !important; opacity:1 !important; filter:none !important;
  }
  .page-leistungen .step.is-active{ transform:none !important; }

  .page-leistungen .detail-stick{ position:static; top:auto; }
  .page-leistungen .detail-card{
    position:relative; border-radius:16px; border-color:#e9f3f1;
    box-shadow:0 10px 26px rgba(0,0,0,.06);
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(180deg, rgba(23,179,161,.08), rgba(108,92,231,.06)) border-box;
    min-height:48svh;
  }
  .page-leistungen .detail-head{
    padding:10px 12px 8px; background:linear-gradient(180deg, #f3fffc, #ffffff 85%);
  }
  .page-leistungen .head-row{ grid-template-columns:44px 1fr auto; gap:10px; }
  .page-leistungen .ico{ width:44px; height:44px; border-radius:12px; font-size:22px; }
  .page-leistungen .title{ font-size:clamp(18px,4.4vw,22px); }
  .page-leistungen .head-meta{ font-size:.9rem; }
  .page-leistungen .detail-body{ padding:12px; position:relative; min-height:48svh; }
  .page-leistungen .detail-body::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:24px;
    background:linear-gradient(to top, #fff 0%, rgba(255,255,255,0)); pointer-events:none;
  }

  body[data-view="detail"] .steps{ transform:translateX(-100%); }
  body[data-view="detail"] .detail-wrap{ transform:translateX(0%); z-index:99; }
  body[data-view="steps"] .steps{ transform:translateX(0%); }
  body[data-view="steps"] .detail-wrap{ transform:translateX(100%); }

  body.page-leistungen .site-footer{ display:none !important; }
  .page-leistungen .steps::before{ display:none !important; }
  .page-leistungen .stepper .rail{ display:none !important; }
}

/* ---------- 13) Energie-Extras ---------- */
.fx-reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s; }
.fx-reveal.in{ opacity:1; transform:none; }

.energy-hero{ position:relative; overflow:hidden; background:#fff; border-bottom:1px solid #eee; }
.energy-hero .container{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:56px 0; }
@media (max-width:980px){ .energy-hero .container{ grid-template-columns:1fr; } }

.blob{
  position:absolute; border-radius:999px; filter:blur(30px);
  opacity:.45; mix-blend-mode:multiply; animation:floaty 7s ease-in-out infinite;
}
.blob.a{ width:380px; height:380px; left:-80px; top:-80px; background:radial-gradient(circle at 30% 30%, rgba(23,179,161,.55), transparent 60%); }
.blob.b{ width:420px; height:420px; right:-120px; bottom:-120px; background:radial-gradient(circle at 60% 60%, rgba(108,92,231,.40), transparent 60%); }

.eyebrow-pill{
  display:inline-flex; gap:.5rem; align-items:center; padding:.45rem .75rem;
  border-radius:999px; font-weight:800; background:#f1fffd; border:1px solid #c7f3ee; color:#0e8c7d;
}
.eyebrow-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); }

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.btn.ghost{ background:#fff; color:#0e8c7d; border:1px solid #c7f3ee; box-shadow:none; }
.magnet{ display:inline-block; transform:translateZ(0); will-change:transform; }
.magnet .btn{ transition:transform .12s; }

/* Marquee */
.marquee{ position:relative; overflow:hidden; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; }
.marquee-track{
  display:inline-flex; gap:14px; padding:10px 0;
  white-space:nowrap; will-change:transform;
  animation:scrollx 22s linear infinite;
}
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none; z-index:1;
}
.marquee::before{ left:0;  background:linear-gradient(to right, #fff, transparent); }
.marquee::after{  right:0; background:linear-gradient(to left,  #fff, transparent); }

.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid #e6f3f0; background:#fafefe; border-radius:999px;
  padding:.45rem .7rem; font-weight:700; color:#0e8c7d; white-space:nowrap; flex:0 0 auto;
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); }

/* Metrics */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:22px 0; }
@media (max-width:900px){ .metrics{ grid-template-columns:1fr; } }
.metric.card{ padding:18px; text-align:center; border-radius:14px; }
.metric .num{ font-size:2rem; font-weight:800; color:#0e8c7d; line-height:1; }
.metric .label, .muted{ color:var(--muted); }

/* Tilt Cards */
.tilt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .tilt-grid{ grid-template-columns:1fr; } }
.tilt-card{ position:relative; perspective:800px; }
.tilt-card .card{
  padding:22px; border-radius:16px; text-align:left;
  transform-style:preserve-3d; transition:transform .12s, box-shadow .2s;
  background:#fafafa; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.tilt-card .card > .icon{ display:none !important; }
.tilt-card .card h3{
  margin:4px 0 8px; padding-left:22px; font-weight:800; color:var(--text); position:relative;
}
.tilt-card .card h3::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:10px; height:10px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 6px rgba(23,179,161,.12);
}
.tilt-card .card p{ margin:0; color:var(--muted); }
.shine{
  pointer-events:none; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(600px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.65), transparent 60%);
  opacity:0; transition:opacity .2s;
}
.tilt-card:hover .shine{ opacity:.65; }

/* Stepper & FAQ */
.stepper{ position:relative; margin-top:8px; }
.stepper .rail{ height:4px; background:#e6f3f0; border-radius:999px; overflow:hidden; }
.stepper .progress{ height:100%; width:0; background:linear-gradient(90deg, var(--brand), #6c5ce7); transition:width 1.2s ease .2s; }
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr; } }
.step.card{ padding:14px; border-radius:12px; }
.step .num{
  width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  background:#f1fffd; color:#0e8c7d; border:1px solid #c7f3ee; font-weight:800; margin-bottom:6px;
}

details.faq-smooth summary{
  list-style:none; cursor:pointer; padding:14px; border-radius:12px; background:#fff; border:1px solid #eee;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
details.faq-smooth summary::marker,
details.faq-smooth summary::-webkit-details-marker{ display:none; }
details.faq-smooth .content{
  margin:0 4px; max-height:0; opacity:.2; overflow:hidden; transition:max-height .32s, opacity .32s;
}
details.faq-smooth[open] .content{ max-height:300px; opacity:1; }

/* ---------- 14) Referenzen – Karte + Liste ---------- */
.map-wrap{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
#projects-map{
  width:100%; height:460px; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.map-legend{
  background:#fff; color:#1a1a1a; border:1px solid #e6e6e6;
  border-radius:12px; padding:12px 14px; height:460px; overflow:auto;
}
.map-legend ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.map-legend li{
  border:1px solid #ddd; border-radius:10px; padding:10px 12px;
  cursor:pointer; transition:background .2s, box-shadow .2s, border-color .2s; outline:0;
}
.map-legend li:focus{ box-shadow:0 0 0 3px rgba(59,130,246,.35); }
.map-legend li.project{ background:#f8fbff; }
.map-legend li.project:hover{ background:#e9f3ff; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.map-legend li.project.active{ background:#dbeafe; border-color:#3b82f6; }
.map-legend li.hq{ background:#fffdf5; }
.map-legend li.hq:hover{ background:#fff9e6; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.map-legend li.hq.active{ background:#fef3c7; border-color:#f59e0b; }
.map-legend .title{ font-weight:700; margin:0 0 4px; color:#111; }
.map-legend .meta{ font-size:.9rem; color:#555; }

@media (max-width:900px){
  .map-wrap{ grid-template-columns:1fr; }
  .map-legend{ height:auto; max-height:60vh; }
}

.leaflet-popup-content-wrapper{ border-radius:10px; }
.leaflet-popup-content{ margin:10px 12px; }

/* ---------- 15) Responsive Tweaks (global) ---------- */
@media (max-width:980px){
  .feature-cards{ grid-template-columns:1fr 1fr; }
  .cta-stripe .container{ grid-template-columns:1fr; }
  .cards-2col{ grid-template-columns:1fr; }
  .tilt-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .feature-cards, .footer-grid{ grid-template-columns:1fr; }
  .navbar{ height:auto; padding:10px 0; }
  .navlinks{ gap:8px; }
}

/* ---------- 16) Keyframes ---------- */
@keyframes floaty{ 0%{transform:none} 50%{transform:translateY(-16px)} 100%{transform:none} }
@keyframes scrollx{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fadeSlide{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
@keyframes hint-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }

/* Einheitliche, breite Popups */
.esg-popup .leaflet-popup-content-wrapper{ padding:12px 12px 14px; }
.esg-popup .leaflet-popup-content{ margin:0; }

/* optional: etwas breiterer Schatten */
.esg-popup .leaflet-popup-tip{ box-shadow:0 2px 8px rgba(0,0,0,.2); }
footer.site-footer.tri-footer address a{ color:#fff; font-weight:800; text-decoration:none; }
footer.site-footer.tri-footer address a:hover{ text-decoration:underline; }