/* Heidrich Storefront – CD 2026 landingpage layer, Versuch 3 / fachliche Verfeinerung */
@font-face { font-family: Raleway; src: url('./assets/fonts/Raleway-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Raleway; src: url('./assets/fonts/Raleway-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Raleway; src: url('./assets/fonts/Raleway-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Roboto; src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Roboto; src: url('./assets/fonts/Roboto-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Roboto; src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
    --heidrich-blue: #183a68;
    --heidrich-red: #c61624;
    --heidrich-navy: #132a4b;
    --heidrich-graphite: #31343b;
    --heidrich-muted: #727171;
    --heidrich-line: #d9d9d9;
    --heidrich-surface: rgba(24, 58, 104, .055);
    --heidrich-white: #fff;
    --heidrich-shadow: 0 20px 54px rgba(19, 42, 75, .11);
    --heidrich-radius: 2px;
    /* Hoehe des mitlaufenden Kopfes. Wird in den Umbruchpunkten
       nachgezogen; die Sprungmarken rechnen damit. */
    --heidrich-header: 146px;
}

html { scroll-behavior: smooth; }
/* Jedes Sprungziel haelt Abstand zum mitlaufenden Kopf, sonst liegt die
   Ueberschrift nach dem Klick darunter. */
#main, #sortiment, #projektfinder, #einsatzbereiche, #unternehmen, #kontakt,
.heidrich-product-card { scroll-margin-top: calc(var(--heidrich-header) + 14px); }
body { margin: 0; color: var(--heidrich-graphite); background: #fff; font-family: Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body *, body *::before, body *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.heidrich-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

h1, h2, h3, .heidrich-product-card strong, .heidrich-projectfinder__tabs span { margin-top: 0; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif; }
h1 { font-size: clamp(2.7rem, 5.4vw, 5.2rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; }
h3 { line-height: 1.18; }
p { line-height: 1.66; }

.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; padding: .75rem 1rem; color: #fff; background: var(--heidrich-navy); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--heidrich-blue); }
.heidrich-hero :focus-visible,
.heidrich-projectfinder :focus-visible,
.heidrich-industries :focus-visible,
.heidrich-company__copy :focus-visible { outline-color: var(--heidrich-navy); box-shadow: 0 0 0 5px #fff; }

.header-main { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--heidrich-line); }
.header-main .container { width: min(1240px, calc(100% - 64px)); max-width: none; margin-inline: auto; padding: 0; }
.header-row { min-height: 92px; display: grid; grid-template-columns: 280px 1fr auto auto; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.header-logo-main-img { width: 252px; height: auto; }
.header-logo-main-link { display: inline-block; }
.header-search-col { display: block; }
.header-search-form { position: relative; margin: 0; }
.header-search-form .input-group { position: relative; display: flex; border-bottom: 2px solid var(--heidrich-blue); }
.header-search-input { width: 100%; min-height: 48px; padding: 0 3.25rem 0 .15rem; border: 0; background: transparent; color: var(--heidrich-graphite); }
.header-search-input::placeholder { color: var(--heidrich-muted); }
.header-search-input:focus { outline: 0; }
.header-search-btn { position: absolute; right: 0; inset-block: 0; width: 48px; border: 0; color: var(--heidrich-blue); background: transparent; cursor: pointer; }
.header-search-btn svg, .header-actions-btn svg { width: 23px; height: 23px; }
.header-search-status { position: absolute; margin: .35rem 0 0; color: var(--heidrich-muted); font-size: .75rem; }
.header-actions-col { display: flex; gap: .25rem; }
.header-actions-btn { display: grid; width: 44px; height: 44px; place-items: center; border: 0; color: var(--heidrich-blue); background: transparent; cursor: pointer; }
.header-actions-btn:hover { color: var(--heidrich-red); }
.nav-main-toggle-btn, .mobile-search-toggle { display: none; }
.nav-main { border-top: 1px solid rgba(24,58,104,.1); background: #fff; }
.main-navigation { width: min(1240px, calc(100% - 64px)); min-height: 54px; margin-inline: auto; display: flex; align-items: stretch; gap: 2rem; }
.main-navigation-link { position: relative; display: flex; align-items: center; text-decoration: none; color: var(--heidrich-graphite); font-weight: 500; font-size: .93rem; }
.main-navigation-link::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--heidrich-red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.main-navigation-link:hover, .main-navigation-link.active { color: var(--heidrich-blue); }
.main-navigation-link:hover::after, .main-navigation-link.active::after { transform: scaleX(1); }

.heidrich-eyebrow { margin: 0 0 1rem; color: var(--heidrich-blue); font-size: .76rem; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.heidrich-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 2px; margin: 0 .75rem .22rem 0; background: var(--heidrich-red); }
.heidrich-eyebrow--light { color: rgba(255,255,255,.78); }
.heidrich-eyebrow--brand { letter-spacing: .08em; text-transform: none; }
.heidrich-section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.heidrich-section-heading { margin-bottom: clamp(2.5rem, 5vw, 4.25rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; }
.heidrich-section-heading > p { max-width: 30rem; margin: 0 0 .3rem auto; color: var(--heidrich-muted); font-size: 1.04rem; }

/* 660 statt 730 Pixel: Mit dem mitlaufenden Kopf von 146 Pixeln endet der
   Hero damit auf einem 900 Pixel hohen Sichtfenster bei 806 Pixeln, die
   Vertrauenszeile darunter ist also vollstaendig sichtbar. Die Bildcollage
   bleibt unangetastet; ihre Eigenhoehe bestimmt weiterhin die Zeile. */
.heidrich-hero { position: relative; min-height: 660px; overflow: hidden; color: #fff; background: var(--heidrich-navy); }
.heidrich-hero__grid { position: relative; z-index: 1; min-height: 660px; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.heidrich-hero__content { max-width: 690px; padding-block: 5.5rem; }
.heidrich-hero h1 { margin-bottom: 1.75rem; color: #fff; font-weight: 500; }
.heidrich-hero h1 strong { display: block; color: #fff; font-weight: 700; text-transform: uppercase; }
.heidrich-claim-dot { color: var(--heidrich-red); }
.heidrich-hero__lead { max-width: 620px; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.heidrich-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .85rem; }
.heidrich-button { display: inline-flex; min-height: 50px; padding: .86rem 1.35rem; align-items: center; justify-content: center; gap: .6rem; border: 2px solid var(--heidrich-blue); border-radius: var(--heidrich-radius); color: #fff; background: var(--heidrich-blue); text-decoration: none; font-weight: 700; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.heidrich-button:hover { border-color: var(--heidrich-navy); background: var(--heidrich-navy); transform: translateY(-2px); }
.heidrich-button--light { border-color: #fff; color: var(--heidrich-navy); background: #fff; }
.heidrich-button--light:hover { border-color: var(--heidrich-navy); color: #fff; background: var(--heidrich-navy); }
.heidrich-button--outline { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.heidrich-button--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.heidrich-hero__visual { position: relative; min-height: 640px; display: grid; place-items: center; }
.heidrich-hero__showcase { width: min(650px, 100%); height: 520px; display: grid; grid-template-columns: 1.25fr .86fr .86fr; grid-template-rows: repeat(3, 1fr); grid-template-areas: "merz lighttower tsr" "merz cable extension" "merz pump pump"; gap: clamp(.5rem, 1vw, .9rem); }
.heidrich-hero__product { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 1fr auto; padding: .7rem; color: #fff; background: transparent; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.heidrich-hero__product:hover { background: rgba(255,255,255,.055); transform: translateY(-3px); }
.heidrich-hero__product:focus-visible { background: rgba(255,255,255,.075); }
.heidrich-hero__product-image { min-height: 0; display: grid; place-items: center; }
.heidrich-hero__product-image img { width: auto; height: 100px; max-width: 94%; object-fit: contain; object-position: center; filter: drop-shadow(0 15px 14px rgba(19,42,75,.38)); }
.heidrich-hero__product-label { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: #fff; font-family: Raleway, Arial, sans-serif; font-size: .78rem; line-height: 1.25; font-weight: 700; }
.heidrich-hero__product-label > span { flex: 0 0 auto; color: var(--heidrich-red); font-size: 1.05rem; transition: transform .2s ease; }
.heidrich-hero__product:hover .heidrich-hero__product-label > span { transform: translateX(4px); }
.heidrich-hero__product--merz { grid-area: merz; padding: .5rem .75rem .8rem; }
.heidrich-hero__product--merz img { width: 100%; height: 420px; max-width: none; filter: drop-shadow(0 20px 18px rgba(19,42,75,.42)); }
.heidrich-hero__product--merz .heidrich-hero__product-label { font-size: 1.15rem; }
.heidrich-hero__product--lighttower { grid-area: lighttower; }
.heidrich-hero__product--lighttower img { height: 112px; }
.heidrich-hero__product--tsr { grid-area: tsr; }
.heidrich-hero__product--tsr img { height: 112px; }
.heidrich-hero__product--cable { grid-area: cable; }
.heidrich-hero__product--cable img { height: 110px; }
.heidrich-hero__product--extension { grid-area: extension; }
.heidrich-hero__product--extension img { height: 104px; }
.heidrich-hero__product--pump { grid-area: pump; grid-template-columns: 1fr auto; grid-template-rows: 1fr; align-items: end; }
.heidrich-hero__product--pump .heidrich-hero__product-image { grid-column: 2; grid-row: 1; align-self: stretch; min-width: 170px; }
.heidrich-hero__product--pump img { height: 118px; }
.heidrich-hero__product--pump .heidrich-hero__product-label { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: .2rem; }

.heidrich-proof { position: relative; z-index: 4; border-bottom: 1px solid var(--heidrich-line); background: #fff; }
.heidrich-proof__grid { min-height: 116px; display: grid; grid-template-columns: repeat(3, 1fr); }
.heidrich-proof__item { display: flex; gap: 1rem; align-items: center; padding: 1.5rem 2rem; border-right: 1px solid var(--heidrich-line); }
.heidrich-proof__item:first-child { padding-left: 0; }
.heidrich-proof__item:last-child { border-right: 0; }
.heidrich-proof__icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border: 1px solid rgba(24,58,104,.28); border-radius: 50%; color: var(--heidrich-blue); font-size: .7rem; font-weight: 700; }
.heidrich-proof__item strong, .heidrich-proof__item div span { display: block; }
.heidrich-proof__item strong { margin-bottom: .25rem; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif; font-size: .98rem; }
.heidrich-proof__item div span { color: var(--heidrich-muted); font-size: .86rem; }

.heidrich-products { background: rgba(24,58,104,.055); }
.heidrich-product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.heidrich-product-card { position: relative; min-width: 0; min-height: 318px; display: grid; grid-template-rows: 178px 1fr; overflow: hidden; border: 1px solid rgba(24,58,104,.22); background: #fff; box-shadow: 0 10px 26px rgba(19,42,75,.055); }
.heidrich-product-card::before { content: ''; position: absolute; z-index: 3; top: 0; left: 0; width: 42px; height: 4px; background: var(--heidrich-red); }
.heidrich-product-card__image { display: grid; place-items: center; padding: 1.1rem; background: var(--heidrich-surface); }
.heidrich-product-card__image img { width: 100%; height: 145px; object-fit: contain; }
.heidrich-product-card__body { min-width: 0; display: flex; padding: 1.2rem 1.15rem 1.05rem; flex-direction: column; }
.heidrich-product-card strong { display: block; margin-bottom: .55rem; font-size: clamp(.98rem, 1.25vw, 1.15rem); line-height: 1.18; overflow-wrap: anywhere; }
.heidrich-product-card small { display: block; margin-bottom: 0; color: var(--heidrich-muted); line-height: 1.42; }

.heidrich-projectfinder { color: #fff; background: var(--heidrich-navy); }
.heidrich-projectfinder .heidrich-shell { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.heidrich-projectfinder__intro h2 { color: #fff; }
.heidrich-projectfinder__intro > p:last-child { color: rgba(255,255,255,.82); font-size: 1.04rem; }
.heidrich-projectfinder__panel { min-width: 0; background: #fff; box-shadow: 0 30px 80px rgba(5,23,45,.24); }
.heidrich-projectfinder__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--heidrich-line); }
.heidrich-projectfinder__tabs button { min-width: 0; min-height: 100px; padding: 1rem; border: 0; border-right: 1px solid var(--heidrich-line); color: var(--heidrich-muted); background: rgba(24,58,104,.045); cursor: pointer; text-align: left; }
.heidrich-projectfinder__tabs button:last-child { border-right: 0; }
.heidrich-projectfinder__tabs button[aria-selected="true"] { position: relative; color: var(--heidrich-blue); background: #fff; }
.heidrich-projectfinder__tabs button[aria-selected="true"]::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--heidrich-red); }
.heidrich-projectfinder__tabs span, .heidrich-projectfinder__tabs small { display: block; }
.heidrich-projectfinder__tabs span { margin-bottom: .35rem; color: inherit; font-size: 1.12rem; font-weight: 700; }
.heidrich-projectfinder__tabs small { line-height: 1.35; }
.heidrich-projectfinder__results { min-height: 430px; padding: clamp(2rem, 4vw, 3.4rem); color: var(--heidrich-graphite); }
.heidrich-projectfinder__results article { animation: heidrich-panel-in .22s ease; }
@keyframes heidrich-panel-in { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.heidrich-projectfinder__label { margin: 0 0 .55rem; color: var(--heidrich-red); font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.heidrich-projectfinder__results h3 { margin-bottom: 1.25rem; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.heidrich-projectfinder__results ul { margin: 0 0 1.75rem; padding: 0; display: grid; gap: .6rem; list-style: none; }
.heidrich-projectfinder__results li { position: relative; padding-left: 1.5rem; }
.heidrich-projectfinder__results li::before { content: '✓'; position: absolute; left: 0; color: var(--heidrich-blue); font-weight: 700; }


.heidrich-industries { position: relative; overflow: hidden; color: #fff; background: var(--heidrich-navy); }
.heidrich-industries__layout { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.heidrich-industries h2, .heidrich-industries h3 { color: #fff; }
.heidrich-industries__intro > p:last-child { color: rgba(255,255,255,.82); font-size: 1.03rem; }
.heidrich-usecase-list { border-top: 1px solid rgba(255,255,255,.32); }
.heidrich-usecase-list article { min-height: 96px; display: grid; grid-template-columns: 10px 1fr 28px; gap: 1.25rem; align-items: center; padding: 1.15rem .15rem; border-bottom: 1px solid rgba(255,255,255,.32); }
.heidrich-usecase-list__mark { width: 3px; height: 34px; background: var(--heidrich-red); }
.heidrich-usecase-list h3 { margin: 0 0 .25rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.heidrich-usecase-list p { margin: 0; color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.45; }
.heidrich-usecase-list__arrow { color: #fff; font-size: 1.25rem; }


.heidrich-company { padding-block: clamp(5rem, 8vw, 8rem); background: #fff; }
/* Randlos ueber die volle Seitenbreite, wie der Abschnitt Einsatzbereiche.
   Der Block liegt dafuer im HTML ausserhalb von .heidrich-shell. Bewusst
   nicht ueber 100vw geloest: das erzeugt bei sichtbarer Scrollleiste
   einen waagerechten Ueberlauf. Damit der Text nicht an der
   Bildschirmkante klebt, fluchtet die Textspalte links mit dem Raster
   der uebrigen Abschnitte. */
.heidrich-company__intro { display: grid; grid-template-columns: 1.03fr .97fr; min-height: 540px; }
.heidrich-company__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 5vw, 5rem); color: #fff; background: var(--heidrich-navy); }
.heidrich-company__copy { padding-left: max(clamp(3rem, 5vw, 5rem), calc((100vw - min(1240px, 100vw - 64px)) / 2)); }
.heidrich-company__copy h2 { max-width: 690px; color: #fff; }
.heidrich-company__copy > p { max-width: 680px; color: rgba(255,255,255,.82); }
.heidrich-company__lead { margin: 1.7rem 0 .45rem; color: #fff !important; font-size: clamp(1.08rem, 1.5vw, 1.28rem); font-weight: 700; }
.heidrich-company__claim { margin: 1.5rem 0 0; padding: .2rem 0 .2rem 1.15rem; border-left: 3px solid var(--heidrich-red); color: #fff !important; font-family: Raleway, Arial, sans-serif !important; font-size: 1.06rem; font-weight: 700; }
.heidrich-company__visual { position: relative; min-height: 420px; display: grid; place-items: center; overflow: hidden; background: var(--heidrich-navy); }
.heidrich-company__visual::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 6px; background: var(--heidrich-red); }
/* Bildfeld im Unternehmensteil. Das Foto fuellt das Feld; die rote Ecke aus
   ::before bleibt als Markenakzent darueber liegen. Die frueher hier gesetzte
   Ziffer "01" ist entfallen, sie gehoerte zum Bildplatzhalter. */
.heidrich-company__visual > img { grid-area: 1 / 1; align-self: center; justify-self: center; }
.heidrich-company__capabilities { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--heidrich-line); border-top: 0; }
.heidrich-company__capabilities article { min-height: 270px; padding: clamp(2rem, 3.5vw, 3.25rem); border-right: 1px solid var(--heidrich-line); background: #fff; }
.heidrich-company__capabilities article:last-child { border-right: 0; }
.heidrich-company__number { display: inline-block; margin-bottom: 2.3rem; color: var(--heidrich-red); font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.heidrich-company__capabilities h3 { margin-bottom: .7rem; font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.heidrich-company__capabilities p { margin: 0; color: var(--heidrich-muted); }
.heidrich-company__history { padding-block: clamp(5rem, 8vw, 7.5rem); }
.heidrich-company__history-heading { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem, 7vw, 7rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.heidrich-company__history-heading h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.25rem); letter-spacing: -.035em; }
.heidrich-company__history-heading > p { margin: 0; color: var(--heidrich-muted); }
.heidrich-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(24,58,104,.35); list-style: none; }
.heidrich-timeline li { position: relative; min-height: 190px; padding: 2.25rem 1.5rem 0 0; }
.heidrich-timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--heidrich-red); }
.heidrich-timeline span, .heidrich-timeline strong, .heidrich-timeline small { display: block; }
.heidrich-timeline span { margin-bottom: .8rem; color: var(--heidrich-blue); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.heidrich-timeline strong { margin-bottom: .55rem; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif !important; font-size: 1.08rem; }
.heidrich-timeline small { max-width: 220px; color: var(--heidrich-muted); font-size: .86rem; line-height: 1.55; }
.heidrich-team { padding: clamp(4rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 4rem); background: var(--heidrich-surface); }
.heidrich-team__intro { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(24,58,104,.3); }
.heidrich-team__intro h3 { margin: 0; max-width: 700px; font-size: clamp(2rem, 3.4vw, 3.25rem); letter-spacing: -.035em; }
.heidrich-team__intro > p { margin: 0; max-width: 620px; color: var(--heidrich-muted); }
.heidrich-team-group { padding-block: clamp(2.75rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(24,58,104,.22); }
.heidrich-team-group:last-child { padding-bottom: 0; border-bottom: 0; }
.heidrich-team-group__heading { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; margin-bottom: 1.75rem; }
.heidrich-team-group__heading > span { color: var(--heidrich-red); font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.heidrich-team-group__heading h4 { margin: 0; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif !important; font-size: clamp(1.4rem, 2vw, 1.85rem); }
.heidrich-team-group__heading p { margin: .25rem 0 0; color: var(--heidrich-muted); }
.heidrich-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--heidrich-line); background: var(--heidrich-line); }
/* Die rote Kante trug bisher jede der 17 Karten. Als Akzent wirkt sie nur,
   wenn sie selten ist: jetzt einmal je Standortgruppe, an der ersten Karte.
   Den Gruppenbezug tragen ohnehin die roten Ziffern der Ueberschrift. */
.heidrich-team-card { min-width: 0; background: #fff; }
.heidrich-team-grid > .heidrich-team-card:first-child { box-shadow: inset 0 4px 0 var(--heidrich-red); }
.heidrich-team-card > img, .heidrich-team-card__placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #eef2f7; }
.heidrich-team-card > div:last-child { min-height: 150px; padding: 1.15rem 1.2rem 1.3rem; }
.heidrich-team-card strong, .heidrich-team-card > div:last-child span { display: block; }
/* Direktkontakt auf der Teamkarte. Telefon und Mailadresse sind anklickbar,
   auf dem Handy waehlt beziehungsweise oeffnet ein Tippen direkt. Die Adressen
   sind laenger als die Kartenbreite, deshalb Umbruch an jeder Stelle. */
.heidrich-team-card__contact { margin-top: .45rem; font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.heidrich-team-card__contact a { color: var(--heidrich-blue); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(24,58,104,.35); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.heidrich-team-card__contact a:hover { color: var(--heidrich-red); text-decoration-color: var(--heidrich-red); }
.heidrich-team-card strong { color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif !important; font-size: 1rem; line-height: 1.25; }
.heidrich-team-card > div:last-child span { margin-top: .4rem; color: var(--heidrich-muted); font-size: .79rem; line-height: 1.4; }
.heidrich-team-card__placeholder { display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--heidrich-blue); }
.heidrich-team-card__placeholder small { color: var(--heidrich-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Verbindlich fuer die drei Unternehmensfotos: immer vollstaendig zeigen und
   proportional verkleinern. aspect-ratio und object-fit werden ausdruecklich
   zurueckgesetzt, damit keine spaetere Regel das Bild stauchen oder
   beschneiden kann. Das Seitenverhaeltnis kommt allein aus der Datei. */
.heidrich-company__visual > img,
.heidrich-band img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }

/* Bildband. Bricht lange Textstrecken auf und belegt die Aussage daneben.
   Bewusst statisch: kein automatischer Wechsel, kein Skript, keine
   Bedienelemente. Die rote Ecke wiederholt den Akzent aus dem Bildfeld. */
.heidrich-band { position: relative; margin: clamp(2.5rem, 5vw, 4rem) 0; overflow: hidden; background: var(--heidrich-navy); }
.heidrich-band::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 42px; height: 6px; background: var(--heidrich-red); }
.heidrich-band img { display: block; }

/* Teamkarten ohne Foto zeigen die Initialen statt eines Platzhaltersymbols.
   Das wirkt als bewusste Gestaltung und nicht als fehlendes Bild. Kommt ein
   Foto nach, ersetzt ein <img> den kompletten Platzhalter-Block. */
.heidrich-team-initials { display: grid; place-content: center; width: 88px; height: 88px; border: 4px solid var(--heidrich-blue); border-radius: 50%; background: #fff; color: var(--heidrich-blue); font-family: Raleway, Arial, sans-serif; font-size: 1.65rem; font-weight: 800; letter-spacing: .04em; }

.heidrich-contact { position: relative; overflow: hidden; padding-block: clamp(4rem, 7vw, 6rem); background: #fff; }
.heidrich-contact h2 { margin-bottom: .8rem; }
.heidrich-contact p:last-child { max-width: 680px; margin-bottom: 0; color: var(--heidrich-muted); }

.footer-main { padding-top: 4.5rem; border-top: 1px solid var(--heidrich-line); color: var(--heidrich-muted); background: #fff; }
.footer-columns { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 3rem; }
.footer-brand img { width: 230px; margin-bottom: 1.4rem; }
.footer-brand p { max-width: 340px; }
.footer-main h3 { margin-bottom: 1.25rem; color: var(--heidrich-navy); font-size: 1rem; }
.footer-main ul { margin: 0; padding: 0; display: grid; gap: .7rem; list-style: none; }
.footer-main a { color: var(--heidrich-graphite); text-decoration: none; }
.footer-main a:hover { color: var(--heidrich-blue); text-decoration: underline; text-decoration-color: var(--heidrich-red); text-underline-offset: .25rem; }
.footer-bottom { margin-top: 3.5rem; padding-block: 1.5rem; border-top: 1px solid var(--heidrich-line); color: var(--heidrich-muted); font-size: .82rem; }

@media (max-width: 1080px) {
    .header-row { grid-template-columns: 200px 1fr auto auto; gap: 1rem; }
    .header-logo-main-img { width: 210px; }
    .main-navigation { gap: 1.5rem; }
    .heidrich-hero { min-height: 650px; }
    .heidrich-hero__grid { min-height: 650px; grid-template-columns: .95fr 1.05fr; gap: 2rem; }
    .heidrich-hero__visual { min-height: 540px; }
    .heidrich-hero__showcase { height: 460px; }
    .heidrich-hero__product-image img { height: 86px; }
    .heidrich-hero__product--merz img { width: 100%; height: 355px; }
    .heidrich-hero__product--lighttower img,
    .heidrich-hero__product--tsr img,
    .heidrich-hero__product--cable img { height: 92px; }
    .heidrich-hero__product--pump img { height: 98px; }
    .heidrich-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .heidrich-shell, .header-main .container, .main-navigation { width: min(100% - 40px, 1240px); }
    :root { --heidrich-header: 86px; }
    .header-row { min-height: 86px; grid-template-columns: 1fr auto auto; }
    .header-logo-main-img { width: 190px; }
    .header-search-col { display: none; grid-column: 1 / -1; padding-bottom: 1rem; }
    .header-search-col.is-open { display: block; }
    .header-row:has(.header-search-col.is-open) { padding-top: .75rem; }
    .nav-main-toggle-btn, .mobile-search-toggle { display: grid; }
    .nav-main { display: none; }
    /* Bei mitlaufendem Kopf darf das ausgeklappte Menue nicht ueber den
       Bildschirm hinauslaufen; es bekommt eine eigene Bildlaufmoeglichkeit. */
    .nav-main.is-open { display: block; max-height: calc(100dvh - var(--heidrich-header)); overflow-y: auto; }
    .main-navigation { min-height: 0; padding-block: .5rem 1rem; flex-direction: column; gap: 0; }
    .main-navigation-link { min-height: 46px; border-bottom: 1px solid var(--heidrich-line); }
    .main-navigation-link::after { display: none; }
    .heidrich-hero__grid, .heidrich-projectfinder .heidrich-shell, .heidrich-industries__layout { grid-template-columns: 1fr; }
    .heidrich-hero__grid { padding-block: 4.5rem 3rem; }
    .heidrich-hero__content { max-width: 730px; padding-block: 0; }
    .heidrich-hero__visual { min-height: 565px; width: min(620px, 100%); margin-inline: auto; }
    .heidrich-hero__showcase { width: min(610px, calc(100% - 24px)); }
    .heidrich-proof__grid { grid-template-columns: 1fr; padding-block: .75rem; }
    .heidrich-proof__item, .heidrich-proof__item:first-child { padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--heidrich-line); }
    .heidrich-proof__item:last-child { border-bottom: 0; }
    .heidrich-section-heading { grid-template-columns: 1fr; gap: 1.25rem; }
    .heidrich-section-heading > p { margin-left: 0; }
    .heidrich-product-grid { grid-template-columns: repeat(2, 1fr); }
    .heidrich-product-card { min-height: 310px; }
    .heidrich-projectfinder .heidrich-shell { gap: 2.5rem; }
    .heidrich-company__intro { grid-template-columns: 1fr; }
    .heidrich-company__visual { min-height: 360px; }
    .heidrich-company__capabilities { grid-template-columns: 1fr; }
    .heidrich-company__capabilities article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--heidrich-line); }
    .heidrich-company__capabilities article:last-child { border-bottom: 0; }
    .heidrich-company__number { margin-bottom: 1.25rem; }
    .heidrich-company__history-heading { grid-template-columns: 1fr; gap: 1.25rem; }
    .heidrich-timeline { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
    .heidrich-timeline li { min-height: 160px; }
    .heidrich-team__intro { grid-template-columns: 1fr; gap: 1.25rem; }
    .heidrich-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-columns { grid-template-columns: 1.5fr repeat(2, 1fr); }
    .footer-columns > div:last-child { grid-column: 2; }
}

@media (max-width: 560px) {
    .heidrich-shell, .header-main .container, .main-navigation { width: min(100% - 32px, 1240px); }
    :root { --heidrich-header: 76px; }
    .header-row { min-height: 76px; gap: .6rem; }
    .header-logo-main-img { width: 190px; }
    .header-actions-col { gap: 0; }
    .header-actions-btn { width: 44px; height: 44px; }
    .account-action { display: none; }
    .heidrich-section { padding-block: 4.25rem; }
    h1 { font-size: clamp(2.65rem, 13vw, 3.7rem); }
    h2 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
    .heidrich-hero__grid { padding-block: 4rem 2.5rem; }
    .heidrich-hero__lead { font-size: 1rem; }
    .heidrich-actions { align-items: stretch; flex-direction: column; }
    .heidrich-button { width: 100%; }
    .heidrich-hero__visual { min-height: 550px; place-items: start center; }
    .heidrich-hero__showcase { width: 100%; height: 535px; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1.15fr .9fr .78fr .78fr; grid-template-areas: "merz lighttower" "merz tsr" "cable extension" "pump pump"; gap: .35rem; }
    .heidrich-hero__product { padding: .45rem; }
    .heidrich-hero__product-label { font-size: .66rem; line-height: 1.18; }
    .heidrich-hero__product--merz { padding: .25rem .4rem .55rem; }
    .heidrich-hero__product--merz img { width: 100%; height: 265px; }
    .heidrich-hero__product--merz .heidrich-hero__product-label { font-size: .82rem; }
    .heidrich-hero__product--lighttower img { height: 80px; }
    .heidrich-hero__product--tsr img { height: 78px; }
    .heidrich-hero__product--cable img { height: 74px; }
    .heidrich-hero__product--extension img { height: 70px; }
    .heidrich-hero__product--pump .heidrich-hero__product-image { min-width: 110px; }
    .heidrich-hero__product--pump img { height: 76px; }
    .heidrich-product-grid { grid-template-columns: 1fr; }
    .heidrich-product-card { min-height: 218px; grid-template-columns: 38% 62%; grid-template-rows: 1fr; }
    .heidrich-product-card__image img { height: 158px; }
    .heidrich-product-card__body { padding: 1.35rem 1rem; }
    .heidrich-product-card strong { font-size: 1rem; }
    .heidrich-product-card small { margin-bottom: 1.1rem; font-size: .78rem; }
    .heidrich-projectfinder__tabs { grid-template-columns: 1fr; }
    .heidrich-projectfinder__tabs button { min-height: 72px; border-right: 0; border-bottom: 1px solid var(--heidrich-line); }
    .heidrich-projectfinder__tabs button[aria-selected="true"]::before { inset: 0 auto 0 0; width: 4px; height: auto; }
    .heidrich-projectfinder__results { min-height: 540px; padding: 1.6rem; }
    .heidrich-projectfinder__results .heidrich-button { width: 100%; }
    .heidrich-usecase-list article { grid-template-columns: 8px 1fr 22px; gap: .85rem; }
    .heidrich-company__copy { padding: 3rem 1.25rem; }
    .heidrich-company__visual { min-height: 300px; }
    .heidrich-company__capabilities article { padding: 2rem 1.25rem; }
    .heidrich-company__history { padding-block: 4.5rem; }
    .heidrich-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 1.25rem; border-top: 0; border-left: 1px solid rgba(24,58,104,.35); }
    .heidrich-timeline li { min-height: 0; padding: 0 0 2.75rem 1.35rem; }
    .heidrich-timeline li:last-child { padding-bottom: 0; }
    .heidrich-timeline li::before { top: .25rem; left: -5px; }
    .heidrich-team { padding: 3.5rem 1.25rem; }
    .heidrich-team-group__heading { grid-template-columns: 38px 1fr; }
    .heidrich-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .heidrich-team-card > div:last-child { min-height: 112px; padding: 1rem; }
    .heidrich-team-initials { width: 68px; height: 68px; border-width: 3px; font-size: 1.3rem; }
    .footer-columns { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.25rem; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-columns > div:last-child { grid-column: auto; }
    .footer-bottom { line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Unternehmensauftritt: Telefon im Header, Standortkarten, Rechtsseiten --- */

.header-contact-col { justify-self: end; }
.header-phone { display: inline-flex; gap: .6rem; align-items: center; padding: .6rem .9rem; color: var(--heidrich-blue); font-family: Raleway, Arial, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; border: 1px solid var(--heidrich-line); border-radius: var(--heidrich-radius); }
.header-phone svg { width: 22px; height: 22px; flex: none; }
.header-phone:hover { color: var(--heidrich-red); border-color: var(--heidrich-red); }

.heidrich-contact__intro { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.heidrich-contact__intro h2 { margin-bottom: .8rem; }
.heidrich-contact__intro p:last-child { margin-bottom: 0; color: var(--heidrich-muted); }
.heidrich-contact__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.heidrich-contact__card { padding: 1.75rem; border: 1px solid var(--heidrich-line); border-top: 3px solid var(--heidrich-red); border-radius: var(--heidrich-radius); background: #fff; }
.heidrich-contact__card h3 { margin-bottom: 1rem; font-size: 1.2rem; }
.heidrich-contact__card p { margin: 0 0 .9rem; font-size: .95rem; }
.heidrich-contact__card p:last-child { margin-bottom: 0; }
.heidrich-contact__address { color: var(--heidrich-graphite); }
.heidrich-contact__lines a { color: var(--heidrich-blue); font-weight: 500; text-decoration: none; }
.heidrich-contact__lines a:hover { color: var(--heidrich-red); text-decoration: underline; text-underline-offset: .2rem; }
.heidrich-contact__hours { color: var(--heidrich-muted); font-size: .88rem !important; }

.heidrich-legal { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.heidrich-legal__inner { max-width: 780px; }
.heidrich-legal h1 { margin-bottom: 2.5rem; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.heidrich-legal h2 { margin-top: 2.75rem; margin-bottom: .9rem; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.heidrich-legal h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.05rem; }
.heidrich-legal p, .heidrich-legal li { color: var(--heidrich-graphite); font-size: .98rem; }
.heidrich-legal ul { padding-left: 1.2rem; display: grid; gap: .45rem; }
.heidrich-legal a { color: var(--heidrich-blue); text-underline-offset: .2rem; }
.heidrich-legal__back { display: inline-block; margin-bottom: 2rem; color: var(--heidrich-blue); font-weight: 500; text-decoration: none; }
.heidrich-legal__back:hover { color: var(--heidrich-red); text-decoration: underline; }

@media (max-width: 1180px) {
    .heidrich-contact__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .header-contact-col { display: none; }
    .heidrich-contact__cards { grid-template-columns: 1fr; }
}

/* --- Karriereseite --- */

.heidrich-karriere-intro { padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.heidrich-karriere-intro h1 { margin-bottom: 1.2rem; font-size: clamp(2.4rem, 4.5vw, 4rem); }
.heidrich-karriere-lead { max-width: 720px; margin-bottom: 0; color: var(--heidrich-muted); font-size: 1.1rem; }

.heidrich-jobs { padding-block: clamp(3rem, 5vw, 4.5rem); }
.heidrich-jobs h2 { margin-bottom: 2.5rem; }

.heidrich-job { padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--heidrich-line); border-top: 4px solid var(--heidrich-red); border-radius: var(--heidrich-radius); background: #fff; box-shadow: var(--heidrich-shadow); }
.heidrich-job + .heidrich-job { margin-top: 2rem; }
.heidrich-job__head { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--heidrich-line); }
.heidrich-job__location { margin: 0 0 .5rem; color: var(--heidrich-red); font-family: Raleway, Arial, sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.heidrich-job__head h3 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.heidrich-job__sub { margin: 0; color: var(--heidrich-muted); font-weight: 500; }
.heidrich-job__tags { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.heidrich-job__tags li { padding: .35rem .8rem; border: 1px solid var(--heidrich-line); border-radius: var(--heidrich-radius); background: var(--heidrich-surface); color: var(--heidrich-navy); font-size: .85rem; font-weight: 500; }

.heidrich-job__intro { margin: 1.75rem 0 0; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif; font-weight: 600; font-size: 1.12rem; line-height: 1.5; }

.heidrich-job__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; }
.heidrich-job__cols h4 { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--heidrich-red); color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif; font-size: 1.15rem; }
.heidrich-job__cols ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.heidrich-job__cols li { font-size: .96rem; line-height: 1.5; }
.heidrich-job__cols li::marker { color: var(--heidrich-red); }
.heidrich-job__note { margin: 1.1rem 0 0; color: var(--heidrich-muted); font-size: .9rem; }

.heidrich-job__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.25rem; }
.heidrich-job__box { padding: 1.5rem; border-top: 3px solid var(--heidrich-navy); background: var(--heidrich-surface); }
.heidrich-job__box--apply { border-top-color: var(--heidrich-red); }
.heidrich-job__box h4 { margin: 0 0 .8rem; color: var(--heidrich-navy); font-family: Raleway, Arial, sans-serif; font-size: 1.1rem; }
.heidrich-job__box p { margin: 0 0 .8rem; font-size: .95rem; }
.heidrich-job__box p:last-child { margin-bottom: 0; }
.heidrich-job__box a { color: var(--heidrich-blue); font-weight: 500; text-underline-offset: .2rem; }
.heidrich-job__box a:hover { color: var(--heidrich-red); }

.heidrich-job__download { margin: 1.75rem 0 0; }
.heidrich-job__download a { display: inline-block; padding: .8rem 1.4rem; border: 1px solid var(--heidrich-blue); border-radius: var(--heidrich-radius); color: var(--heidrich-blue); font-weight: 500; text-decoration: none; }
.heidrich-job__download a:hover { color: #fff; background: var(--heidrich-blue); }

.heidrich-karriere-open { padding-block: 0 clamp(3.5rem, 6vw, 5rem); }
.heidrich-karriere-open h2 { margin-bottom: 1rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.heidrich-karriere-open a { color: var(--heidrich-blue); text-underline-offset: .2rem; }

@media (max-width: 820px) {
    .heidrich-job__cols, .heidrich-job__boxes { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --- Verknuepfung zum Onlineshop --- */

.header-shop { display: inline-flex; gap: .55rem; align-items: center; padding: .7rem 1.2rem; border-radius: var(--heidrich-radius); background: var(--heidrich-red); color: #fff; font-family: Raleway, Arial, sans-serif; font-weight: 700; font-size: .98rem; text-decoration: none; white-space: nowrap; }
.header-shop svg { width: 19px; height: 19px; flex: none; }
.header-shop:hover { background: var(--heidrich-navy); }

.main-navigation-link--shop { color: var(--heidrich-red); font-weight: 700; }

@media (max-width: 1180px) {
    .header-shop span { display: none; }
    .header-shop { padding: .7rem .85rem; }
}

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt keine
   Uebergaenge, kein weiches Scrollen und keine eingeblendeten Panels. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .heidrich-button:hover, .heidrich-hero__product:hover { transform: none; }
}