:root{
  --bg:#0d47a1; --bg-2:#0b3d8a;
  --cta:#2ecc71; --cta-2:#27ae60;
  --ink:#0f172a; --muted:#475569;
  --card:#ffffff; --ring:#cbd5e1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,sans-serif;color:var(--ink);background:#f8fafc}
a{color:inherit;text-decoration:none}

.container{width:min(1200px,100%);margin-inline:auto;padding:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:12px;font-weight:700;line-height:1;border:0;cursor:pointer}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-2)}
.btn-ghost{background:transparent;border:1px solid #fff;color:#fff}

header{background:var(--bg);color:#fff;position:sticky;top:0;z-index:50}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center}
nav{display:flex;gap:10px;align-items:center}

.hero{background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);color:#fff}
.hero .grid{display:grid;grid-template-columns:1fr;gap:20px;padding-block:36px}
.hero h1{font-size:clamp(24px,5vw,44px);margin:0 0 8px}
.hero p{margin:0 0 18px;color:#e2e8f0;font-size:clamp(14px,2.5vw,18px)}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:10px 12px;border-radius:12px}

.features{background:#fff}
.features .grid{display:grid;grid-template-columns:1fr;gap:14px}
.feature{background:var(--card);border:1px solid var(--ring);padding:16px;border-radius:16px}
.feature h3{margin:0 0 6px;font-size:18px}
.feature p{margin:0;color:var(--muted);font-size:14px}

.cta{background:#eef2ff}
.cta .grid{display:grid;grid-template-columns:1fr;gap:16px}
.panel{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px}
form{display:grid;gap:10px}
label{font-weight:600;font-size:14px}
input,select,textarea{width:100%;padding:12px 12px;border:1px solid var(--ring);border-radius:12px;background:#fff;font-size:16px}

.row{display:flex;gap:16px}
.row>div{flex:1}

.legal{font-size:12px;color:var(--muted)}

.about{background:#fff}
.about .wrap{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px}

footer{background:#0f172a;color:#cbd5e1}
footer .grid{display:grid;grid-template-columns:1fr;gap:14px;padding-block:24px}
footer a{color:#e2e8f0}

@media (min-width:720px){
  .hero .grid{grid-template-columns:1.2fr .8fr;align-items:center}
  .features .grid{grid-template-columns:repeat(3,1fr)}
  .cta .grid{grid-template-columns:1.1fr .9fr}
  .about .wrap{grid-template-columns:.9fr 1.1fr}
  .badges{grid-template-columns:repeat(4,1fr)}
}

.logo-img{width:25px;height:25px;display:block;object-fit:contain}

/* списки */
.about ul{list-style:none;padding-left:0;margin:0}
.about li{display:flex;align-items:flex-start;gap:6px;margin-bottom:6px;font-size:14px}
.about li::before{content:"✔";color:#2ecc71;font-weight:700}
.limits li::before{content:"⚠";color:#f39c12}

.service-info{list-style:none;padding:0;margin:0}
.service-info li{display:flex;align-items:flex-start;gap:6px;margin:6px 0;font-size:14px}
.service-info li::before{display:inline-block;width:18px;text-align:center;font-weight:600}
.icon-truck::before{content:"🚐"}
.icon-box::before{content:"📦"}
.icon-scale::before{content:"⚖️"}
.icon-shield::before{content:"🛡"}
.icon-bill::before{content:"💳"}
.icon-map::before{content:"📍"}
.icon-check::before{content:"✔";color:#2ecc71}

/* визитка */
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.contact-left{flex:1;min-width:220px}
.contact-left p{margin:0 0 6px}
.contact-title{margin-bottom:8px}
.contact-photo{width:80px;height:80px;border-radius:12px;object-fit:cover}

/* Мобайл */
@media (max-width:720px){
  .contact-photo{order:2;margin-top:8px}
}

@media (max-width:480px){
  /* скрыть только кнопку расчёта на мобайле */
  .btn.btn-cta.btn-cta--calc{display:none}

  /* пара Wunschtermin + Ladehilfe в колонку, остальное без изменений */
  .row{flex-direction:column}
  .row>div{width:100%}
  .row input,.row select{width:100%;box-sizing:border-box}

  /* слегка сузить рамку Wunschtermin, чтобы не упиралась в край */
  #date{width:95%;max-width:100%;box-sizing:border-box}
}

/* mobile-only */
@media (max-width:480px){

  /* скрыть ТОЛЬКО верхнюю CTA-кнопку */
  .btn.btn-cta.btn-cta--calc{display:none}

  /* все .row становятся в колонку на мобильных */
  .row{grid-template-columns:1fr}

  .row input,
  .row select,
  .row textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  /* Wunschtermin: чуть уже, чтобы не упирался в край */
  #date{
    width:calc(100% - 8px);
    margin-right:8px;
    box-sizing:border-box;
    -webkit-appearance:none;appearance:none;
  }
}

#formMsg{margin-top:8px;font-size:.9rem}
#formMsg.loading{color:#555}
#formMsg.success{color:green}
#formMsg.error{color:red}

.extra-photo { margin-top:16px; border-radius:12px; overflow:hidden; }
.extra-photo img.extra-img { width:100%; height:auto; display:block; }
.only-desktop { display:block; }
@media(max-width:768px){ .only-desktop{display:none;} }

.btn-b2b {
  background-color: #c0392b;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;       /* вместо inline-block */
  align-items: center;        /* выравнивание по вертикали */
  justify-content: center;    /* по горизонтали */
}