/* === Base / Scope ======================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:#f7fafc;
  color:#0f2533;
  line-height:1.6;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Utility */
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
.skip-link{
  position:absolute; left:8px; top:-40px; z-index:9999;
  background:#0f2533; color:#fff; padding:8px 12px; border-radius:8px;
  text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:8px; }

/* Scoped variables */
#alab-services{
  --alab-gold:#d4af37; --alab-gold-2:#f4d03f;
  --alab-blue:#5b8def; --alab-dark-blue:#2c5aa0;
  --alab-ink:#0f2533; --alab-gray:#5b6b78;
  --alab-light:#f8f9fa; --alab-white:#fff;
  --ring:0 0 0 3px rgba(212,175,55,.35), 0 0 0 6px rgba(212,175,55,.18);
  --shadow-1:0 2px 10px rgba(15,37,51,.08);
  --shadow-2:0 6px 18px rgba(15,37,51,.12);
  --radius:16px;
  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:18px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:56px; --s-9:80px;
}

#alab-services .container{ max-width:1200px; margin:0 auto; padding:0 var(--s-5); }
@media (max-width:900px){ #alab-services .container{ padding:0 var(--s-4) } }

#alab-services .text-gold{ color:var(--alab-gold); }

/* === Hero =============================================================== */
#alab-services .hero{
  padding:var(--s-9) 0 var(--s-8);
  background:
    radial-gradient(1200px 300px at 50% 0%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(#fff,#fff);
  text-align:center; position:relative; overflow:hidden;
}
#alab-services .hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:999px; background:#fff; border:1px solid #eceff3;
  box-shadow:var(--shadow-1); font-size:.9rem; color:var(--alab-gray); margin-bottom:var(--s-4);
}
#alab-services .hero__kicker i{ color:var(--alab-gold); }
#alab-services .hero__title{
  font-size:clamp(1.85rem, 2.6vw + 1rem, 3.05rem); line-height:1.2; font-weight:800;
  letter-spacing:.2px; margin-bottom:var(--s-3);
}
#alab-services .hero__subtitle{
  max-width:900px; margin:0 auto var(--s-6); color:var(--alab-gray); font-size:1.06rem;
}
#alab-services .hero__divider{
  width:min(260px,52%); height:4px; margin:0 auto;
  background:linear-gradient(90deg,var(--alab-gold),var(--alab-gold-2)); border-radius:4px;
}

/* === Sections / Layout ================================================== */
#alab-services .main{ background:var(--alab-light); padding:var(--s-9) 0; }
#alab-services .section{ margin-bottom:var(--s-9); }
#alab-services .section-title{
  text-align:center; font-weight:800; letter-spacing:.15px;
  font-size:clamp(1.65rem,1.45vw + 1rem,2.25rem); margin-bottom:var(--s-2); position:relative;
}
#alab-services .section-title::after{
  content:""; display:block; width:72px; height:4px; margin:10px auto 0;
  background:linear-gradient(90deg,var(--alab-gold),var(--alab-gold-2)); border-radius:3px;
}
#alab-services .section-subtitle{
  text-align:center; color:var(--alab-gray); max-width:820px; margin:0 auto var(--s-7); font-size:1.02rem;
}

/* Grid */
#alab-services .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,1.5vw,30px); align-items:stretch; }
#alab-services .col-4{ grid-column:span 4; }
#alab-services .col-6{ grid-column:span 6; }
#alab-services .col-12{ grid-column:span 12; }
@media (max-width:1024px){ #alab-services .col-md-6{ grid-column:span 6 } #alab-services .col-md-12{ grid-column:span 12 } }
@media (max-width:768px){ #alab-services .col-sm-12{ grid-column:span 12 } }

/* === Cards =============================================================== */
#alab-services .card{
  background:#fff; border:1px solid #e9edf2; border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:clamp(var(--s-6), 1.4vw + 12px, var(--s-7));
  display:flex; flex-direction:column; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:hidden; will-change:transform;
}
#alab-services .card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:40px;
  background:linear-gradient(180deg,transparent, rgba(0,0,0,.035));
  pointer-events:none;
}
#alab-services .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:#e2e8f0; }
#alab-services .card__topline{
  content:""; position:absolute; left:0; top:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--alab-gold),var(--alab-blue));
}
#alab-services .card__icon{
  width:72px; height:72px; border-radius:18px; display:grid; place-items:center; margin-bottom:var(--s-5);
  background:linear-gradient(135deg,var(--alab-gold),var(--alab-gold-2)); color:#fff; box-shadow:var(--shadow-2);
  outline:2px solid rgba(212,175,55,.15);
}
#alab-services .card__icon i{ font-size:1.8rem; }
#alab-services .card__title{ font-size:1.25rem; font-weight:800; margin-bottom:var(--s-4); letter-spacing:.1px; }
#alab-services .card__list{ list-style:none; margin:0 0 var(--s-5); display:flex; flex-direction:column; gap:10px; color:var(--alab-gray); }
#alab-services .card__list li{ position:relative; padding-left:26px; line-height:1.55; }
#alab-services .card__list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--alab-gold); font-weight:800; }
#alab-services .card__badge{
  display:inline-block; font-size:.78rem; font-weight:800; color:var(--alab-gray);
  background:var(--alab-light); padding:6px 10px; border-radius:12px; margin-left:10px;
}
#alab-services .card__cta{ margin-top:auto; }

/* === Buttons ============================================================= */
#alab-services .btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  font-weight:800; font-size:.98rem; text-decoration:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
#alab-services .btn:focus-visible{ outline:none; box-shadow:var(--ring); }
#alab-services .btn i{ font-size:1em; }
#alab-services .btn--primary{
  background:linear-gradient(45deg,var(--alab-gold),var(--alab-gold-2));
  color:var(--alab-ink); box-shadow:0 8px 24px rgba(212,175,55,.25);
}
#alab-services .btn--primary:hover{ transform:translateY(-2px); }
#alab-services .btn--ghost{ background:transparent; color:var(--alab-ink); border-color:#d7dde5; }
#alab-services .btn--ghost:hover{ border-color:var(--alab-ink); }
#alab-services .btn--secondary{ background:transparent; color:#fff; border:2px solid #fff; }
#alab-services .btn--secondary:hover{ background:#fff; color:var(--alab-ink); }

/* === Maintenance block =================================================== */
#alab-services .maintenance{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#ffffff),
    radial-gradient(600px 200px at 10% -10%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(500px 180px at 100% 120%, rgba(91,141,239,.07), transparent 60%);
  border:1px solid #e9edf2; border-radius:20px;
  padding:clamp(var(--s-7), 2vw + 18px, var(--s-8)); box-shadow:var(--shadow-2);
}
#alab-services .maint-item{
  text-align:center; border:1px solid #eceff3; border-radius:14px; padding:var(--s-6);
  background:linear-gradient(135deg,#fafbfc,#fff);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#alab-services .maint-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:#e2e8f0; }
#alab-services .maint-media{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin:0 auto var(--s-4);
  background:linear-gradient(135deg,var(--alab-gold),var(--alab-gold-2)); color:#fff; box-shadow:var(--shadow-2);
  animation:slow-float 6s ease-in-out infinite;
}
#alab-services .maint-media .icon{ font-size:1.8rem; }
@keyframes slow-float{ 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
#alab-services .maint-period{ font-weight:800; font-size:1.05rem; }
#alab-services .maint-chip{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:800; color:#2f3c4a; background:#eef2f7; }
#alab-services .maint-list{ list-style:none; margin-top:6px; display:flex; flex-direction:column; gap:8px; color:var(--alab-gray); text-align:left; }
#alab-services .maint-list li{ position:relative; padding-left:22px; }
#alab-services .maint-list li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--alab-blue),var(--alab-dark-blue));
}

/* === Mid & Bottom CTA ==================================================== */
#alab-services .cta-mid{ background:var(--alab-light); padding:var(--s-8) 0; text-align:center; }
#alab-services .cta-mid h3{ font-size:1.4rem; margin-bottom:var(--s-3); }
#alab-services .cta-mid p{ color:var(--alab-gray); margin-bottom:var(--s-5); }
#alab-services .cta-mid .btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

#alab-services .cta-bottom{
  background:linear-gradient(135deg,var(--alab-ink) 0%, var(--alab-dark-blue) 100%); color:#fff;
  padding:var(--s-9) 0; text-align:center; position:relative; overflow:hidden;
}
#alab-services .cta-bottom::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(400px 120px at 15% 20%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(380px 110px at 85% 80%, rgba(212,175,55,.12), transparent 60%);
  pointer-events:none;
}
#alab-services .cta-bottom h2{ font-size:clamp(1.6rem, 1.6vw + 1rem, 2.2rem); margin-bottom:var(--s-3); }
#alab-services .cta-bottom p{ opacity:.95; margin-bottom:var(--s-5); }
#alab-services .cta-bottom .btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* === Reveal on scroll ==================================================== */
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
#alab-services .reveal{ opacity:0; transform:translateY(18px); }
#alab-services .reveal.show{ animation:fadeUp .6s ease forwards; }

/* === Modal =============================================================== */
#alab-services .modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(15,37,51,.5); z-index:9999; padding:20px;
}
#alab-services .modal--open{ display:flex; }
#alab-services .modal__dialog{
  background:#fff; width:min(640px,92vw); border-radius:16px; box-shadow:var(--shadow-2); overflow:hidden;
  transform:translateY(6px); animation:dialogIn .25s ease forwards;
}
@keyframes dialogIn{ to{ transform:translateY(0) } }
#alab-services .modal__header{
  display:flex; justify-content:space-between; align-items:center; padding:20px 24px;
  border-bottom:1px solid #e9edf2;
  background:linear-gradient(90deg, rgba(212,175,55,.08), transparent);
}
#alab-services .modal__title{ font-size:1.2rem; font-weight:800; }
#alab-services .modal__close{ background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:var(--alab-gray); }
#alab-services .modal__close:focus-visible{ box-shadow:var(--ring); border-radius:8px; }
#alab-services .modal__body{ padding:24px; }
#alab-services .form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#alab-services .form .full{ grid-column:1 / -1; }
#alab-services .input{ display:flex; flex-direction:column; gap:6px; }
#alab-services .input label{ font-size:.9rem; color:#4b5563; font-weight:600; }
#alab-services .input input,
#alab-services .input textarea,
#alab-services .input select{
  width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; font:inherit;
}
#alab-services .input input:focus,
#alab-services .input textarea:focus{ outline:none; box-shadow:var(--ring); border-color:#e0d1a1; }
#alab-services .input textarea{ min-height:110px; resize:vertical; }
#alab-services .modal__footer{ padding:18px 24px; border-top:1px solid #e9edf2; display:flex; justify-content:flex-end; gap:10px; }

/* DSGVO row (falls vorhanden) */
#alab-services .consent-row{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:#4b5563;
  background:#fff8e3; border:1px solid #f4e4a6; border-radius:10px; padding:10px 12px;
}
#alab-services .consent-row a{ color:#7a5d00; text-underline-offset:2px; }

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* === Leistungscheck gezielt in ALAB-Gold zwingen === */
#alab-services .card.card--force-gold .card__icon{
  background: linear-gradient(135deg, var(--alab-gold), var(--alab-gold-2)) !important;
  color: #fff;
}

#alab-services .card.card--force-gold .card__list li::before{
  content: '✓' !important;
  color: var(--alab-gold) !important;
  font-weight: 700;
}

/* ===== Inline-Danke-Block im Modal ===== */
#alab-services .form-success{
  display:none;
  text-align:center;
  padding:1.25rem 1.25rem 1.5rem;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(91,141,239,.08), rgba(212,175,55,.08));
  border:1px solid rgba(212,175,55,.35);
  box-shadow: var(--shadow-1);
  margin-top:.5rem;
}
#alab-services .form-success.show{ display:block; animation:popIn .3s ease both; }

#alab-services .form-success .success-icon{
  width:72px; height:72px; border-radius:999px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--alab-gold),var(--alab-gold-2)); color:#fff;
  box-shadow:0 10px 24px rgba(212,175,55,.28);
  font-size:1.4rem;
}
#alab-services .form-success h3{ margin:.2rem 0 .35rem; font-size:1.25rem; color:var(--alab-ink); }
#alab-services .form-success p{ margin:0; color:var(--alab-gray); }
#alab-services .form-success .actions{
  margin-top:.9rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}

@keyframes popIn{ from{opacity:0;transform:scale(.98)} to{opacity:1;transform:scale(1)} }

#alab-services .form-parts--hidden {
  display: none !important;
}

/* Danke-Block Grundzustand */
#formSuccess { display: none; }

/* Danke-Block Design – ALAB Gold */
.form-success{
  text-align:center;
  padding:2rem;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(91,141,239,.08), rgba(212,175,55,.08));
  border:1px solid rgba(212,175,55,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  margin-top:.5rem;
}
.form-success .success-icon{
  width:76px;height:76px;border-radius:999px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,#d4af37,#b88917); color:#fff;
  box-shadow:0 10px 24px rgba(212,175,55,.35); font-size:1.5rem;
}
.form-success h3{ margin:.25rem 0 .5rem; font-size:1.35rem; color:#0f2533; }
.form-success p{ margin:0; color:#5b6b78; }
.form-success .actions{ margin-top:1rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* H2 für SEO/ARIA behalten, aber 100% visuell ausblenden */
#alab-services #services-title{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* falls irgendwo Deko-Pseudo-Elemente greifen würden */
#alab-services #services-title::before,
#alab-services #services-title::after{
  content:none !important;
  display:none !important;
}

/* ======================================================
   SERVICEPAKETE – EXTRA COMPACT MOBILE (<= 768px)
   ====================================================== */
@media (max-width: 768px){
  /* Grundtypografie & Seitengassen */
  #alab-services{ font-size:.95rem; line-height:1.45; }
  #alab-services .container{ padding:0 var(--s-3); }

  /* HERO kompakter */
  #alab-services .hero{ padding:var(--s-7) 0 var(--s-6); }
  #alab-services .hero__kicker{ gap:8px; padding:6px 12px; font-size:.85rem; margin-bottom:var(--s-3); }
  #alab-services .hero__title{ font-size:clamp(1.55rem,4.8vw,2.1rem); margin-bottom:var(--s-2); }
  #alab-services .hero__subtitle{ font-size:.98rem; margin:0 auto var(--s-4); }
  #alab-services .hero__divider{ width:min(220px,60%); height:3px; }

  /* SECTIONS */
  #alab-services .main{ padding:var(--s-7) 0; }
  #alab-services .section{ margin-bottom:var(--s-7); }
  #alab-services .section-title{
    font-size:clamp(1.35rem,4.2vw,1.75rem);
    margin-bottom:var(--s-2);
  }
  #alab-services .section-title::after{ width:56px; height:3px; margin-top:8px; }
  #alab-services .section-subtitle{ font-size:.98rem; margin:0 auto var(--s-5); }

  /* GRID enger (Spalten bleiben durch vorhandene sm/md Regeln erhalten) */
  #alab-services .grid{ gap:clamp(12px,2.5vw,18px); }

  /* KARTEN kompakter + kleinere Icons/Listen */
  #alab-services .card{
    padding:clamp(var(--s-5),1.2vw + 10px,var(--s-6));
    border-radius:12px;
    box-shadow:var(--shadow-1);
  }
  #alab-services .card__icon{
    width:60px; height:60px; border-radius:14px; margin-bottom:var(--s-4);
    box-shadow:var(--shadow-1);
  }
  #alab-services .card__icon i{ font-size:1.5rem; }
  #alab-services .card__title{ font-size:1.1rem; margin-bottom:var(--s-3); }
  #alab-services .card__list{ gap:8px; margin-bottom:var(--s-4); }
  #alab-services .card__list li{ padding-left:20px; line-height:1.5; }
  #alab-services .card__list li::before{ font-size:.95rem; top:1px; }
  #alab-services .card__badge{ font-size:.72rem; padding:4px 8px; }

  /* BUTTONS kleiner */
  #alab-services .btn{ padding:10px 16px; font-size:.93rem; }
  #alab-services .btn i{ font-size:.95em; }

  /* MAINTENANCE Block kompakter */
  #alab-services .maintenance{
    padding:clamp(var(--s-6),1.4vw + 12px,var(--s-7));
    border-radius:16px;
  }
  #alab-services .maint-item{
    padding:var(--s-5);
    gap:10px;
    border-radius:12px;
  }
  #alab-services .maint-media{ width:60px; height:60px; margin-bottom:var(--s-3); }
  #alab-services .maint-media .icon{ font-size:1.5rem; }
  #alab-services .maint-period{ font-size:1rem; }
  #alab-services .maint-chip{ font-size:.72rem; padding:3px 8px; }
  #alab-services .maint-list{ gap:6px; }
  #alab-services .maint-list li{ padding-left:18px; }

  /* CTA-Bereiche schlanker */
  #alab-services .cta-mid{ padding:var(--s-6) 0; }
  #alab-services .cta-mid h3{ font-size:1.2rem; margin-bottom:var(--s-2); }
  #alab-services .cta-mid p{ margin-bottom:var(--s-4); }
  #alab-services .cta-mid .btns{ gap:10px; }

  #alab-services .cta-bottom{ padding:var(--s-7) 0; }
  #alab-services .cta-bottom h2{ font-size:clamp(1.35rem,4.2vw,1.7rem); margin-bottom:var(--s-2); }
  #alab-services .cta-bottom p{ margin-bottom:var(--s-4); }
  #alab-services .cta-bottom .btns{ gap:10px; }
  
  /* MODAL Formular kompakter (falls genutzt) */
  #alab-services .modal__dialog{ width:min(640px,94vw); }
  #alab-services .modal__header{ padding:16px 18px; }
  #alab-services .modal__title{ font-size:1.05rem; }
  #alab-services .modal__body{ padding:18px; }
  #alab-services .form{ grid-template-columns:1fr; gap:12px; }
  #alab-services .input label{ font-size:.85rem; }
  #alab-services .input input,
  #alab-services .input textarea,
  #alab-services .input select{ padding:10px 12px; border-radius:8px; font-size:.95rem; }
  #alab-services .input textarea{ min-height:96px; }
  #alab-services .modal__footer{ padding:14px 18px; gap:8px; }
  #alab-services .consent-row{ font-size:.88rem; padding:8px 10px; }
}

/* Ultra-compact Phones (<= 480px) – noch straffer */
@media (max-width: 480px){
  #alab-services{ font-size:.9rem; line-height:1.4; }
  #alab-services .container{ padding:0 var(--s-2); }

  #alab-services .hero{ padding:var(--s-6) 0 var(--s-5); }
  #alab-services .hero__title{ font-size:clamp(1.35rem,5.2vw,1.6rem); }
  #alab-services .hero__subtitle{ font-size:.95rem; margin-bottom:var(--s-3); }

  #alab-services .main{ padding:var(--s-6) 0; }
  #alab-services .section{ margin-bottom:var(--s-6); }
  #alab-services .section-title{ font-size:clamp(1.2rem,4.4vw,1.5rem); }
  #alab-services .section-subtitle{ margin-bottom:var(--s-4); }

  #alab-services .grid{ gap:12px; }
  #alab-services .card{ padding:var(--s-4); border-radius:10px; }
  #alab-services .card__icon{ width:52px; height:52px; border-radius:12px; }
  #alab-services .card__icon i{ font-size:1.35rem; }
  #alab-services .card__title{ font-size:1rem; }

  #alab-services .btn{ padding:9px 14px; font-size:.9rem; }

  #alab-services .maintenance{ padding:var(--s-5); border-radius:14px; }
  #alab-services .maint-item{ padding:var(--s-4); border-radius:10px; }

  #alab-services .cta-mid{ padding:var(--s-5) 0; }
  #alab-services .cta-bottom{ padding:var(--s-6) 0; }
}