:root{
  --bg-soft:#e7f0fb;
  --navy:#0A1330;
  --badge-size: min(22vw, 260px);
}
body{ background: var(--bg-soft); }
.logo{ width:auto; height:auto; }
.hero-title{ color:#0A1B3A; line-height:1.1; font-size: 3.8rem; font-weight: 900;}
.phone{ width: 100%; height: auto; max-width: none; padding-left:40px;}
img.phone{
  display: block;
  /* p-3 = 1rem links + 1rem rechts -> kompensieren */
  width: calc(100% + 2rem) !important;  /* überschreibt .w-100 */
  height: auto !important;
  max-width: none !important;

  /* linken/rechten Spalten-Padding optisch ausgleichen */
  margin-left: -1rem;
  margin-right: -1rem;

  /* bisheriges padding entfernen, das verschiebt das Bild nur */
  padding-left: 0 !important;
}
.badge-coming-soon{
  width: var(--badge-size); height: auto; pointer-events:none;
}
@media (max-width: 575.98px){
  .badge-coming-soon{ display:none!important; }
}

@media (max-width: 767.98px) {
  .phone-wrap{
    position: relative;   /* Bezug für die absolute Badge */
    display: inline-block;
  }
  .badge-on-phone{
    position: absolute;
    top: 0;
    right: 0;
    /* optional: leicht „außen“ sitzen lassen */
    /* transform: translate(20%, -20%); */
    width: 190px;         /* kleiner Durchmesser (Radius ~60px) */
    height: auto;
    pointer-events: none;
    z-index: 2;
  }
  .badge-coming-soon{
    display: none !important; /* hebt die 575.98px-Hide-Regel auf */
  }
  .hero-title{ color:#0A1B3A; line-height:1.1; font-size: 2.8rem; font-weight: 900;}
  .phone { padding-top: 100px;}
}

.site-logo{
  display:block;
  margin-left:auto;  /* horizontal zentriert */
  margin-right:auto; /* horizontal zentriert */
  padding-top:50px;
}

/* Spezifische Platzierung für das Hero-Logo */
.hero-logo{
  display:block;
  width: 220px;
  height:auto;
  margin-left: 0;
  margin-bottom: 16px;
}
@media (min-width: 992px){
  .hero-logo{ width: 260px; }
}