/* =========================================================
   autoberes.de – Anpassungen Kopfbereich
   1) Menüpunkt "Startseite" ausblenden (Desktop + Handy-Menü)
   2) Social-Icons (Facebook / Instagram / WhatsApp) im Kopf
      – das Markup dazu erzeugt autoberes-header.js
   ========================================================= */

/* ---------- 1) "Startseite" ausblenden ---------- */
#navbarNavDropdown > .navbar-nav > .nav-item:has(> a.nav-link[href="index.php"]),
#navbarNavDropdownsmall > .navbar-nav > .nav-item:has(> a.nav-link[href="index.php"]) {
  display: none !important;
}

/* ---------- 2) Social-Icons im Kopf ---------- */
:root {
  --hs-size: 34px;          /* Kreisdurchmesser Desktop */
  --hs-icon: 20px;          /* Icongröße Desktop */
  --hs-gap: 8px;
  --hs-bg: #0080FF;         /* Hausfarbe (wie Kontakt-Button) */
  --hs-fg: #FFFFFF;
}

/* Container rechts neben dem Logo (der .ms-auto-Wrapper des Kontakt-Buttons) */
#headerline > .container > .ms-auto.hs-wrap {
  display: flex;
  align-items: center;
}

.hdr-social {
  display: flex;
  align-items: center;
  gap: var(--hs-gap);
  margin: 0 .75rem 0 .5rem;
}

.hdr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hs-size);
  height: var(--hs-size);
  border-radius: 50%;
  background: var(--hs-bg);
  color: var(--hs-fg);
  text-decoration: none;
  transition: transform .2s, background-color .2s, width 1s, height 1s;
  flex: 0 0 auto;
}
.hdr-social a:hover,
.hdr-social a:focus-visible { transform: scale(1.1); }
.hdr-social a.hs-facebook:hover  { background: #1877F2; }
.hdr-social a.hs-instagram:hover { background: #E1306C; }
.hdr-social a.hs-whatsapp:hover  { background: #25D366; }

.hdr-social svg {
  width: var(--hs-icon);
  height: var(--hs-icon);
  fill: currentColor;
  display: block;
}

/* Beim Scrollen schrumpft der Kopf auf 40px – Icons mitschrumpfen */
@media (min-width: 576px) {
  #headerline.shrink .hdr-social { --hs-size: 28px; --hs-icon: 16px; }
}

/* Tablet / Handy */
@media (max-width: 1199.98px) {
  .hdr-social { margin-right: .25rem; }
}
/* Handy: Logo | Icons | Kontakt | Menü – alles in EINER Zeile */
@media (max-width: 575.98px) {
  :root { --hs-size: 28px; --hs-icon: 16px; --hs-gap: 5px; }
  html body #headerline .navbar-brand-logo-line,
  html body #headerline.shrink .navbar-brand-logo-line { max-height: 26px; padding-right: 6px; }
  .hdr-social { margin: 0 6px 0 4px; }
  #headerline .ms-auto .kontaktbtn {
    margin: 0 4px 0 0 !important;
    padding: .3rem .7rem !important;
    font-size: 16px;
  }
  #headerline #menubutton { padding: .25rem .4rem; flex: 0 0 auto; }
}
/* sehr schmale Geräte (z. B. iPhone SE 1. Gen., 320px) */
@media (max-width: 359.98px) {
  :root { --hs-size: 24px; --hs-icon: 14px; --hs-gap: 4px; }
  html body #headerline .navbar-brand-logo-line,
  html body #headerline.shrink .navbar-brand-logo-line { max-height: 22px; }
  .hdr-social { margin: 0 4px 0 0; }
  #headerline .ms-auto .kontaktbtn { padding: .25rem .5rem !important; font-size: 15px; margin-right: 2px !important; }
  #headerline #menubutton .navbar-toggler-icon { width: 1.2em; height: 1.2em; }
}

/* Seitliche Leiste auf dem Handy ausblenden (Icons sind jetzt im Kopf).
   Nur aktiv, wenn das JS die Kopf-Icons eingefügt hat UND
   HIDE_ICONBAR_MOBILE im JS auf true steht. */
@media (max-width: 767.98px) {
  html.hs-hide-iconbar .icon-bar { display: none !important; }
}