/* WEPA Drucklufttechnik — Custom Styles
   Extracted from inline <style> blocks across all 26 pages */

/* === Base === */
*{font-family:'Inter',system-ui,-apple-system,sans-serif;overflow-wrap:break-word;word-break:break-word}
html{scroll-behavior:smooth;scroll-padding-top:4rem}

/* Background depth — dot grid + soft gradient washes */
body{background-image:radial-gradient(rgba(20,24,66,.018) 1px,transparent 1px),radial-gradient(ellipse 60% 45% at 5% 12%,rgba(20,24,66,.025),transparent),radial-gradient(ellipse 40% 50% at 95% 50%,rgba(200,152,30,.015),transparent),radial-gradient(ellipse 55% 30% at 30% 85%,rgba(20,24,66,.018),transparent);background-size:32px 32px,100% 100%,100% 100%,100% 100%;background-attachment:scroll,fixed,fixed,fixed;background-repeat:repeat,no-repeat,no-repeat,no-repeat}

/* === Scroll reveal === */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.revealed{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

/* === FAQ === */
.faq-content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1)}
.faq-item.active .faq-content{max-height:400px}
.faq-icon{transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(45deg)}

/* === Mobile menu === */
#mobile-menu{transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* === Preloader + Lenis + Ticker (Homepage) === */
#preloader{will-change:transform}
.char{display:inline-block;will-change:transform}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-track{animation:ticker 30s linear infinite}

/* === Animated smoke === */
@keyframes smoke1{
  0%,100%{transform:translate(0,0) scale(1);opacity:.07}
  25%{transform:translate(60px,-30px) scale(1.3);opacity:.1}
  50%{transform:translate(-40px,20px) scale(0.9);opacity:.05}
  75%{transform:translate(30px,40px) scale(1.15);opacity:.08}
}
@keyframes smoke2{
  0%,100%{transform:translate(0,0) scale(1);opacity:.05}
  30%{transform:translate(-80px,25px) scale(1.4);opacity:.08}
  60%{transform:translate(50px,-35px) scale(0.8);opacity:.03}
  80%{transform:translate(-20px,-15px) scale(1.2);opacity:.06}
}
@keyframes smoke3{
  0%,100%{transform:translate(0,0) scale(1);opacity:.04}
  20%{transform:translate(40px,50px) scale(1.2);opacity:.06}
  45%{transform:translate(-60px,-20px) scale(1.5);opacity:.08}
  70%{transform:translate(30px,-40px) scale(0.85);opacity:.03}
}
.smoke-layer{will-change:transform,opacity;filter:blur(60px)}

/* === Form focus (Kontakt) === */
.form-input:focus{outline:none;border-color:#C8981E;box-shadow:0 0 0 3px rgba(200,152,30,.12)}
.form-input{transition:border-color .2s,box-shadow .2s}

/* === Map placeholder (Kontakt) === */
.map-placeholder{position:relative;overflow:hidden}
.map-placeholder::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,24,66,.06),rgba(20,24,66,.02));z-index:1}

/* === Value card letter (Ueber-uns) === */
.value-letter{background:linear-gradient(135deg,#C8981E 0%,#E0B440 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === Privacy policy styling (Datenschutz) === */
.privacy-section h2{margin-bottom:1rem}
.privacy-section h3{margin-bottom:0.5rem}
.privacy-section p{margin-bottom:0.75rem}
.privacy-section ul{margin-bottom:0.75rem;padding-left:1.25rem}
.privacy-section li{margin-bottom:0.35rem}

/* === City distance table (Brandenburg) === */
.city-row{transition:background .2s ease}
.city-row:hover{background:rgba(20,24,66,.02)}

/* === Pulse ring + urgent dot (Notdienst) === */
@keyframes pulse-ring{
  0%{transform:scale(.95);opacity:.7}
  70%{transform:scale(1.15);opacity:0}
  100%{transform:scale(1.15);opacity:0}
}
.pulse-ring{animation:pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite}

@keyframes urgent-dot{
  0%,100%{opacity:1}
  50%{opacity:.3}
}
.urgent-dot{animation:urgent-dot 1.5s ease-in-out infinite}

/* === Timeline connector (Notdienst) === */
.timeline-connector{position:relative}
.timeline-connector::after{content:'';position:absolute;top:50%;right:-1.5rem;width:3rem;height:2px;background:linear-gradient(90deg,#C8981E,transparent)}
@media(max-width:767px){
  .timeline-connector::after{display:none}
}

/* === Comparison table (Atlas Copco) === */
.compare-table th{text-align:left}
.compare-table{min-width:580px}
.compare-table td,.compare-table th{padding:.5rem .6rem;border-bottom:1px solid rgba(20,24,66,.06);font-size:.75rem}
.compare-table tr:last-child td,.compare-table tr:last-child th{border-bottom:none}
@media(min-width:768px){.compare-table{min-width:auto}.compare-table td,.compare-table th{padding:.75rem 1rem;font-size:.875rem}}

/* === Dropdown nav === */
.nav-dd{position:relative}
.nav-dd-panel{position:absolute;top:100%;left:-12px;padding-top:4px;visibility:hidden;opacity:0;transition:visibility .2s,opacity .2s;pointer-events:none}
.nav-dd:hover .nav-dd-panel{visibility:visible;opacity:1;pointer-events:auto}
.nav-dd:hover .nav-dd-chevron{transform:rotate(180deg)}
.nav-dd-chevron{transition:transform .2s}

/* === Mobile accordion === */
.mobile-acc-content{transition:max-height .3s ease}