/**
 * Sticky Header + Menü-Ausblendung (Kategorie- und Artikelseiten).
 * Klassen/Variablen werden per chrome-sticky-scroll.js gesetzt.
 */

:root {
  --st-header-collapsed-max: 75px;
  --st-header-logo-height-min: 40px;
  --st-header-font-size-min: 12px;
  --st-chrome-collapse-range: 140px;
}

/* ── Kategorie-Header: vw-Skalierung 380–2056 (kein Scroll-Resize) ── */
#category_header.st-chrome-header {
  --st-category-header-font-size: clamp(12px, calc(12px + (100vw - 380px) * 6 / 1676), 18px);
  --st-category-header-icon-size: clamp(20px, calc(20px + (100vw - 380px) * 12 / 1676), 32px);
  --st-category-header-logo-height: clamp(40px, calc(40px + (100vw - 380px) * 40 / 1676), 80px);
  --st-category-header-ui-scale: calc(var(--st-category-header-font-size) / 18px);
  box-sizing: border-box;
  height: var(--st-header-height) !important;
  max-height: none;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  position: relative;
  isolation: isolate;
  background: transparent;
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--st-chrome-text, var(--st-hell)) calc(var(--st-header-bg-opacity, 0) * 12%),
    transparent
  );
}

/* ── Artikel-Header: Höhe per Scroll (JS) ─────────────────────── */
#article_header.st-chrome-header {
  box-sizing: border-box;
  height: var(--st-header-height-active, var(--st-header-height)) !important;
  max-height: var(--st-header-expanded-height, var(--st-header-height));
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  position: relative;
  isolation: isolate;
  background: transparent;
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--st-chrome-text, var(--st-hell)) calc(var(--st-header-bg-opacity, 0) * 12%),
    transparent
  );
  will-change: height;
}

#category_header.st-chrome-header::before,
#article_header.st-chrome-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--st-chrome-bg, var(--st-dunkel));
  opacity: var(--st-header-bg-opacity, 0);
}

#category_chrome #category_header.st-chrome-header {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  color: var(--st-chrome-text, var(--st-hell));
}

#category_chrome.st-chrome.is-sticky {
  z-index: 300;
}

#article_header.st-chrome-header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

#article_header.st-chrome-header.is-collapsed {
  max-height: var(--st-header-collapsed-max);
}

/* Kategorie: Grid + Logo zentriert (vw-Skalierung) */
#category_header.st-chrome-header .article-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 1680px;
  height: var(--st-header-height) !important;
  min-height: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

#category_header.st-chrome-header .article-header__logo-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(100%, 450px);
  height: 100%;
  margin: 0;
  line-height: 0;
}

#category_header.st-chrome-header .article-header__logo {
  display: block;
  width: auto !important;
  height: var(--st-category-header-logo-height) !important;
  max-height: var(--st-category-header-logo-height);
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
}

.page-wrapper .category-layout-page #category_header.st-chrome-header .article-header__toggle,
.page-wrapper .category-layout-page #category_header.st-chrome-header .article-header__label,
#category_header.st-chrome-header .article-header__toggle {
  position: relative;
  z-index: 1;
  align-self: center;
  font-size: var(--st-category-header-font-size) !important;
  letter-spacing: calc(0.04em * var(--st-category-header-ui-scale));
}

#category_header.st-chrome-header .article-header__label {
  font-size: var(--st-category-header-font-size) !important;
  line-height: 1.2;
}

.page-wrapper .category-layout-page #category_header.st-chrome-header .article-header__icon,
#category_header.st-chrome-header .article-header__icon {
  font-size: var(--st-category-header-icon-size) !important;
  line-height: 1;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#category_header.st-chrome-header .article-header__toggle--menu .article-header__icon {
  margin-right: calc(clamp(5px, 0.6vw, 15px) * var(--st-category-header-ui-scale));
}

#category_header.st-chrome-header .article-header__toggle--login .article-header__icon {
  margin-left: calc(clamp(5px, 0.6vw, 15px) * var(--st-category-header-ui-scale));
}

#category_header.st-chrome-header .article-header__toggle--menu {
  margin-left: calc(clamp(20px, 2vw, 50px) * var(--st-category-header-ui-scale));
}

#category_header.st-chrome-header .article-header__toggle--login {
  margin-right: calc(clamp(20px, 2vw, 50px) * var(--st-category-header-ui-scale));
}

/* Artikel: Grid + Logo (Scroll via JS) */
#article_header.st-chrome-header .article-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 1680px;
  height: var(--st-header-height-active, var(--st-header-height)) !important;
  min-height: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

#article_header.st-chrome-header .article-header__logo-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(100%, 450px);
  height: 100%;
  margin: 0;
  line-height: 0;
}

#article_header.st-chrome-header .article-header__logo {
  display: block;
  width: auto !important;
  height: var(--st-header-logo-height, auto) !important;
  max-height: min(
    var(--st-header-logo-height, 120px),
    calc(var(--st-header-height-active, var(--st-header-height)) - 12px)
  );
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
}

#article_header.st-chrome-header .article-header__toggle {
  position: relative;
  z-index: 1;
  align-self: center;
  font-size: var(--st-header-font-size, var(--st-header-font-size-min, 12px)) !important;
  letter-spacing: calc(0.04em * var(--st-header-ui-scale, 1));
}

#article_header.st-chrome-header .article-header__label {
  font-size: var(--st-header-font-size, var(--st-header-font-size-min, 12px)) !important;
  line-height: 1.2;
}

#article_header.st-chrome-header .article-header__icon {
  font-size: var(--st-header-icon-size, 22px) !important;
  line-height: 1;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#article_header.st-chrome-header .article-header__toggle--menu .article-header__icon {
  margin-right: calc(clamp(5px, 0.6vw, 15px) * var(--st-header-ui-scale, 1));
}

#article_header.st-chrome-header .article-header__toggle--login .article-header__icon {
  margin-left: calc(clamp(5px, 0.6vw, 15px) * var(--st-header-ui-scale, 1));
}

#article_header.st-chrome-header .article-header__toggle--menu {
  margin-left: calc(clamp(20px, 2vw, 50px) * var(--st-header-ui-scale, 1));
}

#article_header.st-chrome-header .article-header__toggle--login {
  margin-right: calc(clamp(20px, 2vw, 50px) * var(--st-header-ui-scale, 1));
}

/* ── Menü: weiches Ausblenden ohne Layout-Sprung ─────────────── */
#category_menu.st-chrome-menu,
#article_menu.st-chrome-menu {
  flex-shrink: 0;
  overflow: hidden;
  transition:
    opacity 0.4s ease,
    max-height 0.4s ease,
    min-height 0.4s ease,
    transform 0.4s ease,
    border-color 0.4s ease;
}

#category_menu.st-chrome-menu.is-hidden,
#article_menu.st-chrome-menu.is-hidden {
  opacity: 0;
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0;
  padding-block: 0;
  border-bottom-width: 0;
  border-bottom-color: transparent;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
}

#article_chrome.st-chrome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#category_chrome.st-chrome:has(#category_menu.is-hidden) {
  min-height: var(--st-header-height);
}

@media (max-width: 768px) {
  :root {
    --st-chrome-collapse-range: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #category_menu.st-chrome-menu,
  #article_menu.st-chrome-menu {
    transition-duration: 0.01ms;
  }
}