:root{
  --red:#D52E25;--red-d:#B0231C;--anth:#1A1A1A;--anth-2:#232323;--anth-3:#2E2E2E;
  --navy:#0D2547;--navy-2:#163463;--green:#6CA733;--green-d:#548A22;
  --paper:#F6F5F2;--white:#fff;--ink:#141414;--muted:#6B6B6B;--line:#E4E2DD;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
h1,h2,h3{line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,48px);font-weight:800;margin:14px 0 18px}
h3{font-size:21px;font-weight:700}
.lead{font-size:19px;color:var(--muted);max-width:640px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;transition:.25s;cursor:pointer;font-family:inherit}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
section{position:relative}

/* Brand switch bar */
.brandbar{background:#0f0f0f;color:#bbb;font-size:13px}
.brandbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.brandbar .switch{display:flex;height:100%}
.brandbar .switch a{display:flex;align-items:center;gap:8px;padding:0 16px;text-decoration:none;font-weight:600;letter-spacing:.04em;color:#9a9a9a;border-bottom:2px solid transparent}
.brandbar .switch a.on{color:#fff;border-color:var(--red);background:#1a1a1a}
.brandbar .switch a.dl.on{border-color:var(--green);background:#f0f3f7;color:var(--navy)}
.brandbar .switch a:hover{color:#fff}
.brandbar .switch a.dl:hover{color:#9fd36b}
.brandbar .dot{width:8px;height:8px;border-radius:50%}
.brandbar .meta{display:flex;gap:22px}
.brandbar .meta a{text-decoration:none}
.brandbar .meta a:hover{color:#fff}
.page-dl .brandbar{background:var(--navy);color:#c8d3e3}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(26,26,26,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
header.site .logo img{height:62px;width:auto}
nav.main{display:flex;align-items:center;gap:34px}
nav.main a{color:#e8e8e8;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.03em;position:relative;padding:6px 0}
nav.main a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:.25s}
nav.main a:not(.btn):hover::after{width:100%}
nav.main .btn{padding:12px 22px;font-size:13px}
.burger{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;width:44px;height:44px}
.page-dl header.site{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.page-dl nav.main a{color:var(--navy)}
.page-dl nav.main a:not(.btn)::after{background:var(--green)}
.page-dl .burger{color:var(--navy)}

/* Hero */
.hero{background:var(--anth);color:#fff;overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px)}
.hero .shape{position:absolute;right:-6%;top:0;bottom:0;width:46%;background:var(--anth-3);clip-path:polygon(32% 0,100% 0,100% 100%,0 100%)}
.hero .stripe{position:absolute;right:30%;top:0;bottom:0;width:7%;background:var(--red);clip-path:polygon(70% 0,100% 0,30% 100%,0 100%);opacity:.95}
.hero .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:110px;width:100%}
.hero h1{font-size:clamp(42px,6.6vw,86px);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;max-width:820px;margin:22px 0 26px}
.hero h1 span{color:var(--red)}
.hero p.lead{color:#c9c9c9;font-size:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
.hero .facts{display:flex;flex-wrap:wrap;gap:0;margin-top:70px;border-top:1px solid rgba(255,255,255,.12);max-width:860px}
.hero .facts div{padding:22px 26px 0 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.12)}
.hero .facts div:last-child{border-right:0}
.hero .facts b{display:block;font-size:22px;font-weight:800;color:#fff}
.hero .facts span{font-size:14px;color:#9d9d9d;letter-spacing:.04em}
.hero .badge{position:absolute;right:7%;bottom:110px;z-index:3;background:#fff;color:var(--ink);padding:22px 26px;max-width:290px;box-shadow:0 30px 60px rgba(0,0,0,.35);border-left:5px solid var(--red)}
.hero .badge b{display:block;font-size:17px;margin-bottom:4px}
.hero .badge p{font-size:14px;color:var(--muted);line-height:1.5}

/* Promise strip */
.promise{background:var(--red);color:#fff}
.promise .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.promise div{padding:26px 22px;display:flex;gap:14px;align-items:center;font-weight:700;letter-spacing:.03em;border-right:1px solid rgba(255,255,255,.22)}
.promise div:last-child{border-right:0}
.promise svg{flex:0 0 30px}

/* Sections */
.sec{padding:120px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:64px}
.paper{background:var(--paper)}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.svc{background:#fff;padding:44px 36px 40px;position:relative;transition:.3s;overflow:hidden}
.svc .num{position:absolute;right:26px;top:18px;font-size:64px;font-weight:900;color:#f1efeb;line-height:1;transition:.3s}
.svc .ico{width:58px;height:58px;display:grid;place-items:center;background:var(--anth);color:#fff;margin-bottom:26px;position:relative}
.svc h3{margin-bottom:12px;position:relative}
.svc p{color:var(--muted);font-size:16px;position:relative}
.svc ul{list-style:none;margin-top:18px;position:relative}
.svc li{font-size:15px;padding:6px 0;border-top:1px solid var(--line);display:flex;gap:10px}
.svc li::before{content:"";width:6px;height:6px;background:var(--red);margin-top:10px;flex:0 0 6px}
.svc:hover{background:var(--anth);color:#fff}
.svc:hover p{color:#bdbdbd}
.svc:hover .num{color:#2a2a2a}
.svc:hover .ico{background:var(--red)}
.svc:hover li{border-color:#333}
.svc.cross{background:var(--navy);color:#fff}
.svc.cross .num{color:#163463}
.svc.cross p{color:#c8d3e3}
.svc.cross .ico{background:var(--green)}
.svc.cross li{border-color:#1d3d6e}
.svc.cross li::before{background:var(--green)}
.svc.cross a.more{color:#9fd36b}
a.more{display:inline-flex;gap:8px;margin-top:22px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--red);position:relative}
.svc:hover a.more{color:#ff6b62}

/* Two brands */
.brands{background:var(--anth);color:#fff;overflow:hidden}
.brands .grid{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.brands .side{padding:90px 70px;position:relative;display:flex;flex-direction:column;justify-content:center}
.brands .side img{height:110px;width:auto;object-fit:contain;object-position:left;margin-bottom:34px}
.brands .side h3{font-size:30px;font-weight:800;margin-bottom:14px}
.brands .side p{color:#bdbdbd;max-width:460px;margin-bottom:28px}
.brands .bau{background:var(--anth)}
.brands .dl{background:#F2F5F9;color:var(--navy)}
.brands .dl p{color:#4a5b75}
.brands .dl .eyebrow{color:var(--green)}
.brands .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:120px;height:120px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;text-align:center;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;box-shadow:0 20px 50px rgba(0,0,0,.3);border:4px solid var(--red)}
.brands .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.brands .tags span{font-size:13px;padding:6px 12px;border:1px solid rgba(255,255,255,.2);letter-spacing:.03em}
.brands .dl .tags span{border-color:#c5d0de}

/* Bridge */
.bridge{background:linear-gradient(90deg,var(--anth) 0 50%,var(--navy) 50% 100%);color:#fff}
.bridge .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;padding-top:64px;padding-bottom:64px}
.bridge .step b{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.bridge .step h3{font-size:26px}
.bridge .step:last-child{text-align:right}
.bridge .arrow{width:84px;height:84px;border-radius:50%;background:var(--green);display:grid;place-items:center}

/* Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:s}
.process .st{position:relative;padding-top:34px;border-top:3px solid var(--anth)}
.process .st::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-22px;left:0;background:var(--red);color:#fff;font-weight:800;font-size:15px;padding:8px 12px}
.process .st h3{margin:10px 0 10px}
.process .st p{color:var(--muted);font-size:16px}

/* Why */
.why{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.why .visual{position:relative;aspect-ratio:4/5;background:var(--anth);overflow:hidden}
.why .visual .ph{position:absolute;inset:0;display:grid;place-items:center;color:#5b5b5b;font-size:14px;letter-spacing:.15em;text-transform:uppercase;background:
  repeating-linear-gradient(135deg,#202020 0 22px,#1c1c1c 22px 44px)}
.why .visual .tag{position:absolute;left:0;bottom:40px;background:var(--red);color:#fff;padding:22px 30px;max-width:80%}
.why .visual .tag b{display:block;font-size:24px;font-weight:900;text-transform:uppercase}
.why .list{display:grid;gap:26px;margin-top:34px}
.why .item{display:grid;grid-template-columns:54px 1fr;gap:18px}
.why .item .i{width:54px;height:54px;border:2px solid var(--red);display:grid;place-items:center;color:var(--red)}
.why .item h3{font-size:19px;margin-bottom:4px}
.why .item p{color:var(--muted);font-size:16px}

/* Region */
.region{background:var(--anth);color:#fff}
.region .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.region .lead{color:#bdbdbd}
.region .cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.region .cities span{padding:9px 16px;border:1px solid #3a3a3a;font-size:15px}
.region .cities span.main{background:var(--red);border-color:var(--red);font-weight:700}
.radar{aspect-ratio:1;width:100%;max-width:460px;margin-left:auto;position:relative;display:grid;place-items:center}
.radar i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.radar i:nth-child(1){inset:0}.radar i:nth-child(2){inset:16%}.radar i:nth-child(3){inset:32%}
.radar .pin{width:22px;height:22px;background:var(--red);border-radius:50%;box-shadow:0 0 0 10px rgba(213,46,37,.25),0 0 0 26px rgba(213,46,37,.1);position:relative;z-index:2}
.radar .lbl{position:absolute;font-size:13px;color:#9d9d9d;letter-spacing:.12em;text-transform:uppercase}
.radar .c{position:absolute;top:58%;font-weight:800;font-size:15px;letter-spacing:.15em}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:24px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:19px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;color:var(--red);line-height:1;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:12px;max-width:760px}

/* Contact */
.contact{background:var(--paper)}
.contact .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#fff;box-shadow:0 40px 80px rgba(0,0,0,.08)}
.contact .info{background:var(--anth);color:#fff;padding:60px 50px;position:relative;overflow:hidden}
.contact .info::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;background:var(--red);clip-path:polygon(50% 0,100% 0,100% 100%,0 100%)}
.contact .info h2{font-size:36px}
.contact .info p{color:#bdbdbd}
.contact .info ul{list-style:none;margin-top:36px;display:grid;gap:22px;position:relative;z-index:2}
.contact .info li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.contact .info li .i{width:44px;height:44px;background:#2a2a2a;display:grid;place-items:center;color:var(--red)}
.contact .info li small{display:block;color:#8a8a8a;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.contact form{padding:60px 50px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact .full{grid-column:1/-1}
.contact label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
.contact input,.contact select,.contact textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);background:#fbfbfa;font-family:inherit;font-size:16px;color:var(--ink);transition:.2s;border-radius:0}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:0;border-color:var(--anth);background:#fff}
.contact textarea{min-height:130px;resize:vertical}
.contact .check{display:flex;gap:12px;font-size:14px;color:var(--muted);align-items:flex-start}
.contact .check input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--red)}
.contact .err{color:var(--red);font-size:14px;font-weight:600;display:none}
.contact .ok{display:none;background:#eef6e7;border-left:4px solid var(--green);padding:16px;font-size:15px}

/* Footer */
footer{background:#0f0f0f;color:#9a9a9a;font-size:15px}
footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:50px;padding:80px 0 60px}
footer img{height:70px;width:auto;margin-bottom:20px}
footer h4{color:#fff;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .bottom{border-top:1px solid #222;padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}
footer .dl-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 16px;background:#16263f;color:#cfe3b8;font-weight:600}
footer .dl-link:hover{background:var(--navy);color:#fff}

/* Dienstleistungen page */
.page-dl .hero{background:#F2F5F9;color:var(--navy)}
.page-dl .hero::before{background:repeating-linear-gradient(90deg,rgba(13,37,71,.05) 0 1px,transparent 1px 120px),repeating-linear-gradient(0deg,rgba(13,37,71,.05) 0 1px,transparent 1px 120px)}
.page-dl .hero .shape{background:var(--navy)}
.page-dl .hero .stripe{background:var(--green)}
.page-dl .hero h1 span{color:var(--green)}
.page-dl .hero p.lead{color:#4a5b75}
.page-dl .eyebrow{color:var(--green)}
.page-dl .hero .facts{border-color:#cdd6e2}
.page-dl .hero .facts div{border-color:#cdd6e2}
.page-dl .hero .facts b{color:var(--navy)}
.page-dl .hero .facts span{color:#6a7a92}
.page-dl .hero .badge{border-color:var(--green)}
.page-dl .btn-ghost{border-color:#9fb0c7;color:var(--navy)}
.page-dl .btn-ghost:hover{border-color:var(--navy);background:#fff}
.page-dl .promise{background:var(--navy)}
.page-dl .svc .ico{background:var(--navy)}
.page-dl .svc li::before{background:var(--green)}
.page-dl .svc:hover{background:var(--navy)}
.page-dl .svc:hover .num{color:#163463}
.page-dl .svc:hover .ico{background:var(--green)}
.page-dl .svc:hover p{color:#c8d3e3}
.page-dl .svc:hover li{border-color:#1d3d6e}
.page-dl a.more{color:var(--green-d)}
.page-dl .svc:hover a.more{color:#9fd36b}
.page-dl .svc.cross{background:var(--anth)}
.page-dl .svc.cross .ico{background:var(--red)}
.page-dl .svc.cross li::before{background:var(--red)}
.page-dl .svc.cross a.more{color:#ff6b62}
.page-dl .process .st{border-color:var(--navy)}
.page-dl .process .st::before{background:var(--green)}
.page-dl .why .item .i{border-color:var(--green);color:var(--green-d)}
.page-dl .why .visual{background:var(--navy)}
.page-dl .why .visual .ph{background:repeating-linear-gradient(135deg,#0f2a50 0 22px,#0c2444 22px 44px);color:#5f7697}
.page-dl .why .visual .tag{background:var(--green)}
.page-dl .faq summary::after{color:var(--green)}
.page-dl .contact .info{background:var(--navy)}
.page-dl .contact .info::after{background:var(--green)}
.page-dl .contact .info li .i{background:#163463;color:#9fd36b}
.page-dl .contact .check input{accent-color:var(--green)}
.page-dl footer{background:#081a33;color:#8ea0bb}
.page-dl footer .top img{background:#fff;padding:10px 14px}
.page-dl footer .bottom{border-color:#14294a}
.page-dl footer .dl-link{background:#1a1a1a;color:#ff8a83}

/* Legal pages */
.legal-hero{background:var(--anth);color:#fff;padding:90px 0 70px}
.legal-hero h1{font-size:clamp(36px,5vw,58px);font-weight:900;text-transform:uppercase;margin-top:14px}
.legal{padding:70px 0 110px}
.legal .wrap{max-width:860px}
.legal h2{font-size:24px;margin:44px 0 12px}
.legal h3{font-size:18px;margin:26px 0 8px}
.legal p,.legal li{color:#333;margin-bottom:10px}
.legal ul{padding-left:22px}
.legal .ph{background:#fff4d6;padding:1px 6px;font-weight:600;color:#7a5a00}
.legal .note{background:var(--paper);border-left:4px solid var(--red);padding:18px 22px;margin:20px 0;font-size:15px}

/* Reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:1000px){
  nav.main{position:fixed;inset:124px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--anth);padding:10px 28px 28px;display:none;border-bottom:3px solid var(--red)}
  .page-dl nav.main{background:#fff;border-color:var(--green)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;width:100%;border-bottom:1px solid rgba(128,128,128,.2)}
  nav.main .btn{margin-top:16px;width:auto;border-bottom:0}
  .burger{display:block}
  .hero .shape,.hero .stripe,.hero .badge{display:none}
  .promise .wrap{grid-template-columns:1fr 1fr}
  .promise div:nth-child(2){border-right:0}
  .sec-head,.why,.region .grid,.contact .grid,.brands .grid{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;row-gap:50px}
  .brands .mid{display:none}
  .brands .side{padding:70px 28px}
  .bridge{background:var(--anth)}
  .bridge .wrap{grid-template-columns:1fr;text-align:center}
  .bridge .step:last-child{text-align:center}
  .bridge .arrow{margin:0 auto;transform:rotate(90deg)}
  footer .top{grid-template-columns:1fr 1fr}
  .radar{margin:0 auto}
  .brandbar .meta{display:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .sec{padding:80px 0}
  .services,.process,footer .top{grid-template-columns:1fr}
  .contact form{grid-template-columns:1fr;padding:40px 24px}
  .contact .info{padding:44px 24px}
  .promise .wrap{grid-template-columns:1fr}
  .promise div{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .hero .facts div{border-right:0;padding-right:0;margin-right:0;width:50%}
  header.site .logo img{height:50px}
  .brandbar .switch a{padding:0 10px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== v2: Fotos, Animationen, Interaktion ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:100;transition:width .1s}
.page-dl .progress{background:var(--green)}
header.site{transition:height .3s,box-shadow .3s}
header.site.small .wrap{height:66px}
header.site.small .logo img{height:48px}
header.site .wrap,header.site .logo img{transition:.3s}
header.site.small{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero .shape.photo{background-size:cover;background-position:center}
.hero .shape.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,26,.85),rgba(26,26,26,.25))}
.page-dl .hero .shape.photo::after{background:linear-gradient(90deg,rgba(13,37,71,.8),rgba(13,37,71,.2))}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}.hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero .fade{opacity:0;animation:fade 1s .45s forwards}
@keyframes fade{to{opacity:1}}
.hero .badge{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:#fff;opacity:.6;font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.scroll-hint i{width:2px;height:28px;background:currentColor;animation:hint 1.6s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.page-dl .scroll-hint{color:var(--navy)}
/* Service cards v2 */
.svc .pic{margin:-44px -36px 26px;height:190px;background-size:cover;background-position:center;position:relative}
.svc .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 60%)}
.svc .pic + .ico{margin-top:-55px;position:relative;z-index:2;border:4px solid #fff}
.svc ul{max-height:0;overflow:hidden;transition:max-height .45s ease,margin .3s;margin-top:0}
.svc.open ul{max-height:320px;margin-top:18px}
.svc .toggle{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;position:relative}
.svc .toggle b{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid currentColor;transition:transform .3s;font-size:14px}
.svc.open .toggle b{transform:rotate(45deg)}
.page-dl .svc .toggle{color:var(--green-d)}
.svc:hover .toggle,.svc.cross .toggle{color:#ff6b62}
.page-dl .svc:hover .toggle{color:#9fd36b}
.svc .note{font-size:12.5px;opacity:.7;margin-top:8px;font-style:italic}
.svc .ask{margin-top:14px;font-size:13px;font-weight:700;background:var(--red);color:#fff;border:0;padding:9px 14px;cursor:pointer;font-family:inherit;letter-spacing:.04em;display:none}
.svc.open .ask{display:inline-block}
.page-dl .svc .ask{background:var(--green)}
/* Configurator */
.config{background:var(--anth);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.config::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border:60px solid rgba(213,46,37,.12);border-radius:50%}
.page-dl .config{background:var(--navy)}.page-dl .config::before{border-color:rgba(108,167,51,.15)}
.config .wrap{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.config .lead{color:#bdbdbd}.page-dl .config .lead{color:#c8d3e3}
.picks{display:flex;flex-wrap:wrap;gap:10px}
.pick{border:2px solid #444;background:transparent;color:#fff;padding:12px 18px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:10px}
.page-dl .pick{border-color:#2a4a78}
.pick::before{content:"";width:16px;height:16px;border:2px solid currentColor;transition:.2s}
.pick:hover{border-color:var(--red)}.page-dl .pick:hover{border-color:var(--green)}
.pick.on{background:var(--red);border-color:var(--red)}.page-dl .pick.on{background:var(--green);border-color:var(--green)}
.pick.on::before{background:#fff;box-shadow:inset 0 0 0 3px var(--red)}.page-dl .pick.on::before{box-shadow:inset 0 0 0 3px var(--green)}
.config .go{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.config .count{color:#9d9d9d;font-size:14px}
/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:10px}
.gallery button{border:0;padding:0;cursor:zoom-in;position:relative;overflow:hidden;background:#222}
.gallery button img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gallery button:hover img{transform:scale(1.07)}
.gallery button span{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-weight:600;font-size:14px;text-align:left;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);transform:translateY(100%);transition:.3s}
.gallery button:hover span{transform:none}
.gallery .big{grid-column:span 2;grid-row:span 2}.gallery .tall{grid-row:span 2}
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1000px);max-height:82vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:fade .3s}
.lightbox .cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#ddd;font-size:15px}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:54px;height:54px;font-size:28px;cursor:pointer;transition:.2s}
.lightbox button:hover{background:var(--red)}.page-dl .lightbox button:hover{background:var(--green)}
.lightbox .lb-x{top:20px;right:20px}.lightbox .lb-p{left:20px;top:50%;transform:translateY(-50%)}.lightbox .lb-n{right:20px;top:50%;transform:translateY(-50%)}
/* Why photo */
.why .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.why .visual:hover img{transform:scale(1.08)}
/* Floating buttons */
.fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab a,.fab button{width:54px;height:54px;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:.3s;text-decoration:none}
.fab .call{background:var(--red);color:#fff}.page-dl .fab .call{background:var(--green)}
.fab .top{background:#fff;color:var(--ink);opacity:0;transform:translateY(20px);pointer-events:none}
.fab .top.show{opacity:1;transform:none;pointer-events:auto}
.fab .call{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(213,46,37,.5)}70%{box-shadow:0 0 0 16px rgba(213,46,37,0)}100%{box-shadow:0 0 0 0 rgba(213,46,37,0)}}
.page-dl .fab .call{animation-name:pulseg}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(108,167,51,.5)}70%{box-shadow:0 0 0 16px rgba(108,167,51,0)}100%{box-shadow:0 0 0 0 rgba(108,167,51,0)}}
/* staggered reveal */
.rv.in .svc,.rv.in .st,.rv.in .item{animation:rise .7s both}
.rv .svc:nth-child(2),.rv .st:nth-child(2),.rv .item:nth-child(2){animation-delay:.08s}
.rv .svc:nth-child(3),.rv .st:nth-child(3),.rv .item:nth-child(3){animation-delay:.16s}
.rv .svc:nth-child(4),.rv .st:nth-child(4),.rv .item:nth-child(4){animation-delay:.24s}
.rv .svc:nth-child(5){animation-delay:.32s}.rv .svc:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.footer-credit{opacity:.7}.footer-credit a{color:#b38bff;font-weight:600}
@media(max-width:1000px){.config .wrap{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery .big{grid-column:span 2}}
@media(max-width:640px){.gallery{grid-auto-rows:160px}.svc .pic{margin:-44px -36px 26px}}
@media(prefers-reduced-motion:reduce){.hero h1 .ln>span,.hero .fade{animation:none;transform:none;opacity:1}.hero .badge,.fab .call{animation:none}}
.hero h1 .ln>span{color:#fff}
.page-dl .hero h1 .ln>span{color:var(--navy)}
.gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}
.gallery .wide{grid-column:span 2}
@media(max-width:1000px){.gallery{grid-template-columns:1fr 1fr}.gallery .wide{grid-column:span 2}}

/* ===== v3: Handy kompakt ===== */
@media(max-width:1000px){
  nav.main{position:absolute;top:100%;left:0;right:0;bottom:auto;max-height:calc(100vh - 70px);overflow:auto}
}
@media(max-width:640px){
  body{font-size:15px;line-height:1.55}
  .wrap{padding:0 16px}
  h2{font-size:25px;margin:8px 0 10px}
  h3{font-size:17px}
  .lead{font-size:15px}
  .eyebrow{font-size:11px;gap:8px;letter-spacing:.18em}
  .eyebrow::before{width:22px}
  .btn{padding:12px 18px;font-size:12.5px;gap:8px}
  .brandbar{font-size:11px}
  .brandbar .wrap{height:32px}
  .brandbar .switch a{padding:0 9px;font-size:11px;gap:6px}
  header.site .wrap,header.site.small .wrap{height:58px}
  header.site .logo img,header.site.small .logo img{height:38px}
  .burger{font-size:24px;width:40px;height:40px}
  nav.main{padding:4px 16px 18px}
  nav.main a{padding:11px 0;font-size:15px}
  nav.main .btn{margin-top:12px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:38px;padding-bottom:42px}
  .hero h1{font-size:31px;margin:12px 0;letter-spacing:-.01em}
  .hero p.lead{font-size:15px}
  .hero .ctas{margin-top:20px;gap:10px}
  .hero .ctas .btn{flex:1 1 auto;justify-content:center}
  .hero .facts{margin-top:28px}
  .hero .facts div{padding:12px 0 0}
  .hero .facts b{font-size:17px}
  .hero .facts span{font-size:12px}
  .scroll-hint{display:none}
  .promise .wrap{grid-template-columns:1fr 1fr;padding:0}
  .promise div{padding:11px 12px;font-size:12.5px;gap:8px;border-right:1px solid rgba(255,255,255,.2)}
  .promise div:nth-child(2n){border-right:0}
  .promise svg{flex:0 0 20px;width:20px;height:20px}
  .sec{padding:46px 0}
  .sec-head{gap:10px;margin-bottom:24px}
  .svc{padding:22px 18px 20px}
  .svc .pic{margin:-22px -18px 16px;height:135px}
  .svc .pic + .ico{margin-top:-40px;border-width:3px}
  .svc .num{font-size:40px;right:16px;top:12px}
  .svc .ico{width:44px;height:44px;margin-bottom:12px}
  .svc .ico svg{width:22px;height:22px}
  .svc h3{margin-bottom:6px}
  .svc p{font-size:14px}
  .svc li{font-size:13.5px;padding:5px 0}
  .svc li::before{margin-top:8px}
  .svc .toggle{margin-top:12px;font-size:12px}
  a.more{margin-top:14px;font-size:12.5px}
  .brands .grid{min-height:0}
  .brands .side{padding:36px 16px}
  .brands .side img{height:64px;margin-bottom:16px}
  .brands .side h3{font-size:21px;margin-bottom:8px}
  .brands .side p{margin-bottom:16px;font-size:14.5px}
  .brands .tags{gap:6px;margin-bottom:18px}
  .brands .tags span{font-size:11.5px;padding:4px 9px}
  .bridge .wrap{padding-top:30px;padding-bottom:30px;gap:16px}
  .bridge .step h3{font-size:18px}
  .bridge .step b{font-size:11px}
  .bridge .arrow{width:52px;height:52px}
  .bridge .arrow svg{width:24px;height:24px}
  .process{gap:0;row-gap:32px}
  .process .st{padding-top:24px}
  .process .st::before{font-size:13px;padding:6px 10px;top:-18px}
  .process .st h3{margin:6px 0}
  .process .st p{font-size:14px}
  .why{gap:26px}
  .why .visual{aspect-ratio:4/3}
  .why .visual .tag{padding:12px 16px;bottom:18px}
  .why .visual .tag b{font-size:17px}
  .why .list{gap:14px;margin-top:18px}
  .why .item{grid-template-columns:40px 1fr;gap:12px}
  .why .item .i{width:40px;height:40px}
  .why .item .i svg{width:20px;height:20px}
  .why .item h3{font-size:16px}
  .why .item p{font-size:14px}
  .region .grid{gap:26px}
  .region .cities{gap:6px;margin-top:18px}
  .region .cities span{padding:5px 10px;font-size:12.5px}
  .radar{max-width:250px}
  .radar .lbl{font-size:10px}
  .config{padding:46px 0}
  .config .wrap{gap:22px}
  .picks{gap:7px}
  .pick{padding:8px 11px;font-size:13px;gap:7px}
  .pick::before{width:13px;height:13px}
  .config .go{margin-top:18px;gap:12px}
  .gallery{grid-auto-rows:120px;gap:6px}
  .gallery button span{font-size:12px;padding:8px 10px;transform:none}
  .lightbox{padding:12px}
  .lightbox button{width:42px;height:42px;font-size:22px}
  .faq details{padding:14px 0}
  .faq summary{font-size:15.5px;gap:12px}
  .faq summary::after{font-size:22px}
  .faq details p{font-size:14.5px;margin-top:8px}
  .contact .info{padding:30px 18px}
  .contact .info h2{font-size:24px}
  .contact .info ul{margin-top:20px;gap:12px}
  .contact .info li{grid-template-columns:36px 1fr;gap:10px;font-size:14px}
  .contact .info li .i{width:36px;height:36px}
  .contact .info::after{width:120px;height:120px;right:-40px;bottom:-40px}
  .contact form{padding:24px 18px;gap:12px}
  .contact label{font-size:11.5px;margin-bottom:4px}
  .contact input,.contact select,.contact textarea{padding:10px 12px}
  .contact textarea{min-height:96px}
  .contact .check{font-size:12.5px;gap:8px}
  footer{font-size:13.5px}
  footer .top{padding:38px 0 24px;gap:22px}
  footer img{height:48px;margin-bottom:12px}
  footer h4{font-size:11.5px;margin-bottom:10px}
  footer ul{gap:6px}
  footer .bottom{padding:16px 0;font-size:12.5px}
  footer .dl-link{margin-top:14px;padding:9px 12px;font-size:13px}
  .fab{right:12px;bottom:12px;gap:8px}
  .fab a,.fab button{width:46px;height:46px}
  .legal-hero{padding:44px 0 32px}
  .legal-hero h1{font-size:27px}
  .legal{padding:32px 0 56px}
  .legal h2{font-size:19px;margin:28px 0 8px}
  .legal h3{font-size:16px;margin:18px 0 6px}
  .legal p,.legal li{font-size:14.5px}
  .legal .note{padding:12px 14px;font-size:13.5px}
}

/* ===== v4: Galerie erweitert + Vorher/Nachher ===== */
.gallery .wide2{grid-column:span 2}
.va-head{margin:56px 0 18px}.va-head h3{font-size:clamp(20px,2.4vw,28px);font-weight:800;margin-top:10px}
.gallery.va{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gallery.va button{width:calc(50% - 6px);aspect-ratio:4/3}
.gallery.va button span{transform:none}
@media(max-width:640px){.gallery.va button{width:100%}.va-head{margin:34px 0 12px}}

/* ===== v5: Fotos als Wisch-Galerie ===== */
.gallery.slider{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;grid-auto-rows:auto}
.gallery.slider::-webkit-scrollbar{display:none}
.gallery.slider button{flex:0 0 calc((100% - 24px)/3);width:auto;aspect-ratio:3/4;scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important}
.gallery.slider button span{transform:none;font-size:14px;padding:16px 14px 12px}
.gallery.va.slider button{flex:0 0 calc((100% - 12px)/2);aspect-ratio:4/3}
.slider-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px}
.slider-nav button{width:46px;height:46px;border:2px solid var(--anth);background:#fff;color:var(--anth);font-size:26px;line-height:1;cursor:pointer;transition:.2s;font-family:inherit}
.slider-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.slider-nav button:disabled{opacity:.3;pointer-events:none}
.sl-count{font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--muted);min-width:64px;text-align:center}
@media(max-width:1000px){.gallery.slider button{flex-basis:calc((100% - 12px)/2)}.gallery.va.slider button{flex-basis:88%}}
@media(max-width:640px){.gallery.slider button{flex-basis:78%}.gallery.va.slider button{flex-basis:90%}.gallery.slider{gap:10px;margin-right:-16px;padding-right:16px}.slider-nav{justify-content:space-between;margin-top:10px}.slider-nav button{width:40px;height:40px;font-size:22px}.gallery.slider button span{font-size:13px}}
.gallery.va.slider{justify-content:flex-start}