:root{
  --brand-red:#d8342a; --brand-blue:#1f4aa5; --ink-900:#0f172a; --ink-700:#334155;
  --bg:#f6f7f9; --door1:#bfc5cd; --door2:#9fa6ad; --intro-duration:2000ms; --intro-delay:300ms;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink-900);background:#000}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}

/* Video/Image Hero */
.videoHero{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Hide video on small screens */
@media (max-width: 768px){ .bgVideo{ display:none } }
/* Mobile image fallback (two ways to be extra-safe) */
.bgImage{position:absolute;inset:0;background:url("assets/Aufzugtechnik Stoll Image.jpg") center/cover no-repeat;display:none}
.bgImgTag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
@media (max-width: 768px){ .bgImage, .bgImgTag{ display:block } }

.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.45))}
.vhContent{position:relative;z-index:1;text-align:center;color:white;padding:2rem 1rem;display:grid;gap:1rem;justify-items:center}

/* Larger logo on desktop */
.logoCenter img{height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.55));}
@media (min-width: 1024px){ .logoCenter img{ max-width:560px; width:100%; } }
@media (max-width: 1023px){ .logoCenter img{ max-width:420px; width:90%; } }

.vhSub{max-width:900px;font-size:clamp(1rem,1.8vw,1.25rem);opacity:.95}
.centerBadge.hiring{margin-top:.25rem;font-weight:800}
.ctaRow{display:flex;gap:.75rem;margin:.5rem 0 0}
.cta{display:inline-block;background:var(--brand-red);color:white;padding:.8rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:700}
.cta.sec{background:var(--brand-blue)} .cta:hover{filter:brightness(.95)}

/* Stats */
.stats{background:var(--bg);padding:1.4rem 0;border-top:1px solid #2a2f3a;border-bottom:1px solid #2a2f3a}
.statsWrap{display:flex;align-items:center;gap:1rem}
.progress{width:64px;height:64px;border-radius:999px;background:conic-gradient(var(--brand-blue) 0%, #e5e7eb 0%);display:grid;place-items:center;color:var(--brand-blue);font-weight:800}
.progress span{font-size:.9rem}
.statsText{font-size:1.05rem}
.stats .subMore{color:#cbd5e1;font-size:.95rem}

/* Leistungen */
.leistungen{padding:2.2rem 0;background:#fff}
.leistungen h2{font-size:1.8rem;margin:0 0 1rem}
.cards{display:grid;grid-template-columns: repeat(3, 1fr); gap:1rem}
@media (max-width: 900px){ .cards{grid-template-columns: 1fr} }
.card{border:1px solid #e5e7eb;border-radius:1rem;padding:1rem;background:white;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h3{color:var(--brand-blue);margin:.2rem 0 .6rem}

/* Vorher/Nachher */
.vorherNachher{padding:2rem 0;background:#fcfdff}
.vorherNachher h2{margin:0 0 1rem}
.vnGrid{display:grid;grid-template-columns: repeat(3, 1fr); gap:1rem}
@media (max-width: 900px){ .vnGrid{grid-template-columns: 1fr} }
.vnItem{height:180px;border-radius:1rem;border:2px dashed #cbd5e1;background:linear-gradient(135deg,#f5f7fb,#eef2f7)}

/* Kontakt */
.kontakt{padding:2.2rem 0;border-top:1px solid #e5e7eb;background:#fff}
.kontakt h2{margin:0 0 .6rem}
.contactForm{display:grid;gap:.9rem}
.grid2{display:grid;grid-template-columns: 1fr 1fr; gap:.9rem}
@media (max-width: 700px){ .grid2{grid-template-columns: 1fr} }
input, textarea{width:100%; padding:.7rem .75rem; border:1px solid #d1d5db; border-radius:.6rem; font:inherit}
.formActions{display:flex;gap:.7rem;align-items:center}

/* Footer */
.footer{background:#0f1218;color:#e5e7eb;padding:1.6rem 0;margin-top:2rem}
.footCols{display:grid;grid-template-columns: 1fr 1fr 1fr; gap:1rem}
@media (max-width:900px){ .footCols{grid-template-columns: 1fr} }
.footLinks{display:flex;gap:1rem;flex-wrap:wrap}
.footLinks a{color:#9ec1ff;text-decoration:none}
/* Telefon und Email Links im Footer hellblau */
.footer a[href^="tel:"],
.footer a[href^="mailto:"]{color:#60a5fa;text-decoration:none}
.footer a[href^="tel:"]:hover,
.footer a[href^="mailto:"]:hover{color:#93c5fd}
.copy{opacity:.7;margin-top:1rem}

/* Intro overlay (doors only, slower) */
.intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:transparent}
.intro[hidden]{display:none!important}
.scrim{position:absolute;inset:0;background:#0f1218;opacity:.85;transition:opacity 300ms ease}
.intro.open .scrim{opacity:0}
.doors{position:relative;width:100vw;height:100vh;overflow:hidden;pointer-events:none}
.door{position:absolute;top:0;width:50vw;height:100vh;will-change:transform}
.left{left:0;background:linear-gradient(135deg,var(--door1),var(--door2) 40%,var(--door1) 60%,#8a9097);box-shadow:inset -8px 0 16px rgba(0,0,0,.25)}
.right{right:0;background:linear-gradient(45deg,var(--door1),var(--door2) 40%,var(--door1) 60%,#8a9097);box-shadow:inset 8px 0 16px rgba(0,0,0,.25)}
.intro.open .left{animation:doorLeftOpen var(--intro-duration) cubic-bezier(.2,.8,.2,1) forwards var(--intro-delay)}
.intro.open .right{animation:doorRightOpen var(--intro-duration) cubic-bezier(.2,.8,.2,1) forwards var(--intro-delay)}
@keyframes doorLeftOpen{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes doorRightOpen{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .intro{display:none!important} }

/* --- APPENDED FOR DONUT SPINNERS --- */

/* --- Donut spinners (SVG) --- */
.stats{background:#fff;padding:1.8rem 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.statsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:center}
@media(max-width:900px){.statsGrid{grid-template-columns:1fr}}
.statItem{display:flex;gap:1rem;align-items:center;justify-content:flex-start}
.donut{position:relative;width:96px;height:96px;display:grid;place-items:center;transform:rotate(-90deg)} /* start at top */
.donut.reverse{transform:scaleX(-1) rotate(-90deg)} /* reverse direction */
.donutSvg{width:96px;height:96px}
.donutTrack{fill:none;stroke:#d7dbe0;stroke-width:14}
.donutBar{fill:none;stroke:var(--brand-blue);stroke-width:14;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset .2s linear}
.donutValue{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(90deg);font-weight:800;color:var(--brand-blue)}
.centerText{color:#0f172a;text-align:center;margin-top:1rem;font-size:1rem}


/* --- Overrides: drain spinner + black subline --- */
.donut{transform:rotate(-90deg)} /* single orientation for all; text not mirrored */
.stats .subMore{color:#0f172a !important; text-align:center;}

/* Tweak bar cap visibility on full circle */
.donutBar{stroke-linecap:round}


/* --- Wechsel Sektion (white with blue lines) --- */
.wechsel{
  background:#ffffff;
  padding:2.4rem 1rem;
  text-align:center;
  border-top:2px solid #1f4aa5;
  border-bottom:2px solid #1f4aa5;
}
.wechsel h2{
  color:var(--brand-blue);
  margin:0 0 .5rem;
  font-size:1.6rem;
}
.wechsel .fragen{
  font-weight:500;
  margin:.2rem 0 1rem;
}
.wechsel .claim{
  font-size:1.1rem;
  margin:0 0 1.2rem;
  color:var(--ink-900);
}
.wechsel .subHint{
  margin-top:1rem;
  font-size:.9rem;
  color:#475569;
}
@media(max-width:768px){
  .wechsel .ctaRow{flex-direction:column}
}


/* --- Wechsel Sektion (light grey box) --- */
.wechsel{
  background:#ffffff;
  padding:2.2rem 1rem;
}
.wechsel .wechselBox{
  background:#f5f7fa; /* light grey */
  border-radius:14px;
  padding:1.6rem 1.2rem;
  max-width:920px;
  margin:0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  text-align:center;
  border:1px solid #e6ebf1;
}
.wechsel .wechselBox h2{
  margin:0 0 .6rem;
  color:var(--ink-900);
  font-size:1.5rem;
}
.wechsel .issues{
  list-style:none;
  padding:0;
  margin:.2rem 0 1.0rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.35rem .9rem;
}
@media(max-width:640px){
  .wechsel .issues{ grid-template-columns:1fr; }
}
.wechsel .issues li{
  position:relative;
  text-align:left;
  margin:0;
  padding-left:1.1rem;
  color:#0f172a;
  font-weight:500;
}
.wechsel .issues li::before{
  content:"–";
  position:absolute;
  left:.2rem;
  top:0;
}
.wechsel .claim{
  font-size:1.06rem;
  margin:.4rem 0 1.1rem;
  color:var(--ink-900);
}
.wechsel .ctaRow{ justify-content:center; }
@media(max-width:768px){
  .wechsel .ctaRow{ flex-direction:column; }
}


/* --- Overrides for Wechsel section v2 --- */
.wechsel{
  background:#ffffff;
  padding:2.2rem 1rem;
  border:none !important;        /* remove any previous blue lines */
  border-top:0 !important;
  border-bottom:0 !important;
}
.wechsel .issuesLine{
  margin:.3rem 0 1.0rem;
  font-weight:600;
  color:#0f172a;
  text-align:center;
}
/* Keep the grey box look */
.wechsel .wechselBox{
  background:#f5f7fa;
  border-radius:14px;
  padding:1.6rem 1.2rem;
  max-width:920px;
  margin:0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  text-align:center;
  border:1px solid #e6ebf1;
}


    /* --- Vorher/Nachher (alternierend + collapsible, clean look) --- */
    .vorherNachher{padding:2rem 0;background:#fcfdff}
    .vorherNachher h2{margin:0 0 1rem}
    .vnRows{display:grid;gap:1.2rem}
    /* Erste Zeile: Bild links (0.9fr), Text rechts (1.1fr) */
    .vnRow{display:grid;grid-template-columns:0.9fr 1.1fr;gap:1rem;align-items:center}
    /* Zweite Zeile (alt): Text links (1.1fr), Bild rechts (0.9fr) - beide Bilder gleich groß! */
    .vnRow.alt{grid-template-columns:1.1fr 0.9fr}
    .vnImage img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 6px 22px rgba(0,0,0,.08)}
    .vnText{padding:.25rem}
    .vnText h3{margin:.2rem 0 .45rem;color:var(--brand-blue)}
    .vnText p{margin:.2rem 0 .55rem;line-height:1.5}
    .vnText .small{color:#475569;font-size:.95rem}
    .vnToggleWrap{display:grid;place-items:center;margin-top:.2rem}
    .cta.ghost{background:transparent;border:2px solid var(--brand-blue);color:var(--brand-blue);padding:.7rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:700;cursor:pointer}
    .cta.ghost:hover{filter:brightness(.95)}
    .vnMore.is-collapsed{display:none}
    .vnMore.is-open{display:block;animation:vnFade .25s ease-out}
    @keyframes vnFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
    /* Mobile: immer Bild oben, Text unten */
    @media(max-width: 900px){
      .vnRow, .vnRow.alt{grid-template-columns:1fr}
      .vnImage{order:1}
      .vnText{order:2}
    }

/* --- Partner Logos --- */
.partner{padding:2.5rem 0;background:#fff;border-top:1px solid #e5e7eb}
.partner h2{margin:0 0 1.5rem;text-align:center;color:var(--ink-900)}
.partnerGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1.5rem;align-items:center;justify-items:center}
.partnerLogo{display:flex;align-items:center;justify-content:center;padding:.5rem}
.partnerLogo img{max-width:140px;max-height:70px;width:auto;height:auto;object-fit:contain;filter:grayscale(20%) opacity(0.85);transition:all 0.3s ease}
.partnerLogo img:hover{filter:grayscale(0%) opacity(1);transform:scale(1.05)}
@media(max-width:900px){.partnerGrid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}}
@media(max-width:500px){.partnerGrid{grid-template-columns:1fr}}

/* --- Familienunternehmen --- */
.familienunternehmen{padding:2rem 0;background:#fcfdff}
.familienunternehmen h2{margin:0 0 1rem;text-align:center;color:var(--ink-900)}
.familienImage{max-width:900px;margin:0 auto}
.familienImage img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 6px 22px rgba(0,0,0,.08)}

/* --- Testimonial --- */
.testimonial{padding:2.5rem 0;background:#fff}
.testimonial h2{margin:0 0 1.5rem;text-align:center;color:var(--ink-900)}
.testimonialCard{max-width:750px;margin:0 auto;text-align:center;padding:2rem 1.5rem}
.testimonialAvatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),#2563eb);color:white;display:grid;place-items:center;font-size:1.8rem;font-weight:700;margin:0 auto 1.5rem;box-shadow:0 4px 12px rgba(31,74,165,0.2);overflow:hidden}
.testimonialAvatar img{width:100%;height:100%;object-fit:cover}
.testimonialQuote{font-size:1.15rem;line-height:1.7;color:var(--ink-700);margin:0 0 1.5rem;font-style:italic;quotes:none}
.testimonialQuote::before{content:open-quote;font-size:2.5rem;color:var(--brand-blue);line-height:0;margin-right:.15rem;vertical-align:-.35em}
.testimonialQuote::after{content:close-quote;font-size:2.5rem;color:var(--brand-blue);line-height:0;margin-left:.15rem;vertical-align:-.35em}
.testimonialAuthor{color:var(--ink-900);font-size:1rem}
.testimonialAuthor strong{display:block;margin-bottom:.2rem}
.testimonialAuthor span{color:#64748b;font-size:.95rem}
@media(max-width:768px){.testimonialQuote{font-size:1.05rem}}