/* ===== Header Grundlayout ===== */
#header .inner {
  position: relative;
  text-align: center;
}

/* Logosichtbarkeit (Desktop) */
#logo-left { display:block; }
#logo-inline { display:none; }

/* Logo-Container & Bilder (CLS-Schutz) */
#logo-left{
  position:absolute;
  right:100%;
  margin-right:20px !important;
  top:50%;
  transform:translateY(-50%);
  width:160px;
  height:160px;
  border-radius:50%;
  overflow:hidden;
  aspect-ratio:1 / 1;
}
#logo-inline{
  display:none;
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  vertical-align:middle;
  margin-right:8px;
  aspect-ratio:1 / 1;
}
#logo-left img,
#logo-inline img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* Headline-Gruppe */
.hero-group{
  position:relative;
  display:inline-block;
  margin:10px auto 4px !important;
}

/* Textblock neben/unter Logo */
.hero-text{ text-align:center; min-width:260px; }

/* Typografie: Titel/Claim/Sub */
#header .hero-title{
  margin:10px 1px 4px !important;
  font-weight:700 !important;
}
#header .hero-title strong{ display:inline-block !important; }
#header .hl-1, #header .hl-2{ display:inline !important; }

/* Optionaler Break: standardmäßig aus */
#header .br-phone{ display:none !important; }

#header .hero-claim{
  margin:2px 0 6px !important;
  line-height:1.22 !important;
  font-size: clamp(18px, 3.6vw, 28px);
  font-weight:600 !important;
  text-align:center !important;
}
#header .hero-sub{
  color:#ddd;
  margin:0 0 2px !important;
  font-size: clamp(14px, 2.6vw, 18px);
}

/* Desktop-Navigation */
.desktop-nav{
  text-align:center;
  margin-top:20px !important;
  margin-bottom:5px;
}
.desktop-nav .actions.special{
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:25px !important;
}

/* ===== Mobil (<=640px) ===== */
@media (max-width:640px){
  #logo-left{ display:none !important; }
  #logo-inline{ display:inline-block !important; }

  #header .hero-group{
    margin-top:6px !important;
    text-align:center !important;
    display:block !important;
    margin-left:0 !important;
  }

  /* enger zusammensetzen */
  #header .hero-title{
    margin:6px 0 0 !important;
    line-height:1.04 !important;
  }
  #header h1.hero-title{
    margin-block-end:0 !important;
    padding-bottom:0 !important;
  }
  #header .hero-title strong{
    line-height:1.0 !important;
    margin-bottom:5px;
  }
  #header .hero-claim{
    line-height:1.12 !important;
    text-align:center !important;
  }
}

/* Sehr schmale Phones (<=380px): manueller Umbruch */
@media (max-width:380px){
  #header .br-phone{ display:inline !important; }
}

/* Weißer Deko-Strich unter der Desktop-Navigation entfernen */
#header .desktop-nav .actions.special:before,
#header .desktop-nav .actions.special:after,
#header .desktop-nav .actions.special li:before,
#header .desktop-nav .actions.special li:after{
  content:none !important;
  display:none !important;
}

/* Focus-Styles für Links im Header-Menü */
.desktop-nav a:focus-visible{
  outline:3px solid #0f172a;
  outline-offset:2px;
  border-radius:8px;
}