/* ==========================================================================
   updated stylesheet for new templates, no grid-x/cell dependencies
   ========================================================================== */

:root {
  --pv2-max-width: 84.875rem; /* 1358px, same page container width as the rest of the site */
  --pv2-gray: #e0e0e0; /* page-background gray behind the white panels */
  --pv2-gutter: 4.16667%; /* breathing room for elements sized directly against .pv2 (1 of 24 columns) */
  --pv2-gutter-inner: 5%; /* same breathing room, rescaled for elements nested one level inside .pv2-body
                                      (which is itself 83.33333% wide) so the same visual gap results: 4.16667 / 0.8333333 = 5 */
  --pv2-red: #a22542;
  --pv2-red-dark: #770721;
  --pv2-red-link: #9f2441;
  --pv2-ink: #1a1a1a;
  --pv2-heading-rule: #989898;
  --pv2-box-border: #707070;
  --pv2-panel-width: 83.33333%; /* 20/24 columns, i.e. the white content area */
}

/* Top gray spacer bar shown above the section */
.pv2-topbar {
  max-width: var(--pv2-max-width);
  margin: 0 auto;
  height: 1.8125rem;
  background-color: var(--pv2-gray);
}

@media print, screen and (min-width: 58.125em) {
  .pv2-topbar {
    height: 3.375rem;
  }
}

/* Section root */
.pv2 {
  max-width: var(--pv2-max-width);
  margin: 0 auto;
  background-color: var(--pv2-gray);
  box-sizing: border-box;
}

.pv2 *,
.pv2 *::before,
.pv2 *::after {
  box-sizing: inherit;
}

.pv2 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A "panel" is one full-width white block stacked in the section, inset with
   the same gray margin on both sides — this replaces the old grid-x/cell
   offset-and-gutter-cell arithmetic with a single, obvious rule. */
.pv2-panel {
  width: var(--pv2-panel-width);
  margin: 0 auto;
  background-color: #fff;
}

.pv2-panel--text {
  padding: 40px var(--pv2-gutter);
}

.pv2-panel--headline {
  padding-inline: var(--pv2-gutter);
  border-bottom: 3px solid var(--pv2-gray);
}

.pv2-panel--headline h1 {
  padding-top: 14px;
  padding-bottom: 13px;
  margin-bottom: 0;
  color: #4d585a;
}

.pv2-panel--jumpmenu {
  padding: 0 var(--pv2-gutter);
}

.pv2-panel--divider {
  height: 0.1875rem;
  padding-bottom: 2.3125rem;
}

@media print, screen and (min-width: 58.125em) {
  .pv2-panel--divider {
    padding-bottom: 4.0625rem;
  }
}

/* Plain vertical whitespace between blocks */
.pv2-gap {
  width: var(--pv2-panel-width);
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 5.3125rem;
}

.pv2-gap--half {
  padding-bottom: 2.625rem;
}

/* --------------------------------------------------------------------
   Jump-menu box (the "Alle Produktbereiche" / flyer boxes)
   These classes (produkt-sprungmenu, main-sprungmenu, product-flyer,
   desktop-row, iconlink, all-links, linkgroup, mainlinks, secondarylinks…)
   are left exactly as they were: they're already self-contained (only
   nested under their own component classes, no dependency on the grid
   system) and some of them are almost certainly hooked up to on-page
   JS (the .iconlink/.active toggling, data-target/data-linkgroup/
   data-parent wiring), so renaming them would risk breaking behaviour
   this rewrite has no visibility into. They're reproduced here verbatim.
   -------------------------------------------------------------------- */

.pv2 .desktop-row {
  display: flex;
  gap: 23px;
}

.pv2 .desktop-row .produkt-sprungmenu.main-sprungmenu {
  flex-grow: 1;
}

@media (max-width: 1300px) {
  .pv2 .desktop-row {
    flex-direction: column;
    gap: 40px;
  }
}

.pv2 .produkt-sprungmenu.main-sprungmenu {
  border: 1px solid var(--pv2-box-border);
}

.pv2 .produkt-sprungmenu.main-sprungmenu .header {
  color: #fff;
  font-weight: 500;
  padding: 0.3125rem 1.4375rem;
  font-style: italic;
}

.pv2 .produkt-sprungmenu.main-sprungmenu ul li {
  background: none;
  padding: 0;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .produkte-section {
  display: flex;
}

.pv2
  .produkt-sprungmenu.main-sprungmenu
  .produkte-section
  ul.liste-produkt-sprungmenu
  > li
  + li {
  border-top: 1px solid var(--pv2-box-border);
}

.pv2
  .produkt-sprungmenu.main-sprungmenu
  .produkte-section
  ul.liste-produkt-sprungmenu {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .iconlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 12px 40px;
  min-height: 108px;
  background-color: #e6e6e6;
  color: #707070;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .iconlink.active,
.pv2 .produkt-sprungmenu.main-sprungmenu .iconlink:hover {
  background-color: #4d585a;
  color: #fff;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .iconlink.active img.icon,
.pv2 .produkt-sprungmenu.main-sprungmenu .iconlink:hover img.icon {
  filter: brightness(0) invert(1);
}

.pv2 .produkt-sprungmenu.main-sprungmenu img.icon {
  max-height: 45px;
  width: auto;
  height: auto;
  max-width: 80px;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links {
  display: flex;
  width: calc(100% - 200px);
  flex-wrap: wrap;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links li {
  line-height: 1.4375rem;
  margin-bottom: 0.625rem;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .list-icon {
  height: 7px;
  width: auto;
  margin-right: 0.4rem;
  cursor: pointer;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .linkgroup {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .linkgroup a {
  color: #4d585a;
}
.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .linkgroup li.active span,
.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .linkgroup li.active a,
.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .linkgroup li a:hover {
  color: var(--pv2-red);
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .mainlinks {
  background: #f7f7f7;
  width: 60%;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .mainlinks li {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .secondarylinks {
  width: 40%;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .secondarylinks li {
  padding-left: 0.8125rem;
  background: url("../images/list-icon-produkte.webp") no-repeat 0 8px;
  background-size: 7px;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .mainlinks ul,
.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .secondarylinks ul {
  padding: 1.5625rem 1.5rem;
}

.pv2 .produkt-sprungmenu.main-sprungmenu .all-links .secondarylinks ul:empty,
.pv2
  .produkt-sprungmenu.main-sprungmenu
  .all-links
  .secondarylinks.none-visible
  ul {
  background-color: #f7f7f7;
  height: 100%;
}

@media (max-width: 992.98px) {
  .pv2
    .produkt-sprungmenu.main-sprungmenu
    .produkte-section
    .all-links
    .mainlinks {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .pv2 .produkt-sprungmenu.main-sprungmenu .produkte-section {
    flex-direction: column;
  }

  .pv2
    .produkt-sprungmenu.main-sprungmenu
    .produkte-section
    ul.liste-produkt-sprungmenu {
    width: 100%;
  }

  .pv2 .produkt-sprungmenu.main-sprungmenu .produkte-section .all-links {
    width: 100%;
    flex-direction: column;
  }
}

.pv2 .produkt-sprungmenu.product-flyer {
  border: 1px solid var(--pv2-box-border);
  width: fit-content;
  height: fit-content;
}

.pv2 .produkt-sprungmenu.product-flyer .header {
  padding: 0.3125rem 1.4375rem;
  font-weight: 500;
  color: #fff;
  font-style: italic;
  width: fit-content;
}

.pv2 .produkt-sprungmenu.product-flyer ul.liste-produkt-sprungmenu {
  list-style-type: none;
  padding: 1.5625rem 1rem 1.5rem 1rem;
}

.pv2 .produkt-sprungmenu.product-flyer ul.liste-produkt-sprungmenu li {
  margin-left: 0.25rem;
  padding-left: 0.8125rem;
  line-height: 1.4375rem;
  margin-bottom: 0.625rem;
  background: url("../images/list-icon-produkte.webp") no-repeat 0 8px;
  background-size: 7px;
}

.pv2 .produkt-sprungmenu.product-flyer ul.liste-produkt-sprungmenu li a {
  color: inherit;
  font-size: 1rem;
}

.pv2 .produkt-sprungmenu.product-flyer ul.liste-produkt-sprungmenu li a:hover {
  color: var(--pv2-red-link);
}

/* --------------------------------------------------------------------
   Product / special-link / extra "row": headline + media/text + highlights
   -------------------------------------------------------------------- */

/* .pv2-panel--product is the white panel for one product/special-link/extra
   row — same role as .pv2-panel elsewhere, just with its own name since it
   wraps a heading plus a media/text/highlights row instead of a single
   block of content. `display: flow-root` gives it its own formatting
   context so the <h2>'s bottom margin (below) stays inside it as visible
   white space instead of collapsing straight through the wrapper and
   escaping into the gap after the whole panel. */
.pv2-panel--product {
  width: var(--pv2-panel-width);
  margin: 0 auto;
  background-color: #fff;
  display: flow-root;
}

/* Nested one level inside .pv2-panel--product (which is itself 83.33333% of
   .pv2), so — like .pv2-body's children below — this padding is the
   original 4.16667% rescaled ÷0.8333333 to land on the same pixel value. */
.pv2-heading-wrap {
  padding: 0 var(--pv2-gutter-inner);
}

.pv2-heading-wrap h2 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  border-top: 1px solid var(--pv2-heading-rule);
  border-bottom: 1px solid var(--pv2-heading-rule);
  font-size: 1.375rem;
  color: #4D585A;
  padding: 0.4375rem 0.3125rem 0.4625rem 0.3125rem;
  margin: 0 0 2.375rem;
}

/* .pv2-body fills .pv2-panel--product (100% of it, same 83.33333%-of-.pv2
   basis as before), so its children's rescaled percentages below are
   unaffected by this panel now being one shared white box instead of two
   independently-positioned pieces. */
.pv2-body {
  display: flex;
  flex-wrap: wrap;
}

.pv2-media {
  width: 100%;
  padding-left: var(--pv2-gutter-inner);
  padding-right: var(--pv2-gutter-inner);
}

@media print, screen and (min-width: 48em) {
  .pv2-media {
    width: 35%; /* 29.16667% ÷ 0.8333333 */
    padding-right: 3.8%; /* 3.16667% ÷ 0.8333333 */
  }
}

.pv2-image {
  display: block;
  margin-bottom: 2.125rem;
  border: 1px solid var(--pv2-box-border);
}

@media print, screen and (min-width: 48em) {
  .pv2-image {
    display: inline-block;
  }
}

.pv2-image img {
  display: block;
  width: 100%;
  height: auto;
}

.pv2-text {
  width: 100%;
  padding-left: var(--pv2-gutter-inner);
}

@media print, screen and (min-width: 48em) {
  .pv2-text {
    flex: 1 1 0%; /* grows to fill whatever space media/highlights don't use */
  }
}

.pv2-text--with-image {
  padding-right: 0;
}

@media print, screen and (min-width: 48em) {
  .pv2-text--with-image {
    padding-left: 0;
    padding-right: 3.8%;
  }
}

.pv2-highlights {
  width: 100%;
  /* padding-left: var(--pv2-gutter-inner); */
  padding-right: var(--pv2-gutter-inner);
  padding-top: 1.25rem;
}

@media print, screen and (min-width: 48em) {
  .pv2-highlights {
    flex: 0 0 13.625rem; /* fixed rem width, no rescaling needed */
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .pv2-highlights {
    padding-top: 20px;
    padding-bottom: 0;
    padding-left: var(--pv2-gutter-inner);
  }
}

/* Optional image above the highlights list, framed in the section's accent
   color (set inline per-row via the "color" ACF field, same one the
   jump-menu header uses). No existing design to match here — this is a
   new field with no prior styling, so the padding/spacing below is a
   reasonable default consistent with the rest of the component rather
   than a reverse-engineered value. Adjust freely. */
.pv2-highlights .highlights-image {
  width: 13.625rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  text-align: center;
}

.pv2-highlights .highlights-image img {
  display: inline-block;
  height: auto;
}

.pv2-highlights .produkt-highlights {
  width: 13.625rem;
  margin-bottom: 2.125rem;
  background-color: #e6e6e6;
  padding: 1.5625rem 1rem 1.5rem 1rem;
}

.pv2-highlights .produkt-highlights ul {
  list-style-type: none;
}

.pv2-highlights .produkt-highlights ul li {
  margin-left: 0.25rem;
  padding-left: 0.8125rem;
  line-height: 1.4375rem;
  margin-bottom: 0.625rem;
  background: url("../images/list-icon-produkte.webp") no-repeat 0 8px;
  background-size: 7px;
}

.pv2-highlights .produkt-highlights ul li a {
  color: inherit;
}

.pv2-highlights .produkt-highlights ul li:hover,
.pv2-highlights .produkt-highlights ul li:hover a {
  color: var(--pv2-red);
}

.pv2-highlights .download-button {
  width: 13.625rem;
  text-align: center;
  margin: 0 0 1.25rem;
}