/*
 * Eichenlaub Frontend-Feinschliff v16.2
 *
 * Diese Datei wird bewusst als letzte externe CSS-Datei eingebunden.
 * Sie korrigiert nur Header, Desktop-Menüschalter und Eichenlaub-Heros.
 */

@media (min-width: 70.0625rem) {
  html body #header .inside {
    display: flex !important;
    min-height: var(--header-height, 4.75rem) !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
  }

  html body #header .inside > .mod_html.mobile-menu-trigger,
  html body #header .inside > .mobile-menu-trigger,
  html body #header .mobile-menu-trigger,
  html body #header .eichenlaub-mmenu-trigger {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #header .inside > .mod_html.eichenlaub-brand {
    display: flex !important;
    width: auto !important;
    min-width: 11rem !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    overflow: visible !important;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo {
    display: flex !important;
    width: auto !important;
    min-width: 11rem !important;
    max-width: none !important;
    height: var(--header-height, 4.75rem) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 0.55rem 1rem !important;
    overflow: visible !important;
    background: var(--green-950, #203a39) !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo__title,
  html body #header .mod_html.eichenlaub-brand .site-logo__subtitle {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: inherit !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  html body #header .mod_navigation.eichenlaub-desktop-navigation {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin-inline-start: auto !important;
    overflow: visible !important;
  }
}

html body .mod_article.hero-home::before,
html body .mod_article.hero-home::after,
html body .mod_article.hero-home > .inside::before,
html body .mod_article.hero-home > .inside::after,
html body .ce_hero.eichenlaub-native-hero::before,
html body .ce_hero.eichenlaub-native-hero::after,
html body .ce_hero.eichenlaub-native-hero .hero__content::before,
html body .ce_hero.eichenlaub-native-hero .hero__content::after,
html body .ce_hero.eichenlaub-native-hero .hero__text::before,
html body .ce_hero.eichenlaub-native-hero .hero__text::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .ce_hero.eichenlaub-native-hero .hero__background {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  filter: none !important;
}

html body .ce_hero.eichenlaub-native-hero .hero__background::before {
  display: none !important;
  content: none !important;
}

html body .ce_hero.eichenlaub-native-hero .hero__background::after {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    rgb(238 241 239 / 78%) 0%,
    rgb(238 241 239 / 58%) 32%,
    rgb(238 241 239 / 20%) 58%,
    rgb(238 241 239 / 0%) 78%
  ) !important;
}

html body .ce_hero.eichenlaub-native-hero--dark .hero__background::after {
  background: linear-gradient(
    90deg,
    rgb(32 58 57 / 82%) 0%,
    rgb(32 58 57 / 62%) 38%,
    rgb(32 58 57 / 22%) 68%,
    rgb(32 58 57 / 0%) 86%
  ) !important;
}

html body .ce_hero.eichenlaub-native-hero .hero__content,
html body .ce_hero.eichenlaub-native-hero .hero__text,
html body .ce_hero.eichenlaub-native-hero .hero__eyebrow,
html body .ce_hero.eichenlaub-native-hero .hero__headline,
html body .ce_hero.eichenlaub-native-hero .hero__lead,
html body .ce_hero.eichenlaub-native-hero .hero__body,
html body .ce_hero.eichenlaub-native-hero .hero__links {
  position: relative !important;
  z-index: 4 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark) {
  color: #203a39 !important;
}

html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark) .hero__eyebrow {
  color: #557f7c !important;
}

html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark) .hero__headline,
html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark) .hero__lead,
html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark) .hero__body {
  color: #203a39 !important;
}

html body .ce_hero.eichenlaub-native-hero .hero__links a {
  opacity: 1 !important;
  filter: none !important;
}

@media (min-width: 70.0625rem) {
  html body #eichenlaub-mobile-navigation,
  html body #eichenlaub-mobile-navigation.mm-menu,
  html body .mm-wrapper__blocker,
  html body .mm-blocker {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.mm-wrapper--opened,
  html.mm-wrapper--opened body,
  body.mm-wrapper--opened {
    overflow: auto !important;
  }

  html body .mm-page,
  html body .mm-slideout {
    transform: none !important;
  }
}

@media (max-width: 70rem) {
  html body #header .inside > .mod_html.mobile-menu-trigger,
  html body #header .mobile-menu-trigger {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body #header .eichenlaub-mmenu-trigger {
    display: grid !important;
    visibility: visible !important;
    width: 3rem !important;
    min-width: 3rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
    padding: 0.65rem !important;
    border: 1px solid var(--border, #d7d9d6) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .ce_hero.eichenlaub-native-hero .hero__background::after {
    background: rgb(238 241 239 / 58%) !important;
  }

  html body .ce_hero.eichenlaub-native-hero--dark .hero__background::after {
    background: rgb(32 58 57 / 62%) !important;
  }
}

/* ==========================================================================
   Frontend-Nachkorrektur v16.3
   ========================================================================== */

/* 1. Startseiten-H1 wieder als prägende Hero-Überschrift darstellen. */

html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  .hero__headline,
html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  h1.hero__headline {
  width: min-content !important;
  max-width: 11ch !important;
  margin: 0 !important;
  font-size: clamp(3.75rem, 5.4vw, 6.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.94 !important;
  text-wrap: balance !important;
}

/* 2. Primären und sekundären Hero-Button wieder unterscheiden. */

html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__links > a:first-child {
  border-color: #203a39 !important;
  background: #203a39 !important;
  color: #fff !important;
}

html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__links > a:nth-child(2) {
  border-color: #203a39 !important;
  background: transparent !important;
  color: #203a39 !important;
}

html body .ce_hero.eichenlaub-native-hero--dark
  .hero__links > a:first-child {
  border-color: #fff !important;
  background: #fff !important;
  color: #203a39 !important;
}

html body .ce_hero.eichenlaub-native-hero--dark
  .hero__links > a:nth-child(2) {
  border-color: rgb(255 255 255 / 78%) !important;
  background: transparent !important;
  color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
    .hero__links > a:nth-child(2):hover,
  html body .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
    .hero__links > a:nth-child(2):focus-visible {
    border-color: #557f7c !important;
    background: #557f7c !important;
    color: #fff !important;
  }

  html body .ce_hero.eichenlaub-native-hero--dark
    .hero__links > a:nth-child(2):hover,
  html body .ce_hero.eichenlaub-native-hero--dark
    .hero__links > a:nth-child(2):focus-visible {
    border-color: #fff !important;
    background: #fff !important;
    color: #203a39 !important;
  }
}

/* 3. Alten weißen Vordergrund-Layer auch bei allen Seiten-Heros entfernen. */

html body #main .mod_article.page-hero::before,
html body #main .mod_article.page-hero::after,
html body #main .mod_article.page-hero > .inside::before,
html body #main .mod_article.page-hero > .inside::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * Helle Seiten-Heros benötigen nur einen dezenten Verlauf auf der Bildebene.
 * Der Text bleibt vollständig deckend und dunkel.
 */

html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__background::after {
  background: linear-gradient(
    90deg,
    rgb(238 241 239 / 46%) 0%,
    rgb(238 241 239 / 30%) 38%,
    rgb(238 241 239 / 10%) 68%,
    rgb(238 241 239 / 0%) 100%
  ) !important;
}

html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark),
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__eyebrow,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__headline,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__lead,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__body {
  opacity: 1 !important;
  filter: none !important;
}

html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__headline,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__lead,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__body {
  color: #203a39 !important;
}

html body #main .page-hero
  .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
  .hero__eyebrow {
  color: #557f7c !important;
}

/* 4. Portfolio-Karten: Schatten nicht mehr an den Rasterkanten abschneiden. */

html body .eichenlaub-portfolio-list,
html body .eichenlaub-portfolio-list .portfolio__items {
  overflow: visible !important;
}

html body .eichenlaub-portfolio-list .portfolio__items {
  --eichenlaub-card-shadow-space: clamp(0.75rem, 1.4vw, 1.15rem);
  padding: var(--eichenlaub-card-shadow-space) !important;
  margin:
    calc(-1 * var(--eichenlaub-card-shadow-space))
    calc(-1 * var(--eichenlaub-card-shadow-space))
    0 !important;
}

html body .eichenlaub-portfolio-list .collection-card {
  border: 1px solid rgb(32 58 57 / 6%) !important;
  box-shadow:
    0 0.35rem 0.8rem rgb(22 47 46 / 5%),
    0 1rem 2.25rem rgb(22 47 46 / 10%) !important;
}

/* Portfolio-Link wieder horizontal mittig unter dem Kartentext. */

html body .eichenlaub-portfolio-list .collection-card__content {
  align-items: stretch !important;
}

html body .eichenlaub-portfolio-list .collection-card__link {
  width: max-content !important;
  max-width: 100% !important;
  align-self: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 70rem) {
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero:not(.eichenlaub-native-hero--dark)
    .hero__background::after {
    background: rgb(238 241 239 / 24%) !important;
  }
}

@media (max-width: 43.75rem) {
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    .hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    h1.hero__headline {
    max-width: 12ch !important;
    font-size: clamp(2.8rem, 12vw, 4.25rem) !important;
    line-height: 0.98 !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__items {
    --eichenlaub-card-shadow-space: 0.65rem;
  }
}

/* ==========================================================================
   Portfolio-Buttonkorrektur v16.4
   ========================================================================== */

/*
 * Die Originalregel richtet den Karteninhalt links aus. Der Link erhält
 * deshalb eine eigene volle Zeile; darin wird der sichtbare Button mittig
 * gesetzt.
 */
html body .eichenlaub-portfolio-list .collection-card__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: calc(100% - 1rem) !important;
  min-height: 2.75rem !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  margin:
    auto
    auto
    0 !important;
  padding: 0.7rem 1.15rem !important;
  border: 1px solid #c8d8d4 !important;
  background: #dce7e4 !important;
  color: #203a39 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link::after {
  position: static !important;
  display: inline !important;
  content: "→" !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link:focus-visible {
  outline: 3px solid rgb(85 127 124 / 32%) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .eichenlaub-portfolio-list a.collection-card__link:hover,
  html body .eichenlaub-portfolio-list a.collection-card__link:focus-visible {
    border-color: #aebfbb !important;
    background: #c8d8d4 !important;
    color: #203a39 !important;
    transform: translateY(-1px) !important;
  }
}

/* ==========================================================================
   H1-Größenkorrektur v16.5
   ========================================================================== */

/* Alle redaktionellen Hauptüberschriften wieder deutlich größer. */

html body #main h1 {
  max-width: 16ch !important;
  margin-block: 0 0.65em !important;
  font-size: clamp(3rem, 4.8vw, 5.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.96 !important;
  text-wrap: balance !important;
}

/* Seiten-Heros dürfen noch prägnanter ausfallen. */

html body #main .page-hero
  .ce_hero.eichenlaub-native-hero
  h1.hero__headline,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero
  .hero__headline {
  max-width: 12ch !important;
  margin: 0 !important;
  font-size: clamp(3.75rem, 5.4vw, 6rem) !important;
  line-height: 0.94 !important;
}

/* Startseiten-Hero als größte H1 der Website. */

html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  h1.hero__headline,
html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  .hero__headline {
  max-width: 11ch !important;
  font-size: clamp(4.25rem, 5.8vw, 6.75rem) !important;
  line-height: 0.92 !important;
}

/* Lange Wörter dürfen nicht aus dem Layout laufen. */

html body #main h1,
html body #main .hero__headline {
  overflow-wrap: normal !important;
  hyphens: auto !important;
}

@media (max-width: 70rem) {
  html body #main h1 {
    max-width: 14ch !important;
    font-size: clamp(2.8rem, 7.5vw, 4.5rem) !important;
    line-height: 0.98 !important;
  }

  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    h1.hero__headline,
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    .hero__headline {
    max-width: 12ch !important;
    font-size: clamp(3.1rem, 8vw, 4.75rem) !important;
  }

  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    h1.hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    .hero__headline {
    max-width: 11ch !important;
    font-size: clamp(3.4rem, 8.5vw, 5.25rem) !important;
  }
}

@media (max-width: 43.75rem) {
  html body #main h1 {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 10.5vw, 3.65rem) !important;
    line-height: 1 !important;
  }

  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    h1.hero__headline,
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    .hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    h1.hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    .hero__headline {
    max-width: 100% !important;
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    line-height: 0.98 !important;
  }
}

/* ==========================================================================
   H1-Größe und Wortumbruch v16.6
   ========================================================================== */

/*
 * Keine künstlichen Silbentrennungen oder min-content-Breiten mehr.
 * Überschriften brechen ausschließlich an normalen Leerzeichen um.
 */
html body #main h1,
html body #main .hero__headline,
html body #main h1.hero__headline {
  width: auto !important;
  min-width: 0 !important;
  max-width: 18ch !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}

/* Normale Seitenüberschriften. */
html body #main h1 {
  margin-block: 0 0.65em !important;
  font-size: clamp(2.75rem, 3.8vw, 4.25rem) !important;
  line-height: 0.98 !important;
}

/* Überschriften in Seiten-Heros. */
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero
  h1.hero__headline,
html body #main .page-hero
  .ce_hero.eichenlaub-native-hero
  .hero__headline {
  width: auto !important;
  max-width: 18ch !important;
  margin: 0 !important;
  font-size: clamp(3.15rem, 4.2vw, 4.75rem) !important;
  line-height: 0.96 !important;
}

/* Startseiten-Hero: prägnant, aber nicht überdimensioniert. */
html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  h1.hero__headline,
html body #main .hero-home
  .ce_hero.eichenlaub-native-hero--home
  .hero__headline {
  width: auto !important;
  max-width: 18ch !important;
  font-size: clamp(3.5rem, 4.5vw, 5rem) !important;
  line-height: 0.94 !important;
}

@media (max-width: 70rem) {
  html body #main h1 {
    max-width: 18ch !important;
    font-size: clamp(2.6rem, 6.6vw, 3.9rem) !important;
  }

  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    h1.hero__headline,
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    .hero__headline {
    max-width: 18ch !important;
    font-size: clamp(2.85rem, 7vw, 4.15rem) !important;
  }

  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    h1.hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    .hero__headline {
    max-width: 18ch !important;
    font-size: clamp(3rem, 7.4vw, 4.4rem) !important;
  }
}

@media (max-width: 43.75rem) {
  html body #main h1,
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    h1.hero__headline,
  html body #main .page-hero
    .ce_hero.eichenlaub-native-hero
    .hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    h1.hero__headline,
  html body #main .hero-home
    .ce_hero.eichenlaub-native-hero--home
    .hero__headline {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 10vw, 3.5rem) !important;
    line-height: 0.98 !important;
  }
}

/* ==========================================================================
   Portfolio-Filterkorrektur v16.7
   ========================================================================== */

/* Filterleiste mittig ausrichten. */

html body .eichenlaub-portfolio-list .portfolio__filter {
  width: 100% !important;
  margin:
    clamp(1.75rem, 4vw, 3rem)
    auto
    1.75rem !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter ul {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.7rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Alle Filterbuttons hellgrün; aktiver Filter etwas kräftiger. */

html body .eichenlaub-portfolio-list .portfolio__filter button {
  appearance: none !important;
  min-height: 2.75rem !important;
  padding: 0.7rem 1.1rem !important;
  border: 1px solid #b5cac5 !important;
  border-radius: 0 !important;
  background: #dce7e4 !important;
  color: #203a39 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button.is-active {
  border-color: #97b4ad !important;
  background: #c8d8d4 !important;
  color: #203a39 !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible {
  outline: 3px solid rgb(85 127 124 / 30%) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .eichenlaub-portfolio-list .portfolio__filter button:hover,
  html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible {
    border-color: #97b4ad !important;
    background: #c8d8d4 !important;
    color: #203a39 !important;
    transform: translateY(-1px) !important;
  }
}

/* Die versehentlich als Buttons gestalteten Kartenlinks zurücksetzen. */

html body .eichenlaub-portfolio-list .collection-card__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  margin:
    auto
    0
    0 !important;
  padding:
    1rem
    0
    0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #203a39 !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link::after {
  position: static !important;
  display: inline !important;
  content: "→" !important;
}

html body .eichenlaub-portfolio-list a.collection-card__link:focus-visible {
  outline: 3px solid rgb(85 127 124 / 30%) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .eichenlaub-portfolio-list a.collection-card__link:hover,
  html body .eichenlaub-portfolio-list a.collection-card__link:focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: #557f7c !important;
    transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em !important;
  }
}

@media (max-width: 38.75rem) {
  html body .eichenlaub-portfolio-list .portfolio__filter ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button {
    width: 100% !important;
  }
}

/* ==========================================================================
   Portfolio-Filterstil v16.8
   ========================================================================== */

/*
 * Filterleiste wie in der Referenz:
 * linksbündig, große rechteckige Schaltflächen,
 * aktiver Filter gefüllt, übrige weiß mit dunklem Rand.
 */

html body .eichenlaub-portfolio-list .portfolio__filter {
  width: 100% !important;
  margin:
    clamp(2rem, 4vw, 3.25rem)
    0
    clamp(1.75rem, 3vw, 2.5rem) !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter ul {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button {
  display: inline-flex !important;
  min-height: 4.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 1.7rem !important;
  border: 2px solid #292b30 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #292b30 !important;
  box-shadow: none !important;
  font-size: clamp(1rem, 1.25vw, 1.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button.is-active {
  border-color: #678582 !important;
  background: #678582 !important;
  color: #fff !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible {
  outline: 3px solid rgb(103 133 130 / 28%) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .eichenlaub-portfolio-list .portfolio__filter button:hover,
  html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible {
    border-color: #678582 !important;
    background: #eef3f2 !important;
    color: #203a39 !important;
    transform: none !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button.is-active:hover,
  html body .eichenlaub-portfolio-list .portfolio__filter button.is-active:focus-visible {
    border-color: #557572 !important;
    background: #557572 !important;
    color: #fff !important;
  }
}

@media (max-width: 48rem) {
  html body .eichenlaub-portfolio-list .portfolio__filter ul {
    gap: 0.75rem !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button {
    min-height: 3.5rem !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 34rem) {
  html body .eichenlaub-portfolio-list .portfolio__filter ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button {
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ==========================================================================
   Portfolio-Filterausrichtung v16.9
   ========================================================================== */

/*
 * Der Filtercontainer selbst war weiterhin als schmaler, zentrierter Block
 * begrenzt. Er wird nun über die volle Breite des Portfolio-Containers gezogen.
 */
html body .eichenlaub-portfolio-list .portfolio__filter {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  margin:
    clamp(2rem, 4vw, 3.25rem)
    0
    clamp(1.75rem, 3vw, 2.5rem) !important;
  padding: 0 !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter ul {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/*
 * Falls die Portfolio-Ausgabe den Filter noch in einem zentrierenden Wrapper
 * führt, darf auch dieser keine schmale Inhaltsbreite erzwingen.
 */
html body .eichenlaub-portfolio-list .portfolio__filter-wrap,
html body .eichenlaub-portfolio-list .portfolio-filter,
html body .eichenlaub-portfolio-list [class*="portfolio__filter"] {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* ==========================================================================
   Minimale Portfolio-Filterkorrektur v16.10
   ========================================================================== */

/*
 * Originalmaße und Originalabstände aus portfolio-v11-1.css.
 * Geändert werden ausschließlich Zentrierung und Farben.
 */

html body .eichenlaub-portfolio-list .portfolio__filter {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(1.75rem, 4vw, 3rem) 0 1.5rem !important;
  padding: 0 !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter ul {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-items: initial !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button {
  appearance: none !important;
  display: inline-block !important;
  width: auto !important;
  min-height: 2.75rem !important;
  padding: 0.65rem 1rem !important;
  border: 1px solid #b5cac5 !important;
  border-radius: 0 !important;
  background: #dce7e4 !important;
  color: #203a39 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  cursor: pointer !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button:hover,
html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible,
html body .eichenlaub-portfolio-list .portfolio__filter button.is-active {
  border-color: #678582 !important;
  background: #678582 !important;
  color: #fff !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button:focus-visible {
  outline: 3px solid rgb(85 127 124 / 35%) !important;
  outline-offset: 3px !important;
}

@media (max-width: 620px) {
  html body .eichenlaub-portfolio-list .portfolio__filter ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button {
    width: 100% !important;
  }
}

/* ==========================================================================
   Exakter Portfolio-Filterstil v16.11
   ========================================================================== */

/*
 * Kompakte Filter wie in der Referenz:
 * mittig angeordnet, inaktiv weiß, aktiv grün.
 * Keine Änderung an Größe, Schrift oder Abständen.
 */

html body .eichenlaub-portfolio-list .portfolio__filter ul {
  justify-content: center !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button {
  min-height: 2.75rem !important;
  padding: 0.65rem 1rem !important;
  border: 1px solid #292b30 !important;
  background: #fff !important;
  color: #292b30 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body .eichenlaub-portfolio-list .portfolio__filter button.is-active {
  border-color: #678582 !important;
  background: #678582 !important;
  color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .eichenlaub-portfolio-list .portfolio__filter button:not(.is-active):hover,
  html body .eichenlaub-portfolio-list .portfolio__filter button:not(.is-active):focus-visible {
    border-color: #678582 !important;
    background: #fff !important;
    color: #203a39 !important;
    transform: none !important;
  }

  html body .eichenlaub-portfolio-list .portfolio__filter button.is-active:hover,
  html body .eichenlaub-portfolio-list .portfolio__filter button.is-active:focus-visible {
    border-color: #557572 !important;
    background: #557572 !important;
    color: #fff !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Vollständiges Headerlogo v16.12
   ========================================================================== */

html body #header .mod_html.eichenlaub-brand {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html body #header .mod_html.eichenlaub-brand .site-logo--image {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--header-height, 4.75rem) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  color: inherit !important;
}

html body #header .mod_html.eichenlaub-brand .site-logo--image img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  max-height: var(--header-height, 4.75rem) !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 70rem) {
  html body #header .mod_html.eichenlaub-brand {
    min-width: 0 !important;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo--image {
    height: var(--header-height, 4.75rem) !important;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo--image img {
    max-width: min(15rem, calc(100vw - 6rem)) !important;
  }
}

/* ==========================================================================
   Headerlogo als gerade Flagge v16.15
   ========================================================================== */

:root {
  --eichenlaub-logo-flag-overhang: 1.9rem;
  --eichenlaub-logo-scroll-height: 4.15rem;
}

html body #header,
html body #header .inside {
  overflow: visible !important;
}

html body #header .inside > .mod_html.eichenlaub-brand {
  position: relative !important;
  z-index: 4 !important;
  height: var(--header-height, 4.75rem) !important;
  align-self: flex-start !important;
  overflow: visible !important;
}

html body #header .mod_html.eichenlaub-brand .site-logo--image {
  display: block !important;
  width: auto !important;
  height: calc(
    var(--header-height, 4.75rem)
    + var(--eichenlaub-logo-flag-overhang)
  ) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  transition:
    height 220ms ease,
    transform 220ms ease !important;
}

html body #header .mod_html.eichenlaub-brand .site-logo--image img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/* Beim Scrollen zieht sich die Flagge in den Header zurück. */
html body #header.eichenlaub-header--scrolled
  .mod_html.eichenlaub-brand
  .site-logo--image {
  height: min(
    var(--eichenlaub-logo-scroll-height),
    calc(var(--header-height, 4.75rem) - 0.35rem)
  ) !important;
}

/* Mobil von Anfang an kompakter und nur mit kleinem Überstand. */
@media (max-width: 70rem) {
  :root {
    --eichenlaub-logo-flag-overhang: 0.8rem;
    --eichenlaub-logo-scroll-height: 3.55rem;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo--image {
    height: calc(
      var(--header-height, 4.5rem)
      + var(--eichenlaub-logo-flag-overhang)
    ) !important;
  }

  html body #header .mod_html.eichenlaub-brand .site-logo--image img {
    width: auto !important;
    max-width: min(9rem, calc(100vw - 5.5rem)) !important;
  }

  html body #header.eichenlaub-header--scrolled
    .mod_html.eichenlaub-brand
    .site-logo--image {
    height: min(
      var(--eichenlaub-logo-scroll-height),
      calc(var(--header-height, 4.5rem) - 0.45rem)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #header .mod_html.eichenlaub-brand .site-logo--image {
    transition: none !important;
  }
}

/* ==========================================================================
   Robuste Headerflagge v16.16
   ========================================================================== */

/*
 * Diese Regeln hängen nur noch am tatsächlich vorhandenen Logo-Link.
 * Der Modulname und zusätzliche Modulklassen sind dafür unerheblich.
 */

html body #header,
html body #header > .inside,
html body #header .inside {
  overflow: visible !important;
}

html body #header .site-logo--image {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: calc(var(--header-height, 4.75rem) + 2.25rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  transition: height 220ms ease !important;
}

html body #header .site-logo--image img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/*
 * Die Klasse wird global durch header-flag-v16-16.js gesetzt.
 */
html.eichenlaub-page--scrolled body #header .site-logo--image,
html body #header.eichenlaub-header--scrolled .site-logo--image {
  height: calc(var(--header-height, 4.75rem) - 0.35rem) !important;
}

@media (max-width: 70rem) {
  html body #header .site-logo--image {
    height: calc(var(--header-height, 4.5rem) + 0.7rem) !important;
  }

  html body #header .site-logo--image img {
    width: auto !important;
    max-width: min(8.5rem, calc(100vw - 5.75rem)) !important;
  }

  html.eichenlaub-page--scrolled body #header .site-logo--image,
  html body #header.eichenlaub-header--scrolled .site-logo--image {
    height: calc(var(--header-height, 4.5rem) - 0.45rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #header .site-logo--image {
    transition: none !important;
  }
}

/* ==========================================================================\n   Korrigierte Headerflagge v16.17\n   ========================================================================== */

:root {
  --eichenlaub-flag-width: 5rem;
  --eichenlaub-flag-height: 6.5rem;
  --eichenlaub-flag-scrolled-size: 4.2rem;
  --eichenlaub-flag-background: #3b5757;
}

html body #header .inside > .mod_html.eichenlaub-brand,
html body #header .inside > .mod_html:has(a.site-logo--image) {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  flex: 0 0 var(--eichenlaub-flag-width) !important;
  width: var(--eichenlaub-flag-width) !important;
  min-width: var(--eichenlaub-flag-width) !important;
  max-width: var(--eichenlaub-flag-width) !important;
  height: var(--header-height, 4.75rem) !important;
  min-height: var(--header-height, 4.75rem) !important;
  max-height: var(--header-height, 4.75rem) !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image,
html body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image {
  box-sizing: border-box !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 50% !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--eichenlaub-flag-width) !important;
  min-width: var(--eichenlaub-flag-width) !important;
  max-width: var(--eichenlaub-flag-width) !important;
  height: var(--eichenlaub-flag-height) !important;
  min-height: var(--eichenlaub-flag-height) !important;
  max-height: var(--eichenlaub-flag-height) !important;
  margin: 0 !important;
  padding: 0.7rem 0.55rem !important;
  overflow: hidden !important;
  background: var(--eichenlaub-flag-background) !important;
  color: #fff !important;
  transform: translateX(-50%) !important;
  transition: width 220ms ease, min-width 220ms ease, max-width 220ms ease,
    height 220ms ease, min-height 220ms ease, max-height 220ms ease,
    padding 220ms ease !important;
}

html body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"],
html body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"] {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 3.9rem !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 4.85rem !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

html.eichenlaub-page--scrolled body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image,
html.eichenlaub-page--scrolled body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image,
html body #header.eichenlaub-header--scrolled .inside > .mod_html.eichenlaub-brand a.site-logo--image,
html body #header.eichenlaub-header--scrolled .inside > .mod_html:has(a.site-logo--image) a.site-logo--image {
  width: var(--eichenlaub-flag-scrolled-size) !important;
  min-width: var(--eichenlaub-flag-scrolled-size) !important;
  max-width: var(--eichenlaub-flag-scrolled-size) !important;
  height: var(--eichenlaub-flag-scrolled-size) !important;
  min-height: var(--eichenlaub-flag-scrolled-size) !important;
  max-height: var(--eichenlaub-flag-scrolled-size) !important;
  padding: 0.5rem !important;
}

html.eichenlaub-page--scrolled body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"],
html.eichenlaub-page--scrolled body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"],
html body #header.eichenlaub-header--scrolled .inside > .mod_html.eichenlaub-brand a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"],
html body #header.eichenlaub-header--scrolled .inside > .mod_html:has(a.site-logo--image) a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"] {
  max-width: 3.05rem !important;
  max-height: 3.05rem !important;
}

@media (max-width: 70rem) {
  :root {
    --eichenlaub-flag-width: 4.5rem;
    --eichenlaub-flag-height: 5.1rem;
    --eichenlaub-flag-scrolled-size: 3.85rem;
  }

  html body #header .inside > .mod_html.eichenlaub-brand,
  html body #header .inside > .mod_html:has(a.site-logo--image) {
    height: var(--header-height, 4.5rem) !important;
    min-height: var(--header-height, 4.5rem) !important;
    max-height: var(--header-height, 4.5rem) !important;
  }

  html body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"],
  html body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image > img[src$="eichenlaub-schmiedebestecke-solingen-logo.svg"] {
    max-width: 3.45rem !important;
    max-height: 3.85rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #header .inside > .mod_html.eichenlaub-brand a.site-logo--image,
  html body #header .inside > .mod_html:has(a.site-logo--image) a.site-logo--image {
    transition: none !important;
  }
}

/* ==========================================================================\n   Headerflagge als echte Überlagerung v16.18\n   ========================================================================== */

:root {
  --eichenlaub-header-height: var(--header-height, 4.75rem);
  --eichenlaub-flag-width: 5rem;
  --eichenlaub-flag-height: 6.5rem;
  --eichenlaub-flag-compact-size: 4.2rem;
  --eichenlaub-flag-background: #3b5757;
}

/*
 * Der Header bleibt fest auf seiner ursprünglichen Höhe. Der Überhang der
 * Flagge darf seine Höhe nicht mehr beeinflussen.
 */
html body #header {
  position: relative !important;
  height: var(--eichenlaub-header-height) !important;
  min-height: var(--eichenlaub-header-height) !important;
  max-height: var(--eichenlaub-header-height) !important;
  overflow: visible !important;
}

html body #header > .inside,
html body #header .inside {
  position: relative !important;
  height: var(--eichenlaub-header-height) !important;
  min-height: var(--eichenlaub-header-height) !important;
  max-height: var(--eichenlaub-header-height) !important;
  overflow: visible !important;
}

/*
 * Das Logo-Modul reserviert nur die Breite der Flagge. Seine eigene Höhe
 * entspricht ausschließlich der Headerhöhe.
 */
html body #header .mod_html.eichenlaub-brand,
html body #header .mod_html:has(.site-logo--image) {
  position: relative !important;
  z-index: 30 !important;
  display: block !important;
  flex: 0 0 var(--eichenlaub-flag-width) !important;
  width: var(--eichenlaub-flag-width) !important;
  min-width: var(--eichenlaub-flag-width) !important;
  max-width: var(--eichenlaub-flag-width) !important;
  height: var(--eichenlaub-header-height) !important;
  min-height: var(--eichenlaub-header-height) !important;
  max-height: var(--eichenlaub-header-height) !important;
  align-self: stretch !important;
  overflow: visible !important;
}

/*
 * Die Flagge liegt absolut über Header und Hero. Dadurch kann sie den Header
 * nicht vergrößern. Der grüne Hintergrund sitzt auf dem Link selbst.
 */
html body #header .site-logo--image {
  box-sizing: border-box !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  width: var(--eichenlaub-flag-width) !important;
  min-width: var(--eichenlaub-flag-width) !important;
  max-width: var(--eichenlaub-flag-width) !important;
  height: var(--eichenlaub-flag-height) !important;
  min-height: var(--eichenlaub-flag-height) !important;
  max-height: var(--eichenlaub-flag-height) !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0.65rem 0.55rem !important;
  overflow: hidden !important;
  background: var(--eichenlaub-flag-background) !important;
  color: #fff !important;
  transform: none !important;
  transition:
    width 220ms ease,
    min-width 220ms ease,
    max-width 220ms ease,
    height 220ms ease,
    min-height 220ms ease,
    max-height 220ms ease,
    padding 220ms ease !important;
}

/*
 * Das SVG wird nur über seine Breite skaliert. Es erhält ausdrücklich keine
 * prozentuale Höhe.
 */
html body #header .site-logo--image > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Beim Scrollen wird die Flagge kleiner, der Header bleibt unverändert. */
html.eichenlaub-page--scrolled body #header .site-logo--image,
html body #header.eichenlaub-header--scrolled .site-logo--image {
  width: var(--eichenlaub-flag-compact-size) !important;
  min-width: var(--eichenlaub-flag-compact-size) !important;
  max-width: var(--eichenlaub-flag-compact-size) !important;
  height: var(--eichenlaub-flag-compact-size) !important;
  min-height: var(--eichenlaub-flag-compact-size) !important;
  max-height: var(--eichenlaub-flag-compact-size) !important;
  padding: 0.45rem !important;
}

@media (max-width: 70rem) {
  :root {
    --eichenlaub-header-height: 4.5rem;
    --eichenlaub-flag-width: 4.5rem;
    --eichenlaub-flag-height: 5.15rem;
    --eichenlaub-flag-compact-size: 3.85rem;
  }

  html body #header .site-logo--image {
    padding: 0.55rem 0.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #header .site-logo--image {
    transition: none !important;
  }
}

/* ==========================================================================
   Fester Header und Nach-oben-Link v16.19
   ========================================================================== */

/*
 * Der Header wird aus dem Dokumentfluss genommen. Der obere Innenabstand am
 * body ersetzt exakt seine feste Höhe, damit der Seiteninhalt nicht springt.
 */
html {
  scroll-padding-top: calc(var(--eichenlaub-header-height, 4.75rem) + 1rem);
}

html body {
  padding-top: var(--eichenlaub-header-height, 4.75rem) !important;
}

html body #header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  background: #fff !important;
  transition: box-shadow 180ms ease !important;
}

html.eichenlaub-page--scrolled body #header,
html body #header.eichenlaub-header--scrolled {
  box-shadow: 0 0.35rem 1.1rem rgb(24 42 41 / 14%) !important;
}

/* Nach-oben-Link */
html body .eichenlaub-to-top {
  box-sizing: border-box !important;
  position: fixed !important;
  right: clamp(1rem, 2.5vw, 2rem) !important;
  bottom: clamp(1rem, 2.5vw, 2rem) !important;
  z-index: 950 !important;
  display: grid !important;
  width: 3rem !important;
  height: 3rem !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #3b5757 !important;
  border-radius: 0 !important;
  background: #3b5757 !important;
  color: #fff !important;
  box-shadow: 0 0.3rem 1rem rgb(24 42 41 / 18%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(0.75rem) !important;
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 180ms ease,
    background-color 180ms ease !important;
}

html body .eichenlaub-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html body .eichenlaub-to-top svg {
  display: block !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
}

html body .eichenlaub-to-top:hover,
html body .eichenlaub-to-top:focus-visible {
  border-color: #203a39 !important;
  background: #203a39 !important;
  color: #fff !important;
}

html body .eichenlaub-to-top:focus-visible {
  outline: 3px solid rgb(59 87 87 / 28%) !important;
  outline-offset: 3px !important;
}

@media (max-width: 70rem) {
  html {
    scroll-padding-top: calc(var(--eichenlaub-header-height, 4.5rem) + 0.75rem);
  }

  html body {
    padding-top: var(--eichenlaub-header-height, 4.5rem) !important;
  }

  html body .eichenlaub-to-top {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html body #header,
  html body .eichenlaub-to-top {
    transition: none !important;
  }
}