:root{
  --navy:#10233d;
  --orange:#ff6b00;
  --orange2:#ff7d13;
  --muted:#65778d;
  --line:#e4e9ee;
  --bg:#f5f8fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--navy);
  background:#fff;
}
a{text-decoration:none;color:inherit}

.pricebar{
  background:linear-gradient(90deg,#0f223a,#172d49);
  color:#fff;
  border-bottom:3px solid var(--orange);
}
.pricebar-inner{
  max-width:1672px;
  margin:auto;
  min-height:54px;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.price-label{
  color:#ffb27c;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.pricebar strong{
  font-size:22px;
  color:#fff;
}
.price-meta{
  color:#cbd5df;
  font-size:13px;
}
.pricebar a{
  margin-left:auto;
  color:#ffb27c;
  font-size:12px;
  font-weight:700;
}

.desktop-mockup{
  width:100%;
  background:#fff;
}
.desktop-mockup img{
  display:block;
  width:100%;
  height:auto;
}

.mobile-version{display:none}

.contact-strip{
  max-width:1400px;
  margin:0 auto;
  padding:24px 28px;
  display:flex;
  align-items:center;
  gap:34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.contact-strip div{margin-right:auto}
.contact-strip b,.contact-strip span{display:block}
.contact-strip span{color:var(--muted);font-size:14px;margin-top:4px}
.contact-strip a{font-weight:800}

footer{
  max-width:1400px;
  margin:auto;
  padding:18px 28px 28px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:#7b8898;
  font-size:12px;
}

@media(max-width:820px){
  .pricebar-inner{
    display:grid;
    gap:4px;
    padding:12px 18px;
  }
  .pricebar a{margin-left:0}
  .desktop-mockup{display:none}
  .mobile-version{
    display:block;
    padding:28px 20px 34px;
    background:
      radial-gradient(circle at 100% 0,#fff3e9 0,transparent 38%),
      linear-gradient(#fff,#f7fafc);
  }
  .mobile-head{
    margin-bottom:34px;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
  }
  .brand{
    font-size:28px;
    font-weight:900;
    letter-spacing:-1.2px;
  }
  .brand b{color:var(--orange)}
  .mobile-head small{
    display:block;
    margin-top:6px;
    letter-spacing:.28em;
    font-size:7px;
    color:#8b99aa;
  }
  .eyebrow{
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
    color:#465d79;
  }
  h1{
    margin:14px 0 8px;
    font-size:48px;
    line-height:.98;
    letter-spacing:-2.6px;
  }
  h1 span{color:var(--orange)}
  h2{
    margin:0 0 16px;
    font-size:28px;
    line-height:1.12;
    letter-spacing:-1px;
  }
  .intro{
    margin:0;
    color:#52677f;
    font-size:17px;
    line-height:1.58;
  }
  .price-card{
    margin:24px 0;
    padding:20px;
    border-radius:18px;
    background:linear-gradient(135deg,#10233d,#1d3757);
    color:#fff;
    box-shadow:0 12px 30px rgba(16,35,61,.16);
  }
  .price-card span{
    display:block;
    color:#ffb27c;
    font-size:11px;
    letter-spacing:.12em;
    font-weight:900;
  }
  .price-card strong{
    display:block;
    margin:8px 0 6px;
    font-size:32px;
  }
  .price-card small{
    color:#d4dce5;
    line-height:1.4;
  }
  .mobile-actions{
    display:grid;
    gap:12px;
    margin:22px 0;
  }
  .btn{
    padding:15px 18px;
    border-radius:12px;
    text-align:center;
    font-weight:900;
  }
  .primary{
    color:#fff;
    background:linear-gradient(135deg,var(--orange2),#ff5900);
  }
  .secondary{
    border:1px solid #ccd6df;
    background:#fff;
  }
  .mobile-cards{
    display:grid;
    gap:12px;
    margin-top:22px;
  }
  .mobile-cards article{
    padding:18px;
    border-radius:16px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 7px 22px rgba(16,35,61,.05);
  }
  .mobile-cards b,.mobile-cards span{display:block}
  .mobile-cards span{
    margin-top:5px;
    color:var(--muted);
    font-size:14px;
  }
  .contact-strip{
    padding:22px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .contact-strip div{margin-right:0}
  footer{
    display:grid;
    padding:16px 20px 28px;
  }
}


/* Klickbare Bereiche auf der Desktop-Mockup-Grafik */
.desktop-mockup{position:relative}
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  cursor:pointer;
  border-radius:10px;
}
.hotspot:focus-visible{
  outline:3px solid #ff6b00;
  outline-offset:2px;
}
/* Navigation */
.hs-start{left:59.6%;top:2.2%;width:5.0%;height:7.2%}
.hs-hts{left:66.2%;top:2.2%;width:4.7%;height:7.2%}
.hs-vorteile{left:73.2%;top:2.2%;width:6.4%;height:7.2%}
.hs-about{left:81.0%;top:2.2%;width:6.7%;height:7.2%}
.hs-contact-nav{left:89.2%;top:2.2%;width:7.2%;height:7.2%}
/* Hauptbuttons */
.hs-contact-button{left:4.3%;top:49.5%;width:20.1%;height:7.7%}
.hs-email-button{left:25.5%;top:49.5%;width:17.1%;height:7.7%}
/* Infokarten */
.hs-info-card{left:35.5%;top:74.0%;width:29.5%;height:15.0%}
.hs-advice-card{left:66.0%;top:74.0%;width:29.5%;height:15.0%}
/* Kontakt unten */
.hs-bottom-email{left:25.5%;top:91.0%;width:18.2%;height:7.5%}
.hs-bottom-phone{left:44.3%;top:91.0%;width:15.3%;height:7.5%}

.price-source-mobile{
  display:inline-block;
  margin-top:10px;
  color:#ffb27c;
  font-size:12px;
  font-weight:800;
}

@media(max-width:820px){
  .hotspot{display:none}
}