/* aluminiumfenster24.com · adaptive wordmark inside the existing navigation */
.brand.af24-brand,
.cs-brand.af24-brand {
  /* The brand must remain prominent without competing with the navigation.
     This is the full visible wordmark width after the transparent SVG margins
     have been cropped by the wrapper below. */
  --af24-logo-width: clamp(230px, 18vw, 320px);
  position: relative;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: var(--af24-logo-width) !important;
  min-width: var(--af24-logo-width) !important;
  height: calc(var(--af24-logo-width) * 0.13123) !important;
  overflow: visible !important;
  text-decoration: none;
}

/* The official logo is supplied by the image pair below.  Older shared
   stylesheets also generated an additional legacy AW mark via ::before;
   suppress it completely so only the aluminiumfenster24 identity remains. */
.brand.af24-brand::before,
.brand.af24-brand::after,
.cs-brand.af24-brand::before,
.cs-brand.af24-brand::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  flex: 0 0 0 !important;
  background: none !important;
}

.af24-brand-logo {
  position: relative;
  display: block;
  width: var(--af24-logo-width);
  height: calc(var(--af24-logo-width) * 0.13123);
  overflow: hidden;
  isolation: isolate;
}

.af24-brand-logo__image {
  position: absolute;
  left: calc(var(--af24-logo-width) * -0.2887);
  top: calc(var(--af24-logo-width) * -0.0919);
  display: block;
  width: calc(var(--af24-logo-width) * 1.5748) !important;
  max-width: none !important;
  height: calc(var(--af24-logo-width) * 0.3937) !important;
  object-fit: fill;
  object-position: initial;
  transition: opacity 180ms ease, visibility 180ms ease;
  filter: drop-shadow(0 2px 7px rgb(0 0 0 / 0.12));
}

.af24-brand-logo__image--on-light {
  opacity: 1;
  visibility: visible;
}

.af24-brand-logo__image--on-dark {
  opacity: 0;
  visibility: hidden;
}

html[data-theme="dark"] .af24-brand-logo__image--on-light,
body[data-theme="dark"] .af24-brand-logo__image--on-light,
.af24-brand[data-logo-theme="dark"] .af24-brand-logo__image--on-light {
  opacity: 0;
  visibility: hidden;
}

html[data-theme="dark"] .af24-brand-logo__image--on-dark,
body[data-theme="dark"] .af24-brand-logo__image--on-dark,
.af24-brand[data-logo-theme="dark"] .af24-brand-logo__image--on-dark {
  opacity: 1;
  visibility: visible;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .af24-brand-logo__image--on-light {
    opacity: 0;
    visibility: hidden;
  }

  html:not([data-theme="light"]) .af24-brand-logo__image--on-dark {
    opacity: 1;
    visibility: visible;
  }
}

/* At narrower desktop and tablet widths the full link list would either sit
   too close to the logo or force an overlap. Switch to the existing menu
   button early, then reserve an uncluttered, stable logo area. */
@media (max-width: 1480px) {
  .nav .nav__links { display: none !important; }
  .nav .nav__burger { display: grid !important; }

  .brand.af24-brand,
  .cs-brand.af24-brand {
    --af24-logo-width: clamp(220px, 24vw, 290px);
  }
}

@media (max-width: 760px) {
  .brand.af24-brand,
  .cs-brand.af24-brand {
    --af24-logo-width: clamp(158px, 48vw, 220px);
    min-width: 0 !important;
  }

  .nav .nav__tools > .btn { display: none !important; }
}

@media (max-width: 390px) {
  .brand.af24-brand,
  .cs-brand.af24-brand {
    --af24-logo-width: clamp(145px, 46vw, 180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .af24-brand-logo__image {
    transition: none;
  }
}