/* JL Goslar – Website 2027
   Gestaltung nach Corporate Design (Stand 06.2026):
   Primär #208384 · Schwarz · Weiß | Sekundär #adbab7 #bec6c3 #dce7e7 #95a2ab #d1d5da | Akzent #ff9a6b (sparsam)
   Schriften: Anton (Headlines), Montserrat (Text), Poppins (UI/Details) – nur Regular + Bold, linksbündig */

@font-face { font-family: "Anton"; src: url(/assets/fonts/anton-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(/assets/fonts/montserrat-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(/assets/fonts/montserrat-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --teal: #208384; --teal-80: #4d9c9d; --teal-60: #79b5b5; --teal-40: #a6cece; --teal-20: #d2e6e6; --teal-10: #e9f2f2;
  --teal-ink: #17696a;           /* dunklere Stufe für kleine Schrift auf Weiß (Kontrast ≥ 4.5:1) */
  --sec-1: #adbab7; --sec-2: #bec6c3; --sec-3: #dce7e7; --sec-4: #95a2ab; --sec-5: #d1d5da;
  --accent: #ff9a6b;
  --ink: #1d1d1b; --ink-2: #4a4f4e; --ink-3: #5d6664; --line: #c9d1cf; --line-2: #e3e8e7;
  --bg: #ffffff;
  --f-head: "Anton", "Arial Narrow", sans-serif;
  --f-text: "Montserrat", Arial, sans-serif;
  --f-ui: "Poppins", Arial, sans-serif;
  --wrap: 1280px; --gut: 32px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --hdr: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--f-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
strong, b { font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; font: 700 14px var(--f-ui); }
.skip:focus { top: 12px; }

/* ---------- Typografie ---------- */
.h1, .h2, .h3 { font-family: var(--f-head); text-transform: uppercase; line-height: 1.04; letter-spacing: .005em; }
.h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); }
.h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); }
.h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.12; }
.h1 .k { display: block; font: 700 clamp(.95rem, .85rem + .3vw, 1.1rem)/1.4 var(--f-ui); text-transform: none; letter-spacing: 0; color: var(--teal-ink); margin-bottom: var(--s3); }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.label { font: 700 13px/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--teal-ink); }
.meta { font: 400 14px/1.5 var(--f-ui); color: var(--ink-3); }
.prose { max-width: 70ch; }
.prose p { color: var(--ink-2); }
.prose h3 { font: 700 1.15rem/1.35 var(--f-text); margin: 1.6em 0 .5em; color: var(--ink); }
.t-teal { color: var(--teal); }

/* ---------- Buttons & Links ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 2px solid var(--teal); background: var(--teal); color: #fff; font: 700 15px/1 var(--f-ui); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn:hover svg { transform: translateX(3px); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white:hover { background: transparent; color: #fff; border-color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.more { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--f-ui); color: var(--teal-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more svg { width: 16px; height: 16px; transition: transform .2s; }
.more:hover svg { transform: translateX(3px); }

/* ---------- Topbar & Header ---------- */
.topbar { background: var(--teal-10); border-bottom: 1px solid var(--line-2); font: 400 13.5px/1 var(--f-ui); color: var(--ink-2); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--teal-ink); }
.topbar__l, .topbar__r { display: flex; align-items: center; gap: 22px; }
.topbar__l a { display: inline-flex; align-items: center; gap: 7px; }
.topbar__l svg { width: 15px; height: 15px; color: var(--teal); }
.social { display: flex; gap: 6px; }
.social a { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink); }
.social svg { width: 22px; height: 22px; }
.social a:hover { color: var(--teal); }
.lang { display: flex; align-items: center; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); }
.lang span, .lang a { padding: 4px 6px; font-weight: 700; }
.lang .on { color: var(--teal-ink); }
.lang .off { color: var(--ink-3); font-weight: 400; cursor: help; }

.hdr { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line-2); }
.hdr .wrap { display: flex; align-items: center; gap: 32px; height: var(--hdr); }
.logo { display: block; flex: none; }
.logo img { width: 196px; height: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav > li { position: relative; }
.nav > li > a, .nav > li > button { white-space: nowrap; display: flex; align-items: center; gap: 6px; height: var(--hdr); padding: 0 12px; background: none; border: 0; font: 400 15.5px/1 var(--f-ui); color: var(--ink); text-decoration: none; cursor: pointer; position: relative; }
.nav > li > a::after, .nav > li > button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav > li:hover > a::after, .nav > li:hover > button::after, .nav [aria-current="page"]::after, .nav .is-current::after { transform: scaleX(1); }
.nav .chev { width: 14px; height: 14px; transition: transform .2s; }
.nav li:hover .chev, .nav li:focus-within .chev { transform: rotate(180deg); }
.mega { position: absolute; left: -24px; top: 100%; width: min(860px, 80vw); background: #fff; border: 1px solid var(--line-2); border-top: 3px solid var(--teal); display: grid; grid-template-columns: 1fr 1fr; padding: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; box-shadow: 0 18px 40px -20px rgba(29,29,27,.25); }
.nav li:hover .mega, .nav li:focus-within .mega, .mega.open { opacity: 1; visibility: visible; transform: none; }
.mega a { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 12px; text-decoration: none; align-items: center; }
.mega a:hover { background: var(--teal-10); }
.mega img { width: 88px; height: 62px; object-fit: cover; }
.mega b { display: block; font: 700 15px/1.3 var(--f-ui); }
.mega span { display: block; font: 400 13px/1.45 var(--f-ui); color: var(--ink-3); margin-top: 2px; }
.mega__all { grid-column: 1 / -1; border-top: 1px solid var(--line-2); margin-top: 6px; display: flex !important; justify-content: space-between; font: 700 14px var(--f-ui); color: var(--teal-ink); }
.hdr .btn { margin-left: 8px; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line); background: #fff; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: .25s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 23px; } .burger span:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
.mnav { display: none; }

/* ---------- Sektionen ---------- */
.sec { padding: var(--s8) 0; }
.sec--tight { padding: var(--s7) 0; }
.sec--t10 { background: var(--teal-10); }
.sec--s3 { background: var(--sec-3); }
.sec--s1 { background: var(--sec-1); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--line { border-top: 1px solid var(--line); }
/* Abschnittskopf wie ein technisches Schriftfeld: Haarlinie, Bezeichnung links, Titel rechts */
.sh { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--ink); margin-bottom: var(--s6); }
.sh .label { padding-top: 6px; }
.sh .h2 { max-width: 20ch; }
.sh .lead { margin: var(--s3) 0 0; }
.sh--split > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: end; }
.sec--s1 .sh, .sec--s3 .sh { border-color: var(--ink); }
.sec--ink .sh { border-color: rgba(255,255,255,.5); }
.sec--ink .label { color: var(--teal-40); }
.sec--ink .lead { color: rgba(255,255,255,.78); }

/* ---------- Hero Startseite ---------- */
.hero { border-bottom: 1px solid var(--line-2); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; min-height: min(760px, calc(100vh - var(--hdr) - 40px)); }
.hero__txt { padding: var(--s7) var(--s6) var(--s6) 0; display: flex; flex-direction: column; justify-content: center; }
.hero__txt .h1 { font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.6rem); }
.h1 { hyphens: manual; }

.hero__txt .h1 > span:not(.k) { display: block; }
.hero__txt .lead { margin: var(--s4) 0 var(--s5); }
.hero__media { position: relative; margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2)); background: var(--sec-3); display: grid; grid-template-rows: 1fr auto; }
.hero__slides { position: relative; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.hero__slide.on { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--line-2); }
.hero__tab { text-align: left; padding: 20px 24px 22px; background: #fff; border: 0; border-right: 1px solid var(--line-2); cursor: pointer; position: relative; }
.hero__tab:last-child { border-right: 0; }
.hero__tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.hero__tab[aria-selected="true"]::before { transform: scaleX(1); transition: transform 7s linear; }
.hero.paused .hero__tab[aria-selected="true"]::before { transition: none; }
.hero__tab small { display: block; font: 400 13px/1.3 var(--f-ui); color: var(--ink-3); }
.hero__tab b { display: block; font: 700 16px/1.3 var(--f-ui); margin-top: 4px; }
.hero__tab[aria-selected="true"] b { color: var(--teal-ink); }
.hero__cap { position: absolute; left: 24px; bottom: 24px; max-width: calc(100% - 48px); background: #fff; padding: 12px 16px; font: 400 13.5px/1.45 var(--f-ui); color: var(--ink-2); }
.hero__cap a { color: var(--teal-ink); font-weight: 700; }

/* Kennzahlen-Leiste */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-2); }
.facts > div { padding: var(--s4) var(--s3) var(--s4) 0; border-right: 1px solid var(--line-2); }
.facts > div + div { padding-left: var(--s4); }
.facts > div:last-child { border-right: 0; }
.num { display: block; font: 400 clamp(2.2rem, 1.6rem + 1.8vw, 3.4rem)/1 var(--f-head); color: var(--teal); }
.num small { font-size: .5em; margin-left: 4px; }
.facts p { margin: 10px 0 0; font: 400 14.5px/1.45 var(--f-ui); color: var(--ink-2); }

/* ---------- Lösungen ---------- */
.sol-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.sol { display: flex; flex-direction: column; text-decoration: none; }
.sol__img { overflow: hidden; aspect-ratio: 4 / 3; background: var(--sec-3); }
.sol__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sol:hover .sol__img img { transform: scale(1.04); }
.sol__body { padding-top: var(--s3); flex: 1; display: flex; flex-direction: column; }
.sol__no { font: 700 13px/1 var(--f-ui); color: var(--ink-3); letter-spacing: .06em; }
.sol h3 { margin: 10px 0 12px; }
.sol p { color: var(--ink-2); font-size: 16px; }
.sol ul { border-top: 1px solid var(--line); margin: 6px 0 var(--s3); }
.sol li { border-bottom: 1px solid var(--line); padding: 9px 0; font: 400 14.5px/1.4 var(--f-ui); color: var(--ink-2); }
.sol .more { margin-top: auto; align-self: flex-start; }
.sol-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sol-row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s3); align-items: start; text-decoration: none; }
.sol-row img { width: 112px; height: 84px; object-fit: cover; }
.sol-row b { display: block; font: 700 17px/1.3 var(--f-text); }
.sol-row span { display: block; font: 400 14px/1.5 var(--f-ui); color: var(--ink-3); margin-top: 4px; }
.sol-row:hover b { color: var(--teal-ink); }

/* ---------- Branchen ---------- */
.ind { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.ind__media { position: sticky; top: calc(var(--hdr) + 32px); }
.ind__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ind__media figcaption { margin-top: 10px; }
.ind-list { border-top: 1px solid var(--ink); }
.ind-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 20px 8px 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s, padding .2s; }
.ind-list a:hover { background: var(--teal-10); padding-left: 16px; }
.ind-list b { font: 700 18px/1.35 var(--f-text); }
.ind-list span { grid-column: 1; font: 400 14.5px/1.5 var(--f-ui); color: var(--ink-3); }
.ind-list svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 22px; height: 22px; color: var(--teal); }

/* ---------- Warum ---------- */
.why { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: start; }
.why__nums { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.why__nums > div { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid rgba(29,29,27,.25); }
.why__nums > div:nth-child(odd) { border-right: 1px solid rgba(29,29,27,.25); }
.why__nums > div:nth-child(even) { padding-left: var(--s4); }
.why__nums .num { color: var(--ink); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.8rem); }
.why__nums p { margin: 10px 0 0; font: 400 15px/1.45 var(--f-ui); }
.checks li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid rgba(29,29,27,.2); font: 400 16px/1.45 var(--f-ui); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 18px; height: 18px; background: var(--teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec--s1 .checks li::before { background: var(--ink); }
.why__img { margin-top: var(--s4); }
.why__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Bleirechner ---------- */
.calc-sec { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.calc { border: 1px solid var(--ink); background: #fff; }
.calc__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--ink); font: 700 14px/1.3 var(--f-ui); }
.calc__head span:last-child { font-weight: 400; color: var(--ink-3); }
.calc__in { padding: 24px; display: grid; gap: 22px; }
.calc label, .calc .flabel { display: flex; justify-content: space-between; gap: 12px; font: 700 14.5px/1.3 var(--f-ui); margin-bottom: 10px; }
.calc label output, .calc .flabel output { font-weight: 400; color: var(--teal-ink); white-space: nowrap; }
.calc select { width: 100%; height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--ink-3); border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; font: 400 15px var(--f-ui); color: var(--ink); appearance: none; }
.calc input[type=range] { width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--teal), var(--teal)) 0 / var(--p, 50%) 100% no-repeat, var(--sec-2); }
.calc input[type=range]::-moz-range-track { height: 4px; background: var(--sec-2); }
.calc input[type=range]::-moz-range-progress { height: 4px; background: var(--teal); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink); border-radius: 50%; }
.calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink); border-radius: 50%; }
.calc__out { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--ink); background: var(--teal-10); }
.calc__out > div { padding: 20px 24px; border-right: 1px solid var(--line); }
.calc__out > div:last-child { border-right: 0; }
.calc__out small { display: block; font: 400 13px/1.35 var(--f-ui); color: var(--ink-2); }
.calc__out b { display: block; font: 400 clamp(1.8rem, 1.4rem + 1vw, 2.4rem)/1.1 var(--f-head); color: var(--teal); margin-top: 6px; }
.calc__note { padding: 14px 24px; border-top: 1px solid var(--line); font: 400 12.5px/1.5 var(--f-ui); color: var(--ink-3); }
.calc__cta { padding: 0 24px 24px; background: var(--teal-10); }

/* ---------- Referenzen ---------- */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.ref { display: flex; flex-direction: column; }
.ref__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sec-3); }
.ref__img img { width: 100%; height: 100%; object-fit: cover; }
.ref__type { aspect-ratio: 4 / 3; background: var(--sec-3); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
.ref__type .num { font-size: clamp(3rem, 2rem + 3vw, 4.6rem); color: var(--ink); }
.ref__type .meta { color: var(--ink-2); }
.ref__body { padding-top: 18px; }
.ref__k { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 700 13px/1.3 var(--f-ui); color: var(--teal-ink); margin-bottom: 8px; }
.ref h3 { font: 700 18px/1.35 var(--f-text); margin-bottom: 6px; }
.ref p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ---------- News ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.post { display: flex; flex-direction: column; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
.post__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sec-3); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.post:hover .post__img img { transform: scale(1.08); }
.post time { display: block; margin: 18px 0 8px; font: 400 13.5px var(--f-ui); color: var(--ink-3); }
.post h3 { font: 700 19px/1.35 var(--f-text); margin-bottom: 10px; }
.post p { font-size: 15.5px; color: var(--ink-2); }
.post .more { margin-top: auto; align-self: flex-start; }
.news-list { display: grid; gap: var(--s6); }
.article { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.article img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article h2 { font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.3 var(--f-text); margin: 8px 0 16px; }
.article .src { font: 400 13px var(--f-ui); color: var(--ink-3); }

/* ---------- Über uns / Timeline ---------- */
.about { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s6); align-items: start; }
.then-now { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.then-now figure { margin: 0; }
.then-now img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.then-now figcaption { margin-top: 8px; font: 700 13px var(--f-ui); }
.tl { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: var(--s6); border-top: 2px solid var(--teal); }
.tl li { padding: 20px 16px 0 0; position: relative; }
.tl li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; background: #fff; border: 2px solid var(--teal); border-radius: 50%; }
.tl b { display: block; font: 400 1.7rem/1 var(--f-head); }
.tl span { display: block; margin-top: 8px; font: 400 14px/1.45 var(--f-ui); color: var(--ink-2); }

/* ---------- Kontakt ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.person { border-top: 1px solid var(--ink); padding-top: var(--s3); }
.person__ph { aspect-ratio: 1; background: var(--sec-3); margin-bottom: 18px; overflow: hidden; display: grid; place-items: center; }
.person__ph img { width: 100%; height: 100%; object-fit: cover; }
.person__ph span { font: 400 13px/1.4 var(--f-ui); color: var(--ink-3); text-align: center; padding: 16px; }
.person .label { display: block; margin-bottom: 6px; }
.person b { display: block; font: 700 18px/1.3 var(--f-text); }
.person p { font: 400 14.5px/1.7 var(--f-ui); margin: 10px 0 0; }
.person a { text-decoration: none; }
.person a:hover { color: var(--teal-ink); }
.person--ph b { color: var(--ink-3); }
.contact { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s6); align-items: start; }
.cbox { border-top: 1px solid var(--ink); }
.cbox > * { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.cbox small { display: block; font: 400 13px var(--f-ui); color: var(--ink-3); }
.cbox b { font: 700 17px/1.4 var(--f-text); }
.cbox a:hover b { color: var(--teal-ink); }
.map { margin-top: var(--s4); aspect-ratio: 4 / 3; background: var(--sec-3); display: grid; place-items: center; text-align: center; padding: 24px; position: relative; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map p { font: 400 13px/1.5 var(--f-ui); color: var(--ink-2); max-width: 34ch; margin: 0 auto 14px; }

/* Formular */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form .full { grid-column: 1 / -1; }
.field label, .field legend { display: block; font: 700 14px/1.3 var(--f-ui); margin-bottom: 8px; padding: 0; }
.field label i, .field legend i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ink-3); border-radius: 0; background: #fff; font: 400 16px/1.4 var(--f-text); color: var(--ink); }
.field select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-20); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; font: 400 14.5px/1 var(--f-ui); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--ink-3); cursor: pointer; transition: .15s; }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.file { position: relative; border: 1px dashed var(--ink-3); padding: 18px; display: flex; align-items: center; gap: 14px; font: 400 14.5px/1.4 var(--f-ui); color: var(--ink-2); }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file svg { width: 26px; height: 26px; color: var(--teal); flex: none; }
.file:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-20); }
.consent { display: flex; gap: 12px; align-items: flex-start; font: 400 14px/1.5 var(--f-ui); color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--teal); flex: none; }
.hp { position: absolute; left: -9999px; }
.form-msg { grid-column: 1 / -1; padding: 16px; font: 400 15px/1.5 var(--f-ui); display: none; }
.form-msg.ok { display: block; background: var(--teal-10); border-left: 4px solid var(--teal); }
.form-msg.err { display: block; background: #fff1ea; border-left: 4px solid var(--accent); }

/* ---------- Unterseiten ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 13.5px/1.4 var(--f-ui); color: var(--ink-3); margin-bottom: var(--s4); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--teal-ink); }
.crumbs span[aria-hidden] { color: var(--line); }
.phero { border-bottom: 1px solid var(--line-2); }
.phero .wrap { display: grid; grid-template-columns: 6fr 6fr; gap: 0; min-height: 520px; }
.phero__txt { padding: var(--s6) var(--s6) var(--s6) 0; display: flex; flex-direction: column; justify-content: center; }
.phero__txt .lead { margin: var(--s3) 0 var(--s4); }
.phero__img { margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2)); position: relative; background: var(--sec-3); }
.phero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero--plain .wrap { grid-template-columns: 1fr; min-height: 0; }
.phero--plain .phero__txt { padding: var(--s6) 0; }
.subnav { position: sticky; top: var(--hdr); z-index: 20; background: #fff; border-bottom: 1px solid var(--line-2); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: block; padding: 16px 14px; font: 400 14.5px/1 var(--f-ui); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.on { border-bottom-color: var(--teal); color: var(--teal-ink); }

.block { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); padding: var(--s7) 0; border-top: 1px solid var(--line); align-items: start; }
.block:first-child { border-top: 0; padding-top: 0; }
.block--rev .block__media { order: 2; }
.block__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.block__media figcaption { margin-top: 10px; }
.block__no { font: 700 13px/1 var(--f-ui); color: var(--ink-3); letter-spacing: .06em; display: block; margin-bottom: 12px; }
.block h2 { margin-bottom: var(--s3); }
.block p { color: var(--ink-2); }
.spec { border-top: 1px solid var(--ink); margin: var(--s3) 0; }
.spec li { display: grid; grid-template-columns: 1fr; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); font: 400 15.5px/1.5 var(--f-ui); position: relative; }
.spec li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 2px; background: var(--teal); }
.spec--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
.dl { border-top: 1px solid var(--ink); margin: var(--s3) 0; }
.dl div { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.45 var(--f-ui); }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.tags a, .tags span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); font: 400 13.5px/1.2 var(--f-ui); text-decoration: none; }
.tags a:hover { border-color: var(--teal); color: var(--teal-ink); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.kpis > div { padding: var(--s4) var(--s3) var(--s4) 0; }
.kpis > div + div { padding-left: var(--s4); border-left: 1px solid var(--line); }
.kpis p { margin: 10px 0 0; font: 400 14.5px/1.45 var(--f-ui); color: var(--ink-2); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.cards > * { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); }
.cards > *:not(:nth-child(3n+1)) { padding-left: var(--s4); border-left: 1px solid var(--line); }
.cards h3 { font: 700 18px/1.35 var(--f-text); margin-bottom: 10px; }
.cards p { font-size: 15.5px; color: var(--ink-2); margin: 0; }
.cards .ico { width: 36px; height: 36px; color: var(--teal); margin-bottom: 18px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--4 > *:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
.cards--4 > *:not(:nth-child(4n+1)) { padding-left: var(--s4); border-left: 1px solid var(--line); }
.cards--5 { grid-template-columns: repeat(5, 1fr); }
.cards--5 > *:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
.cards--5 > *:not(:first-child) { padding-left: var(--s3); border-left: 1px solid var(--line); }
.cards--2 { grid-template-columns: 1fr 1fr; }
.cards--2 > *:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
.cards--2 > *:nth-child(even) { padding-left: var(--s4); border-left: 1px solid var(--line); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: st; border-top: 2px solid var(--teal); }
.steps--6 { grid-template-columns: repeat(6, 1fr); }
.steps li { counter-increment: st; padding: var(--s3) var(--s3) 0 0; }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; font: 400 2.2rem/1 var(--f-head); color: var(--teal); margin-bottom: 14px; }
.steps b { display: block; font: 700 17px/1.35 var(--f-text); margin-bottom: 6px; }
.steps span { font: 400 14.5px/1.5 var(--f-ui); color: var(--ink-2); }

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; padding: 20px 0; font: 700 17px/1.4 var(--f-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 28px; height: 28px; background: linear-gradient(var(--teal), var(--teal)) center / 14px 2px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 2px 14px no-repeat; border: 1px solid var(--line); transition: transform .2s; }
.faq details[open] summary::after { background: linear-gradient(var(--teal), var(--teal)) center / 14px 2px no-repeat; }
.faq summary:hover { color: var(--teal-ink); }
.faq .ans { padding: 0 48px 22px 0; color: var(--ink-2); max-width: 78ch; }
.faq .ans p:last-child { margin: 0; }
.faq-grp { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s4); margin-bottom: var(--s6); }
.faq-grp > h2 { font: 700 13px/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--teal-ink); padding-top: 22px; }

.certs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.certs > div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.certs > div:not(:nth-child(4n+1)) { padding-left: 20px; border-left: 1px solid var(--line); }
.certs b { display: block; font: 700 16px/1.35 var(--f-ui); }
.certs span { font: 400 13.5px/1.45 var(--f-ui); color: var(--ink-3); }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery figcaption { margin-top: 8px; font: 400 13px/1.4 var(--f-ui); color: var(--ink-3); }

/* CTA-Band */
.cta { background: var(--teal); color: #fff; }
.cta .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: end; padding-top: var(--s7); padding-bottom: var(--s7); }
.cta .h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.88); margin: var(--s3) 0 0; max-width: 56ch; }
.cta__side { border-top: 1px solid rgba(255,255,255,.5); padding-top: var(--s3); }
.cta__side small { display: block; font: 400 13.5px var(--f-ui); color: rgba(255,255,255,.8); }
.cta__side a.tel { display: block; font: 400 2rem/1.2 var(--f-head); color: #fff; text-decoration: none; margin: 4px 0 var(--s3); }

/* Legal */
.legal { max-width: 78ch; }
.legal h2 { font: 700 1.25rem/1.35 var(--f-text); margin: 2em 0 .6em; }
.legal h3 { font: 700 1.05rem/1.4 var(--f-text); margin: 1.6em 0 .4em; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.note { border-left: 4px solid var(--accent); background: #fff6f1; padding: 14px 18px; font: 400 14px/1.5 var(--f-ui); color: var(--ink-2); }

/* ---------- Footer ---------- */
.ftr { background: var(--sec-3); padding: var(--s7) 0 0; font: 400 15px/1.6 var(--f-ui); }
.ftr__top { display: grid; grid-template-columns: 4fr 3fr 3fr 3fr 3fr; gap: var(--s4); padding-bottom: var(--s6); }
.ftr .logo img { width: 190px; }
.ftr__claim { margin: var(--s3) 0; color: var(--ink-2); max-width: 32ch; }
.ftr__h { font: 700 13px/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--teal-ink); margin-bottom: 14px; }
.ftr li { margin-bottom: 7px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--teal-ink); text-decoration: underline; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 22px 0 28px; border-top: 1px solid var(--ink); font-size: 13.5px; color: var(--ink-2); }
.ftr__bot ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ftr .social { margin-top: var(--s3); gap: 10px; }
.ftr .social a { width: 40px; height: 40px; }
.ftr .social svg { width: 34px; height: 34px; }

/* Mobile-Leiste */
.mbar { display: none; }

/* ---------- Reveal (dezent, nur Bilder) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav > li > a, .nav > li > button { padding: 0 9px; font-size: 15px; }
  .logo img { width: 170px; }
  .hdr .wrap { gap: 16px; }
}
@media (max-width: 1100px) {
  :root { --hdr: 72px; }
  .nav, .hdr .btn { display: none; }
  .burger { display: block; }
  .mnav { display: block; position: fixed; inset: calc(var(--hdr) + 40px) 0 0 0; z-index: 49; background: #fff; overflow-y: auto; padding: 8px var(--gut) 120px; transform: translateX(100%); transition: transform .3s; visibility: hidden; }
  .mnav.open { transform: none; visibility: visible; }
  .mnav > a, .mnav summary { display: block; padding: 16px 0; border-bottom: 1px solid var(--line-2); font: 700 18px/1.2 var(--f-ui); text-decoration: none; cursor: pointer; list-style: none; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: "+"; float: right; color: var(--teal); }
  .mnav details[open] summary::after { content: "–"; }
  .mnav .sub a { display: block; padding: 12px 0 12px 16px; border-bottom: 1px solid var(--line-2); font: 400 16px/1.3 var(--f-ui); text-decoration: none; }
  .mnav .btn { margin-top: 24px; width: 100%; justify-content: center; }
  .mnav__c { margin-top: 24px; font: 400 15px/1.8 var(--f-ui); }
  .mnav__c a { display: block; text-decoration: none; }
  .ftr__top { grid-template-columns: 1fr 1fr 1fr; }
  .ftr__top > div:first-child { grid-column: 1 / -1; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
  .certs > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .certs > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
}
@media (max-width: 960px) {
  :root { --gut: 24px; }
  .sec { padding: var(--s7) 0; }
  .sh { grid-template-columns: 1fr; gap: 12px; margin-bottom: var(--s5); }
  .sh--split > div { grid-template-columns: 1fr; }
  .hero__grid, .phero .wrap { grid-template-columns: 1fr; min-height: 0; }
  .hero__txt, .phero__txt { padding: var(--s6) 0 var(--s5); }
  .hero__media, .phero__img { margin: 0 calc(-1 * var(--gut)); }
  .hero__slides { aspect-ratio: 4 / 3; }
  .phero__img { aspect-ratio: 16 / 10; }
  .facts, .kpis { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(2n+1), .kpis > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(2) { border-right: 0; }
  .facts > div:nth-child(-n+2), .kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .sol-main, .refs, .news { grid-template-columns: 1fr 1fr; }
  .sol-more { grid-template-columns: 1fr; }
  .ind, .why, .calc-sec, .about, .contact, .block, .article, .cta .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .ind__media { position: static; }
  .ind__media img { aspect-ratio: 16 / 10; }
  .block--rev .block__media { order: 0; }
  .tl { grid-template-columns: repeat(3, 1fr); row-gap: var(--s4); border-top: 0; }
  .tl li { border-top: 2px solid var(--teal); }
  .cards, .cards--4 { grid-template-columns: 1fr 1fr; }
  .cards > *, .cards--4 > * { padding-left: 0 !important; border-left: 0 !important; padding-right: var(--s3); }
  .cards > *:nth-child(even), .cards--4 > *:nth-child(even) { padding-left: var(--s3) !important; border-left: 1px solid var(--line) !important; }
  .steps, .steps--6 { grid-template-columns: 1fr 1fr; row-gap: var(--s4); }
  .cards--5 { grid-template-columns: 1fr 1fr; }
  .cards--5 > * { padding-left: 0 !important; border-left: 0 !important; }
  .cards--5 > *:nth-child(even) { padding-left: var(--s3) !important; border-left: 1px solid var(--line) !important; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .faq-grp { grid-template-columns: 1fr; gap: 0; }
  .topbar__l a.hide-s { display: none; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .sec { padding: var(--s6) 0; }
  .topbar .social, .topbar__r > a { display: none; }
  .logo img { width: 150px; }
  .hero__tabs { grid-template-columns: 1fr 1fr 1fr; }
  .hero__tab { padding: 14px 12px 16px; }
  .hero__tab small { display: none; }
  .hero__tab b { font-size: 14px; margin: 0; }
  .hero__cap { position: static; max-width: none; border-top: 1px solid var(--line-2); }
  .hero__media { grid-template-rows: auto auto auto; }
  .facts > div, .kpis > div { padding: var(--s3) 12px var(--s3) 0; }
  .facts > div + div, .kpis > div + div { padding-left: 12px; }
  .sol-main, .refs, .news, .people, .cards, .cards--4, .cards--5, .cards--2, .steps, .steps--6, .spec--2, .certs { grid-template-columns: 1fr; }
  .cards--5 > * { padding-left: 0 !important; border-left: 0 !important; }
  .cards > *, .cards--4 > *, .cards--2 > * { padding-left: 0 !important; border-left: 0 !important; }
  .certs > div { padding-left: 0 !important; border-left: 0 !important; }
  .why__nums > div:nth-child(even) { padding-left: 16px; }
  .why__nums > div { padding-right: 12px; }
  .calc__out { grid-template-columns: 1fr; }
  .calc__out > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .tl { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .dl div { grid-template-columns: 1fr; gap: 2px; }
  .btns .btn { width: 100%; justify-content: center; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr 2fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font: 700 12px var(--f-ui); text-decoration: none; }
  .mbar svg { width: 20px; height: 20px; color: var(--teal); }
  .mbar .mbar__cta { flex-direction: row; gap: 8px; background: var(--teal); color: #fff; font-size: 14px; }
  .mbar .mbar__cta svg { color: #fff; }
  body { padding-bottom: 58px; }
}

/* Schmale Bildschirme: Grid-Spalten dürfen schrumpfen, lange deutsche Komposita umbrechen */
.calc-sec > *, .why > *, .ind > *, .about > *, .block > *, .contact > *, .cta .wrap > *, .hero__grid > *, .phero .wrap > * { min-width: 0; }
h2, h3, .tl span, .cards h3, .certs b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .num { font-size: 2rem; }
  .why__nums .num { font-size: 2.1rem; }
  .ref__type .num { font-size: 3rem; }
  .calc__in, .calc__head, .calc__note { padding-left: 16px; padding-right: 16px; }
  .calc__cta { padding: 0 16px 16px; }
  .calc__cta .btn { width: 100%; justify-content: center; white-space: normal; }
}
.facts > div, .kpis > div, .why__nums > div { min-width: 0; }
@media (max-width: 640px) { .facts .num, .kpis .num { font-size: 1.7rem; } .facts p, .kpis p { font-size: 13.5px; } }
html, body { overflow-x: clip; }
.why__nums p, .facts p, .kpis p, .person p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 640px) { .people { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .person b { font-size: 15.5px; } .person p { font-size: 13px; } }

.calc-img { margin: var(--s5) 0 0; }
.calc-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.calc-img figcaption { margin-top: 10px; }
#rechner + .sec--line { border-top: 0; padding-top: 0; }
@media (max-width: 960px) { .calc-img { display: none; } }

/* Kontaktkarten mit Bild aus dem Geschäftsfeld */
.person__ph { aspect-ratio: 4 / 3; }
.person p a { display: inline-flex; align-items: center; gap: 8px; }
.person p svg { width: 15px; height: 15px; color: var(--teal); flex: none; }
.people--1 { grid-template-columns: 1fr; max-width: 760px; }
.people--1 .person { display: grid; grid-template-columns: 280px 1fr; gap: 0 var(--s4); align-items: start; }
.people--1 .person__ph { grid-row: span 3; margin: 0; }
@media (max-width: 640px) { .people--1 .person { grid-template-columns: 1fr; } .people--1 .person__ph { grid-row: auto; margin-bottom: 16px; } }
/* Zertifikatsleiste unter den Kennzahlen */
.certbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 18px 0; border-bottom: 1px solid var(--line-2); font: 400 13.5px/1.3 var(--f-ui); color: var(--ink-2); }
.certbar > span:first-child { font-weight: 700; color: var(--ink); }
.certbar span { display: inline-flex; align-items: center; gap: 7px; }
.certbar svg { width: 17px; height: 17px; color: var(--teal); }
/* Branchen: Bild wechselt mit der gewählten Branche */
.ind__media img { transition: opacity .2s; }
.ind__media.swap img { opacity: .15; }
/* Kontrast ≥ 4.5:1 auf farbigen Flächen */
.sec--s1 .label { color: var(--ink); }
.cta p, .cta__side small { color: #fff; }
.cta .h2 { color: #fff; }
.sec--s1 .why__nums p, .sec--s1 .cards p { color: var(--ink); }
/* Touch-Ziele mind. 44 px auf Mobilgeräten */
@media (max-width: 960px) {
  .topbar .wrap { min-height: 44px; }
  .topbar__l a { padding: 12px 0; }
  .more { padding-top: 12px; padding-bottom: 6px; }
  .consent input { width: 24px; height: 24px; }
  .consent a, .certs span a { display: inline-block; padding: 8px 0; }
  .crumbs a { padding: 10px 0; }
  .ftr li a { display: inline-block; padding: 6px 0; }
  .ftr li { margin-bottom: 2px; }
}
@media (max-width: 640px) { .map { aspect-ratio: 16 / 10; margin-top: var(--s3); } .why__img { margin-top: var(--s3); } }
.crumbs { align-items: center; }
@media (max-width: 960px) {
  .block { padding: var(--s5) 0; gap: var(--s3); }
  .subnav ul { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
}
@media (max-width: 400px) { .h1 { font-size: 2.15rem; } .hero__txt .h1 { font-size: 2.05rem; } }
.mnav__lang { margin-top: 20px; padding-left: 0; border-left: 0; font: 700 16px var(--f-ui); }
.mnav__lang a, .mnav__lang span { display: inline-block; padding: 10px 14px 10px 0; text-decoration: none; }
@media (min-width: 1101px) { .mnav__lang { display: none; } }
/* Unterseiten-Überschrift: lange Komposita passen in die halbe Spalte */
.phero__txt .h1 { font-size: clamp(2.2rem, 1.2rem + 2.5vw, 3.9rem); }
@media (max-width: 960px) {
  .lang a, .lang span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
}
.calc .flabel label { margin: 0; }

/* --- Audit-Korrekturen --- */
/* Fokus mit ausreichendem Kontrast auf Weiß und Teal */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.cta :focus-visible, .sec--ink :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--ink); }
/* Anker nicht unter Header + Unternavigation verstecken */
html { scroll-padding-top: calc(var(--hdr) + 72px); }
/* Mega-Menü nur über den gemeinsamen Zustand (.open) öffnen */
.nav li:hover .mega, .nav li:focus-within .mega { opacity: 0; visibility: hidden; transform: translateY(6px); }
.nav li .mega.open { opacity: 1; visibility: visible; transform: none; }
.nav li:has(.mega.open) .chev { transform: rotate(180deg); }
/* Formular: Datei-Fehler, Pflichtfeld-Hinweis */
.file-err { margin: 8px 0 0; font: 700 14px/1.4 var(--f-ui); color: #a03a12; }
.file-err:empty { display: none; }
.form-req { margin: 0; font: 400 13.5px/1.4 var(--f-ui); color: var(--ink-3); }
.form-msg a { color: inherit; font-weight: 700; }
/* Einheitlicher Abstand nach dem Rechner (DE + EN) */
#calculator + .sec--line { border-top: 0; padding-top: 0; }
/* Mobile: Karten wirklich einspaltig, Kontaktkarten nie zu schmal */
@media (max-width: 640px) {
  .cards > *:nth-child(even), .cards--4 > *:nth-child(even), .cards--5 > *:nth-child(even), .cards--2 > *:nth-child(even) { padding-left: 0 !important; border-left: 0 !important; }
  .person p a { overflow-wrap: anywhere; }
}
@media (max-width: 420px) { .people { grid-template-columns: 1fr; } }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .calc select:focus-visible, .calc input[type=range]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); box-shadow: 0 0 0 5px #fff; }
/* Meldungen nach Senden ohne JavaScript (Weiterleitung auf #gesendet / #fehler) */
.form-msg.nojs-msg { display: none; }
.form-msg.nojs-msg:target { display: block; }