/*
 MAREL BAU — Theme CSS (beautified & deduplicated)
 -------------------------------------------------
 ✅ Konsolidierte Variablen
 ✅ Doppelte Blöcke zusammengeführt
 ✅ Einheitliche Einrückung & Reihenfolge
 ✅ Logische Kapitel & Kommentare
 ✅ Hover/Focus-States vereinheitlicht

 Hinweis: Funktional identisch, nur aufgeräumt. 
*/

/* ------------------------------------------------
   1) CSS Custom Properties
------------------------------------------------- */
:root{
  /* Core Palette */
  --mb-color-bg-dark:#0f0f10;
  --mb-color-bg-light:#ffffff;
  --mb-color-bg-soft:#f5f5f5;
  --mb-color-bg-muted:#fafafa;
  --mb-color-accent:#2563eb; /* brand red */
  --mb-blue:#1E61FF;

  /* Text */
  --mb-color-text-dark:#111111;
  --mb-color-text-mid:#444444;
  --mb-color-text-light:rgba(255,255,255,.9);

  /* Radii & Shadows */
  --mb-radius-card:16px;
  --mb-radius-pill:.75rem;
  --mb-shadow-card:0 24px 60px rgba(0,0,0,.06);
  --mb-shadow-card-hover:0 30px 80px rgba(0,0,0,.12);
  --mb-shadow-dark-card:0 30px 80px rgba(0,0,0,.6);
  --mb-shadow-cta:0 10px 30px rgba(0,0,0,.2);

  /* Typography & Spacing */
  --mb-font-size-eyebrow:10px;
  --mb-font-size-body:15px;
  --mb-lineheight-body:1.45;
  --mb-gap-section:clamp(3rem,6vw,6rem);
  --mb-gap-badge-title:.75rem; /* equals --space-s */
  --space-xs:.5rem;
  --space-s:.75rem;
  --space-m:2rem;

  /* ND (Notdienst) accents */
  --nd-bg-dark:#0d0d0f;
  --nd-red:#c4302b;
  --nd-red-soft:rgba(196,48,43,.35);
  --nd-ice:#a9c9ff;

  /* Aliases */
  --mb-color-primary-blue:var(--mb-color-accent); /* kept for backwards compatibility */
}

/* ------------------------------------------------
   2) Layout primitives
------------------------------------------------- */
.mb-container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1rem}
.mb-section,.section-pad{padding-block:var(--mb-gap-section)}

/* Eyebrow badges */
.mb-eyebrow,
.home-services__eyebrow,
.home-strategy__eyebrow,
.mb-card-eyebrow,
.hero-v2__eyebrow,
.home-cta__eyebrow,
.home-cta__contact-eyebrow,
.shopteaser-badge,
.jobs-sidecard__pill,
.eyebrow-badge,
.eyebrow-badge--dark,
.eyebrow-badge--glassblue,
.eyebrow-badge--notdienst,
.emergency-card__eyebrow{
  display:inline-block;
  font-size:var(--mb-font-size-eyebrow);
  line-height:1.2;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:6px;
  padding:.4rem .5rem;
}

/* Cards */
.mb-card,.home-services__card{border-radius:var(--mb-radius-card);background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:var(--mb-shadow-card);padding:1.25rem 1.5rem;color:var(--mb-color-text-mid);font-size:.9rem;line-height:1.4;transition:box-shadow .2s,transform .2s,border-color .2s}
.mb-card:hover,.home-services__card:hover{transform:translateY(-2px);box-shadow:var(--mb-shadow-card-hover);border-color:rgba(0,0,0,.12)}
.mb-card-title{font-size:1rem;font-weight:600;line-height:1.3;color:var(--mb-color-text-dark);margin-bottom:.5rem}

/* CTA rows */
.cta-row,.hero-cta-row,.mb-btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-row{gap:1rem;margin-top:2rem}

/* Buttons */
:is(.mb-btn-primary,.hero-btn-primary,.hero-v2__btn-primary,.hero-btn-primary-alt){display:inline-block;background:var(--mb-color-accent);color:#fff;font-size:.9rem;line-height:1.2;padding:.8rem 1rem;border-radius:.6rem;font-weight:600;text-decoration:none;border:1px solid #2563eb;box-shadow:var(--mb-shadow-cta);transition:background-color .2s,box-shadow .2s,transform .2s}
:is(.mb-btn-primary,.hero-btn-primary,.hero-v2__btn-primary,.hero-btn-primary-alt):hover{background:#b52a26;box-shadow:0 16px 30px rgba(0,0,0,.25);transform:translateY(-1px)}
:is(.mb-btn-outline,.hero-btn-secondary-alt,.hero-v2__btn-secondary,.hero-btn-ghost){display:inline-block;background:#fff;color:#1a1a1a;font-size:.9rem;line-height:1.2;padding:.8rem 1rem;border-radius:.6rem;font-weight:600;text-decoration:none;border:1px solid rgba(0,0,0,.15);box-shadow:0 8px 20px rgba(0,0,0,.06);transition:all .2s}
:is(.mb-btn-outline,.hero-btn-secondary-alt,.hero-v2__btn-secondary,.hero-btn-ghost):hover{background:#f9fafb;border-color:rgba(0,0,0,.3)}
.btn-ghost-light{display:inline-block;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.9rem;line-height:1.2;font-weight:600;padding:.75rem 1rem;border-radius:.75rem;text-decoration:none;transition:background-color .25s}
.btn-ghost-light:hover{background-color:rgba(255,255,255,.1)}
.btn-pill{display:inline-block;padding:.9rem 1.8rem;border-radius:9999px;font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none;transition:all .3s;white-space:nowrap}
.btn-primary{background:linear-gradient(90deg,#2563eb,#3b82f6);color:#fff;border: none;
box-shadow:0 0 18px rgba(59,130,246,.25)}
.btn-primary:hover {
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-2)) !important;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,.35);
}

.btn-outline{border:2px solid rgba(37,99,235,.4);color:#2563eb;background:transparent}
.btn-outline:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.6);transform:translateY(-2px)}
@media (max-width:640px){.cta-row{flex-direction:column;align-items:flex-start}.btn-pill{width:100%;text-align:center}}

/* ------------------------------------------------
   3) Hero variants
------------------------------------------------- */
.front-hero,.home-hero{position:relative;background:var(--mb-color-bg-dark);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.home-hero{min-height:480px}
.front-hero{min-height:70vh;display:flex;align-items:flex-end;justify-content:flex-start}
.front-hero__bg{position:absolute;inset:0;z-index:0}
.front-hero__video{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.front-hero__tint,.home-hero__overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(30,97,255,.2) 0,rgba(0,0,0,.6) 60%);mix-blend-mode:screen}
.front-hero__scroll-hint,.home-hero__scroll{position:absolute;left:0;right:0;bottom:1.5rem;text-align:center;font-size:11px;line-height:1.2;font-weight:500;color:rgba(255,255,255,.8);animation:mb-bounce 1.8s infinite;z-index:3}
@keyframes mb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.home-hero__grid{position:relative;z-index:2;display:grid;gap:3rem;padding-block:4rem}
@media (min-width:900px){.home-hero__grid{grid-template-columns:minmax(300px,520px) 1fr;align-items:start}}
.home-hero__card{background:rgba(15,23,42,.6);backdrop-filter:blur(16px) saturate(160%);border-radius:16px;border:1px solid rgba(169,225,254,.35);box-shadow:var(--mb-shadow-dark-card);padding:1.5rem 1.75rem 2rem;color:#fff;display:flex;flex-direction:column;row-gap:1.25rem;max-width:520px}
.front-hero__inner{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;padding-inline:1rem;padding-top:12rem;padding-bottom:4rem;display:flex;justify-content:flex-start;align-items:flex-end}
.hero-headline-main{font-size:clamp(1.8rem,.7vw + 1.4rem,2.3rem);line-height:1.2;font-weight:700;margin:0 0 .4rem;background:radial-gradient(circle at 0 0,#fff 0,#dbe8ff 60%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 24px 48px rgba(0,0,0,.6)}
.hero-headline-alt{display:block;width:100%;font-size:clamp(1.6rem,1vw + 1.1rem,2.1rem);line-height:1.25;font-weight:600;color:#a9c9ff;margin:0 0 .75rem;text-shadow:0 20px 40px rgba(0,0,0,.6);text-wrap:balance;max-width:42ch}
.hero-cta-row{gap:.75rem;margin:.5rem 0}

/* Hero v2 */
.hero-v2{position:relative;background:#0f0f10;color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);min-height:78vh;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 4vh 6vw}
.hero-v2__bg{position:absolute;inset:0;z-index:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-v2__video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85);transform:scale(1.02);transition:transform 1s,filter .4s;will-change:transform}
.hero-v2__tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.2) 20%,rgba(0,0,0,.55) 100%)}
.hero-v2__inner{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;display:flex;align-items:flex-end;justify-content:flex-start;padding-inline:1rem}
.hero-v2__card{position:relative;z-index:3;max-width:480px;width:100%;margin:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);color:#0f172a;border-radius:16px;border:1px solid rgba(0,0,0,.06);box-shadow:0 24px 60px rgba(0,0,0,.15);padding:2rem;display:flex;flex-direction:column;row-gap:1rem}
.hero-v2__headline{margin:0;font-size:clamp(1.6rem,1vw + 1.2rem,2rem);line-height:1.2;font-weight:600;color:#0f172a}
.hero-v2__subline{margin:0;font-size:1rem;line-height:1.45;color:#4b5563;max-width:32ch}
.hero-v2__cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.hero-v2__btn-primary{background:var(--mb-color-accent);color:#fff;border:1px solid #b52a26;transition:all .25s;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.hero-v2__btn-primary:hover{background:#b52a26;border-color:#b52a26;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.hero-v2__btn-secondary{background:transparent;border:1px solid currentColor;color:inherit;transition:all .25s}
.hero-v2.is-hover .hero-v2__video{transform:scale(1.08)}
@media (max-width:900px){
  .hero-v2{min-height:70vh;padding:0 1.5rem 5vh}
  .hero-v2__card{max-width:min(90%,480px);padding:1.5rem 1.25rem;border-radius:14px}
  .hero-v2__headline{font-size:clamp(1.4rem,2vw + 1rem,1.8rem)}
  .hero-v2__subline{font-size:.95rem}
}
@media (max-width:480px){
  .hero-v2__cta-row{flex-direction:column;align-items:stretch}
  .hero-v2__btn-primary,.hero-v2__btn-secondary{width:100%;text-align:center}
}
.hero-v2::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:14vh;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);z-index:2;pointer-events:none}

/* ------------------------------------------------
   4) Home: Services & Strategy
------------------------------------------------- */
.home-services{background:linear-gradient(to bottom,var(--mb-color-bg-soft) 0,#fff 100%);color:var(--mb-color-text-mid);border-bottom:1px solid #e5e5e5;padding-block:var(--mb-gap-section);--mb-color-accent:var(--mb-blue)}
.home-services__head{max-width:700px;margin:0 auto 2.5rem;text-align:left}
.home-services__title{color:var(--mb-color-text-dark);font-size:clamp(1.4rem,.4vw + 1.2rem,1.6rem);font-weight:600;line-height:1.25;margin:0 0 1rem}
.home-services__text{font-size:var(--mb-font-size-body);line-height:var(--mb-lineheight-body);color:var(--mb-color-text-mid)}
.home-services__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
@media (min-width:900px){.home-services__grid{grid-template-columns:repeat(3,1fr)}}
.area-eyebrow{font-size:.8rem;font-weight:600;color:var(--mb-color-accent);margin-bottom:.5rem;padding:.5rem .8rem;border-radius:.6rem}
.area-title{font-size:1rem;font-weight:600;color:var(--mb-color-text-dark);line-height:1.3;margin-bottom:.5rem}
.area-text{font-size:.9rem;line-height:1.4;color:var(--mb-color-text-mid);margin-bottom:.1rem}
.area-more{font-size:.8rem;font-weight:600;color:var(--mb-color-accent);transition:transform .3s}
.home-services__contact{font-size:.8rem;line-height:1.4;color:var(--mb-color-text-mid);border-top:1px solid rgba(0,0,0,.06);padding-top:.75rem}
.home-services__card.is-aquamatik{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#3b7bff 0,#2563eb 100%);color:#fff;border:none;border-radius:1.25rem;box-shadow:0 10px 30px rgba(30,97,255,.35)}
.home-services__card.is-aquamatik::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.35) 45%,transparent 90%);transform:translateX(-100%);animation:aquacardShimmer 3.2s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes aquacardShimmer{0%{transform:translateX(-100%);opacity:0}40%{opacity:1}100%{transform:translateX(100%);opacity:0}}

.home-strategy{background:linear-gradient(180deg,#f8faff 0,#eef4ff 100%);padding-block:clamp(4rem,6vw,6rem);border-radius:1.5rem;color:var(--mb-color-text-mid);border-bottom:1px solid #e5e5e5}
.home-strategy__wrap{max-width:1100px;margin:0 auto;display:grid;gap:2rem}
.home-strategy__head{text-align:center;margin-bottom:3.5rem}
.home-strategy__title{color:var(--mb-blue);font-size:2rem;margin-bottom:.75rem}
.home-strategy__text{color:#4b5563;max-width:720px;margin-inline:auto;line-height:1.6}
.home-strategy__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.home-strategy__card{background:#fff;border:1px solid rgba(30,97,255,.15);border-radius:1rem;padding:1.75rem 1.5rem;box-shadow:0 6px 20px rgba(30,97,255,.05);transition:all .3s}
.home-strategy__card:hover{border-color:var(--mb-blue);box-shadow:0 10px 28px rgba(30,97,255,.15);transform:translateY(-4px)}
.home-strategy__card h3{color:var(--mb-blue);font-size:1.1rem;margin-bottom:.5rem}
.home-strategy__card p{color:#475569;line-height:1.5;margin:0}

/* Hover upgrades */
.home-services__card{transition:transform .35s,box-shadow .35s,filter .35s,background-color .35s}
.home-services__card:hover{transform:translate3d(0,-6px,0) scale(1.015);box-shadow:0 16px 40px rgba(0,0,0,.1)}

/* ------------------------------------------------
   5) Refs Carousel & Lightbox
------------------------------------------------- */
#refs .rfx-head{display:flex;gap:1.5rem;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}
#refs .rfx-viewport{position:relative;overflow:hidden;padding-inline:70px}
#refs .rfx-rail{display:flex;gap:20px;will-change:transform;user-select:none;cursor:grab;touch-action:pan-y}
#refs .rfx-rail.is-dragging{cursor:grabbing}
#refs .rfx-card{flex:0 0 auto;width:clamp(260px,32vw,360px);aspect-ratio:16/10;position:relative;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transform:translateZ(0);transition:transform .25s,box-shadow .25s}
#refs .rfx-img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;transform-origin:50% 20%;object-position:50% 42%}
#refs .rfx-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;background:linear-gradient(to top,rgba(0,0,0,.55) 0,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 100%);color:#fff;pointer-events:none;transition:background .4s,transform .4s,opacity .4s}
#refs .rfx-meta{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#a7c8ff;margin-bottom:.2rem}
#refs .rfx-title{font-size:.9rem;line-height:1.35;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.45)}
#refs .rfx-card:hover .rfx-img{transform:translateY(2%) scale(1.08)}
#refs .rfx-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 18px 36px rgba(0,0,0,.15)}
#refs .rfx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:rgba(30,97,255,.95);color:#fff;font-size:1.6rem;display:grid;place-items:center;box-shadow:0 6px 18px rgba(30,97,255,.35);cursor:pointer;opacity:0;transition:all .2s}
#refs .rfx-viewport:hover .rfx-nav{opacity:.95}
#refs .rfx-nav:hover{transform:translateY(-50%) scale(1.06)}
#refs .rfx-prev{left:15px}
#refs .rfx-next{right:15px}
@media (max-width:700px){#refs .rfx-nav{display:none}}

#refsLightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.78);z-index:9999}
#refsLightbox[aria-hidden=false]{display:grid}
#refsLightbox[hidden]{display:none!important;pointer-events:none!important;visibility:hidden!important}
#refsLightbox img#refsLightboxImg{max-width:92vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.5);user-select:none}
#refsLightbox .lb-btn{position:absolute;display:grid;place-items:center;width:46px;height:46px;border:none;border-radius:9999px;background:rgba(30,97,255,.95);color:#fff;font-size:24px;line-height:1;box-shadow:0 8px 24px rgba(30,97,255,.35);cursor:pointer;transition:transform .18s,opacity .18s,filter .18s}
#refsLightbox .lb-btn:hover{transform:scale(1.06);filter:brightness(.97)}
#refsLightbox .lb-btn:active{transform:scale(.98)}
#refsLightbox .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
#refsLightbox .lb-next{right:18px;top:50%;transform:translateY(-50%)}
#refsLightbox .lb-close{top:16px;right:16px;width:40px;height:40px;font-size:22px;background:rgba(255,255,255,.96);color:var(--mb-blue);box-shadow:0 6px 18px rgba(0,0,0,.35)}
#refsLightbox .lb-close.hint{animation:lb-hint .6s ease-out 1}
@keyframes lb-hint{0%{box-shadow:0 0 0 0 rgba(30,97,255,0);transform:scale(1)}30%{box-shadow:0 0 0 10px rgba(30,97,255,.25);transform:scale(1.06)}100%{box-shadow:0 0 0 0 rgba(30,97,255,0)}}

/* ------------------------------------------------
   6) Emergency / Notdienst Sections
------------------------------------------------- */
.front-emergency{background:#111;color:#fff;border-block:1px solid rgba(255,255,255,.08);padding-block:var(--mb-gap-section)}
.front-emergency .section-title--light{font-size:1.4rem;line-height:1.25;font-weight:600;color:#fff;margin-bottom:1rem}
.front-emergency .section-text--light{font-size:var(--mb-font-size-body);line-height:var(--mb-lineheight-body);color:rgba(255,255,255,.8);max-width:680px;margin-bottom:2.5rem}

#notdienst.front-emergency{background:#fff;color:#111;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
#notdienst .section-title--light{color:#111}
#notdienst .section-text--light{color:#444}

.eyebrow-badge--notdienst{background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.35);color:#ff3b30;border-radius:.6rem;box-shadow:0 8px 20px rgba(0,0,0,.06);backdrop-filter:blur(6px)}
.eyebrow-badge--notdienst:hover{background:rgba(255,59,48,.12);border-color:rgba(255,59,48,.45);transform:translateY(-1px)}

.card-grid{display:grid;gap:1rem}
.emergency-card{background:#1f1f1f;border-radius:var(--mb-radius-card);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.4);padding:1rem 1.25rem;font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.85)}
.emergency-card__title{color:#fff;font-size:.95rem;font-weight:600;margin-bottom:.5rem}
.emergency-card__text{font-size:.8rem;line-height:1.4}

#notdienst{background:radial-gradient(circle at 30% 10%,var(--nd-red-soft) 0,rgba(0,0,0,.9) 100%);color:#fff;border-block:1px solid rgba(255,255,255,.08)}
.notdienst-step{display:flex;align-items:flex-start;gap:1rem;position:relative}
.notdienst-step::before{content:"";position:absolute;left:-1.65rem;top:1.25rem;width:2px;height:calc(100% - 1.25rem);background:rgba(196,48,43,.3)}
.notdienst-step:last-child::before{display:none}
.step-content h3{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:#fff}
.step-content h3 span{display:block;font-size:.85rem;font-weight:500;color:#ffb8b5}
.step-content p{font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.9);margin:0}
.notdienst-cta{text-align:center;margin-top:2.2rem}
.notdienst-btn{display:inline-block;background:#fff;color:var(--nd-red);padding:1rem 1.75rem;border-radius:.75rem;text-decoration:none;font-weight:700;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:all .25s}
.notdienst-btn:hover{transform:translateY(-2px);filter:brightness(.97);box-shadow:0 12px 36px rgba(0,0,0,.35)}

/* Fancy ND variant */
.front-emergency--smooth{position:relative;color:#fff;overflow:hidden;border-block:1px solid rgba(255,255,255,.08);background:radial-gradient(1200px 420px at 50% -80px,rgba(196,48,43,.35) 0,rgba(196,48,43,0) 60%),radial-gradient(900px 380px at 30% 10%,rgba(30,97,255,.15) 0,rgba(30,97,255,0) 55%),linear-gradient(180deg,#141417 0,#101114 60%,#0c0d10 100%)}
.front-emergency--smooth::before{content:"";position:absolute;left:0;right:0;top:-30px;height:90px;pointer-events:none;filter:blur(24px);background:linear-gradient(to bottom,rgba(196,48,43,.28),rgba(196,48,43,0))}
.front-emergency--smooth::after{content:"";position:absolute;left:0;right:0;bottom:-30px;height:100px;pointer-events:none;filter:blur(24px);background:linear-gradient(to top,rgba(30,97,255,.18),rgba(30,97,255,0))}

/* ND ticker & stripe */
.nd-ticker{max-width:1120px;margin:0 auto 1.1rem;position:relative;overflow:hidden}
.nd-ticker__rail{display:flex;gap:1.25rem;padding:.55rem .85rem;white-space:nowrap;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);will-change:transform;animation:nd-marquee var(--marquee-dur,28s) linear infinite}
.nd-ticker:hover .nd-ticker__rail{animation-play-state:paused}
@keyframes nd-marquee{from{transform:translateX(0)}to{transform:translateX(var(--marquee-shift,-50%))}}

.nd-steps{display:grid;gap:1.2rem;margin-top:1.75rem}
@media (min-width:900px){.nd-steps{grid-template-columns:repeat(4,1fr)}}
.nd-step{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(26,27,29,.95) 0,rgba(15,16,18,.92) 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,0,0,.6);color:#f1f5f9;border-radius:16px;padding:1.15rem 1.25rem;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s,border-color .25s}
.nd-step:hover{transform:translateY(-3px);box-shadow:0 20px 52px rgba(239,68,68,.32)}
.nd-step .nd-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f87171;margin-bottom:.5rem}
.nd-step h3{margin:0 0 .25rem;font-size:1rem;font-weight:700;color:#fff}
.nd-step p{margin:0;font-size:.9rem;line-height:1.45;color:#eef2ff}

/* ------------------------------------------------
   Reaktionszeit / nd-stripe — edge-to-edge + shimmer + badge
------------------------------------------------- */
.nd-stripe{
  /* Container-Bleed: gleicht ~2rem Seitenpadding aus */
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;

  margin-top: 1.25rem;
  margin-bottom: .5rem;
  padding: 0;
}

.nd-stripe .stripe-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 2rem;                 /* Texte wieder auf Containerkante ausrichten */
  margin-bottom: .55rem;
}

.nd-stripe .stripe-label{
  font-weight: 700;
  color: #0f172a;
}

.nd-stripe .stripe-value{          /* Badge für Minuten */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: var(--mb-blue);
  border: 1px solid rgba(37,99,235,.25);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Track (läuft wirklich bis an den Rand) */
.nd-stripe .stripe-track{
  position: relative;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;                /* Clip für Shimmer */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Füllung + Glow */
.nd-stripe .stripe-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;                       /* wird animiert */
  background: linear-gradient(90deg,#60a5fa,#2563eb,#1e3a8a);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(37,99,235,.35);
  overflow: hidden;
}

/* Shimmer/Glanz */
.nd-stripe .stripe-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 90%);
  transform: translateX(-100%);
  animation: ndStripeShimmer 1.8s linear infinite;
  pointer-events: none;
}

/* dezenter Highlight-Sheen oben */
.nd-stripe .stripe-track::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(255,255,255,.35),transparent 40%);
  pointer-events: none;
}

/* Dark-Context Tuning */
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-label{ color:#f8fafc; }
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-value{
  background: rgba(96,165,250,.12);
  color: #93c5fd;
  border-color: rgba(96,165,250,.35);
}
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-track{
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-fill{
  box-shadow: 0 0 22px rgba(30,97,255,.35);
}

/* Keyframes */
@keyframes ndStripeShimmer{
  0%   { transform: translateX(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* Fill 0 → 100% (endet am rechten Rand) */
.nd-stripe[data-fill="end"] .stripe-fill{
  width: 100%;
  animation: ndFillToEnd 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ndFillToEnd{
  from { width: 0; }
  to   { width: 100%; }
}



/* Dark context tuning */
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-label{color:#f8fafc}
:where(.front-emergency--boost,.section--dark) .nd-stripe .stripe-value{color:#93c5fd}

/* Notdienst special visuals */
#notdienst .nd-stripe{max-width:920px;margin:1.2rem 0 0}
#notdienst .nd-stripe .stripe-track{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#notdienst .nd-stripe .stripe-fill{background:linear-gradient(90deg,#60a5fa,#1e90ff,#14b8a6);box-shadow:0 0 22px rgba(30,97,255,.35)}
#notdienst #reaktionszeit .stripe-track{width:100%;margin:0;padding:0}
#notdienst #reaktionszeit .stripe-fill{width:0%;transition:width 2.2s cubic-bezier(.22,.61,.36,1)}

/* ND floating action & pulses */
.nd-fab{position:fixed;right:14px;bottom:14px;z-index:50;display:inline-flex;align-items:center;justify-content:center;padding:.65rem .9rem;border-radius:999px;background:#fff;color:#0f172a;font-weight:800;text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,.28)}
@media (min-width:900px){.nd-fab{display:none}}
.nd-fab::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(239,68,68,.45);animation:nd-ring 1.8s ease-out infinite}
@keyframes nd-ring{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 16px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes nd-badge-glow{0%,100%{box-shadow:0 0 18px rgba(239,68,68,.45),0 0 38px rgba(239,68,68,.25);filter:brightness(1)}50%{box-shadow:0 0 28px rgba(239,68,68,.65),0 0 58px rgba(239,68,68,.35);filter:brightness(1.15)}}
@keyframes nd-pulse-light{0%{transform:translateY(-50%) scale(1);opacity:1;box-shadow:0 0 6px rgba(255,255,255,.8)}60%{transform:translateY(-50%) scale(1.4);opacity:.5;box-shadow:0 0 18px rgba(255,255,255,.5)}100%{transform:translateY(-50%) scale(1);opacity:1;box-shadow:0 0 6px rgba(255,255,255,.8)}}

/* Glowing Notdienst badge (animated) */
#notdienst .eyebrow-badge--notdienst,
.front-emergency .eyebrow-badge--notdienst{
  position:relative;padding:.45rem 1.25rem .45rem 1.85rem;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#b91c1c,#dc2626 45%,#ef4444);border-radius:999px;box-shadow:0 0 18px rgba(239,68,68,.4);animation:nd-badge-glow 2.8s ease-in-out infinite
}
#notdienst .eyebrow-badge--notdienst::before,
.front-emergency .eyebrow-badge--notdienst::before{
  content:"";position:absolute;left:.65rem;top:50%;width:.55rem;height:.55rem;transform:translateY(-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.65),0 0 14px rgba(255,255,255,.75);animation:nd-pulse-light 1.4s ease-out infinite
}
@media (prefers-reduced-motion:reduce){
  #notdienst .eyebrow-badge--notdienst,
  .front-emergency .eyebrow-badge--notdienst,
  #notdienst .eyebrow-badge--notdienst::before,
  .front-emergency .eyebrow-badge--notdienst::before,
  .nd-fab::after{animation:none}
}

/* Callouts */
.nd-callout{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
.nd-hotline{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(90deg,#dc2626,#ef4444 55%,#f87171);color:#fff;border:1px solid rgba(239,68,68,.55);border-radius:999px;padding:.8rem 1.3rem;font-weight:800;text-decoration:none;box-shadow:0 6px 22px rgba(239,68,68,.28),inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s,box-shadow .25s,transform .15s;position:relative;overflow:hidden}
.nd-hotline:hover{background:linear-gradient(90deg,#f87171,#ef4444 55%,#dc2626);box-shadow:0 10px 28px rgba(239,68,68,.35);transform:translateY(-1px)}
.nd-hotline .badge{display:inline-block;background:#fff;color:#ef4444;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:900;letter-spacing:.05em;box-shadow:inset 0 0 0 1px rgba(239,68,68,.12)}
.nd-cta{border:2px solid #ef4444;color:#ef4444;background:#fff;border-radius:999px;padding:.75rem 1.3rem;font-weight:800;text-decoration:none;box-shadow:0 8px 18px rgba(239,68,68,.12);transition:background .25s,color .25s,transform .15s,box-shadow .25s;position:relative;overflow:hidden}
.nd-cta:hover{background:linear-gradient(90deg,#dc2626,#ef4444 55%,#f87171);color:#fff;box-shadow:0 12px 28px rgba(239,68,68,.28);transform:translateY(-1px)}
.nd-cta::after,.nd-hotline::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(239,68,68,.35);opacity:0;transition:box-shadow .35s ease,opacity .35s ease}
.nd-cta:hover::after,.nd-hotline:hover::after{box-shadow:0 0 24px 6px rgba(239,68,68,.35);opacity:1}

/* ------------------------------------------------
   7) Aquamatik / Jobs / Shopteaser
------------------------------------------------- */
.front-aquamatik{background:radial-gradient(circle at 10% 0,rgba(169,225,254,.35) 0,rgba(255,255,255,0) 60%),#f9fafc;position:relative;overflow:hidden}
.aquamatik-grid,.jobs-grid{display:grid;gap:2rem}
@media (min-width:900px){.aquamatik-grid,.jobs-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.aquamatik-eyebrow,.eyebrow-badge--glassblue{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;background:rgba(30,97,255,.08);border:1px solid rgba(30,97,255,.3);border-radius:.5rem;padding:.5rem .75rem;font-size:.7rem;font-weight:600;line-height:1.3;color:var(--mb-blue);text-transform:uppercase;letter-spacing:.08em;box-shadow:0 20px 40px rgba(0,0,0,.08);backdrop-filter:blur(10px) saturate(160%);margin-bottom:1rem}
.aquamatik-title,.jobs-title,.shopteaser-title{margin-top:1rem;font-size:clamp(1.2rem,.4vw + 1rem,1.5rem);line-height:1.3;font-weight:600;color:#0f172a}
.aquamatik-text,.jobs-text,.shopteaser-text{margin-top:1rem;font-size:.95rem;line-height:1.5;color:#444;max-width:50ch}
.aquamatik-list{margin-top:1.5rem;padding-left:1rem;font-size:.9rem;line-height:1.45;color:#0f172a}
.aquamatik-list li{list-style:disc;margin-bottom:.5rem}

.front-jobs{background:#fff;border-block:1px solid #e5e7eb}
.jobs-sidecard{background:#fff;border:1px solid rgba(30,97,255,.15);border-radius:1rem;box-shadow:0 8px 20px rgba(30,97,255,.05);padding:1.25rem 1.5rem;transition:all .4s}
.jobs-sidecard:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(30,97,255,.15)}
.jobs-sidecard__line{color:#334155;font-size:.9rem;padding-left:1rem;position:relative;margin-bottom:.4rem}
.jobs-sidecard__line::before{content:"•";position:absolute;left:0;color:var(--mb-blue)}

.front-shopteaser{background:linear-gradient(to bottom right,rgba(30,97,255,.06),rgba(30,97,255,.1));text-align:center;position:relative;overflow:hidden;padding-block:4rem}
.front-shopteaser::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(30,97,255,.12),transparent 70%);pointer-events:none;z-index:0}
.shopteaser-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
.shopteaser-title{font-size:2rem;font-weight:700;color:#0f172a;margin-bottom:.5rem;letter-spacing:-.01em;text-transform:uppercase}
.shopteaser-pill{background:linear-gradient(90deg,var(--mb-blue),#4387ff);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;padding:.25rem .7rem;margin-left:.4rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 12px rgba(30,97,255,.25);position:relative;overflow:hidden;isolation:isolate}
.shopteaser-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.5) 45%,transparent 90%);transform:translateX(-100%);animation:shopShimmer 2.8s infinite}
@keyframes shopShimmer{0%{transform:translateX(-100%);opacity:0}50%{opacity:1}100%{transform:translateX(100%);opacity:0}}

/* ------------------------------------------------
   8) Final CTA / Shared section head
------------------------------------------------- */
.front-final-cta{background:linear-gradient(to bottom right,rgba(255,255,255,1),rgba(30,97,255,.05));position:relative;overflow:hidden;padding-top:3rem}
.home-cta{background:var(--mb-color-accent);color:#fff}
.home-cta__grid{display:grid;gap:3rem}
@media (min-width:900px){.home-cta__grid{grid-template-columns:minmax(280px,1fr) auto;align-items:start}}
.home-cta__title{color:#fff;font-size:1.4rem;line-height:1.3;font-weight:600}
.home-cta__text{font-size:var(--mb-font-size-body);line-height:var(--mb-lineheight-body);color:rgba(255,255,255,.92);margin-top:1rem}
.home-cta__btn-primary{display:inline-block;background:#fff;color:#111;font-size:.9rem;line-height:1.2;padding:.75rem 1rem;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:all .25s}
.home-cta__btn-primary:hover{filter:brightness(.95)}
.home-cta__btn-outline{display:inline-block;background:transparent;color:#fff;font-size:.9rem;line-height:1.2;padding:.75rem 1rem;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:all .25s}
.home-cta__btn-outline:hover{background:rgba(255,255,255,.1)}
.home-cta__contact{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:var(--mb-radius-card);box-shadow:0 30px 80px rgba(0,0,0,.25);backdrop-filter:blur(6px);padding:1.25rem 1.5rem;font-size:.9rem;line-height:1.4;color:#fff;max-width:320px}

.section-head,.section-head--light,.home-strategy__head{margin-bottom:2.5rem}
.section-title,.section-title--light,.home-strategy__title{margin:0 0 .75rem;font-weight:700;line-height:1.15}
.section-text,.section-text--light,.home-strategy__text{margin:0;font-size:1rem;line-height:1.55;opacity:.9}

/* ------------------------------------------------
   9) Utility sections & stripes
------------------------------------------------- */
.section--dark .card{background:#1f1f1f;border:1px solid rgba(255,255,255,.12);color:#fff}
.section--dark .card__title{color:#fff}
.section--dark .card__text{color:rgba(255,255,255,.85)}

.marel-stripe{position:relative;width:100%;background:#0f172a;padding:3rem 0;overflow:hidden;text-align:center}
.stripe-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#2563eb,#1e3a8a);box-shadow:0 0 25px rgba(37,99,235,.5);border-radius:999px;transition:width 2.4s ease-out}
.stripe-text{margin-bottom:1.4rem;font-weight:600;color:#f8fafc;display:flex;justify-content:center;gap:.5rem;font-size:1.1rem;letter-spacing:.03em}
.stripe-label{color:#93c5fd}
.stripe-value{color:#60a5fa}

/* ------------------------------------------------
   10) Misc effects & reveals
------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal-base{opacity:0;transform:translate3d(0,12px,0);filter:saturate(.98);transition:opacity .5s,transform .6s cubic-bezier(.22,.61,.36,1),filter .6s}
  .reveal-up{transform:translate3d(0,18px,0)}
  .reveal-left{transform:translate3d(18px,0,0)}
  .reveal-fade{transform:none}
  .reveal-in{opacity:1;transform:translate3d(0,0,0);filter:saturate(1)}
  .reveal-stagger>*{transition-delay:calc(var(--delay,0)*1ms)}
}
.reveal-y{opacity:0;transform:translate3d(0,60px,0);transition:opacity 1.2s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.19,1,.22,1)}
.reveal-y.is-visible{opacity:1;transform:translate3d(0,0,0)}

/* ------------------------------------------------
   11) Page-specific tweaks
------------------------------------------------- */
#wie-wir-arbeiten .mb-btn-primary:hover{background:#2d6bff;box-shadow:0 12px 36px rgba(30,97,255,.45);transform:translateY(-2px)}
#wie-wir-arbeiten .mb-btn-outline{border:2px solid var(--mb-blue);color:var(--mb-blue);background:transparent;border-radius:.65rem;padding:.9rem 1.8rem;font-weight:600;text-decoration:none;transition:all .25s}
#wie-wir-arbeiten .mb-btn-outline:hover{background:var(--mb-blue);color:#fff;box-shadow:0 10px 30px rgba(30,97,255,.25);transform:translateY(-2px)}

/* ------------------------------------------------
   12) Responsive helpers
------------------------------------------------- */
.finalcta-grid{display:grid;grid-template-columns:1fr 340px;gap:4rem;align-items:start}
.finalcta-main{display:flex;flex-direction:column;justify-content:center;gap:2rem}
@media (max-width:900px){
  .finalcta-grid{grid-template-columns:1fr;gap:2.5rem}
  .finalcta-contact{margin-top:1rem}
}
.finalcta-contact{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-radius:14px;padding:1.8rem;box-shadow:0 4px 22px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:1.2rem}
.finalcta-contact__eyebrow{color:#2563eb;font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}
.finalcta-contact__block{border-top:1px solid rgba(0,0,0,.08);padding-top:.8rem}
.finalcta-contact__org{font-weight:700;color:#0f172a;font-size:1.1rem}
.finalcta-contact__region{color:#475569;font-size:.95rem;margin-top:.1rem}
.finalcta-contact__label{font-size:.8rem;color:#64748b;text-transform:uppercase;margin-bottom:.25rem;letter-spacing:.04em}
.finalcta-contact__link{color:#1e293b;text-decoration:none;font-weight:600}
.finalcta-contact__link:hover{color:#2563eb}


/* =========================================================
   MAREL BAU — Konsolidiertes CSS (bereinigt & dedupliziert)
   - Einheitliche Badges
   - CTA "Jetzt anrufen" blau (global), #notdienst rot
   - Hero-Transparenz nur über dem Video
   - Listen-Indents & Mini-List Fix
   - Aquamatik/Notdienst Feinschliff
   Stand: 2025-11-02
========================================================= */

/* ------------------------------------------------
   1) Variablen
------------------------------------------------- */
:root{
  --mb-color-bg-dark:#0f0f10;
  --mb-color-bg-light:#ffffff;
  --mb-color-bg-soft:#f5f5f5;

  --mb-color-text-dark:#111111;
  --mb-color-text-mid:#444444;

  --mb-blue:#2563eb;
  --mb-blue-2:#3b82f6;
  --mb-blue-soft:rgba(30,97,255,.2);

  --mb-radius-card:16px;
  --mb-shadow-card:0 24px 60px rgba(0,0,0,.06);

  --mb-font-size-body:15px;
  --mb-gap-badge-title:.75rem;

  /* Notdienst */
  --nd-red:#dc2626;
  --nd-red-2:#ef4444;
}

/* ------------------------------------------------
   2) Eyebrow/Badge – Basis & Varianten
------------------------------------------------- */
/* Einheitlicher Badge-Stil (Hero + Bereiche + Jobs + Aquamatik) */
.eyebrow-badge,
.mb-eyebrow,
.hero-v2__eyebrow,
.home-services__eyebrow,
.home-strategy__eyebrow,
.home-cta__eyebrow,
.home-cta__contact-eyebrow,
.jobs-sidecard__pill,
.aquamatik-eyebrow,
.home-services__card .area-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.4rem;
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:.3rem .65rem;
  border-radius:.55rem;
  line-height:1.2;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  backdrop-filter:blur(8px) saturate(160%);
  width:auto !important;
  max-width:max-content;
  min-width:0;
  flex:0 0 auto;
  align-self:flex-start;
  margin-left:0;
  margin-right:auto;
  margin-bottom:var(--mb-gap-badge-title)!important;

}

/* Guards: verhindert Stretch in Flex-Containern (Hero/Final-CTA) */
.hero-v2__card .hero-v2__eyebrow,
.front-hero .eyebrow-badge,
.home-hero .eyebrow-badge,
.front-final-cta .eyebrow-badge,
.front-final-cta .home-cta__eyebrow{
  width:auto !important;
  max-width:max-content;
  min-width:0;
  flex:0 0 auto;
  align-self:flex-start;
}


/* Helle/dunkle Varianten */
.eyebrow-badge--light,
.hero-v2__eyebrow--light{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  color:#0f172a;
}
.eyebrow-badge--dark,
.hero-v2__eyebrow--dark{
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}

/* Blaue Glas/Aquamatik Varianten */
.eyebrow-badge--glassblue,
.hero-v2__eyebrow--wasserschaden{
  background:var(--mb-blue-soft);
  border:1px solid rgba(30,97,255,.4);
  color:#fff;
  box-shadow:0 0 18px rgba(30,97,255,.25);
}
.eyebrow-badge--aquamatik,
.hero-v2__eyebrow--aquamatik{
  background:linear-gradient(90deg,var(--mb-blue),var(--mb-blue-2));
  border:1px solid rgba(30,97,255,.45);
  color:#fff;
  box-shadow:0 0 22px rgba(30,97,255,.3);
}

/* Card-Badge kompakter */
.home-services__card .area-eyebrow{
  font-size:.8rem;
  font-weight:600;
  padding:.25rem .5rem;
  border-radius:.5rem;
}

/* HERO-Badges eine Stufe kleiner */
.hero-v2__eyebrow,
.front-hero .eyebrow-badge,
.home-hero .eyebrow-badge{
  font-size:.78rem;         /* kleiner */
  padding:.22rem .5rem;     /* kompakter */
  border-radius:.45rem;
  gap:.35rem;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  margin-bottom:.55rem;
}

/* „Edle“ graue Badges (sektionale Überschriften) */
.home-services__eyebrow,
.home-strategy__eyebrow,
#refs .eyebrow-badge,
.front-jobs .eyebrow-badge,
.front-shopteaser .shopteaser-badge,
.front-final-cta .eyebrow-badge{
  background:#fff;
  border:1px solid rgba(15,23,42,.15);
  color:rgba(15,23,42,.55);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.08em;
  padding:.4rem 1rem;
  border-radius:.55rem;
  box-shadow:none;
}
.home-services__eyebrow:hover,
.home-strategy__eyebrow:hover,
#refs .eyebrow-badge:hover,
.front-jobs .eyebrow-badge:hover,
.front-shopteaser .shopteaser-badge:hover,
.front-final-cta .eyebrow-badge:hover{
  border-color:rgba(15,23,42,.25);
  color:rgba(15,23,42,.7);
}

/* Final CTA „Nächster Schritt“ – noch dezenter */
.front-final-cta .eyebrow-badge,
.front-final-cta .home-cta__eyebrow{
  font-size:.80rem;
  letter-spacing:.06em;
  padding:.28rem .65rem;
  border-radius:.45rem;
  box-shadow:none;
}

/* Nur Aquamatik als Badge, andere Bereiche blaue Typo */
.home-services__card:not(.is-aquamatik) .area-eyebrow{
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
  color:var(--mb-blue)!important;
  font-size:.95rem!important;
  font-weight:700!important;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.4rem;
  display:inline-block;
}


/* ------------------------------------------------
   3) CTA-Buttons
------------------------------------------------- */
/* Global „Jetzt anrufen“ blau */
.nd-hotline,
.notdienst-btn,
.nd-cta,
.home-cta__btn-primary,
.hero-v2__btn-primary{
  background:linear-gradient(90deg,var(--mb-blue),var(--mb-blue-2));
  color:#fff;
  border:none;
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  transition:all .25s;
}
.nd-hotline:hover,
.notdienst-btn:hover,
.nd-cta:hover,
.home-cta__btn-primary:hover,
.hero-v2__btn-primary:hover{
  background:linear-gradient(90deg,#1e61ff,var(--mb-blue));
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(37,99,235,.45);
}

/* Notdienst-Ausnahme: rot & ohne Shadow/Pulse dezent */
#notdienst .nd-hotline,
#notdienst .nd-cta{
  background:linear-gradient(90deg,var(--nd-red),var(--nd-red-2) 55%,#f87171)!important;
  color:#fff!important;
  border:1px solid rgba(239,68,68,.45)!important;
  box-shadow:none!important;
  filter:none!important;
  animation: ndPulse 1.8s ease-in-out infinite;
}
#notdienst .nd-hotline:hover,
#notdienst .nd-cta:hover{
  transform:translateY(-1px) scale(1.01);
}

/* Puls-Animation (einmalig definiert) */
@keyframes ndPulse{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(239,68,68,0)}
  50%{transform:translateY(-1px) scale(1.02);box-shadow:0 0 0 12px rgba(239,68,68,.14)}
}

/* ------------------------------------------------
   4) Hero – Transparenz nur über Video
------------------------------------------------- */
.hero-v2__tint,
.front-hero__tint,
.home-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.25));
  z-index:1;
  pointer-events:none;
}
.hero-v2__video,
.front-hero__video,
.home-hero__video{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-v2__inner,
.front-hero__inner,
.home-hero__inner{
  position:relative;
  z-index:2;
  color:#fff;
}
/* Übergangs-Overlays entfernen (falls Theme) */
.hero-v2::after,
.front-hero::after,
.home-hero::after{
  content:none!important;
  display:none!important;
}
/* Services direkt anschließen */
.home-services{
  position:relative;
  z-index:3;
  margin-top:0!important;
  background:#fff;
}

/* ------------------------------------------------
   5) Listen / Stichpunkte – Indent & Mini-List Fix
------------------------------------------------- */
.points,.bullet-list,.feature-list{
  list-style:disc outside;
  margin:.6rem 0 1rem;
  padding-left:1.25rem;
}
.points li,.bullet-list li,.feature-list li{
  margin:.3rem 0;
  padding-left:.25rem;
}
.fm-block h3 + ul,
.fm-block h4 + ul,
.section h3 + ul,
.section h4 + ul{
  list-style:disc;
  margin:.6rem 0 1rem;
  padding-left:1.25rem;
}
.fm-block ul ul{
  list-style:circle;
  margin-top:.25rem;
  padding-left:1.25rem;
}
.section--dark .points li,
#notdienst .points li{color:rgba(255,255,255,.95)}
.card h3 + ul,
.mb-card h3 + ul{margin-top:.5rem}

/* Strategy-Cards: Mini-List wieder aktivieren */
.home-strategy__card ul.mini-list{
  list-style:disc!important;
  list-style-position:outside;
  margin:.6rem 0 .9rem;
  padding-left:1.25rem;
}
.home-strategy__card ul.mini-list li{
  display:list-item;
  margin:.3rem 0;
}
.section--dark .mini-list li,
#notdienst .mini-list li{color:rgba(255,255,255,.95)}
.home-strategy__card p + ul.mini-list{margin-top:.5rem}

/* ------------------------------------------------
   6) Aquamatik Card – Lesbarkeit
------------------------------------------------- */
.home-services__card.is-aquamatik{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,#3b7bff 0,var(--mb-blue) 100%);
  color:#fff;
  border:none;
  border-radius:1.25rem;
  box-shadow:0 10px 30px rgba(30,97,255,.35);
}
.home-services__card.is-aquamatik .area-eyebrow,
.home-services__card.is-aquamatik .area-title,
.home-services__card.is-aquamatik .area-text,
.home-services__card.is-aquamatik .area-more{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.home-services__card.is-aquamatik .area-eyebrow{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  border-radius:.6rem;
  padding:.35rem .65rem;
}
.home-services__card.is-aquamatik .area-more{
  font-weight:700;
  opacity:.96;
}
.home-services__card.is-aquamatik .area-more:hover{opacity:1}
.home-services__card.is-aquamatik:hover{filter:brightness(1.02)}
.home-services__card.is-aquamatik:focus-visible{
  outline:2px solid rgba(255,255,255,.75);
  outline-offset:3px;
}

/* ------------------------------------------------
   7) Notdienst – Badges, Karten, Buttons, Ticker
------------------------------------------------- */
/* Badge 24/7 ohne Glow/Schatten + mehr Luft */
#notdienst .section-head--light .eyebrow-badge--notdienst{
  box-shadow:none!important;
  filter:none!important;
  margin-bottom:1.6rem!important;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(90deg,#ef4444,#f87171);
  color:#fff;
}

/* Karten & Buttons im Notdienst ohne Schatten */
#notdienst .emergency-card,
#notdienst .emergency-card:hover,
#notdienst .home-services__card,
#notdienst .home-services__card:hover,
#notdienst .btn,
#notdienst button,
#notdienst .button{
  box-shadow:none!important;
  filter:none!important;
}

/* Badge im Hotline-Button lesbar */
#notdienst .nd-hotline .badge{
  background:#fff!important;
  color:#ef4444!important;
  box-shadow:none!important;
}

/* Ticker kompakt & ohne Hover-Pause */
.nd-ticker__rail{
  display:inline-flex;
  align-items:center;
  gap:1.25rem;
  white-space:nowrap;
  will-change:transform;
  animation:nd-marquee var(--marquee-dur,12s) linear infinite;
}
.nd-ticker:hover .nd-ticker__rail{animation-play-state:running!important;}
.nd-ticker__rail span{display:inline-flex;align-items:center;gap:.4rem}
.nd-ticker__rail svg{flex-shrink:0;vertical-align:middle;opacity:.9;transition:transform .25s ease,opacity .25s ease}
.nd-ticker__rail span:hover svg{transform:scale(1.15);opacity:1}

@keyframes nd-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(var(--marquee-shift,-50%))}
}

/* Mehr Abstand zwischen Header und Ticker im Notdienst */
#notdienst header.section-head--light.emergency-head{margin-bottom:2.6rem!important}

/* ------------------------------------------------
   8) Sonstiges kleines Cleanup
------------------------------------------------- */
/* Hero Primary Hover konsistent (falls alternative Klassen vorhanden) */
.hero-v2__btn-primary{
  box-shadow:0 10px 24px rgba(37,99,235,.35);
}
.hero-v2__btn-primary:hover{
  box-shadow:0 12px 32px rgba(37,99,235,.45);
  transform:translateY(-2px);
}

/* ------------------------------------------------
   Fix: Steps (Notdienst) – Schatten wirkt abgeschnitten
------------------------------------------------- */
#notdienst .nd-steps,
.nd-steps {
  padding: 2rem 1rem; /* mehr Luft rundherum */
}

#notdienst .nd-step,
.nd-step {
  border-radius: 1.2rem; /* vorher vermutlich 1rem */
  box-shadow: 0 10px 32px rgba(0,0,0,.3);
  margin: 0 0.6rem 1.4rem 0.6rem; /* etwas mehr Abstand */
  overflow: visible; /* Schatten nicht kappen */
}

/* =======================================================
   REFERENZEN (Front/Facility) – MAREL-Style FINAL CLEAN
======================================================= */

/* Section base */
#refs.section-pad {
  position: relative;
  background: #fff;
  padding-block: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

/* Header */
#refs .rfx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
#refs .rfx-head .eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .3rem .65rem;
  border-radius: .55rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(15,23,42,.55);
  margin-bottom: .75rem;
}
#refs .section-title {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 800;
  color: var(--mb-blue);
  margin: 0 0 .5rem 0;
  line-height: 1.2;
}
#refs .section-text {
  font-size: 1.05rem;
  color: rgba(15,23,42,.7);
  margin: 0;
}

/* CTA Button */
#refs .btn-gradient {
  display: inline-block;
  padding: .7rem 1.4rem;
  font-weight: 700;
  font-size: .95rem;
  border-radius: .6rem;
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-2));
  color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.25);
  transition: all .25s ease;
  text-decoration: none;
  white-space: nowrap;
}
#refs .btn-gradient:hover {
  box-shadow: 0 10px 28px rgba(37,99,235,.35);
  transform: translateY(-2px);
}

/* --- Slider / Rail --- */
#refs .rfx-viewport {
  position: relative;
  overflow: hidden;
  padding: 0 28px; /* Platz für Pfeile */
}
#refs .rfx-rail {
  display: flex;
  gap: 20px;
  will-change: transform;
  transform: translateZ(0);
}

/* --- Cards --- */
#refs .rfx-card {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .35s ease, box-shadow .35s ease;
}
#refs .rfx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.1);
}

/* --- Bild --- */
#refs .rfx-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  background: transparent;
  transition: transform .4s ease;
}
#refs .rfx-card:hover .rfx-img {
  transform: scale(1.03);
}

/* --- Overlay mit Verlauf --- */
#refs .rfx-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,0) 100%
  );
  color: #fff;
  pointer-events: none;
}
#refs .rfx-meta {
  font-size: .85rem;
  color: #a7c8ff;
  margin-bottom: .25rem;
  font-weight: 600;
}
#refs .rfx-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* --- Slider-Navigation (‹ ›) --- */
#refs .rfx-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  color: rgba(15,23,42,.6);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: saturate(150%) blur(6px);
}
#refs .rfx-nav:hover {
  background: var(--mb-blue);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37,99,235,.25);
  transform: translateY(-50%) scale(1.05);
}
#refs .rfx-prev { left: 6px; }
#refs .rfx-next { right: 6px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  #refs .rfx-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #refs .rfx-card {
    width: 82vw;
  }
  #refs .rfx-viewport {
    padding: 0 16px;
  }
  #refs .rfx-prev { left: 2px; }
  #refs .rfx-next { right: 2px; }
}

/* ----------------------------------------------
   Referenzen – Badge (Meta) über Text
---------------------------------------------- */
#refs .rfx-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,0) 100%);
  color: #fff;
  pointer-events: none;
}

/* Meta-Badge (ehem. meta) */
#refs .rfx-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .3rem .7rem;
  border-radius: .5rem;
  margin-bottom: .4rem;
  background: rgba(37,99,235,.25);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  backdrop-filter: blur(6px) saturate(180%);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  max-width: 85%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Titel darunter */
#refs .rfx-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* =======================================================
   FRONT: JOBS – Feinschliff MAREL Style (Final)
======================================================= */

/* === Section Base === */
.front-jobs.section-pad {
  position: relative;
  background: #f8fafc;
  padding-block: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

/* === GRID === */
.jobs-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .jobs-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* === Badge oben (wie alle anderen) === */
.front-jobs .eyebrow-badge--glassblue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .7rem;
  border-radius: .55rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(15,23,42,.55);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}

/* === Title + Text === */
.jobs-title {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 800;
  color: var(--mb-blue);
  margin-bottom: .75rem;
  line-height: 1.25;
}
.jobs-text {
  font-size: 1.05rem;
  color: rgba(15,23,42,.75);
  margin-bottom: 1.75rem;
  max-width: 720px;
}

/* === JOB-LIST === */
.jobs-list {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
}
.jobs-list li {
  padding: .55rem 0 .55rem 1rem; /* zusätzlicher Einzug */
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 600;
  color: rgba(15,23,42,.85);
  transition: color .25s ease;
  position: relative;
}
.jobs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 5px;
  height: 5px;
  background: var(--mb-blue);
  border-radius: 50%;
  opacity: 0.9;
}
.jobs-list li:hover {
  color: var(--mb-blue);
}

/* === CTA Buttons === */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cta-row a {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  border-radius: .6rem;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: all .25s ease;
}

/* Primärer Button */
.cta-row .btn-gradient {
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-2));
  color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.25);
}
.cta-row .btn-gradient:hover {
  box-shadow: 0 10px 28px rgba(37,99,235,.35);
  transform: translateY(-2px);
}

/* Sekundärer Button */
.cta-row .btn-ghost {
  border: 1px solid var(--mb-blue);
  color: var(--mb-blue);
  background: transparent;
}
.cta-row .btn-ghost:hover {
  background: var(--mb-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.3);
}

/* === Sidecard (unverändert schön clean) === */
.jobs-sidecard {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  padding: 1.8rem 1.5rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-self: flex-start;
  position: relative;
}
.jobs-sidecard__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-2));
  border-radius: 999px;
  padding: .35rem .9rem;
  align-self: flex-start;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
  margin-bottom: .5rem;
}
.jobs-sidecard__line {
  position: relative;
  font-size: .95rem;
  color: rgba(15,23,42,.8);
  font-weight: 600;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.jobs-sidecard__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 3px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--mb-blue);
  opacity: 0.9;
}

/* =======================================================
   FRONT: SHOPTEASER – MAREL Style (Final)
======================================================= */

.front-shopteaser.section-pad {
  background: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(0,0,0,.05);
}

.shopteaser-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  left: 30px; /* <— feiner optischer Offset */
}

/* optional: responsiv abschwächen */
@media (max-width: 768px) {
  .shopteaser-inner {
    left: 10px;
  }
}
/* Badge „INCOMING“ */
.shopteaser-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .75rem;
  border-radius: .55rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(15,23,42,.55);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}

/* Titel */
.shopteaser-title {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 800;
  color: var(--mb-blue);
  margin-bottom: .75rem;
  line-height: 1.25;
}

/* „Beta“-Pill */
.shopteaser-title {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 800;
  color: var(--mb-blue);
  margin-bottom: .75rem;
  line-height: 1.25;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
}


/* Beschreibung */
.shopteaser-text {
  font-size: 1.05rem;
  color: rgba(15,23,42,.75);
  margin: 0 auto 1.75rem;
  max-width: 640px;
  line-height: 1.6;
}

/* Button */
.btn-shopghost {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: .6rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--mb-blue);
  border: 1px solid var(--mb-blue);
  text-decoration: none;
  transition: all .25s ease;
  background: transparent;
}

.btn-shopghost:hover {
  background: var(--mb-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.3);
  transform: translateY(-2px);
}

/* === Einheitlicher Button-Look (Pill-Style) === */
.btn-pill {
  display: inline-block;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all .25s ease;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Primär – kräftiger Gradient wie überall */
.btn-primary {
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-2));
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(37,99,235,.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,.35);
}

/* Sekundär – heller Rahmen mit gleichem Ton */
.btn-outline {
  background: transparent;
  color: var(--mb-blue);
  border: 1px solid var(--mb-blue);
  box-shadow: 0 4px 14px rgba(37,99,235,.12);
}
.btn-outline:hover {
  background: var(--mb-blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.3);
  transform: translateY(-2px);
}

/* Optional – harmonischer Abstand nebeneinander */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Entfernt den Abstand unter dem letzten Abschnitt vor dem Footer */
#reaktionszeit,
#reaktionszeit + .section-pad,
.front-cta.section-pad {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Falls dein blauer Streifen in einem eigenen div steckt */
#reaktionszeit {
  display: block;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Footer bündig starten lassen */
footer {
  margin-top: 0 !important;
}



/* === REVEAL ANIMATION für Referenzen === */
#refs .rfx-card.reveal-base {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.98);
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
}

#refs .rfx-card.reveal-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* sanftes Reinfliegen des Bildes */
#refs .rfx-card.reveal-base .rfx-img {
  transform: translateY(8px) scale(1.02);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
#refs .rfx-card.reveal-in .rfx-img {
  transform: translateY(0) scale(1);
}

/* Reveal: Grundzustand im #refs */
#refs .reveal-base {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1);
}

/* Varianten (optional, aber nice) */
#refs .reveal-up   { transform: translate3d(0, 18px, 0); }
#refs .reveal-left { transform: translate3d(18px, 0, 0); }
#refs .reveal-fade { transform: none; }

/* Aktiviert: wenn IO-Klasse gesetzt wird */
#refs .reveal-in {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Stagger: Verzögerung pro Kind über --delay (dein JS setzt das) */
#refs .reveal-stagger > * {
  transition-delay: calc(var(--delay, 0) * 1ms);
}