/* --------------------------------------------------------------------------
   DWS Deutscher Wach- und Schutzdienst GmbH - Seitenstil
   Herausgeloest aus der einteiligen index.html (1,6 MB, alles inline).
   Die Bilder liegen daneben in ../img/ und werden von hier aus relativ
   adressiert - die Datei bleibt damit verschiebbar, solange css/ und img/
   Geschwister bleiben.
   Eingehaengt in program/templates/shell_dws.htm.
   -------------------------------------------------------------------------- */

/* Schriften liegen lokal in ../fonts/ (SIL OFL 1.1) - kein Abruf bei Google,
   also keine IP-Adresse an Dritte. Variable Schnitte: eine Datei je Familie. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght.woff2") format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin-wght.woff2") format("woff2")}

:root{
  --red:#d71920;
  --red-dark:#a90f15;
  --black:#090b0d;
  --graphite:#111417;
  --panel:#171b1f;
  --line:#2b3036;
  --white:#ffffff;
  --muted:#b7bdc4;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--black);color:var(--white);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{background:#050607;border-bottom:1px solid #1e2226;color:#d7dce1;font-size:13px}
.topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar strong{color:#fff}
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(9,11,13,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:13px;min-width:max-content}.brand-logo{width:164px;height:58px;object-fit:contain;object-position:left center;background:#fff;padding:4px 7px;border-radius:2px}.brand-copy{display:none}
.logo-mark{display:none}

.brand-copy{font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.7px;color:#e2e4e7;max-width:130px}
.navlinks{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:600;color:#e4e7ea}
.navlinks a{transition:.2s}
.navlinks a:hover{color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:3px;padding:14px 20px;font-weight:700;font-size:14px;transition:.2s;border:1px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#ef1a22;transform:translateY(-1px)}
.btn-ghost{border-color:#727980;background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero{position:relative;overflow:hidden;min-height:720px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(5,7,9,.96) 0%,rgba(5,7,9,.87) 43%,rgba(5,7,9,.30) 73%,rgba(5,7,9,.20) 100%),url("../img/hero-streife.jpg") center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.40))}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:62px;padding:105px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:2.1px;color:#f1b6b8}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;margin:0}
h1{font-size:clamp(50px,6vw,83px);line-height:.98;letter-spacing:-4px;margin-top:20px;max-width:760px}
h1 span{color:var(--red)}
.hero p{font-size:18px;color:#c2c7cc;max-width:650px;margin:26px 0 31px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.trustline{display:flex;gap:28px;margin-top:42px;color:#d8dde1;font-size:13px;flex-wrap:wrap}
.trustline span::before{content:"✓";color:var(--red);font-weight:900;margin-right:8px}
.hero-card{position:relative;background:rgba(10,13,16,.80);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.17);min-height:360px;padding:30px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hero-card::before{content:"";position:absolute;left:-1px;top:42px;width:4px;height:100px;background:var(--red)}
.dispatch{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2c3136;padding-bottom:20px}
.live{font-size:12px;color:#d5d9dd;text-transform:uppercase;letter-spacing:1.4px}
.pulse{width:10px;height:10px;border-radius:50%;background:#33d17a;box-shadow:0 0 0 7px rgba(51,209,122,.1)}
.hero-logo-panel{height:138px;margin:24px 0;background:#fff;border-radius:3px;display:grid;place-items:center;padding:16px}.hero-logo-panel img{max-height:110px;width:auto}.building-photo{min-height:420px;background:linear-gradient(0deg,rgba(9,11,13,.58),rgba(9,11,13,.08)),url("../img/gebaeude.jpg") center/cover no-repeat;border:1px solid #282d32;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.building-photo h3{font-size:31px;margin:0 0 8px}.building-photo p{color:#e4e7ea;max-width:540px;margin:0}.service-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{border:1px solid #2b3035;padding:14px;background:#111417;font-size:12px;color:#c9ced3}
.mini strong{display:block;color:#fff;font-size:13px;margin-bottom:3px}
.strip{background:var(--red)}
.strip-inner{display:grid;grid-template-columns:repeat(4,1fr);min-height:96px}
.metric{padding:23px 22px;border-right:1px solid rgba(255,255,255,.2)}
.metric:last-child{border-right:0}
.metric strong{display:block;font-size:20px;font-family:Manrope;font-weight:800}
.metric span{font-size:12px;opacity:.88}
section{padding:105px 0}
.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:end;margin-bottom:52px}
.kicker{color:var(--red);text-transform:uppercase;font-size:12px;letter-spacing:2px;font-weight:800}
h2{font-size:clamp(34px,4vw,56px);line-height:1.03;letter-spacing:-2.5px;margin-top:12px}
.section-head p{color:var(--muted);font-size:16px;margin:0;max-width:630px}
.services{background:#0e1114}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.card{min-height:330px;background:#15191d;border:1px solid #262b30;padding:27px;position:relative;overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-5px);border-color:#4a4f55;background:#181d21}
.card::after{content:"";position:absolute;right:-45px;bottom:-45px;width:120px;height:120px;border:24px solid rgba(215,25,32,.08);transform:rotate(45deg)}
.icon{width:50px;height:50px;border:1px solid #41474d;display:grid;place-items:center;color:var(--red);font-size:22px;margin-bottom:65px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:14px;color:#aeb4ba;margin:0}
.card a{display:inline-block;margin-top:18px;color:#fff;font-size:13px;font-weight:700}
.card a span{color:var(--red)}
.lead-section{background:linear-gradient(120deg,#0a0c0e,#15191d)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.lead-copy p{color:#bdc3c9;max-width:560px}
.bullets{display:grid;gap:13px;margin:30px 0}
.bullets div{display:flex;gap:13px;align-items:flex-start;color:#e2e5e8;font-size:14px}
.bullets b{color:var(--red)}
.process{border-left:1px solid #343a40;padding-left:34px;display:grid;gap:26px}
.step{position:relative;padding:2px 0 3px}
.step::before{content:"";position:absolute;left:-40px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(215,25,32,.11)}
.step small{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:1.4px}
.step h3{font-size:18px;margin:5px 0}
.step p{margin:0;color:#aeb4ba;font-size:14px}
.region{background:#0e1114}
.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.region-box{min-height:350px;background:radial-gradient(circle at 70% 35%,rgba(215,25,32,.13),transparent 29%),#15191d;border:1px solid #282d32;padding:36px;display:flex;flex-direction:column;justify-content:flex-end}
.region-box.big{background:linear-gradient(rgba(9,11,13,.15),rgba(9,11,13,.9)),radial-gradient(circle at 65% 25%,#343a40,#15191d 55%,#0d1012)}
.region-box h3{font-size:29px;margin-bottom:10px}
.region-box p{color:#b5bbc1;margin:0;max-width:520px}
.contact{padding:0;background:#090b0d}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.contact-copy{padding:80px max(40px,calc((100vw - var(--max))/2));padding-right:70px;background:var(--red);display:flex;flex-direction:column;justify-content:center}
.contact-copy .kicker{color:#fff;opacity:.75}
.contact-copy h2{font-size:50px}
.contact-copy p{max-width:560px}
.contact-data{display:grid;gap:12px;margin-top:25px;font-size:15px}
.contact-data strong{font-size:23px}
form{padding:70px max(40px,calc((100vw - var(--max))/2));padding-left:70px;background:#111417;display:flex;flex-direction:column;justify-content:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,select,textarea{width:100%;background:#0b0d0f;border:1px solid #30353a;color:#fff;padding:15px 14px;font:inherit;outline:none;border-radius:2px}
input:focus,select:focus,textarea:focus{border-color:var(--red)}
textarea{min-height:120px;resize:vertical;grid-column:1/-1}
form .btn{margin-top:14px;width:max-content}
.privacy{font-size:11px;color:#838a91;margin-top:12px;max-width:600px}

.tech{padding:90px 0;background:#0d0f11;border-top:1px solid #202428;border-bottom:1px solid #202428}
.tech-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.tech h2{font-size:clamp(34px,5vw,62px);line-height:1.02;margin:10px 0 22px}
.tech p{color:#b8bec5;line-height:1.75}
.tech-card{background:#15181b;border:1px solid #292e33;padding:36px;border-radius:4px}
.tech-card h3{font-size:24px;margin:0 0 14px}
.tech-flow{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.tech-flow span{background:#202428;border-left:3px solid #e30613;padding:10px 12px;font-size:12px;font-weight:700}
.tech-contact{margin-top:22px;padding-top:22px;border-top:1px solid #30353a}
@media(max-width:850px){.tech-grid{grid-template-columns:1fr}.tech{padding:65px 0}}
footer{padding:55px 0 30px;background:#060708;border-top:1px solid #22262a}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px}
footer h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px}
footer p,footer a{color:#9fa6ad;font-size:13px}
.copyright{border-top:1px solid #23272b;margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#727980;font-size:11px}
.mobile-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
@media(max-width:980px){
  .navlinks{display:none}.mobile-toggle{display:block}.nav-cta{display:none}
  .hero-inner,.lead-grid,.section-head,.region-grid,.contact-wrap{grid-template-columns:1fr}
  .hero{min-height:auto}.hero-inner{padding:65px 0}.hero-card{min-height:360px}.strip-inner{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}
  .contact-copy,form{padding:65px 35px}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar-inner{justify-content:center}.topbar-inner span:last-child{display:none}
  nav{height:70px}.brand-logo{width:128px;height:46px}
  h1{font-size:48px;letter-spacing:-2.7px}.hero p{font-size:16px}.hero-card{padding:20px}.vehicle-visual::before{font-size:43px}
  .strip-inner,.cards,.form-grid,.footer-grid{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  section{padding:78px 0}.section-head{gap:20px}.section-head p{font-size:15px}.cards{gap:10px}.card{min-height:auto}.icon{margin-bottom:38px}
  .contact-copy h2{font-size:39px}.contact-copy,form{padding:55px 22px}.copyright{flex-direction:column}
}
  

/* DWS Leitmotiv */
.security-quote-section{position:relative;overflow:hidden;background:#050505;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.security-quote-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:520px;align-items:stretch}
.security-quote-copy{display:flex;flex-direction:column;justify-content:center;padding:72px 7vw 72px max(24px,calc((100vw - 1200px)/2));position:relative;z-index:2}
.security-quote-copy .kicker{margin-bottom:18px}
.security-quote-copy h2{margin:0;max-width:760px;font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;color:#fff}
.security-quote-copy h2 span{color:#e31b23}
.security-quote-line{width:72px;height:4px;background:#e31b23;margin-top:28px;border-radius:99px}
.security-quote-image{min-height:520px;position:relative}
.security-quote-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:grayscale(100%)}
.security-quote-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.56) 16%,rgba(5,5,5,0) 48%)}
@media (max-width:900px){
  .security-quote-wrap{grid-template-columns:1fr;min-height:0}
  .security-quote-copy{padding:58px 24px 42px}
  .security-quote-copy h2{font-size:clamp(38px,11vw,62px)}
  .security-quote-image{min-height:360px}
  .security-quote-image:after{background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.18) 22%,rgba(5,5,5,0) 55%)}
}

  
/* Service · Sicherheit · Technik */
.all-in-one{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b0d0f 0%,#12161a 55%,#090b0d 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.all-in-one:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 50%,rgba(215,25,32,.16),transparent 34%);pointer-events:none}
.all-in-one-inner{position:relative;z-index:1;padding:96px 0;text-align:center}
.all-in-one .eyebrow{font-family:Manrope,Inter,sans-serif;font-size:14px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#e31b23;margin-bottom:18px}
.all-in-one h2{margin:0 auto;font-family:Manrope,Inter,sans-serif;font-size:clamp(42px,6vw,82px);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;max-width:1000px}
.all-in-one h2 span{color:#e31b23}
.all-in-one p{max-width:820px;margin:28px auto 0;color:#c8cdd2;font-size:18px;line-height:1.75}
.all-in-one-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:34px}
.all-in-one-pills span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:10px 15px;border-radius:999px;font-size:13px;font-weight:700;color:#f1f3f5}
@media(max-width:700px){.all-in-one-inner{padding:72px 0}.all-in-one p{font-size:16px}.all-in-one h2{font-size:clamp(38px,12vw,58px)}}

  
/* ===== DWS V14 – einheitlicher Flyer-Look ===== */
:root{--red:#ed111c;--red-dark:#a80e18;--black:#050505;--graphite:#111214;--panel:#0b0c0e;--line:#2c2d30;--white:#fff;--muted:#d2d2d2}
body{background:#050505;color:#fff}
.container{width:min(1180px,calc(100% - 48px))}
.topbar{background:#050505;border:0;color:#ddd}.topbar strong{color:#fff}
.nav-wrap{background:#d9d9d9;border-bottom:0;backdrop-filter:none;box-shadow:0 8px 30px rgba(0,0,0,.18)}
nav{height:96px}.brand-logo{width:190px;height:72px;background:transparent;padding:0}.navlinks{color:#111}.navlinks a:hover{color:var(--red)}
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.04em}.btn-red{background:var(--red)}.btn-ghost{border-color:#777;color:#fff}
.kicker,.eyebrow{color:var(--red);font-weight:800;letter-spacing:.09em;text-transform:uppercase}
h1,h2,h3,.card h3,.step h3{font-family:Manrope,Inter,Arial,sans-serif;font-weight:800;letter-spacing:-.035em}

/* angular hero, matching the printed DWS material */
.hero{min-height:760px;align-items:flex-end;padding:170px 0 110px;background-position:center;background-size:cover;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-1;inset:-1px;background:linear-gradient(164deg,rgba(218,218,218,.98) 0 25%,rgba(218,218,218,.04) 25.15% 100%),linear-gradient(164deg,transparent 0 58%,rgba(0,0,0,.97) 58.15% 100%)}
.hero:after{content:"";position:absolute;z-index:-1;right:-8%;bottom:12%;width:72%;height:118px;background:linear-gradient(90deg,var(--red-dark),var(--red));transform:skewY(-13deg);opacity:.94}
.hero-inner{position:relative;z-index:2}.hero h1{font-size:clamp(48px,7vw,88px);line-height:.94;text-transform:uppercase;max-width:900px;text-shadow:0 4px 20px rgba(0,0,0,.35)}.hero h1 span{color:var(--red)}
.hero p{max-width:720px;font-size:18px}.hero .eyebrow{display:inline-block;background:var(--red);color:#fff;padding:8px 12px}

section{position:relative;overflow:hidden}
.services,.lead-section,.tech,.region,.contact{background:#050505}
.services:before,.tech:before,.region:before{content:"";position:absolute;left:-10%;right:-10%;top:18%;height:86px;background:linear-gradient(90deg,#7d0b13 0 28%,var(--red) 28% 68%,#b30e18 68%);transform:skewY(-11deg);opacity:.9;pointer-events:none}
.services>.container,.tech>.container,.region>.container{position:relative;z-index:1}
.section-head{padding:20px 0 28px}.section-head h2,.lead-copy h2,.tech h2,.region h2,.contact h2{font-size:clamp(38px,5vw,64px);line-height:1;text-transform:uppercase}.section-head p,.lead-copy>p,.tech p,.region p,.contact p{color:#d5d5d5}

.cards{gap:0;border-top:1px solid #333;border-left:1px solid #333}.card{border-radius:0;background:rgba(5,5,5,.94);border:0;border-right:1px solid #333;border-bottom:1px solid #333;padding:34px 28px;min-height:270px}.card:hover{transform:none;background:#101010;border-color:#444}.card-icon{color:var(--red)}.card h3{color:var(--red);text-transform:uppercase;font-size:23px}.card p{color:#e2e2e2}.card a{color:#fff;border-bottom:2px solid var(--red);padding-bottom:4px}

.lead-section{padding-top:120px;padding-bottom:120px}.lead-section:after{content:"";position:absolute;right:-10%;top:10%;width:55%;height:105%;background:linear-gradient(160deg,transparent 0 28%,rgba(237,17,28,.9) 28.2% 43%,rgba(128,8,17,.88) 43.2% 56%,transparent 56.2%);pointer-events:none}.lead-grid{position:relative;z-index:1}.lead-copy{background:#050505;padding:36px 36px 36px 0}.steps{gap:0;background:#050505}.step{border-radius:0;background:#090909;border:1px solid #303030;border-bottom:0;padding:26px}.step:last-child{border-bottom:1px solid #303030}.step small{color:var(--red);font-weight:800}.step h3{text-transform:uppercase}

.all-in-one{background:#d9d9d9;color:#0b0b0b;padding:110px 0;clip-path:polygon(0 9%,100% 0,100% 91%,0 100%);margin:-35px 0}.all-in-one .eyebrow{color:var(--red)}.all-in-one h2{font-size:clamp(42px,6vw,72px);line-height:.98;text-transform:uppercase}.all-in-one h2 span{color:var(--red)}.all-in-one p{color:#222}.all-in-one-pills span{border-radius:0;background:#050505!important;color:#fff!important;border:0!important}

.tech{padding-top:140px}.tech-card{border-radius:0;background:var(--red);border:0;color:#fff;box-shadow:22px 22px 0 rgba(128,8,17,.85)}.tech-card h3{color:#fff;text-transform:uppercase}.tech-contact{border-top:1px solid rgba(255,255,255,.5)}

.security-quote-section{background:#050505}.security-quote-wrap{max-width:none;display:grid;grid-template-columns:1fr 1.15fr;min-height:620px}.security-quote-copy{padding:90px max(48px,calc((100vw - 1180px)/2));padding-right:55px;display:flex;flex-direction:column;justify-content:center;background:#050505;position:relative}.security-quote-copy:after{content:"";position:absolute;right:-90px;top:0;width:180px;height:100%;background:var(--red);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%);z-index:2}.security-quote-copy h2{font-size:clamp(48px,6vw,78px);line-height:.95;text-transform:uppercase}.security-quote-copy h2 span{color:var(--red)}.security-quote-line{background:var(--red);height:8px;width:160px}.security-quote-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12)}

.region-boxes{gap:0}.region-box{border-radius:0;background:#080808;border:1px solid #333;padding:32px}.region-box:first-child{border-right:0}.region-box h3{color:var(--red);text-transform:uppercase}
.contact{padding:120px 0}.contact-wrap{border-radius:0;background:#070707;border:1px solid #333;box-shadow:none;position:relative}.contact-wrap:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:linear-gradient(90deg,var(--red),var(--red-dark),var(--red))}.contact-form{background:var(--red);border-radius:0}.contact-form input,.contact-form textarea{border-radius:0;background:#fff;color:#111;border:0}.contact-form .btn{background:#050505;color:#fff}
footer{background:#050505;border-top:8px solid var(--red)}

@media(max-width:900px){.nav-wrap{background:#d9d9d9}.navlinks{color:#fff}.hero{min-height:680px;padding:130px 0 80px}.hero:before{background:linear-gradient(165deg,rgba(218,218,218,.97) 0 20%,rgba(5,5,5,.55) 20.2% 100%)}.hero:after{width:105%;right:-20%;bottom:10%;height:75px}.security-quote-wrap{grid-template-columns:1fr}.security-quote-copy{padding:70px 28px}.security-quote-copy:after{display:none}.security-quote-image{min-height:360px}.all-in-one{clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}.services:before,.tech:before,.region:before{opacity:.55}.region-box:first-child{border-right:1px solid #333;border-bottom:0}}
@media(max-width:620px){.container{width:min(100% - 28px,1180px)}nav{height:82px}.brand-logo{width:155px;height:60px}.hero h1{font-size:44px}.section-head h2,.lead-copy h2,.tech h2,.region h2,.contact h2{font-size:38px}.card{min-height:auto}.contact{padding:80px 0}}


/* ==========================================================================
   Piktogramm-Sequenz  (Muster, vorerst nur die Karte "Alarmverfolgung")

   Das Symbol oben bleibt stehen. Die Abfolge laeuft als Auflage UEBER dem
   ganzen Kasten und endet unten, wo gleich der Text steht - so bleibt der
   Blick nach der Bewegung auf dem Text liegen (STW 2026-09-21).

   ⚠ Die Wellen sind bewusst KEIN SVG: sie sitzen auf denselben Koordinaten
     wie .icon (left/top aus dem Kartenrand) und gehen darum immer vom
     stehenden Symbol aus. Im SVG wuerden sie mit dem viewBox verrutschen,
     sobald der Kasten die Breite wechselt.
   ⚠ Die Auflage ist absolut positioniert, der Kasten aendert seine Form nie.
   ⚠ Grundzustand = fertige Karte. display:none, bis die Marke .seq-on am
     <html> steht - gesetzt nur bei IntersectionObserver UND erlaubter
     Bewegung. Ohne JS und fuer jeden Crawler bleibt die Karte, wie sie ist.
   ========================================================================== */

.seq{display:none}
html.seq-on .card--seq .seq{display:block;position:absolute;inset:0;
     pointer-events:none;color:var(--red)}

/* die Wellen - Groesse und Ort der .icon-Box */
html.seq-on .card--seq .seq-welle{position:absolute;left:28px;top:34px;width:50px;height:50px;
     border:1.5px solid currentColor;border-radius:50%;opacity:0}

/* Weg und Wagen - unten, ueber der spaeteren Textflaeche */
html.seq-on .card--seq .seq-fahrt{position:absolute;left:28px;right:28px;bottom:64px;height:96px}
html.seq-on .card--seq .seq-fahrt g{transform-box:fill-box;transform-origin:center;opacity:0}

html.seq-on .card--seq h3,
html.seq-on .card--seq p,
html.seq-on .card--seq a{opacity:0}

/* ... und es laeuft, sobald die Karte ins Bild kommt */
html.seq-on .card--seq.play .seq-welle{animation:seqWelle .7s ease-out both}
html.seq-on .card--seq.play .seq-welle:nth-child(2){animation-delay:.12s}
html.seq-on .card--seq.play .seq-welle:nth-child(3){animation-delay:.24s}
html.seq-on .card--seq.play .seq-weg  {animation:seqZeichnen .4s ease-in-out .45s both,seqFort .25s ease-in 1.05s forwards}
html.seq-on .card--seq.play .seq-wagen{animation:seqAn .2s ease-out .7s both,seqFahrt .55s ease-in 1.05s forwards}
html.seq-on .card--seq.play h3{animation:seqText .3s ease-out 1.5s both}
html.seq-on .card--seq.play p {animation:seqText .3s ease-out 1.62s both}
html.seq-on .card--seq.play a {animation:seqText .3s ease-out 1.74s both}

@keyframes seqWelle   {from{opacity:.55;transform:scale(.9)} to{opacity:0;transform:scale(3.6)}}
@keyframes seqZeichnen{from{opacity:1;stroke-dashoffset:100} to{opacity:1;stroke-dashoffset:0}}
@keyframes seqFort    {to{opacity:0}}
@keyframes seqAn      {from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:none}}
@keyframes seqFahrt   {to{opacity:0;transform:translateX(130px)}}
@keyframes seqText    {from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  html.seq-on .card--seq .seq{display:none}
  html.seq-on .card--seq *{opacity:1 !important;animation:none !important}
}

/* Rechtliches (Impressum) - schlichte Textflaeche, drei Kaesten */
.legal{background:#0e1114;min-height:60vh}
.legal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.legal-box{background:#15191d;border:1px solid #262b30;border-top:3px solid var(--red);padding:27px}
.legal-box h3{font-size:19px;margin-bottom:14px}
.legal-box p{color:#d7dce1;font-size:15px;margin:0 0 14px}
.legal-box p span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1.2px}
.legal-box a{color:#fff;text-decoration:underline;text-decoration-color:var(--red)}
@media(max-width:980px){.legal-grid{grid-template-columns:1fr}}
.legal-text{max-width:780px}
.legal-text h3{font-size:21px;margin:42px 0 12px}
.legal-text h3:first-child{margin-top:0}
.legal-text p{color:#c9ced3;font-size:15px;line-height:1.65;margin:0 0 14px}
.legal-text a{color:#fff;text-decoration:underline;text-decoration-color:var(--red)}
.legal-text code{font-size:13px;background:#15191d;border:1px solid #262b30;padding:1px 6px}
.legal-stand{margin-top:42px !important;color:var(--muted) !important;font-size:13px !important}