/* ============================================================
   Harnischmacher — Refined CSS
   Brand identity preserved: red #D0083D + Special Gothic + Inter
   ============================================================ */

@font-face {
  font-family: "Special Gothic";
  src: url("../fonts/SpecialGothic-VariableFont.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* Inter — self-hosted (DSGVO-konform, kein Google-Fonts-Request) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------- TOKENS -------------------- */
:root {
  /* Brand colors — from original theme */
  --clr-white:          #ffffff;
  --clr-black:          #000000;

  --clr-primary-300:    hsl(344, 67%, 83%);    /* light pink */
  --clr-primary-400:    hsl(344, 93%, 42%);    /* #D0083D — brand red */
  --clr-primary-500:    hsl(344, 93%, 37%);    /* darker red, hover */
  --clr-primary-400-rgb: 208, 8, 61;

  --clr-secondary-400:  hsl(0, 0%, 12%);       /* #1F1F1F — text */
  --clr-secondary-100:  hsl(0, 0%, 93%);       /* #ECECEC — sub-bar */
  --clr-secondary-50:   hsl(0, 0%, 97%);       /* paper tint */

  --clr-tertiary-400:   hsl(194, 93%, 42%);    /* #08A1D0 — focus cyan */
  --clr-quaternary-400: hsl(160, 2%, 31%);     /* #4D504F — footer gray */

  /* Type */
  --font-display: "Special Gothic", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale */
  --fs-xs:   clamp(0.75rem,   0.72rem + 0.1vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem,  0.85rem + 0.1vw, 0.9375rem);
  --fs-base: clamp(1rem,      0.96rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1rem    + 0.3vw, 1.1875rem);
  --fs-lg:   clamp(1.125rem,  1.05rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.25rem,   1.1rem  + 0.7vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,    1.25rem + 1.2vw, 2rem);
  --fs-3xl:  clamp(1.75rem,   1.4rem  + 1.7vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem,   1.7rem  + 2.6vw, 3.75rem);
  --fs-5xl:  clamp(2.75rem,   1.9rem  + 4.2vw, 5.5rem);

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.015em;
  --ls-base:    -0.005em;
  --ls-normal:   0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;

  /* Spacing */
  --space-3xl:  clamp(4rem, 4vw + 2.4rem, 6.5rem);    /* section gap */
  --space-2xl:  clamp(2.6rem, 2.4vw + 1.7rem, 4.5rem);
  --space-xl:   clamp(1.8rem, 1.6vw + 1.3rem, 3rem);
  --space-lg:   clamp(1.4rem, 0.8vw + 1.1rem, 2.25rem);
  --space-md:   clamp(1rem, 0.6vw + 0.8rem, 1.5rem);
  --space-sm:   0.75rem;
  --space-xs:   0.5rem;

  /* Layout */
  --max-width:    1920px;
  --pad-inline:   clamp(20px, 6vw, 120px);

  /* Misc */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s cubic-bezier(.2,.6,.2,1);
  --transition-slow: 0.5s cubic-bezier(.2,.6,.2,1);

  --z-header: 100;
  --z-modal:  1000;
}

/* -------------------- RESET -------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--lh-relaxed);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-base);
  color: var(--clr-secondary-400);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: .18em; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, dl, dd, blockquote, figure { margin: 0; padding: 0; }
address { font-style: normal; }

::selection { background: var(--clr-primary-400); color: var(--clr-white); }

:focus-visible {
  outline: 2px solid var(--clr-tertiary-400);
  outline-offset: 2px;
}

/* -------------------- TYPOGRAPHY -------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 550;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 6 6;
  -webkit-hyphenate-limit-chars: 12 6 6;
  -ms-hyphenate-limit-chars: 12 6 6;
  overflow-wrap: break-word;
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--clr-white);
  text-wrap: balance;
}
h2 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h3 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
}
h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}
h6 {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p { text-wrap: pretty; font-size: var(--fs-base); line-height: var(--lh-relaxed); }

.section-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  padding-bottom: var(--space-md);
}
.section-label.inverted { color: var(--clr-white); }

strong, b { font-weight: 600; }

/* -------------------- LAYOUT -------------------- */
.layout {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.layout--narrow { max-width: 1280px; }
.layout--prose { max-width: 760px; }

.bleed { width: 100%; }
.bleed--red {  background: var(--clr-primary-400); color: var(--clr-white); }
.bleed--ash {  background: var(--clr-secondary-100); }
.bleed--paper{ background: var(--clr-secondary-50); }
.bleed--ink {  background: var(--clr-secondary-400); color: var(--clr-white); }

.section { padding-block: var(--space-3xl); }
.section--sm { padding-block: var(--space-2xl); }

/* Section heads (lede stacks under headline, single column, ~half page width) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.section-head__left  { display: flex; flex-direction: column; }
.section-head__lede  {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--clr-quaternary-400);
  width: 50%;
  max-width: 60ch;
}
@media (max-width: 900px) { .section-head__lede { width: 100%; max-width: 60ch; } }
.bleed--red .section-head__lede { color: rgba(255,255,255,0.85); }
.bleed--ink .section-head__lede { color: rgba(255,255,255,0.78); }
.bleed--red .section-label { color: var(--clr-white); }
.bleed--ink .section-label { color: var(--clr-primary-300); }

/* -------------------- BUTTONS -------------------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
  background: var(--clr-primary-400);
  color: var(--clr-white);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-base);
  text-decoration: none;
  transition: background-color var(--transition-base), gap var(--transition-base);
  border: 0;
}
.button::after {
  content: "";
  width: .5rem;
  height: 1rem;
  background: url("../images/arrow-white.svg") center/contain no-repeat;
  transition: transform var(--transition-base);
}
.button:hover { background: var(--clr-primary-500); gap: 2rem; }
.button:hover::after { transform: translateX(3px); }

.button.inverted {
  background: var(--clr-white);
  color: var(--clr-primary-400);
}
.button.inverted::after { background-image: url("../images/arrow-red.svg"); }
.button.inverted:hover { background: hsl(0 0% 92%); }

.button--ghost {
  background: transparent;
  color: var(--clr-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}
.button--ghost:hover { background: var(--clr-white); color: var(--clr-primary-400); box-shadow: inset 0 0 0 2px var(--clr-white); }
.button--ghost::after { background-image: url("../images/arrow-white.svg"); }
.button--ghost:hover::after { background-image: url("../images/arrow-red.svg"); }

/* -------------------- HEADER -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--clr-primary-400);
  transition: transform var(--transition-base);
}
.main-bar {
  height: 5rem;
  padding-inline: var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  height: 60%;
  max-width: 240px;
}
.brand-logo img { height: 100%; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.main-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.main-menu a {
  color: var(--clr-white);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-base);
  text-decoration: none;
  position: relative;
  padding-block: .5rem;
  transition: opacity var(--transition-fast);
}
.main-menu a:hover { opacity: 0.85; }
.main-menu .is-current > a,
.main-menu .current-menu-item > a,
.main-menu .current-menu-parent > a,
.main-menu .current-menu-ancestor > a,
.main-menu a[aria-current="page"] {
  font-weight: 700;
}
.main-menu .is-current > a::after,
.main-menu .current-menu-item > a::after,
.main-menu .current-menu-parent > a::after,
.main-menu .current-menu-ancestor > a::after,
.main-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 3px;
  background: var(--clr-white);
  border-radius: 2px;
}

.main-menu .has-submenu { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  background: var(--clr-primary-400);
  border-top: 1px solid rgba(255,255,255,0.18);
  min-width: 280px;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block;
  padding: .75rem 1rem;
  color: var(--clr-white);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-base);
  transition: background-color var(--transition-fast);
}
.submenu a:hover { background: rgba(255,255,255,0.1); }

.sub-bar {
  min-height: 50px;
  padding-block: .8rem;
  padding-inline: var(--pad-inline);
  background: var(--clr-secondary-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sub-nav__title {
  color: var(--clr-primary-400);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-base);
}
.sub-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* Sub-menu link colors */
.sub-menu a {
  color: var(--clr-quaternary-400);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-base);
  transition: color var(--transition-fast);
  position: relative;
  padding-block: .25rem;
}
.sub-menu a:hover { color: var(--clr-primary-400); }
.sub-menu .is-current a {
  color: var(--clr-primary-400);
  font-weight: 600;
}
.sub-menu .is-current a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--clr-primary-400);
}

/* Mobile nav (floating capsule like original) */
.mobile-nav { display: none; }
.burger { display: none; }

@media (max-width: 1024px) {
  .main-menu { gap: 1.5rem; }
  .main-menu a { font-size: var(--fs-base); }
}

@media (max-width: 860px) {
  .main-nav, .sub-bar { display: none; }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--clr-white);
  }
  .burger span {
    display: block;
    position: relative;
    width: 22px; height: 2px;
    background: var(--clr-white);
  }
  .burger span::before, .burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px; height: 2px;
    background: var(--clr-white);
    transition: top var(--transition-fast), transform var(--transition-fast);
  }
  .burger span::before { top: -7px; }
  .burger span::after  { top:  7px; }

  body.is-mobile-open .burger span { background: transparent; }
  body.is-mobile-open .burger span::before { top: 0; transform: rotate(45deg); }
  body.is-mobile-open .burger span::after  { top: 0; transform: rotate(-45deg); }

  /* Oberen Header-Burger auf Mobile ausblenden — Navigation läuft über die
     untere schwebende Kapsel. Der Burger in der Kapsel (.mobile-nav__title)
     bleibt erhalten und öffnet/schließt das Menü. */
  .main-bar .burger { display: none; }

  /* Floating capsule menu — unten verankerte Leiste, Menü klappt nach oben auf */
  .mobile-nav {
    display: flex;
    flex-direction: column-reverse; /* Titel-Leiste unten, Menü darüber */
    position: fixed;
    z-index: var(--z-header);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    min-width: 86%;
    max-width: 480px;
    overflow: hidden;
    background: var(--clr-primary-400);
    color: var(--clr-white);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12),
      0 16px 32px rgba(0,0,0,0.25),
      0 0 18px rgba(var(--clr-primary-400-rgb), 0.4);
  }

  .mobile-nav__title {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.25rem 0;
  }
  .mobile-nav__title h6 { color: var(--clr-white); text-transform: uppercase; letter-spacing: var(--ls-wide); }
  .mobile-nav__title .burger { border-left: 2px solid rgba(255,255,255,0.18); width: 56px; height: 56px; }

  .mobile-nav__menu {
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 0;
    min-height: 0; /* erlaubt vollständiges Einklappen im Flex-Container */
    overflow: hidden;
    transition: max-height var(--transition-base), padding var(--transition-base);
  }
  body.is-mobile-open .mobile-nav__menu {
    max-height: 70vh;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    border-bottom: 1px solid rgba(255,255,255,0.18); /* Trenner zur Titel-Leiste darunter */
  }
  .mobile-nav__menu > a {
    color: var(--clr-white);
    font-size: var(--fs-md);
    font-weight: 550;
    padding-block: .5rem;
  }
  .mobile-nav__sub {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-left: 1rem;
    margin-bottom: .25rem;
  }
  .mobile-nav__sub a {
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-sm);
    padding-block: .35rem;
  }
}

/* -------------------- HERO -------------------- */
.hero {
  position: relative;
  background: var(--clr-primary-400);
  color: var(--clr-white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.85);
  z-index: 1;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(95deg, rgba(208,8,61,1) 0%, rgba(208,8,61,0.92) 22%, rgba(208,8,61,0.4) 50%, rgba(208,8,61,0.2) 100%);
}
.hero__wrap {
  position: relative;
  z-index: 1;
  padding-block: clamp(120px, 16vw, 280px) clamp(72px, 9vw, 160px);
  max-width: 70%;
}
@media (max-width: 1024px) { .hero__wrap { max-width: 90%; } }
@media (max-width: 600px)  { .hero__wrap { max-width: 100%; padding-block: clamp(80px, 18vw, 140px) clamp(56px, 14vw, 100px); } }

.hero__sublabel {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-md);
}
.hero__sublabel::before {
  content: "";
  width: 32px; height: 1px; background: rgba(255,255,255,0.8);
}
.hero__cta {
  margin-top: var(--space-xl);
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.hero__meta {
  margin-top: clamp(48px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem 2rem;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.25);
  max-width: 760px;
}
.hero__meta-k {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: rgba(255,255,255,0.7);
}
.hero__meta-v {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 550;
  letter-spacing: var(--ls-tight);
  margin-top: .35rem;
}

/* -------------------- PAGE HEADER (sub-pages) -------------------- */
.page-header {
  position: relative;
  background: var(--clr-primary-400);
  color: var(--clr-white);
}
.page-header__wrap {
  padding-block: clamp(80px, 11vw, 160px) clamp(56px, 7vw, 110px);
  max-width: 75%;
}
@media (max-width: 1024px) { .page-header__wrap { max-width: 100%; } }
.crumbs {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-md);
}
.crumbs a { color: rgba(255,255,255,0.75); transition: color var(--transition-fast); }
.crumbs a:hover { color: var(--clr-white); }
.crumbs .sep { opacity: 0.5; }

.page-header__lede {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.92);
  max-width: 60ch;
}

/* -------------------- IMAGE WITH TEXT -------------------- */
.image-with-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
/* Whichever side has the content gets the wider column */
.image-with-text:has(> .image-with-text__content:first-child) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.image-with-text:has(> .image-with-text__media:first-child) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
/* Legacy media-right helper — swap visual order, content stays wider */
.image-with-text.media-right > .image-with-text__content { order: 1; }
.image-with-text.media-right > .image-with-text__media { order: 2; }
@media (max-width: 900px) { .image-with-text { grid-template-columns: 1fr !important; } .image-with-text > * { order: 0 !important; } }
.image-with-text__content { display: flex; flex-direction: column; gap: var(--space-md); max-width: 60ch; }
.image-with-text__content p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--clr-quaternary-400); }
/* Variante B: Eyebrow + Headline stehen jetzt IN der Content-Spalte (top-bündig zum Bild).
   Eyebrow-Eigenabstand raus — der Flex-Gap der Spalte übernimmt das Spacing. */
.image-with-text__content .section-label { padding-bottom: 0; }
.image-with-text__media { width: 100%; }

/* -------------------- TILES (services) -------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .tile-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tile-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .tile-grid--4 { grid-template-columns: 1fr; } }

/* -------------------- TILE SWIPER -------------------- */
/* Tile-/Card-Reihen als einzeiliger Slider. Swiper sperrt sich selbst, wenn
   alle Kacheln in eine Reihe passen (watchOverflow) — dann sind die Controls
   via [hidden] ausgeblendet und es sieht aus wie eine statische Reihe. */
.tile-swiper { position: relative; }
.tile-swiper .swiper { width: 100%; }
/* Slides gleich hoch wie das höchste Element der Reihe */
.tile-swiper .swiper-wrapper { align-items: stretch; }
.tile-swiper .swiper-slide { height: auto; }

.tile-swiper__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.tile-swiper__controls[hidden] { display: none; }

.tile-swiper__nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid hsl(0 0% 80%);
  background: var(--clr-white) center / 18px 18px no-repeat;
  background-image: url("../images/arrow-red.svg");
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), opacity var(--transition-base);
}
.tile-swiper__prev { transform: scaleX(-1); }
.tile-swiper__nav:hover { background-color: var(--clr-secondary-50); border-color: var(--clr-primary-400); }
.tile-swiper__nav:active { transform: scale(0.94); }
.tile-swiper__prev:active { transform: scaleX(-1) scale(0.94); }
.tile-swiper__nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
.tile-swiper__nav.swiper-button-lock { display: none; }

.tile-swiper__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: auto;
}
.tile-swiper__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: hsl(0 0% 75%);
  opacity: 1;
  transition: background var(--transition-base), transform var(--transition-base);
}
.tile-swiper__pagination .swiper-pagination-bullet-active {
  background: var(--clr-primary-400);
  transform: scale(1.25);
}
.tile-swiper__pagination.swiper-pagination-lock { display: none; }

.tile-red {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 280px;
  transition: background-color var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}
.tile-red::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 0%;
  height: 3px;
  background: var(--clr-white);
  transition: width var(--transition-base);
}
.tile-red:hover::after { width: 100%; }
.tile-red:hover { background: var(--clr-primary-500); }
.tile-red__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.tile-red__title {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.tile-red__arrow {
  width: 16px; height: 16px;
  background: url("../images/arrow-white.svg") center/contain no-repeat;
  transition: transform var(--transition-base);
}
.tile-red:hover .tile-red__arrow { transform: translateX(6px); }

.tile-light {
  background: var(--clr-secondary-100);
  color: var(--clr-secondary-400);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: background var(--transition-base);
}
.tile-light:hover { background: hsl(0 0% 88%); }
.tile-light__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
}
.tile-light__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 550;
}
.tile-light p { font-size: var(--fs-sm); color: var(--clr-quaternary-400); }
.tile-light__link {
  margin-top: auto;
  padding-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary-400);
  border-bottom: 2px solid currentColor;
  align-self: flex-start;
  transition: gap var(--transition-base);
}
.tile-light__link:hover { gap: .75rem; }

/* Service card (image + label) */
.service-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--clr-secondary-400);
  color: var(--clr-white);
  isolation: isolate;
}
.service-card__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, hsl(0 0% 22%), hsl(0 0% 8%));
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
  z-index: -1;
}
.service-card:hover .service-card__media { transform: scale(1.04); }
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.65) 100%);
}
.service-card__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.service-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-300);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  font-weight: 550;
}
.service-card__line {
  width: 56px; height: 2px;
  background: var(--clr-primary-400);
  margin-top: .25rem;
  transition: width var(--transition-base);
}
.service-card:hover .service-card__line { width: 96px; }

/* -------------------- ACCORDION NUMBERED -------------------- */
.acc-num {
  display: grid;
  gap: 0;
  counter-reset: acc;
}
.acc-num__item {
  border-top: 2px solid var(--clr-secondary-400);
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  counter-increment: acc;
}
.acc-num__item:last-child { border-bottom: 2px solid var(--clr-secondary-400); }
.acc-num__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 550;
  letter-spacing: var(--ls-tight);
  color: var(--clr-primary-400);
}
.acc-num__num::before { content: counter(acc, decimal-leading-zero); }
.acc-num__body h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin-bottom: .5rem;
}
.acc-num__body p { font-size: var(--fs-base); color: var(--clr-quaternary-400); line-height: var(--lh-relaxed); max-width: 60ch; }

.bleed--red .acc-num__item { border-color: rgba(255,255,255,0.35); }
.bleed--red .acc-num__num  { color: var(--clr-white); }
.bleed--red .acc-num__body p { color: rgba(255,255,255,0.88); }

/* -------------------- TABBED CONTENT -------------------- */
.tabbed {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 1000px) { .tabbed { grid-template-columns: 1fr; gap: var(--space-md); } }

.tab-list {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 6.5rem;
}
@media (max-width: 1000px) {
  .tab-list { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
}
.tab-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-secondary-400);
  background: transparent;
  border: none;
  border-top: 1px solid var(--clr-secondary-100);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tab-button:last-child { border-bottom: 1px solid var(--clr-secondary-100); }
.tab-button::before {
  content: "";
  width: 10px; height: 2px;
  background: currentColor;
  opacity: 0.3;
  transition: width var(--transition-base), opacity var(--transition-base);
}
.tab-button:hover { background: hsl(0 0% 96%); }
.tab-button.is-active {
  color: var(--clr-primary-400);
  background: var(--clr-secondary-50);
}
.tab-button.is-active::before {
  width: 22px; opacity: 1;
}
@media (max-width: 1000px) {
  .tab-button { border: 2px solid var(--clr-secondary-100); padding: .65rem 1rem; }
  .tab-button.is-active { border-color: var(--clr-primary-400); background: var(--clr-primary-400); color: var(--clr-white); }
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tabIn .35s cubic-bezier(.2,.6,.2,1); }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.tab-panel__head {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--clr-secondary-100);
}
.tab-panel__sublabel {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  margin-bottom: .5rem;
}

/* -------------------- BANNER (red CTA) -------------------- */
.banner {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding-block: var(--space-3xl);
}
.banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: end;
}
@media (max-width: 800px) { .banner__inner { grid-template-columns: 1fr; } }
.banner__inner h2 { color: var(--clr-white); max-width: 18ch; }
.banner__inner p { color: rgba(255,255,255,0.92); margin-top: var(--space-md); max-width: 50ch; }
.banner__actions { justify-self: end; align-self: end; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 800px) { .banner__actions { justify-self: start; } }

/* -------------------- BANNER SMALL (offset card) -------------------- */
.banner-small {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding: var(--space-xl) clamp(2rem, 4vw, 4rem);
  max-width: calc(100% - 2rem);
}

/* -------------------- BANNER MAP -------------------- */
.banner-map {
  min-height: 560px;
  background: url("../images/map.jpg") center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}
.banner-map__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--space-xl);
  align-items: stretch;
  width: 100%;
}
@media (max-width: 900px) { .banner-map__inner { grid-template-columns: 1fr; } }
.banner-map__indicator {
  align-self: flex-start;
  padding: 1rem 1.5rem;
  background: var(--clr-white);
  color: var(--clr-primary-400);
  font-family: var(--font-display);
  font-weight: 550;
  letter-spacing: var(--ls-tight);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  position: relative;
}
.banner-map__indicator::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--clr-primary-400);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(208,8,61,0.18), 0 0 0 9px rgba(208,8,61,0.08);
}
.banner-map__box {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 460px;
  justify-self: end;
}
.banner-map__box h3 { color: var(--clr-white); font-family: var(--font-display); font-weight: 550; }
.banner-map__box address { color: rgba(255,255,255,0.92); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.banner-map__box .links { display: flex; flex-direction: column; gap: .25rem; }
.banner-map__box .links a:hover { text-decoration: underline; }

/* WYSIWYG-Inhalt der Box (Firmenname/Adresse/Telefon/E-Mail) sauber rhythmisieren.
   Die Redaktion pflegt das als einzelne Absätze — hier kompakte, gestaltete Typo. */
.banner-map__info p { margin: 0; line-height: var(--lh-snug); color: rgba(255,255,255,0.92); }
.banner-map__info p + p { margin-top: 0.4rem; }
/* leerer  -Absatz = bewusster Trenner (z. B. Adresse → Kontakt), dezent halten */
.banner-map__info p:empty { display: none; }
.banner-map__info br + br { display: none; }
/* erster Absatz = Firmenname → als Headline */
.banner-map__info > p:first-child {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--clr-white);
  margin-bottom: var(--space-sm);
}
.banner-map__info > p:first-child strong { font-weight: inherit; }
.banner-map__info a {
  color: var(--clr-white);
  border-bottom: 1px solid rgba(255,255,255,0.45);
  transition: border-color var(--transition-base);
}
.banner-map__info a:hover { border-color: var(--clr-white); }
@media (max-width: 900px) {
  .banner-map { min-height: auto; background-position: 50% 20%; padding-block: var(--space-xl); }
  .banner-map__box { justify-self: stretch; max-width: 100%; }
}

/* -------------------- BANNER MAP — interaktiv (Zwei-Klick, MapLibre) -------------------- */
/* Live-Karte liegt als Canvas hinter Indikator + Box. Bis zum Klick zeigt der
   .banner-map-Hintergrund (map.jpg) — es wird NICHTS von Dritten geladen. */
/* Höhere Spezifität als MapLibres .maplibregl-map { position:relative }, das sonst
   (später geladen, gleiche Spezifität) gewinnt und den Container auf 0×0 kollabiert. */
.banner-map .banner-map__canvas { position: absolute; inset: 0; z-index: 0; }

/* Indikator + Box über der Karte; leere Flächen lassen Klicks zur Karte durch */
.banner-map--interactive .layout { position: relative; z-index: 2; pointer-events: none; }
.banner-map--interactive .banner-map__indicator,
.banner-map--interactive .banner-map__box { pointer-events: auto; }

.banner-map__consent {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm); text-align: center; padding: 1.5rem; width: 100%;
  background: rgba(31,31,31,0.30);
  color: var(--clr-white);
  cursor: pointer;
  transition: background var(--transition-base);
}
.banner-map__consent:hover { background: rgba(31,31,31,0.42); }
/* Ab Tablet die rote Box (rechts) freihalten — Consent-Inhalt nach links rücken */
@media (min-width: 901px) { .banner-map__consent { padding-right: 34%; } }
.banner-map__consent:focus-visible { outline: 2px solid var(--clr-tertiary-400); outline-offset: -4px; }
.banner-map__consent-title {
  font-family: var(--font-display); font-weight: 550; font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  background: var(--clr-primary-400); color: var(--clr-white);
  padding: .85rem 1.6rem;
}
.banner-map__consent-note { font-size: var(--fs-sm); max-width: 36ch; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }

.banner-map.is-map-activating .banner-map__consent,
.banner-map.is-map-loaded .banner-map__consent { display: none; }
.banner-map.is-map-loaded { background-image: none; }

/* "Dortmund 30 km" gilt nur für die Startansicht → bei erster Interaktion ausblenden */
.banner-map__indicator { transition: opacity var(--transition-base), visibility var(--transition-base); }
.banner-map.is-map-moved .banner-map__indicator { opacity: 0; visibility: hidden; }

/* Marker: klassische Pin-SVG (Tropfen + weißer Punkt) in Markenrot */
.hm-map-marker {
  color: var(--clr-primary-400);   /* SVG-Pfad nutzt fill:currentColor */
  line-height: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  cursor: pointer;
}
.hm-map-marker svg { display: block; }
.banner-map .maplibregl-ctrl-attrib { font-size: 11px; }

/* -------------------- BANNER GALLERY (logos / badges) -------------------- */
.banner-gallery {
  background: var(--clr-primary-400);
  padding-block: var(--space-xl);
}
.banner-gallery__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 2.5rem;
  color: var(--clr-white);
}
.banner-gallery__badge {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.banner-gallery__badge-mark {
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--clr-white);
}

/* -------------------- SLIDER TEXT (testimonials) -------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote-card {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.quote-card__stars { display: flex; gap: 2px; }
.quote-card__stars svg { width: 14px; height: 14px; fill: var(--clr-white); }
.quote-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 550;
}
.quote-card blockquote { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.92); }
.quote-card__by {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* -------------------- ACCORDION FAQ -------------------- */
.faq { max-width: 920px; }
.faq details {
  border-bottom: 2px solid var(--clr-primary-400);
}
.faq details:first-child { border-top: 2px solid var(--clr-primary-400); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  cursor: pointer;
  color: var(--clr-secondary-400);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 6px;
  background: url("../images/arrow-red.svg") center/contain no-repeat;
  transform: rotate(0deg);
  transition: transform var(--transition-base);
}
.faq details[open] summary::after { transform: rotate(90deg); }
.faq .answer {
  padding-bottom: 1.25rem;
  padding-right: 2rem;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--clr-quaternary-400);
  max-width: 70ch;
}

/* -------------------- TILES EXPANDABLE (Ansprechpartner) -------------------- */
.persons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem 1.25rem;
}
.person {
  display: flex;
  flex-direction: column;
}
.person__portrait {
  aspect-ratio: 3/4;
  background: var(--clr-secondary-100);
  overflow: hidden;
  position: relative;
}
.person__portrait > * { height: 100%; }
.person__name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); margin-top: 1rem; }
.person__role { font-size: var(--fs-sm); color: var(--clr-quaternary-400); margin-top: .25rem; }
.person__contact {
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: var(--fs-sm);
}
.person__contact a:hover { color: var(--clr-primary-400); }

/* -------------------- MATERIALS GRID (vakuumlöten subpage) -------------------- */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  /* Prevent siblings on the same row from stretching when one <details> opens */
  align-items: start;
}
.mat {
  background: var(--clr-white);
  border: 1px solid var(--clr-secondary-100);
}
.mat--flat {
  padding: 1.1rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--clr-secondary-400);
  cursor: default;
}
.mat > summary {
  padding: 1.1rem 1.25rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  transition: background var(--transition-fast);
}
.mat > summary::-webkit-details-marker { display: none; }
.mat > summary::after {
  content: "+";
  font-family: var(--font-display);
  color: var(--clr-primary-400);
  font-size: 1.25rem;
  transition: transform var(--transition-base);
}
.mat[open] > summary { background: var(--clr-secondary-50); }
.mat[open] > summary::after { content: "–"; transform: rotate(0deg); }
.mat__body {
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--clr-quaternary-400);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.mat__body p { font-size: var(--fs-sm); }
.mat__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  padding-top: .5rem;
  border-top: 1px solid var(--clr-secondary-100);
}
.mat__body ul { display: grid; gap: .15rem; }
.mat__body ul li { padding-left: 0; }
.mat__body ul li::before { content: none; }

/* -------------------- SPEC LIST -------------------- */
.spec {
  display: grid;
  grid-template-columns: fit-content(240px) minmax(0, 1fr);
  gap: .8rem 2rem;
  border-top: 2px solid var(--clr-secondary-400);
  padding-top: 1.5rem;
}
.spec dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  padding-top: 2px;
}
.spec dd { font-size: var(--fs-base); color: var(--clr-secondary-400); }

/* -------------------- FORM -------------------- */
.form {
  display: grid;
  gap: 1.2rem;
  width: 100%;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-base);
  padding: .6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--clr-primary-400);
  color: var(--clr-secondary-400);
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--clr-secondary-400); }
.field textarea { min-height: 120px; resize: vertical; padding-top: .6rem; }
.consent {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--clr-quaternary-400);
}
.consent input { margin-top: 4px; accent-color: var(--clr-primary-400); }
.consent a { text-decoration: underline; }

/* -------------------- GALLERY GRID -------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.gallery > * { background: var(--clr-secondary-100); overflow: hidden; aspect-ratio: 1/1; }
@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery > * { aspect-ratio: 4/3; }
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------- FOOTER -------------------- */
.site-footer {
  background: var(--clr-quaternary-400);
  color: var(--clr-white);
  padding-block: var(--space-2xl);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}
.footer-brand img { height: 38px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,0.8); font-size: var(--fs-sm); max-width: 38ch; line-height: var(--lh-relaxed); }
.footer-col h6 {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: rgba(255,255,255,0.7);
  margin-bottom: 1rem;
  font-weight: 550;
}
.footer-col ul { display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul li, .footer-col a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.9);
  line-height: var(--lh-relaxed);
}
.footer-col a { transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--clr-primary-300); }

.footer-divider { border-top: 2px solid rgba(255,255,255,0.85); }

.footer-bottom {
  padding-top: var(--space-md);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem 2rem;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
}
.footer-bottom p { font-size: var(--fs-xs); line-height: var(--lh-normal); }
.footer-bottom a:hover { color: var(--clr-white); }
.footer-legal {
  display: flex;
  gap: 1.25rem 1.5rem;
  flex-wrap: wrap;
  justify-self: center;
}
.footer-legal a { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
.footer-credit {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  letter-spacing: var(--ls-base);
  justify-self: end;
}
.footer-credit strong { color: rgba(255,255,255,0.95); font-weight: 600; letter-spacing: 0; }
.footer-credit:hover { color: rgba(255,255,255,0.95); }
@media (max-width: 900px) {
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-legal { justify-self: start; }
  .footer-credit { justify-self: start; }
}

/* -------------------- LEGAL PROSE -------------------- */
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  color: var(--clr-primary-400);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin-top: var(--space-md);
  margin-bottom: .5rem;
}
.prose p, .prose ul, .prose li {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--clr-quaternary-400);
}
.prose p + p, .prose p + ul, .prose p + h3, .prose ul + p, .prose ul + h3, .prose ul + h2 { margin-top: .9rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; }
.prose ul li { padding-left: .5rem; }
.prose ul li::before { content: none; }
.prose a { color: var(--clr-primary-400); border-bottom: 1px solid currentColor; }

/* -------------------- HELPERS -------------------- */
.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
}
.eyebrow-line::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--clr-primary-400);
}

.stack-md { display: grid; gap: var(--space-md); }
.stack-lg { display: grid; gap: var(--space-lg); }

/* anchor offset for sticky header */
html { scroll-padding-top: 100px; }
[id] { scroll-margin-top: 100px; }

/* Image placeholder when no image */
.image-slot-wrap { overflow: hidden; background: var(--clr-secondary-100); }
.image-slot-wrap image-slot { display: block; height: 100%; }

/* ============================================================
   WORDPRESS-SPECIFIC OVERRIDES (Hooks, CF7, admin-bar, RTE)
   ============================================================ */

/* Sticky header below WP admin-bar */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* WYSIWYG-Rendering: ensure paragraphs/lists in RTE-content look right */
.image-with-text__content p:not(:last-child),
.banner__inner p:not(:last-child),
.banner-small p:not(:last-child),
.banner-large p:not(:last-child),
.acc-num__body p:not(:last-child),
.tile-light p:not(:last-child),
.text__block p:not(:last-child) { margin-bottom: 1rem; }

.image-with-text__content ul,
.tab-panel ul,
.acc-num__body ul,
.banner-small ul,
.text__block ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.image-with-text__content ul li,
.tab-panel ul li,
.acc-num__body ul li,
.banner-small ul li,
.text__block ul li { padding-left: .35rem; margin-bottom: .25rem; }

/* Banner small (rotes Offset-Card auf Wärmebehandlung-Seite) */
.banner-small {
  background: var(--clr-primary-400);
  color: var(--clr-white);
  padding: var(--space-xl) clamp(2rem, 4vw, 4rem);
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-2xl);
}
.banner-small h2, .banner-small h3 { color: var(--clr-white); }
.banner-small p { color: rgba(255,255,255,0.92); max-width: 60ch; }
.banner-small .section-label { color: var(--clr-white); }

/* Text-Block (klassisches Layout für 1-Block-Variante) */
.text-block { display: flex; flex-direction: column; gap: var(--space-md); max-width: 65ch; }
.text-block h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.text-block p { color: var(--clr-quaternary-400); }
.text-block + .text-block { margin-top: var(--space-xl); }

/* Tabbed-Content Header-Image (für accordion_with_background mit Bildern) */
.tab-panel__hero {
  margin-bottom: var(--space-md);
  aspect-ratio: 21/9;
  background: var(--clr-secondary-100);
  overflow: hidden;
}
.tab-panel__hero img { width: 100%; height: 100%; object-fit: cover; }

/* CONTACT FORM 7 — re-style with .form look */
.hidden-fields-container,
.wpcf7-form .hidden-fields-container { display: none !important; }
.contact { width: 100%; }
.contact h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-md);
}
.contact__form-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.contact__form-inner > div {
  display: grid;
  gap: 1.2rem;
}
@media (max-width: 800px) {
  .contact__form-inner { grid-template-columns: 1fr; }
}
.acceptance-field {
  margin-top: var(--space-sm);
}
.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.wpcf7-form {
  display: block;
  width: 100%;
}
.wpcf7-form p { margin: 0; }
.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary-400);
}
.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select {
  font: inherit;
  font-size: var(--fs-base);
  padding: .6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--clr-primary-400);
  color: var(--clr-secondary-400);
  width: 100%;
  letter-spacing: var(--ls-base);
  text-transform: none;
  font-family: var(--font-body);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-bottom-color: var(--clr-secondary-400);
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; padding-top: .6rem; }

.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--clr-quaternary-400);
  text-transform: none;
  letter-spacing: var(--ls-base);
}
.wpcf7-form .wpcf7-acceptance input { margin-top: 4px; accent-color: var(--clr-primary-400); width: auto; }

.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
  background: var(--clr-primary-400);
  color: var(--clr-white);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-base);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color var(--transition-base);
  width: auto;
}
.wpcf7-submit:hover { background: var(--clr-primary-500); }

.wpcf7-response-output {
  border: 0 !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  background: var(--clr-secondary-50);
  font-size: var(--fs-sm);
}
.wpcf7-not-valid-tip { color: var(--clr-primary-400); font-size: var(--fs-xs); margin-top: .25rem; }

/* Footer spacer (when add_spacing_before_footer is set) */
.footer-spacer { height: var(--space-3xl); }

/* Skip link */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--clr-primary-400); color: var(--clr-white);
  padding: 8px 16px; z-index: var(--z-modal);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* Slider-Images Bild-Fallback (für slider_images, das jetzt als gallery rendert) */
.gallery a { display: block; height: 100%; }

/* Banner-Gallery: Logo-Bilder (kein Badge-Style!) */
.banner-gallery--logos .banner-gallery__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 2rem 3rem;
}
.banner-gallery--logos img {
  max-height: 64px;
  width: auto;
}

/* Persons: contact links should look subtle */
.person__contact a { color: var(--clr-quaternary-400); transition: color var(--transition-fast); }
.person__contact a:hover { color: var(--clr-primary-400); }

/* Tiles small mat detail anchor offset */
.mat[id] { scroll-margin-top: 100px; }


/* -------------------- READ MORE (lange Fließtexte) -------------------- */
/* JS fügt .is-collapsible nur hinzu, wenn der Text die Grenze überschreitet.
   Der Fade nutzt mask-image → funktioniert auf jedem Hintergrund (auch rot). */
.readmore { position: relative; }
.readmore.is-collapsible {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
  transition: max-height 0.42s cubic-bezier(.2,.6,.2,1);
}
.readmore.is-collapsible.is-expanded {
  -webkit-mask-image: none;
          mask-image: none;
}
@media (prefers-reduced-motion: reduce) {
  .readmore.is-collapsible { transition: none; }
}

.readmore__toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary-400);
  letter-spacing: var(--ls-base);
}
.readmore__toggle::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-base);
}
.readmore__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(1px);
}
.readmore__toggle:hover { color: var(--clr-primary-500); }

/* Auf rotem Grund (Banner) heller Toggle */
.bleed--red .readmore__toggle { color: var(--clr-white); }
.bleed--red .readmore__toggle:hover { color: rgba(255,255,255,0.85); }


/* ============ HM_KLICK_CURSOR : roter "Klick"-Cursor beim Hover ============ */
.hm-klick-cursor{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;will-change:transform}
.hm-klick-cursor__dot{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:var(--clr-primary-400);color:#fff;font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;transform:scale(0);transition:transform .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 24px rgba(0,0,0,.20)}
.hm-klick-cursor.is-on .hm-klick-cursor__dot{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.faq summary,.mat>summary{cursor:none}}

/* === HSR Politur 2026-06-22: Legal-Prose h4 + Ansprechpartner-Querformat === */
.prose h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-normal); margin-top: var(--space-md); margin-bottom: .5rem; color: var(--clr-quaternary-400); }
.prose p + h4, .prose ul + h4 { margin-top: var(--space-md); }
.person__portrait img[alt="Olaf Hendriks"] { object-position: 40% 0%; transform: translateY(-20.5%) scale(1.35); transform-origin: center top; }
.person__portrait img[alt="Kevin Rathaj"] { object-position: 52% 0%; transform: translateY(-23.5%) scale(1.25); transform-origin: center top; }
.person__portrait img[alt="Andreas Kuhn"] { object-position: 50% 0%; transform: translateY(-16.7%) scale(1.43); transform-origin: center top; }
.person__portrait img[alt="Markus Kipar"] { object-position: 52% 0%; transform: translateY(-20.3%) scale(1.33); transform-origin: center top; }

/* Tile-Jumplinks (tiles_small): Kaertchen als Sprung-Links */
a.mat--flat { text-decoration: none; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
a.mat--flat:hover { border-color: var(--clr-primary-400); color: var(--clr-primary-400); }

/* ===== Mobile-Politur 2026-06-29 ===== */
h1, h2, h3, h4, h5, h6 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 600px) {
  .page-header h1 { font-size: clamp(1.9rem, 9vw, 2.75rem); }
  .page-header__wrap { padding-block: clamp(48px, 12vw, 80px) clamp(36px, 8vw, 56px); }
  .section { padding-block: var(--space-2xl); }
}
@media (max-width: 860px) {
  .site-footer { padding-bottom: calc(var(--space-2xl) + 4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ===== HSR Eckig + Team-Zoom (2026-07-01) ===== */
/* Slider-Pfeile eckig statt rund (Swiper-Nav .tile-swiper__nav) */
.tile-swiper__nav { border-radius: 0; }
.tile-swiper__nav:hover { border-width: 2px; border-color: var(--clr-primary-400); }
/* Aktiv-Menue-Unterstrich: eckige Enden statt Pille */
.main-menu .is-current > a::after,
.main-menu .current-menu-item > a::after,
.main-menu .current-menu-parent > a::after,
.main-menu .current-menu-ancestor > a::after,
.main-menu a[aria-current=page]::after { border-radius: 0; }
/* Kontakt: Vertriebsteam-Bild naeher heranzoomen (Gesichter erkennbar) */
img[src*=harnischmacher-team-vertrieb] { transform: scale(1.32); transform-origin: center 42%; }


/* ===== Vertikaler Rhythmus - saubere rem-Skala (2026-07-01, ersetzt vorherigen Block) =====
   Feste rem-Stufen pro Breakpoint, KEIN vw auf Section-Ebene -> immer glatte px (Root 16px).
   section 3.5rem/56, section--sm 3rem/48, Hero->1.Modul 5rem/80, banner 4.5rem/72,
   banner_small-Margin 1.5rem/24, contact/map/gallery 56, footer-spacer 3rem/48. */
/* Desktop (>=901px) */
.section { padding-block: 3.5rem; }
.section--sm { padding-block: 3rem; }
.page-header + .section,
.hero + .section,
.hero2 + .section { padding-top: 5rem; }
.banner { padding-block: 4.5rem; }
.banner-small { margin-block: 1.5rem; }
.section:has(.contact) { padding-block: 3.5rem; }
.banner-map { padding-block: 3.5rem; }
.banner-gallery { padding-block: 3.5rem 2.5rem; }
.footer-spacer { height: 3rem; }
/* Tablet (601-900px) */
@media (max-width: 900px) {
  .section { padding-block: 3rem; }
  .section--sm { padding-block: 2.5rem; }
  .page-header + .section,
  .hero + .section,
  .hero2 + .section { padding-top: 4rem; }
  .banner { padding-block: 3.5rem; }
  .banner-small { margin-block: 1.25rem; }
  .section:has(.contact) { padding-block: 3rem; }
  .banner-map { padding-block: 3rem; }
  .banner-gallery { padding-block: 3rem 2rem; }
  .footer-spacer { height: 2.5rem; }
}
/* Phone (<=600px) */
@media (max-width: 600px) {
  .section { padding-block: 2.5rem; }
  .section--sm { padding-block: 2rem; }
  .page-header + .section,
  .hero + .section,
  .hero2 + .section { padding-top: 3rem; }
  .banner { padding-block: 3rem; }
  .banner-small { margin-block: 1rem; }
  .section:has(.contact) { padding-block: 2.5rem; }
  .banner-map { padding-block: 2.5rem; }
  .banner-gallery { padding-block: 2.5rem 1.5rem; }
  .footer-spacer { height: 2rem; }
}
/* ===== Ende saubere rem-Skala ===== */

/* Spec-Liste (Kennzahlen aus image_with_text) auf schmalen Screens stapeln
   statt 2-spaltig - sonst laufen lange Labels (FAMILIENUNTERNEHMEN,
   QUALITAETSMANAGEMENT) ueber den Wert und ueberlappen. */
@media (max-width: 768px) {
  .spec { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .spec dt { margin-top: 1rem; }
  .spec dt:first-of-type { margin-top: 0; }
}