/* ============================================================
   Herzwerk Media – site skin (token-first, mode-aware)
   Brand: bordeaux #6a0f25 · terracotta #c7795b · cream #fffdf7
   ============================================================ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/site/default/fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/site/default/fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/site/default/fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('/site/default/fonts/libre-baskerville-400-italic.woff2') format('woff2');}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('/site/default/fonts/libre-baskerville-400.woff2') format('woff2');}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('/site/default/fonts/libre-baskerville-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/site/default/fonts/montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/site/default/fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/site/default/fonts/montserrat-700.woff2') format('woff2');}

body[data-wb-public-theme] {
  --hzw-bordeaux: #6a0f25;
  --hzw-bordeaux-deep: #55081c;
  --hzw-terracotta: #c7795b;
  --hzw-terracotta-soft: #d9a28f;
  --hzw-cream: #fffdf7;
  --hzw-ink: #2d2d2d;
}


/* ---------------- typography ---------------- */
main h1,
main h2,
.wb-promo-title,
.wb-content-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wb-navbar,
.wb-public-footer,
.wb-btn {
  font-family: 'Montserrat', 'IBM Plex Sans', sans-serif;
}

/* ---------------- header / navbar ---------------- */
.wb-navbar-brand img {
  height: 44px;
  width: auto;
}

/* ---------------- hero / promo bands ---------------- */
.wb-promo .wb-promo-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.wb-promo {
  border: none;
}

/* ---------------- cards ---------------- */
.wb-card {
  border-color: var(--wb-public-border);
  box-shadow: 0 1px 2px rgb(45 45 45 / 4%);
}
.wb-card .wb-icon-card {
  gap: 0.6rem;
}

/* ---------------- footer ---------------- */
footer[data-wb-slot="footer"] .wb-link-list-item {
  padding: 0.25rem 0;
  border: none;
  background: transparent;
}
footer[data-wb-slot="footer"] figure img {
  max-width: 180px;
}

/* ---------------- brand polish (v2) ---------------- */
/* Bordeaux display headings, as on the original site */
main h1,
main h2,
.wb-content-title {
  color: var(--wb-public-accent-text);
}
html[data-mode="dark"] body[data-wb-public-theme] main h1,
html[data-mode="dark"] body[data-wb-public-theme] main h2 {
  color: var(--wb-public-accent-text);
}
/* Headings inside solid accent bands stay light */
.wb-card-accent h1,
.wb-card-accent h2,
.wb-card-accent .wb-promo-title {
  color: inherit;
}


/* Accent promo band: solid bordeaux with cream text */
.wb-card.wb-promo.wb-card-accent {
  background: var(--wb-public-accent);
  color: var(--wb-public-accent-on);
}
.wb-card.wb-promo.wb-card-accent .wb-promo-text,
.wb-card.wb-promo.wb-card-accent p {
  color: var(--wb-public-accent-on);
}
.wb-card.wb-promo.wb-card-accent .wb-btn-primary {
  background: var(--wb-public-accent-on);
  color: var(--wb-public-accent);
  border-color: var(--wb-public-accent-on);
}

/* Highlight cards: dark charcoal service cards like the original */
.wb-card.wb-card-highlight {
  background: #3c3c3c;
  border-color: #3c3c3c;
  color: #f5f2ec;
}
.wb-card.wb-card-highlight h3,
.wb-card.wb-card-highlight p {
  color: #f5f2ec;
}
.wb-card.wb-card-highlight .wb-btn {
  background: transparent;
  border-color: var(--hzw-terracotta-soft);
  color: var(--hzw-terracotta-soft);
}
html[data-mode="dark"] body[data-wb-public-theme] .wb-card.wb-card-highlight {
  background: var(--wb-public-surface-strong);
  border-color: var(--wb-public-border);
  color: var(--wb-public-text);
}

/* Legal footer row: horizontal */
/* A6 workaround — `navigation-auto` hardcodes a vertical list for the footer
   and legal menu keys (no layout setting). Remove once the block gains
   `layout: stacked|inline`. */
footer[data-wb-slot="footer"] nav[data-wb-menu-key="legal"] ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
footer[data-wb-slot="footer"] nav[data-wb-menu-key="legal"] li {
  display: block;
  margin: 0;
}

/* Mid-page CTA bands (cta blocks, muted/soft variant) match the original
   solid bordeaux band; article heroes (hero blocks) stay light. */
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] {
  background: var(--wb-public-accent);
  color: var(--wb-public-accent-on);
}
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] h1,
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] h2,
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] .wb-promo-title,
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] p {
  color: var(--wb-public-accent-on);
}
section.wb-promo.wb-card-muted[data-wb-public-block-type="cta"] .wb-btn-primary {
  background: var(--wb-public-accent-on);
  color: var(--wb-public-accent);
  border-color: var(--wb-public-accent-on);
}

/* Footer: solid bordeaux band like the original site */
footer[data-wb-slot="footer"] .wb-section {
  background: var(--hzw-bordeaux);
  border-top: none;
  color: var(--hzw-cream);
}
footer[data-wb-slot="footer"] h1,
footer[data-wb-slot="footer"] h2,
footer[data-wb-slot="footer"] h3,
footer[data-wb-slot="footer"] h4,
footer[data-wb-slot="footer"] p,
footer[data-wb-slot="footer"] .wb-link,
footer[data-wb-slot="footer"] .wb-link-list-item,
footer[data-wb-slot="footer"] a {
  color: var(--hzw-cream);
}
footer[data-wb-slot="footer"] .wb-link-list-item:hover,
footer[data-wb-slot="footer"] a:hover {
  color: var(--hzw-terracotta-soft);
}
html[data-mode="dark"] body[data-wb-public-theme] footer[data-wb-slot="footer"] .wb-section {
  background: #24151a;
}

/* Footer link lists: plain links on the bordeaux band, no panel frame */
footer[data-wb-slot="footer"] .wb-link-list {
  background: transparent;
  border: none;
  box-shadow: none;
}
footer[data-wb-slot="footer"] .wb-link-list-item {
  background: transparent;
}
footer[data-wb-slot="footer"] .wb-link {
  color: var(--hzw-cream);
}

/* Footer text: force cream on every nested element of the bordeaux band */
footer[data-wb-slot="footer"] :is(a, span, p, li, div, h1, h2, h3, h4) {
  color: var(--hzw-cream);
}
footer[data-wb-slot="footer"] a:hover,
footer[data-wb-slot="footer"] a:hover :is(span, div) {
  color: var(--hzw-terracotta-soft);
}

/* Legal links need body-level specificity to beat the public link color */
body[data-wb-public-theme] footer[data-wb-slot="footer"] a,
body[data-wb-public-theme] footer[data-wb-slot="footer"] .wb-link {
  color: var(--hzw-cream);
}
body[data-wb-public-theme] footer[data-wb-slot="footer"] a:hover {
  color: var(--hzw-terracotta-soft);
}

/* Final override: the public link color otherwise wins on the legal row */
footer[data-wb-slot="footer"] nav[data-wb-menu-key="legal"] a {
  color: var(--hzw-cream) !important;
}
footer[data-wb-slot="footer"] nav[data-wb-menu-key="legal"] a:hover {
  color: var(--hzw-terracotta-soft) !important;
}

/* ============================================================
   v3 – original background colors + full-bleed bands + numerals
   ============================================================ */



/* Footer: charcoal band (#2B2B2B) like the original */
footer[data-wb-slot="footer"] .wb-section {
  background: #2b2b2b;
}
html[data-mode="dark"] body[data-wb-public-theme] footer[data-wb-slot="footer"] .wb-section {
  background: #1f1f1f;
}


/* Dark band section (background media): constrain and lighten content */
main .wb-section.wb-background-media {
  padding-block: 4.5rem;
}
main .wb-section.wb-background-media > .wb-container {
  max-width: 76rem;
}
main .wb-section.wb-background-media :is(h1, h2, h3, h4, p, strong) {
  color: #fffdf7;
}
main .wb-section.wb-background-media .wb-btn-secondary {
  border-color: var(--hzw-terracotta-soft);
  color: var(--hzw-terracotta-soft);
  background: transparent;
}

/* Linked column cards (Leistungen): whole card is the link, dark charcoal */
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a.wb-no-decoration) {
  background: #3c3c3c;
  border-color: #3c3c3c;
}
main [data-wb-public-block-type="columns"] .wb-card > .wb-card-body > a.wb-no-decoration {
  display: block;
  height: 100%;
}
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a.wb-no-decoration) :is(strong, p) {
  color: #f5f2ec;
}
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a.wb-no-decoration):hover {
  background: var(--hzw-bordeaux);
  border-color: var(--hzw-bordeaux);
}
html[data-mode="dark"] body[data-wb-public-theme] main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a.wb-no-decoration) {
  background: var(--wb-public-surface-strong);
  border-color: var(--wb-public-border);
}

/* Plain columns items (Vier Schwerpunkte): frameless with a fine left rule */
main [data-wb-public-block-type="columns"] .wb-grid > .wb-icon-card {
  border-left: 2px solid var(--hzw-terracotta-soft);
  padding-left: 1.1rem;
  background: transparent;
}

/* Columns with 4 items render 2x2 on desktop like the original */
@media (min-width: 960px) {
  main [data-wb-public-block-type="columns"] .wb-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stats columns (Warum …): huge pale numeral behind each principle */
main [data-wb-public-block-type="columns"] .wb-stat {
  position: relative;
  padding-top: 4.5rem;
  overflow: visible;
}
main [data-wb-public-block-type="columns"] .wb-stat-value {
  position: absolute;
  top: -1.75rem;
  right: 0.25rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 9rem;
  line-height: 1;
  color: var(--hzw-terracotta-soft);
  opacity: 0.35;
  pointer-events: none;
}
main [data-wb-public-block-type="columns"] .wb-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--wb-public-text);
}
main [data-wb-public-block-type="columns"] .wb-stat-delta {
  color: var(--wb-public-muted);
}

/* Industries: decorative numeral images float over the card corner */
main .wb-card {
  position: relative;
}
main .wb-card figure:has(> img[alt^="Ziffer"]) {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  margin: 0;
  width: clamp(70px, 9vw, 130px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   v4 – full-bleed mid CTAs on subpages + alternating row polish
   ============================================================ */


/* Alternating media/text rows: center text vertically against the photo */
main [data-wb-public-block-type="grid"].wb-grid-2 {
  align-items: center;
}

/* Numerals now sit inside the media cell of alternating rows:
   position them over the photo corner (decorative, non-interactive). */
main .wb-grid > .wb-container:has(figure img[alt^="Ziffer"]) {
  position: relative;
}
main .wb-grid > .wb-container figure:has(> img[alt^="Ziffer"]) {
  position: absolute;
  top: -1.2rem;
  right: -0.6rem;
  margin: 0;
  width: clamp(80px, 10vw, 150px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   v5 – navbar: original dark bar (#2a2a2a) + original dropdowns
   ============================================================ */
[data-wb-public-block-type="sticky-navbar"] {
  background: #2a2a2a;
  border-bottom: none;
  box-shadow: none;
}
html[data-mode="dark"] body[data-wb-public-theme] [data-wb-public-block-type="sticky-navbar"] {
  background: #211a1c;
}

/* Top-level links and group toggles: cream uppercase on the dark bar */
.wb-navbar-links a.wb-navbar-link,
.wb-navbar-links button.wb-navbar-link {
  color: #fcf9ef;
  text-transform: uppercase;
  font-family: 'Montserrat', 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  background: transparent;
}
.wb-navbar-links a.wb-navbar-link:hover,
.wb-navbar-links button.wb-navbar-link:hover,
.wb-navbar-links button.wb-navbar-link[aria-expanded="true"] {
  color: var(--hzw-terracotta-soft);
}
.wb-navbar-links a.wb-navbar-link.is-active {
  color: #fffdf7;
}
.wb-navbar-links .wb-navbar-link .wb-icon {
  color: inherit;
}
/* Mobile burger bars stay visible on the dark bar */
.wb-navbar-toggle span {
  background: #fcf9ef;
}

/* Dropdown panel: warm flat panel like the original */
.wb-dropdown-menu[id^="navbar-navigation-group"] {
  background: #f8f4ef;
  color: #333333;
  min-width: 220px;
  padding: 25px;
  border: none;
  border-radius: 0;
  box-shadow: 0 12px 28px rgb(0 0 0 / 14%);
}
.wb-dropdown-menu[id^="navbar-navigation-group"] .wb-dropdown-item {
  color: #333333;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 0;
  background: transparent;
  border-radius: 0;
}
.wb-dropdown-menu[id^="navbar-navigation-group"] .wb-dropdown-item:hover {
  color: var(--hzw-bordeaux);
  background: transparent;
}
html[data-mode="dark"] body[data-wb-public-theme] .wb-dropdown-menu[id^="navbar-navigation-group"] {
  background: #2e2124;
  color: #f4ece4;
}
html[data-mode="dark"] body[data-wb-public-theme] .wb-dropdown-menu[id^="navbar-navigation-group"] .wb-dropdown-item {
  color: #f4ece4;
}
html[data-mode="dark"] body[data-wb-public-theme] .wb-dropdown-menu[id^="navbar-navigation-group"] .wb-dropdown-item:hover {
  color: var(--hzw-terracotta-soft);
}

/* ============================================================
   v6 – magazin bordeaux cards · navbar chevrons · dark-card icons
   ============================================================ */

/* Original navbar has no dropdown carets */
.wb-navbar-link .wb-icon-chevron-down {
  display: none;
}

/* Magazin article cards: bordeaux whole-card links like the original */
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a[href^="/magazin/"]) {
  background: var(--hzw-bordeaux);
  border-color: var(--hzw-bordeaux);
}
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a[href^="/magazin/"]) strong {
  color: #fffdf7;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
}
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a[href^="/magazin/"]) p {
  color: #f3e3dd;
  font-size: 0.9rem;
}
main [data-wb-public-block-type="columns"] .wb-card:has(> .wb-card-body > a[href^="/magazin/"]):hover {
  background: var(--hzw-bordeaux-deep);
  border-color: var(--hzw-bordeaux-deep);
}

/* Magazin grid: three columns on desktop like the original */
@media (min-width: 960px) {
  main [data-wb-public-block-type="columns"] .wb-grid:has(a[href^="/magazin/"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Icons inside dark pain-point cards stay compact */
.wb-card.wb-card-highlight figure {
  margin: 0;
  width: 56px;
}
.wb-card.wb-card-highlight figure img {
  width: 56px;
  height: auto;
}

/* ============================================================
   v7 – pull-quotes · photo bands · FAQ accordion
   ============================================================ */

/* Pull-quotes: large serif italic bordeaux, like the original.
   Testimonial quotes inside cards keep their card styling. */
main blockquote:not(.wb-card blockquote) {
  border: none;
  margin: 1rem auto;
  padding: 1.6rem 0 0.4rem;
  max-width: 44rem;
  text-align: center;
  position: relative;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--wb-public-accent-text);
}
main blockquote:not(.wb-card blockquote)::before {
  content: "\201E";
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--hzw-terracotta-soft);
  font-style: normal;
}
/* inside a 2-col grid cell (homepage) the quote centers vertically */
main .wb-grid > blockquote {
  align-self: center;
}

main img[alt^="Fotoband"] {
  display: block;
  width: 100%;
  height: clamp(280px, 46vh, 520px);
  object-fit: cover;
}

/* FAQ accordion rows (activated by site.js on "Häufige Fragen" sections) */
.hzw-faq-q {
  cursor: pointer;
  margin: 0;
  padding: 0.95rem 2.6rem 0.95rem 0;
  border-top: 1px solid var(--wb-public-border);
  color: var(--wb-public-accent-text);
  position: relative;
  font-size: 1.02rem;
  user-select: none;
}
.hzw-faq-q:hover {
  color: var(--wb-public-accent-hover);
}
.hzw-faq-q::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--hzw-terracotta);
}
.hzw-faq-q[aria-expanded="true"]::after {
  content: "\2212";
}
.hzw-faq-q:focus-visible {
  outline: 2px solid var(--hzw-terracotta);
  outline-offset: 2px;
}