:root{
  --navy:#061527;
  --navy2:#0a2c48;
  --red:#ce191c;
  --white:#fff;
  --ink:#172838;
  --muted:#627383;
  --line:#d9e2e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#061527;color:#fff}
a{text-decoration:none;color:inherit}

/* Header */
.header{
  min-height:100px;padding:14px 3%;
  display:flex;align-items:center;gap:34px;
  background:#061426;position:sticky;top:0;z-index:30
}
.logo{width:280px;max-height:72px;object-fit:contain}
.header nav{margin-left:auto;display:flex;gap:30px;text-transform:uppercase;font-size:13px}
.header nav a:hover{color:#d71920}
.btn{
  display:inline-block;background:#ce191c;color:#fff;
  padding:14px 21px;text-transform:uppercase;
  font-size:13px;font-weight:bold;border:0;cursor:pointer
}

/* Homepage */
.hero{
  height:510px;background:url("images/kruse-gebaeude.jpg") center/cover no-repeat;
  position:relative
}
.heroShade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,19,34,.98),rgba(3,19,34,.82) 42%,rgba(3,19,34,.12) 75%)
}
.heroText{position:relative;padding:55px 3%;z-index:2;max-width:800px}
.hero h1{font-size:46px;line-height:1.08;margin:0 0 22px}
.hero h1 span{color:#df1d22}
.hero p{font-size:20px;line-height:1.5}
.benefits{display:flex;gap:55px;margin-top:38px}
.benefits b,.benefits small{display:block}
.benefits small{margin-top:8px;line-height:1.45;color:#d9e0e6}

.services{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:2px solid #fff;border-bottom:2px solid #fff
}
.services article{
  display:grid;grid-template-columns:1.05fr .95fr;
  min-height:390px;border-right:1px solid #fff;overflow:hidden
}
.services article:last-child{border-right:0}
.copy{padding:32px 5%;background:#071a2d}
.copy h2{font-size:23px;border-bottom:3px solid #d71920;padding-bottom:12px}
.copy p{line-height:1.55;color:#e4eaf0}
.copy ul{padding-left:20px;line-height:1.7;margin-bottom:20px}
.copy li::marker{color:#e21b23}
.services img{width:100%;height:100%;object-fit:cover}

.contact{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:25px 3%;background:#061426
}
.contact>div{display:flex;flex-direction:column;gap:8px;padding:0 28px;border-right:1px solid #52606d}
.contact>div:first-child{padding-left:0}
.contact>div:last-child{border:0}
.contact .btn{margin-top:8px;width:max-content}

footer{
  display:flex;justify-content:space-between;
  padding:18px 3%;background:#061426;
  border-top:1px solid #263747;color:#aab7c1;font-size:12px
}

/* Unterseiten */
.pagehero{padding:72px 6%;background:linear-gradient(115deg,#061426,#0b2943);border-bottom:4px solid #ce191c}
.pagehero .wrap{max-width:1100px;margin:auto}
.pagehero h1{font-size:clamp(36px,5vw,58px);margin:0 0 14px}
.pagehero p{max-width:760px;color:#d7e2ea;font-size:18px;line-height:1.6}
.content{max-width:1100px;margin:auto;padding:56px 24px 80px;color:#1c2e3d;background:#fff}
.page-image{width:100%;max-height:420px;object-fit:cover;border-radius:14px;margin:20px 0 34px}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:28px 0 42px}
.feature-card{border:1px solid #d5e0e8;border-top:5px solid #ce191c;border-radius:12px;padding:24px;background:#f8fbfd;box-shadow:0 8px 20px rgba(5,31,52,.06)}
.feature-card h3{color:#07355e;margin-top:0}
.feature-card p{line-height:1.6;color:#51606c}
.cta-box{background:#071a2d;color:#fff;padding:28px;border-radius:14px;margin-top:38px}
.cta-box h2{color:#fff}

/* Legal */
.legal{max-width:960px;margin:0 auto;padding:50px 24px 80px;background:#fff;color:#1a2c3b;min-height:100vh}
.legal h1,.legal h2{color:#082f58}
.legal a{color:#a7191c;text-decoration:underline}
.notice{background:#fff4d9;border-left:5px solid #e5a91e;padding:14px 16px;margin:20px 0}

/* ========= ELEGANTES KONTAKT-POPUP =========
   [hidden] sorgt dafür, dass es selbst ohne CSS NIEMALS sichtbar ist.
*/
.contact-popup[hidden]{display:none!important}
.contact-popup{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:24px
}
.contact-popup-backdrop{
  position:absolute;inset:0;background:rgba(2,12,23,.78);
  backdrop-filter:blur(5px)
}
.contact-popup-card{
  position:relative;z-index:2;
  width:min(1060px,96vw);max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:.82fr 1.18fr;
  background:#fff;color:var(--ink);
  border-radius:18px;box-shadow:0 34px 100px rgba(0,0,0,.5)
}
.popup-close{
  position:absolute;right:18px;top:18px;z-index:5;
  width:42px;height:42px;border-radius:50%;
  border:1px solid #dce3e8;background:#fff;color:#152b3d;
  font-size:27px;line-height:1;cursor:pointer;
  box-shadow:0 5px 18px rgba(0,0,0,.1)
}
.popup-info{
  position:relative;overflow:hidden;
  padding:48px 38px;
  background:linear-gradient(145deg,#061426,#0a304e);
  color:#fff
}
.popup-info:after{
  content:"";position:absolute;right:-130px;bottom:-150px;
  width:310px;height:310px;border:55px solid rgba(255,255,255,.035);
  transform:rotate(45deg)
}
.popup-kicker{
  display:block;margin-bottom:12px;
  font-size:11px;font-weight:900;letter-spacing:.18em;
  color:#ff666a
}
.popup-info h2{font-size:35px;line-height:1.08;margin:0 0 16px}
.popup-info>p{color:#d0dce5;line-height:1.65;margin:0 0 32px}
.popup-details{display:grid;gap:13px;position:relative;z-index:2}
.popup-detail{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;background:rgba(255,255,255,.05)
}
.popup-detail-icon{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;border-radius:8px;
  background:#ce191c;color:#fff;font-weight:900;font-size:18px
}
.popup-detail small,.popup-detail strong{display:block}
.popup-detail small{
  color:#9db2c2;font-size:10px;text-transform:uppercase;
  letter-spacing:.11em;margin-bottom:3px
}
.popup-detail strong{color:#fff;font-size:14px;line-height:1.45}
.popup-company{
  position:relative;z-index:2;margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12)
}
.popup-company b,.popup-company span{display:block}
.popup-company span{margin-top:5px;color:#aabcc9;font-size:12px}

.popup-form-area{padding:48px 44px 38px}
.popup-form-head{padding-right:48px;margin-bottom:28px}
.popup-form-head .popup-kicker{color:#ce191c}
.popup-form-head h2{
  margin:0 0 10px;font-size:36px;line-height:1.08;color:#07182a
}
.popup-form-head p{margin:0;color:#657684;line-height:1.55}
.popup-form{display:grid;gap:16px}
.popup-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{position:relative}
.field input,.field textarea{
  width:100%;border:1px solid #ccd7de;border-radius:9px;
  background:#f8fafb;color:#172838;
  font:inherit;padding:22px 14px 9px;
  transition:.18s
}
.field textarea{height:150px;resize:vertical;padding-top:24px}
.field label{
  position:absolute;left:14px;top:15px;
  color:#7d8b95;font-size:14px;pointer-events:none;
  transition:.16s
}
.field input:focus,.field textarea:focus{
  outline:0;border-color:#ce191c;background:#fff;
  box-shadow:0 0 0 4px rgba(206,25,28,.07)
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:6px;font-size:10px;font-weight:800;
  letter-spacing:.05em;color:#ce191c
}
.popup-consent{
  display:flex;gap:10px;align-items:flex-start;
  color:#5d6d78;font-size:12px;line-height:1.5
}
.popup-consent input{
  width:18px;height:18px;flex:0 0 18px;
  margin-top:1px;accent-color:#ce191c
}
.popup-consent a{color:#a7191c;text-decoration:underline;font-weight:700}
.popup-form-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:2px
}
.popup-form-bottom small{color:#8a979f}
.popup-send{
  border:0;border-radius:8px;background:#ce191c;color:#fff;
  padding:15px 20px;font-size:14px;font-weight:900;
  cursor:pointer;display:flex;gap:24px;align-items:center;
  box-shadow:0 9px 22px rgba(206,25,28,.2)
}
.popup-send:hover{background:#df1f24}
.popup-honeypot{position:absolute;left:-10000px!important}
body.popup-open{overflow:hidden}

@media(max-width:900px){
  .header{height:auto}.logo{width:220px}.header nav{display:none}.header>.btn{margin-left:auto}
  .hero{height:650px;background-image:url("images/kruse-gebaeude-mobile.jpg")}
  .heroText{padding:50px 22px}.hero h1{font-size:39px}
  .benefits{display:grid;gap:18px}
  .services{grid-template-columns:1fr}
  .services article{border-right:0;border-bottom:1px solid #fff}
  .contact{grid-template-columns:1fr 1fr;gap:28px}.contact>div{border:0;padding:0}
  .contact-popup-card{grid-template-columns:1fr;width:min(720px,96vw)}
  .popup-info{display:none}
}
@media(max-width:560px){
  .logo{width:190px}.header>.btn{display:none}
  .hero h1{font-size:32px}.hero p{font-size:18px}
  .services article{grid-template-columns:1fr}.services img{height:300px}
  .contact{grid-template-columns:1fr}
  footer{display:block}footer span{display:block;margin:8px 0}
  .feature-grid{grid-template-columns:1fr}
  .contact-popup{padding:8px;align-items:flex-start}
  .contact-popup-card{width:100%;max-height:96vh;margin-top:8px;border-radius:14px}
  .popup-form-area{padding:34px 20px 24px}
  .popup-form-head{padding-right:38px}
  .popup-form-head h2{font-size:29px}
  .popup-row{grid-template-columns:1fr}
  .popup-form-bottom{align-items:stretch;flex-direction:column}
  .popup-send{justify-content:space-between}
}