/* SRS Dienstleistungen – srs-niederrhein.de
   Schwarz / Rot / Chrom / Weiß. Fonts selbst gehostet (SIL OFL), keine externen Requests. */
@font-face{font-family:"Anton";src:url(../fonts/anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#0e0e0e;--bg2:#161616;--card:#1b1b1b;--line:#2c2c2c;
  --red:#e2262a;--red-d:#a8171b;--red-glow:rgba(226,38,42,.45);
  --white:#fff;--text:#e9e9e9;--muted:#b9b9b9;
  --chrome:linear-gradient(180deg,#ffffff 0%,#d9d9d9 38%,#8d8d8d 52%,#e6e6e6 70%,#ffffff 100%);
  --radius:14px;--max:1160px;
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--white)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--red)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.top .brand img{width:150px;height:auto}
.top nav{display:none;gap:1.6rem}
.top nav a{font:700 1.05rem/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--white)}
.btn-sm{padding:.55rem 1rem!important;font-size:1rem!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.9rem 1.6rem;border-radius:999px;
  font:800 1.25rem/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-red{background:linear-gradient(180deg,#f0353a,var(--red-d));color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.08) inset,0 10px 30px -8px var(--red-glow)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 16px 40px -8px var(--red-glow)}
.btn-ghost{background:transparent;color:#fff;border:2px solid #d0d0d0}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.btn-wa{background:linear-gradient(180deg,#1f9d50,#13733a);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.08) inset,0 10px 30px -10px rgba(31,157,80,.6)}
.btn-wa:hover{transform:translateY(-2px)}
.wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#1f9d50,#13733a);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.12)}
.wa-float svg{width:30px;height:30px}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:2.2rem 0 3.4rem;text-align:center;
  background:radial-gradient(60% 55% at 50% 42%,rgba(226,38,42,.42),transparent 70%),
             repeating-linear-gradient(-58deg,transparent 0 46px,rgba(255,255,255,.025) 46px 48px),var(--bg)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(-45deg,var(--red) 0 18px,#111 18px 36px);opacity:.9}
.hero picture img{width:min(100%,980px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.hero h1{margin:.4rem 0 .2rem;padding-top:.12em;font:400 clamp(2.9rem,11vw,6.2rem)/1.08 var(--display);text-transform:uppercase;letter-spacing:.01em;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 22px rgba(226,38,42,.55))}
.hero .claim{margin:0 auto .5rem;font:800 clamp(1.25rem,4.4vw,1.9rem)/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.hero .lead{max-width:44rem;margin:0 auto 1.6rem;color:var(--text);font-size:1.12rem}
.cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta .btn{flex:1 1 100%;max-width:360px}
.sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sparks i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 8px 2px rgba(255,80,40,.8);opacity:0;animation:spark 6s linear infinite}
.sparks i:nth-child(1){left:8%;animation-delay:0s}
.sparks i:nth-child(2){left:22%;animation-delay:1.8s;animation-duration:7s}
.sparks i:nth-child(3){left:37%;animation-delay:3.2s}
.sparks i:nth-child(4){left:55%;animation-delay:.9s;animation-duration:8s}
.sparks i:nth-child(5){left:68%;animation-delay:2.6s}
.sparks i:nth-child(6){left:81%;animation-delay:4.1s;animation-duration:7.5s}
.sparks i:nth-child(7){left:93%;animation-delay:1.3s}
@keyframes spark{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(-40px,-110vh);opacity:0}}
.reveal{animation:rise .8s ease-out both}
.reveal.d1{animation-delay:.15s}.reveal.d2{animation-delay:.3s}.reveal.d3{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Sektionen */
section{padding:4.2rem 0}
.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.kicker{display:inline-block;margin:0 0 .4rem;padding:.25rem .8rem;background:var(--red);color:#fff;font:800 .95rem/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;transform:skewX(-10deg)}
.kicker span{display:inline-block;transform:skewX(10deg)}
h2{margin:.2rem 0 1rem;font:400 clamp(2.2rem,7vw,3.6rem)/1 var(--display);text-transform:uppercase;color:#fff}
h3{margin:.6rem 0 .3rem;font:800 1.55rem/1.1 var(--cond);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.intro{max-width:44rem;color:var(--muted);margin:0 0 2rem}

/* Leistungen */
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
.card{position:relative;padding:1.4rem 1.3rem 1.3rem;background:linear-gradient(160deg,#202020,#141414);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--red),#ff6b4a,var(--red))}
.card:hover{transform:translateY(-4px);border-color:var(--red)}
.card svg{width:64px;height:64px}
.card p{margin:0;color:var(--muted)}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:s}
.steps li{position:relative;padding:1.3rem 1.3rem 1.3rem 5.2rem;background:var(--card);border-left:5px solid var(--red);border-radius:0 var(--radius) var(--radius) 0;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);font:400 3.2rem/1 var(--display);color:transparent;-webkit-text-stroke:2px var(--red)}
.steps h3{margin-top:0}
.steps p{margin:0;color:var(--muted)}

/* Einsatzgebiet */
.area{display:grid;gap:1.6rem;align-items:center}
.area > svg{width:100%;max-width:420px;margin:0 auto}
.area p{color:var(--muted)}
.places{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.places li{padding:.35rem .8rem;border:1px solid #444;border-left:4px solid var(--red);border-radius:6px;background:#181818;color:#fff;font:700 1.1rem/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery figure{margin:0;background:var(--card);border-radius:var(--radius);overflow:hidden}
.gallery figcaption{padding:.7rem 1rem;color:var(--muted)}

/* Partner */
.partner{display:grid;gap:1.4rem;align-items:center;padding:1.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.partner .logo{display:block;background:#fff;border-radius:12px;padding:1rem 1.2rem;max-width:300px}
.partner p{margin:.2rem 0 1rem;color:var(--muted)}

/* Kontakt */
.contact{text-align:center;background:radial-gradient(70% 80% at 50% 0%,rgba(226,38,42,.35),transparent 70%),var(--bg)}
.contact .name{font:800 1.5rem/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.contact .tel{display:inline-block;margin:.2rem 0 1rem;padding-top:.1em;font:400 clamp(2.4rem,10vw,4.4rem)/1 var(--display);letter-spacing:.02em;text-decoration:none;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact .mail{display:inline-block;margin-bottom:1.8rem;font:600 clamp(1rem,4.2vw,1.35rem)/1.3 var(--body);word-break:break-all;color:#fff}

/* Footer */
footer{padding:2rem 0 6rem;border-top:2px solid var(--red);background:#0a0a0a;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:1.4rem}
footer a{color:#fff}

/* Rechtstexte */
.legal{padding:3rem 0 4rem}
.legal h1{font:400 clamp(2.2rem,8vw,3.4rem)/1 var(--display);text-transform:uppercase;color:#fff;margin:0 0 1.4rem}
.legal h2{font-size:1.9rem;margin-top:2.2rem}
.legal h3{font-size:1.25rem}
.legal p,.legal li{color:var(--text);max-width:48rem}
.ph{background:#ffd400;color:#000;font-weight:600;padding:0 .3rem;border-radius:3px}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cta .btn{flex:0 1 auto}
}
@media (min-width:900px){
  .wa-float{display:none}
  footer{padding-bottom:2.6rem}
  .top nav{display:flex}
  .top .brand img{width:190px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .area{grid-template-columns:1.1fr .9fr}
  .partner{grid-template-columns:auto 1fr;padding:2rem 2.4rem}
  section{padding:5.5rem 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sparks{display:none}
}