/* Branchenseiten: dunkler Hero mit laufender Bildschirm-Szene, Use Cases als klebende Story (Bühne links, Blöcke rechts),
   Bildschirm-Szenen als reines HTML/CSS in einem Plotdesk-Fenster. Typografie, Farben und Raster kommen von der Startseite. */
.industry-page :where(h1, h2, h3) { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.industry-page :where(section, article, nav)[id] { scroll-margin-top: calc(var(--header-h, 78px) + 92px); }
.industry-page .ind-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-dark); }
.ind-kicker > span:empty { width: 7px; height: 7px; flex: 0 0 7px; background: currentColor; }
.ind-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--line-light); }
.ind-link:hover { border-color: var(--ink); }
.ind-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 30px; }
.ind-actions .button { font-size: 13px; gap: 20px; }

/* ---------- Ein- und Ausblenden (nur mit JavaScript, sonst alles sofort sichtbar) ---------- */
.js [data-fx], .js [data-fx-group] > * { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-fx="scale"] { transform: translateY(18px) scale(.97); }
.js [data-fx="fade"] { transform: none; }
.js [data-fx].is-in, .js [data-fx-group].is-in > * { opacity: 1; transform: none; }

/* ---------- Hero: Kopf zentriert, darunter die Beispielansicht als scrollgetriebene Geschichte ---------- */
.ind-hero { position: relative; overflow: clip; background: var(--ink); color: #f7f9f1; isolation: isolate; --hero-p: 0; }
.ind-hero__backdrop { position: absolute; inset: 0; z-index: -2; }
.ind-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.8) brightness(.7); animation: ind-drift 28s linear infinite alternate; }
.ind-hero.is-off .ind-hero__backdrop img { animation-play-state: paused; }
.ind-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 0%, rgba(5, 12, 13, .2), rgba(5, 12, 13, .78) 70%), linear-gradient(180deg, rgba(5, 12, 13, .72), rgba(5, 12, 13, .56) 30%, rgba(5, 12, 13, .84) 70%, rgba(5, 12, 13, .98) 100%); }
@keyframes ind-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1%, 0); } }
.ind-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 24px; font-size: 11px; color: #b9c5b6; }
.ind-breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ind-breadcrumb > span[aria-hidden] { color: #6f7e70; }
.ind-hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 960px; margin-inline: auto; padding-block: 20px 28px; text-align: center; }
.ind-hero .ind-kicker { color: var(--mint); }
/* Branchen-Label: deutlich lesbar, damit sofort klar ist, für wen die Seite ist (Niklas, 13.09.2026). */
.ind-hero__industry { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px; border: 1px solid #73f1a666; border-radius: 999px; background: #73f1a614; font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.3; color: var(--mint); }
.ind-hero__industry::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px #73f1a633; }
.ind-hero h1 { max-width: 15ch; font-size: clamp(46px, 5.2vw, 82px); letter-spacing: -.06em; line-height: .98; text-wrap: balance; }
.ind-hero h1 > span { display: block; color: var(--mint); }
.ind-hero__tagline { max-width: 620px; margin-top: 22px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: #d7e0d3; text-wrap: pretty; }
.ind-hero .ind-actions { justify-content: center; }
/* Highlight im Fließtext: hellgrüne Linie unter der Schrift, klar unterhalb der Grundlinie, damit sie nie wie ein Durchstrich wirkt. */
.ind-hl { font-style: normal; color: inherit; text-decoration: underline; text-decoration-color: rgba(115, 241, 166, .6); text-decoration-thickness: .12em; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.ind-cases .ind-hl { text-decoration-color: rgba(115, 241, 166, .85); }
.ind-directory .ind-hl { color: #f4f7f1; }
.ind-hero__jump { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 500; color: #fff; border-bottom: 1px solid #ffffff55; }
.ind-hero__jump:hover { border-color: var(--mint); color: var(--mint); }
.ind-hero__story { position: relative; }
.ind-hero__stage { display: flex; flex-direction: column; align-items: center; }
.ind-hero__visual { position: relative; width: 100%; max-width: 1080px; padding-top: 8px; }
.ind-hero__visual::before { content: ''; position: absolute; inset: 10% -4% -6%; z-index: -1; background: radial-gradient(55% 55% at 50% 60%, #73f1a636, transparent 70%); filter: blur(24px); }
.ind-hero__signal { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; font-size: 12px; font-weight: 500; color: var(--mint); }
.ind-hero__signal > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--mint); color: var(--ink); font-size: 15px; }
.ind-window--hero { box-shadow: 0 40px 90px #00000080, 0 0 0 1px #ffffff14; }
.ind-window--hero .scene { font-size: clamp(9px, 1.6cqw, 16px); }
.ind-hero__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1080px; margin: 28px 0 0; padding: 0; list-style: none; }
.ind-hero__steps li { display: flex; gap: 12px; padding-top: 14px; border-top: 1px solid #ffffff2a; font-size: 13px; line-height: 1.55; color: #9fb0a3; transition: color .5s var(--ease-out), border-color .5s var(--ease-out); }
.ind-hero__steps li > span { flex: 0 0 auto; font-family: var(--font-display); font-size: 12px; line-height: 1.6; color: var(--mint); opacity: .55; transition: opacity .5s; }
.ind-hero__steps li > p { margin: 0; }
.ind-hero__steps li.is-active { color: #fff; border-top-color: var(--mint); }
.ind-hero__steps li.is-active > span { opacity: 1; }
/* Scroll-Modus (breite Fenster, keine reduzierte Bewegung): die Bühne klebt unter dem Kopf, --hero-p (0 bis 1) ist der
   Fortschritt durch die Geschichte, --reveal (an der Szene) die Zahl der bereits sichtbaren Schritte. Jedes Element der
   Szene leitet aus seinem --i ab, ob es dran ist (--on) und, bei Denk-Zuständen, ob es wieder weg ist (--off). */
.ind-hero.is-scroll .ind-hero__story { height: 230vh; }
/* Der Klebepunkt (--pin-top, aus app.js) legt die Bühne mittig ins Fenster; beim Laden steht sie direkt unter dem Kopf. */
.ind-hero.is-scroll .ind-hero__pin { position: sticky; top: var(--pin-top, calc(var(--header-h, 76px) + 1px)); padding-top: 4px; }
.ind-hero.is-scroll .ind-hero__visual { --hero-in: clamp(0, var(--hero-p) / .12, 1); max-width: min(1080px, calc((100vh - 300px) * 1.7)); }
.ind-hero.is-scroll .ind-window--hero { transform: perspective(1600px) rotateX(calc((1 - var(--hero-in)) * 9deg)) scale(calc(.94 + .06 * var(--hero-in))); transform-origin: 50% 0; }
.ind-hero.is-scroll .ind-hero__steps { max-width: min(1080px, calc((100vh - 300px) * 1.7)); }
.ind-hero.is-scroll .scene * { --on: clamp(0, var(--reveal, 0) - var(--i, 0), 1); --off: clamp(0, var(--reveal, 0) - var(--gone, 999), 1); }
.ind-hero.is-scroll .scene .anim, .ind-hero.is-scroll .scene .sc-stream { animation: none !important; opacity: var(--on); transform: translateY(calc((1 - var(--on)) * .5em)); transition: none; }
.ind-hero.is-scroll .scene .sc-stream { transform: none; clip-path: inset(0 calc((1 - var(--on)) * 100.5%) 0 0); }
.ind-hero.is-scroll .scene .sc-stream--last::after { display: none; }
.ind-hero.is-scroll .scene .sc-chat__typing { --gone: 3; }
.ind-hero.is-scroll .scene .sc-think, .ind-hero.is-scroll .scene .sc-chat__typing { overflow: hidden; opacity: calc(var(--on) * (1 - var(--off))); max-height: calc((1 - var(--off)) * 2.4em); margin-block-end: calc(var(--off) * -.8em); }
.ind-hero.is-scroll .scene .sc-think i, .ind-hero.is-scroll .scene .sc-think span, .ind-hero.is-scroll .scene .sc-chat__typing i, .ind-hero.is-scroll .scene .sc-check::before, .ind-hero.is-scroll .scene .scene__footer i { animation: none !important; }
.ind-hero.is-scroll .scene .sc-think i { transform: rotate(calc(var(--reveal, 0) * 320deg)); }
.ind-hero.is-scroll .scene .sc-doc__line.is-hl > span { transition: none; background: rgb(214 245 227 / calc(var(--on) * 100%)); box-shadow: inset .25em 0 0 rgb(46 184 114 / calc(var(--on) * 100%)); }
.ind-hero.is-scroll .scene .sc-dash__track i { animation: none !important; transform: scaleX(var(--on)); }

.ind-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 28px 56px; padding-block: 48px 56px; border-top: 1px solid #ffffff1f; }
.ind-trust > p { font-size: 14px; line-height: 1.6; color: #b9c5b6; }
.ind-trust > p strong { color: #fff; font-weight: 500; }
/* Logos weiß auf Dunkel, ohne Kasten: eine Silhouette je Marke, gleiche Höhe, viel Luft. */
.ind-trust__logos { display: inline-flex; align-items: center; gap: 44px; }
.ind-trust__logos img { width: auto; max-width: 150px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.ind-trust__logos img[alt="Melitta"], .ind-trust__logos img[alt="jpc"] { height: 34px; }
.ind-trust__logos img[alt="KACO"] { height: 30px; filter: grayscale(1) brightness(1.25); } /* Wortmarke sitzt in Farbflächen: nur entsättigen, sonst bleibt ein weißer Block */
.ind-trust__logos img[alt="Siblik"], .ind-trust__logos img[alt="ROTH"], .ind-trust__logos img[alt="MöllerGroup"] { height: 24px; }
.ind-trust__proof { display: flex; align-items: baseline; gap: 12px; }
.ind-trust__proof strong { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -.05em; color: var(--mint); }
.ind-trust__proof span { max-width: 22ch; font-size: 13px; line-height: 1.5; color: #d7e0d3; }
.ind-trust > a { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; font-size: 13px; font-weight: 500; color: #fff; }
.ind-trust > a:hover { color: var(--mint); }
.ind-trust > a > span { transition: transform .2s var(--ease-out); }
.ind-trust > a:hover > span { transform: translate(2px, -2px); }

/* ---------- Kapitelköpfe ---------- */
.ind-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: end; margin-bottom: 44px; }
.ind-head > .ind-kicker { grid-column: 1 / -1; }
.ind-head > h2 { grid-column: 1 / span 7; font-size: clamp(36px, 3.9vw, 60px); }
.ind-head > h2 > span { color: var(--mint-dark); }
.ind-head__lead { grid-column: 9 / span 4; max-width: 420px; padding-bottom: 6px; color: var(--text-2); font-size: 17px; line-height: 1.65; }
.ind-head--tight { margin-bottom: 36px; }

/* ---------- Kennen Sie das? ---------- */
.ind-pains { padding-block: clamp(64px, 7vw, 104px); background: var(--paper); }
.ind-pains__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ind-pains__grid li { padding-top: 22px; border-top: 1px solid var(--line-strong, #9ca895); }
.ind-pains__index { display: block; margin-bottom: 26px; font-family: var(--font-display); font-size: 13px; color: var(--mint-dark); }
.ind-pains h3 { font-size: clamp(22px, 1.7vw, 26px); letter-spacing: -.035em; }
.ind-pains p { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--text-2); }

/* ---------- Use Cases: Rollenleiste und klebende Story ---------- */
.ind-cases { padding-block: clamp(64px, 7vw, 104px) clamp(48px, 5vw, 80px); background: #fff; }
.ind-roles { position: sticky; top: var(--header-h, 68px); z-index: 8; display: flex; gap: 8px; margin-bottom: 20px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; background: #fff; border-block: 1px solid var(--line-light); }
.ind-roles::-webkit-scrollbar { display: none; }
.ind-roles a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--line-light); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.ind-roles a > span { font-family: var(--font-display); font-size: 11px; color: var(--mint-dark); }
.ind-roles a:hover { border-color: var(--ink); }
.ind-roles a > span { transition: transform .2s var(--ease-out); }
.ind-roles a:hover > span { transform: translateX(2px); }
.ind-roles a.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.ind-roles a.is-current > span { color: var(--mint); }
.ind-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: start; }
.ind-story__stage { display: none; grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h, 68px) + 96px); }
.ind-story.is-sticky .ind-story__stage { display: block; }
.ind-story.is-sticky .ind-window--inline { display: none; }
.ind-story__blocks { grid-column: 1 / -1; }
.ind-story.is-sticky .ind-story__blocks { grid-column: 8 / span 5; }
.ind-window--stage { position: relative; aspect-ratio: 16 / 10.6; }
.ind-story__screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s 600ms; pointer-events: none; }
.ind-story__screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
.ind-story__stage-note { margin-top: 14px; font-size: 11px; line-height: 1.6; color: var(--text-3); }
.ind-case { padding-block: 44px 52px; border-top: 1px solid var(--line-light); transition: opacity 500ms var(--ease-out); }
.ind-case:first-child { border-top: 0; padding-top: 8px; }
.ind-story.is-sticky .ind-case { padding-block: 48px 56px; }
.ind-story.is-sticky .ind-case:first-child { padding-top: 12px; }
.ind-story.is-sticky .ind-case.is-dim { opacity: .38; }
.ind-story.is-sticky .ind-case.is-dim:focus-within { opacity: 1; }
.ind-case__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mint-dark); }
.ind-case__index { font-family: var(--font-display); font-size: 13px; letter-spacing: 0; }
.ind-case__role { padding: 5px 10px; border-radius: 999px; background: #e3ead8; }
.ind-case__label { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-2); }
.ind-case h3 { max-width: 560px; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.1; text-wrap: pretty; }
.ind-window--inline { margin-top: 26px; box-shadow: 0 18px 40px #1b2a2114; }
.ind-case__pair { display: grid; gap: 18px; margin-top: 26px; }
.ind-case__pair p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.ind-case__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ind-case__tag--after { color: var(--mint-dark); }
.ind-case__pair > div:last-child p { color: var(--ink); }
.ind-case__steps { margin-top: 20px; border-block: 1px solid var(--line-light); font-size: 13px; line-height: 1.7; }
.ind-case__steps summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.ind-case__steps summary::-webkit-details-marker { display: none; }
.ind-case__steps summary > span { font-size: 22px; line-height: 1; color: var(--mint-dark); transition: transform .2s; }
.ind-case__steps[open] summary > span { transform: rotate(45deg); }
.ind-case__steps ol { margin: 0 0 18px; padding-left: 20px; color: var(--text-2); }
.ind-case__steps li + li { margin-top: 6px; }
.ind-case__result { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; color: var(--mint-dark); }
.ind-case__result > span { font-size: 26px; line-height: 1; }
.ind-case__result strong { font-size: 15px; font-weight: 500; line-height: 1.5; }
.ind-case__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 24px; }
.ind-case__systems { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ind-case__systems li { padding: 5px 9px; border: 1px solid var(--line-light); border-radius: 4px; font-size: 11px; color: var(--text-2); }
.ind-case__talk { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--line-light); background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.ind-case__talk:hover { border-color: var(--ink); }
.ind-case__talk > span { transition: transform .2s var(--ease-out); }
.ind-case__talk:hover > span { transform: translate(2px, -2px); }

/* ---------- Bildschirm-Szenen ---------- */
.ind-window { container-type: inline-size; border-radius: 12px; }
.scene { position: relative; height: auto; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d3dccf; border-radius: 12px; background: #f6f8f4; color: #1c2a22; font-family: var(--font-body); font-size: clamp(9px, 2cqw, 13px); line-height: 1.45; }
.ind-window--stage .scene { position: absolute; inset: 0; }
.scene__chrome { display: flex; align-items: center; gap: 1em; flex: 0 0 auto; height: 2.7em; padding: 0 1.1em; background: #fff; border-bottom: 1px solid #e3e8df; font-size: .95em; }
.scene__dots { display: inline-flex; gap: .35em; }
.scene__dots i { width: .6em; height: .6em; border-radius: 50%; background: #d5dccf; }
.scene__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: .9em; color: #4d5d52; }
.scene__instance { display: inline-flex; align-items: center; gap: .5em; font-size: .78em; color: #4d5d52; white-space: nowrap; }
.scene__instance i { width: .55em; height: .55em; border-radius: 50%; background: #2eb872; }
.scene__frame { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.scene__rail { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 1em 0; background: #0f1b17; }
.scene__mark { width: 1.6em; height: 1.6em; margin-bottom: .6em; border-radius: .4em; background: var(--mint); }
.scene__rail i { width: 1.3em; height: 1.3em; border-radius: .35em; background: #ffffff22; }
.scene__rail i.is-on { background: #73f1a6cc; }
.scene__avatar { display: grid; place-items: center; width: 1.7em; height: 1.7em; margin-top: auto; border-radius: 50%; background: #2c4a3b; color: #cfead9; font-size: .7em; font-weight: 600; }
.scene__body { padding: 1.1em 1.2em; min-width: 0; }
.scene__footer { display: flex; align-items: center; gap: .7em; flex: 0 0 auto; padding: .7em 1.2em; border-top: 1px solid #d9e6da; background: #e8f5ec; color: #174c39; font-size: .82em; font-weight: 500; }
.scene__footer i { width: .6em; height: .6em; border-radius: 50%; background: #2eb872; box-shadow: 0 0 0 .25em #2eb87233; }
.js .scene.is-live .scene__footer i { animation: sc-pop 600ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(12 * 170ms + 420ms); }
@keyframes sc-pop { from { transform: scale(0); } to { transform: scale(1); } }
.js .scene .anim { opacity: 0; transform: translateY(.5em); }
.js .scene.is-live .anim { animation: scene-in 560ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 170ms + 180ms); }
@keyframes scene-in { to { opacity: 1; transform: none; } }
/* Antworten laufen wie ein Textstrom von links ein, die letzte Zeile trägt kurz einen Cursor. */
.js .scene .sc-stream { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js .scene.is-live .sc-stream { animation: sc-stream 480ms linear forwards; animation-delay: calc(var(--i, 0) * 170ms + 180ms); }
@keyframes sc-stream { to { clip-path: inset(0 -.2em 0 0); } }
.sc-stream--last::after { content: ''; display: inline-block; width: .1em; height: .95em; margin-left: .2em; vertical-align: text-bottom; background: #174c39; opacity: 0; }
.js .scene.is-live .sc-stream--last::after { animation: sc-caret 1.6s steps(1, end) forwards; animation-delay: calc(var(--i, 0) * 170ms + 180ms); }
@keyframes sc-caret { 0%, 25%, 50%, 75% { opacity: 1; } 12.5%, 37.5%, 62.5%, 87.5%, 100% { opacity: 0; } }
/* Denk-Zustand: Schimmertext, der verschwindet, sobald das Ergebnis erscheint (--gone = Index des Ergebnisses). */
.sc-think { display: flex; align-items: center; gap: .55em; font-size: .78em; font-weight: 500; color: #6c7c70; }
.sc-think i { flex: 0 0 auto; width: .65em; height: .65em; border-radius: 50%; border: .13em solid #c9d4cb; border-top-color: #174c39; }
/* Endliche Läufe statt Endlosschleifen: nach dem Verschwinden des Denk-Zustands steht alles still. */
.js .scene.is-live .sc-think i { animation: sc-spin 800ms linear 5; }
.sc-think span { color: #174c39; }
.js .scene.is-live .sc-think span { animation: sc-pulse 1.2s ease-in-out 4; }
@keyframes sc-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.js .scene.is-live .sc-think { animation: scene-in 300ms forwards, sc-gone 300ms forwards; animation-delay: calc(var(--i, 0) * 170ms + 180ms), calc(var(--gone, 3) * 170ms + 120ms); }
/* Erledigt-Stati: erst ein kurzer Spinner, der zum Haken wird. Ohne JavaScript oder mit reduzierter Bewegung steht der Haken sofort. */
.sc-check::before { content: ''; display: inline-block; box-sizing: border-box; width: .34em; height: .6em; margin: 0 .5em 0 .1em; border: solid currentColor; border-width: 0 .14em .14em 0; border-radius: 0; transform: rotate(765deg) translateY(-.08em); vertical-align: -.02em; }
.js .scene.is-live .sc-check::before { animation: sc-spin-check 1000ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 170ms + 420ms); }
@keyframes sc-spin-check {
  0%, 65% { width: .62em; height: .62em; margin-right: .35em; border-width: .14em; border-radius: 50%; border-color: #c9d4cb; border-top-color: currentColor; }
  0% { transform: rotate(0deg); }
  65% { transform: rotate(720deg); }
  100% { width: .34em; height: .6em; margin-right: .5em; border-width: 0 .14em .14em 0; border-radius: 0; border-color: currentColor; transform: rotate(765deg) translateY(-.08em); }
}

/* Extrahieren: Dokument links mit Markierungen, Ergebnistabelle rechts. */
.sc-extract { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1em; }
.sc-doc { padding: .9em; border: 1px solid #e0e6db; border-radius: .6em; background: #fff; }
.sc-doc__head { display: flex; align-items: center; gap: .6em; margin-bottom: .8em; font-size: .78em; color: #5a6a5e; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-doc__icon { flex: 0 0 auto; padding: .15em .4em; border-radius: .3em; background: #f1d9d9; color: #8a2f2f; font-size: .85em; font-weight: 700; }
.sc-doc__line { margin: 0; padding: .3em 0; font-size: .8em; color: #3c4a41; border-top: 1px dashed #edf0ea; }
.sc-doc__line > span { display: inline; padding: .05em .2em; border-radius: .2em; background: transparent; transition: background .4s; }
.js .scene.is-live .sc-doc__line.is-hl > span { animation: sc-hl 600ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 170ms + 500ms); }
@keyframes sc-hl { to { background: #d6f5e3; box-shadow: inset .25em 0 0 #2eb872; } }
.sc-extract__out { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.sc-table { display: flex; flex-direction: column; gap: .3em; }
.sc-table__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .55em .8em; border-radius: .45em; background: #fff; border: 1px solid #e3e8df; font-size: .8em; }
.sc-table__row--head { background: transparent; border: 0; padding-block: 0 .2em; font-size: .68em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c7c70; }
.sc-table__row > span { min-width: 0; overflow-wrap: anywhere; }
.sc-table__row > span:last-child { white-space: nowrap; }
.sc-status { display: inline-block; padding: .2em .55em; border-radius: .3em; font-size: .85em; font-weight: 600; white-space: nowrap; }
.sc-status--ok { background: #e3ead8; color: #2f4a34; }
.sc-status--neu { background: #dcebf7; color: #1f4f7a; }
.sc-status--frage { background: #fbe7cf; color: #8a4b12; }

/* Chat: Frage, Tippen, Antwort mit Quellen und Aktionen. */
.sc-chat { display: flex; flex-direction: column; gap: .8em; }
.sc-chat__who { display: block; margin-bottom: .3em; font-size: .68em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6c7c70; }
.sc-chat__who--bot { color: #174c39; }
.sc-chat__user { align-self: flex-end; max-width: 88%; padding: .8em 1em; border-radius: .8em .8em .2em .8em; background: #e3ead8; }
.sc-chat__user p { margin: 0; font-size: .86em; }
.sc-chat__typing { display: inline-flex; gap: .3em; padding: .6em .8em; border-radius: .8em; background: #fff; border: 1px solid #e3e8df; }
.sc-chat__typing i { width: .5em; height: .5em; border-radius: 50%; background: #9db3a3; }
.js .scene.is-live .sc-chat__typing i { animation: sc-typing 1s 3; }
.js .scene.is-live .sc-chat__typing i:nth-child(2) { animation-delay: .15s; } .js .scene.is-live .sc-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sc-typing { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.2em); } }
.js .scene.is-live .sc-chat__typing { animation: scene-in 300ms forwards, sc-gone 300ms forwards; animation-delay: calc(1 * 170ms + 180ms), calc(3 * 170ms + 120ms); }
@keyframes sc-gone { to { opacity: 0; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; } }
.sc-chat__bot { padding: .9em 1em; border-radius: .8em .8em .8em .2em; border: 1px solid #e3e8df; background: #fff; }
.sc-chat__bot p { margin: 0; padding: .35em 0; font-size: .84em; border-top: 1px solid #f0f3ee; }
.sc-chat__bot p:first-of-type { border-top: 0; }
.sc-chat__sources { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .7em; }
.sc-chat__sources span { padding: .25em .6em; border-radius: .3em; background: #eef2ea; font-size: .7em; color: #3f5347; }
.sc-chat__actions { display: flex; flex-wrap: wrap; gap: .5em; }
.sc-chat__actions span { padding: .5em .9em; border-radius: .4em; background: #174c39; color: #fff; font-size: .74em; font-weight: 500; }
.sc-chat__actions span + span { background: #fff; color: #174c39; border: 1px solid #174c39; }

/* Vergleich: Tabelle mit hervorgehobener Bestmarke. */
.sc-compare__grid { display: flex; flex-direction: column; gap: .3em; }
.sc-compare__row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(var(--cols, 3), minmax(0, 1fr)); gap: .5em; align-items: center; padding: .55em .8em; border-radius: .45em; background: #fff; border: 1px solid #e3e8df; font-size: .8em; }
.sc-compare__row > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: right; }
.sc-compare__row > span:first-child { text-align: left; }
.sc-compare__row--head { background: transparent; border: 0; padding-block: 0 .2em; font-size: .68em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6c7c70; }
.sc-compare__label { color: #4d5d52; }
.sc-compare__row .is-best { font-weight: 600; color: #174c39; }
.sc-compare__row .is-best::before { content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: #2eb872; }
.sc-compare__row--sum { background: #e8f5ec; border-color: #cfe6d6; font-weight: 600; }

/* Überwachung: Meldungen mit Stufe und Status. */
.sc-monitor { display: flex; flex-direction: column; gap: .5em; }
.sc-monitor__item { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: .8em; align-items: center; padding: .7em .9em; border-radius: .5em; background: #fff; border: 1px solid #e3e8df; border-left-width: .3em; }
.sc-monitor__item--hoch { border-left-color: #c5452f; } .sc-monitor__item--mittel { border-left-color: #d9962a; } .sc-monitor__item--info { border-left-color: #8fa89a; }
.sc-monitor__level { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6c7c70; }
.sc-monitor__item--hoch .sc-monitor__level { color: #c5452f; } .sc-monitor__item--mittel .sc-monitor__level { color: #b0741b; }
.sc-monitor__item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .84em; font-weight: 600; line-height: 1.3; overflow: hidden; }
.sc-monitor__item small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .72em; color: #5a6a5e; overflow: hidden; }
.sc-monitor__tag { padding: .3em .6em; border-radius: .3em; background: #e8f5ec; color: #174c39; font-size: .68em; font-weight: 600; white-space: nowrap; }

/* Auswertung: Frage, Kennzahlen, Balken, Antwort. */
.sc-dash { display: flex; flex-direction: column; gap: .8em; }
.sc-dash__ask { padding: .7em .9em; border-radius: .6em; background: #e3ead8; }
.sc-dash__ask p { margin: 0; font-size: .84em; }
.sc-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.sc-dash__kpi { padding: .7em .8em; border-radius: .5em; background: #fff; border: 1px solid #e3e8df; min-width: 0; }
.sc-dash__kpi small { display: block; font-size: .66em; color: #6c7c70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-dash__kpi strong { display: block; margin-top: .2em; font-family: var(--font-display); font-size: 1.35em; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.sc-dash__kpi span { display: inline-block; margin-top: .3em; padding: .15em .45em; border-radius: .3em; background: #eef2ea; font-size: .66em; color: #3f5347; }
.sc-dash__chart { display: flex; flex-direction: column; gap: .45em; padding: .8em .9em; border-radius: .5em; background: #fff; border: 1px solid #e3e8df; }
.sc-dash__bar { display: grid; grid-template-columns: 5em minmax(0, 1fr) 3em; gap: .7em; align-items: center; font-size: .76em; }
.sc-dash__bar-label { color: #4d5d52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-dash__track { position: relative; height: .9em; border-radius: .2em; background: #eef2ea; overflow: hidden; }
.sc-dash__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1.8%); border-radius: .2em; background: #174c39; transform: scaleX(0); transform-origin: left; }
.js .scene.is-live .sc-dash__track i { animation: sc-grow 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 170ms + 400ms); }
.sc-dash__bar--alert .sc-dash__track i { background: #c5452f; }
.sc-dash__track em { position: absolute; top: -.1em; bottom: -.1em; left: calc(var(--v) * 1.8%); width: .15em; background: #1c2a22; }
@keyframes sc-grow { to { transform: scaleX(1); } }
.sc-dash__value { text-align: right; font-variant-numeric: tabular-nums; }
.sc-dash__answer { margin: 0; padding: .8em 1em; border-radius: .6em .6em .6em .2em; background: #fff; border: 1px solid #e3e8df; font-size: .82em; }

/* Ablauf: Knoten in Reihe. */
.sc-flow { display: flex; flex-direction: column; gap: .5em; }
.sc-flow__node { position: relative; display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: .8em; align-items: center; padding: .7em .9em; border-radius: .5em; background: #fff; border: 1px solid #e3e8df; }
.sc-flow__node + .sc-flow__node::before { content: ''; position: absolute; left: 2.4em; top: -.55em; height: .55em; width: .12em; background: #b8c8bd; }
.sc-flow__kind { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6c7c70; }
.sc-flow__node--ai .sc-flow__kind, .sc-flow__node--out .sc-flow__kind { color: #174c39; }
.sc-flow__node--approve .sc-flow__kind { color: #b0741b; }
.sc-flow__node strong { display: block; font-size: .84em; font-weight: 600; }
.sc-flow__node small { display: block; font-size: .72em; color: #5a6a5e; }

/* Entwurf: Abschnitte übernommen oder offen. */
.sc-draft { display: flex; flex-direction: column; gap: .45em; }
.sc-draft__section { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; gap: .8em; align-items: center; padding: .65em .9em; border-radius: .5em; background: #fff; border: 1px solid #e3e8df; }
.sc-draft__label { font-family: var(--font-display); font-size: .82em; font-weight: 500; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sc-draft__section p { margin: 0; font-size: .76em; color: #3c4a41; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-draft__section b { padding: .3em .6em; border-radius: .3em; font-size: .66em; font-weight: 600; white-space: nowrap; background: #e8f5ec; color: #174c39; }
.sc-draft__section--open b { background: #fbe7cf; color: #8a4b12; }
.sc-draft__section--open { border-style: dashed; }

/* ---------- Heute und mit Plotdesk ---------- */
.ind-shift { padding-block: clamp(64px, 7vw, 104px); background: var(--mint-dark); color: #f4f7f1; }
.ind-shift .ind-kicker { color: var(--mint); }
.ind-shift .ind-head > h2 > span { color: var(--mint); }
.ind-shift .ind-head__lead { color: #cfe0d3; }
.ind-shift__table { display: flex; flex-direction: column; }
.ind-shift__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 22px; border-top: 1px solid #ffffff2a; }
.ind-shift__row--head { padding-block: 0 14px; border-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9c4b1; }
.ind-shift__row span { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; }
.ind-shift__row span:first-child { color: #b6c9bb; }
.ind-shift__row span:last-child { display: flex; gap: 14px; align-items: flex-start; font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.ind-shift__row span:last-child i { flex: 0 0 auto; color: var(--mint); font-style: normal; font-size: 1.15em; line-height: 1.2; }

/* ---------- Referenzen ---------- */
.ind-proof { padding-block: clamp(56px, 6vw, 88px); background: #e3ead8; }
.ind-proof__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8%; align-items: start; }
.ind-proof__number { display: block; font-family: var(--font-display); font-size: clamp(56px, 6vw, 92px); letter-spacing: -.06em; line-height: 1; font-weight: 500; color: var(--mint-dark); }
.ind-proof__label { margin-top: 10px; font-size: 15px; }
.ind-proof__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.ind-proof__logos img { max-width: 135px; height: 34px; width: auto; object-fit: contain; }
.ind-proof__logos img[alt="jpc"] { filter: brightness(0); opacity: .8; }
.ind-proof__grid h2 { font-size: clamp(28px, 2.6vw, 38px); }
.ind-proof__grid > div > p:not([class]) { margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.ind-proof__grid small { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid #b9c7ad; font-size: 11px; line-height: 1.65; color: #5f7059; }

/* ---------- So arbeiten wir ---------- */
.ind-approach { padding-block: clamp(64px, 7vw, 104px); background: var(--paper); }
.ind-approach__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10%; }
.ind-approach__intro h2 { font-size: clamp(32px, 3vw, 46px); }
.ind-approach__intro > p:not(.ind-kicker) { margin-top: 22px; max-width: 480px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.ind-team { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.ind-team img { width: 60px; height: 60px; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.ind-team p { font-size: 13px; line-height: 1.5; }
.ind-team strong { display: block; font-weight: 500; }
.ind-team span { color: var(--text-2); font-size: 12px; }
.ind-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ind-steps li { display: flex; align-items: flex-start; gap: 20px; padding-block: 26px; border-top: 1px solid #c3cfb8; }
.ind-steps li:first-child { border-top: 0; padding-top: 0; }
.ind-steps li > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid #b0c19f; border-radius: 50%; color: var(--mint-dark); font-family: var(--font-display); font-size: 12px; }
.ind-steps h3 { font-size: 26px; }
.ind-steps p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.ind-systems { margin-top: 10px; padding: 24px; border-radius: 6px; background: #e8eddf; }
.ind-systems .ind-kicker { font-size: 10px; margin-bottom: 14px; }
.ind-systems ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ind-systems li { padding: 8px 11px; border: 1px solid #c1ceb6; border-radius: 4px; font-size: 11px; }
.ind-systems .ind-link { margin-top: 18px; font-size: 12px; }

/* ---------- FAQ ---------- */
.ind-faq { padding-block: clamp(64px, 7vw, 104px); background: #fff; }
.ind-faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10%; align-items: start; }
.ind-faq__grid h2 { font-size: clamp(32px, 3vw, 45px); }
.ind-faq__grid .ind-link { align-items: flex-start; margin-top: 30px; max-width: 340px; color: var(--text-2); }
.ind-faq__item { border-top: 1px solid var(--line-light); }
.ind-faq__item:last-child { border-bottom: 1px solid var(--line-light); }
.ind-faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-block: 22px; list-style: none; font-family: var(--font-display); font-size: 19px; line-height: 1.45; letter-spacing: -.02em; cursor: pointer; }
.ind-faq__item summary::-webkit-details-marker { display: none; }
.ind-faq__item summary > span { flex: 0 0 20px; font-size: 25px; font-weight: 400; line-height: 1; color: var(--mint-dark); transition: transform .2s; }
.ind-faq__item[open] summary > span { transform: rotate(45deg); }
.ind-faq__item > p { padding: 0 35px 24px 0; font-size: 15px; line-height: 1.8; color: var(--text-2); }

/* ---------- Schluss ---------- */
.ind-cta { padding-block: 72px; background: var(--ink); color: var(--paper); }
.ind-cta__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 15%; align-items: center; }
.ind-cta .ind-kicker { color: var(--mint); }
.ind-cta h2 { font-size: clamp(40px, 4.2vw, 64px); }
.ind-cta__grid > div > p:not(.ind-kicker) { max-width: 580px; margin-top: 24px; font-size: 17px; line-height: 1.7; color: #c4d0bd; }
.ind-cta__contact { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; padding-block: 8px; border-bottom: 1px solid #a3b79a; color: #dbe6d5; font-size: 13px; }
.ind-cta__portrait { max-width: 320px; transform: rotate(3deg); }
.ind-cta__portrait img { width: 100%; height: 270px; object-fit: cover; object-position: 50% 35%; border-radius: 4px 4px 0 0; }
.ind-cta__portrait > span { display: block; padding: 20px; background: #eaf0e1; color: var(--ink); font-family: var(--font-display); font-size: 21px; line-height: 1.3; border-radius: 0 0 4px 4px; }
.ind-cta__portrait > span > span { display: block; margin-top: 5px; font-family: var(--font-body); font-size: 10px; color: var(--text-2); }
.ind-cta :focus-visible { outline-color: var(--mint); }
.ind-summary { padding-block: 48px; border-bottom: 1px solid var(--line-light); background: var(--paper); }
.ind-summary__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 8%; }
.ind-summary h2 { font-size: 23px; }
.ind-summary__grid p { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.ind-related { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 30px; margin-top: 35px; padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 12px; }
.ind-related > span { margin-right: auto; color: var(--text-2); }
.ind-related a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.ind-related a:hover { color: var(--mint-dark); }

/* ---------- Übersicht /branchen ---------- */
.ind-directory { position: relative; overflow: clip; padding-bottom: 80px; background: var(--ink); color: #f7f9f1; isolation: isolate; }
.ind-directory::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 80% 10%, #73f1a622, transparent 70%); }
.ind-directory .ind-breadcrumb { color: #b9c5b6; }
.ind-directory__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12%; align-items: end; padding-block: 34px 60px; }
.ind-directory .ind-kicker { color: var(--mint); }
.ind-directory h1 { font-size: clamp(52px, 6.3vw, 96px); letter-spacing: -.06em; }
.ind-directory h1 > span { color: var(--mint); }
.ind-directory__head > p { max-width: 430px; padding-bottom: 10px; font-size: 19px; line-height: 1.65; color: #d7e0d3; }
.ind-directory__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.industry-card { position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 28px; border-radius: 16px; overflow: hidden; background: #0f1b17; color: #fff; isolation: isolate; transition: transform .35s var(--ease-out); }
.industry-card:hover, .js [data-fx-group].is-in > .industry-card:hover { transform: translateY(-6px); transition: transform .35s var(--ease-out); }
.industry-card__image { position: absolute; inset: 0; z-index: -2; }
.industry-card__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); transition: transform 1.2s var(--ease-out); }
.industry-card:hover .industry-card__image img { transform: scale(1.04); }
.industry-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 12, 13, .45), rgba(5, 12, 13, 0) 28%), linear-gradient(180deg, rgba(5, 12, 13, 0) 32%, rgba(5, 12, 13, .72) 62%, rgba(5, 12, 13, .96) 100%); }
.industry-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #dfe7db; }
.industry-card__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 22px; }
.industry-card__body { margin-top: auto; }
.industry-card__body h2 { max-width: 16ch; font-size: clamp(34px, 3.2vw, 48px); letter-spacing: -.05em; }
.industry-card__line { max-width: 44ch; margin-top: 14px; font-family: var(--font-display); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.35; letter-spacing: -.02em; color: #dfe7db; text-wrap: pretty; }
.industry-card__line > span { color: var(--mint); }
.industry-card__body ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.industry-card__body li { padding: 5px 10px; border: 1px solid #ffffff33; border-radius: 999px; font-size: 11px; color: #dfe7db; }
.industry-card__proof { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff2a; }
.industry-card__proof strong { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.04em; color: var(--mint); }
.industry-card__proof > span { font-size: 12px; color: #c4d0bd; }
.ind-directory__contact { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-top: 40px; padding: 36px 40px; border-radius: 16px; background: #ffffff0f; border: 1px solid #ffffff1a; }
.ind-directory__contact h2 { font-size: 28px; }
.ind-directory__contact p { margin-top: 10px; font-size: 15px; color: #c4d0bd; }
.ind-directory__contact .button { flex-shrink: 0; }

/* ---------- Umbrüche ---------- */
@media (max-width: 1180px) {
  .ind-story.is-sticky .ind-story__blocks { grid-column: 8 / span 5; }
  .ind-hero h1 { font-size: clamp(42px, 5.4vw, 72px); }
}
@media (max-width: 1023px) {
  .ind-hero__copy { padding-block: 16px 36px; }
  .ind-hero__visual { max-width: 760px; }
  .ind-hero__steps { grid-template-columns: 1fr; gap: 10px; max-width: 760px; margin-top: 22px; }
  .ind-hero__steps li { padding-top: 10px; color: #dfe7db; }
  .ind-hero__steps li > span { opacity: 1; }
  .ind-trust > a { margin-left: 0; }
  .ind-head { grid-template-columns: 1fr; gap: 6px; }
  .ind-head > h2, .ind-head__lead { grid-column: 1 / -1; }
  .ind-head__lead { max-width: 620px; margin-top: 16px; }
  .ind-pains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .ind-story__stage { display: none !important; }
  .ind-story .ind-window--inline { display: block !important; }
  .ind-story .ind-story__blocks { grid-column: 1 / -1; }
  .ind-story .ind-case.is-dim { opacity: 1; }
  .ind-case { padding-block: 44px 52px; }
  .ind-case__pair { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ind-shift__row { gap: 28px; }
  .ind-proof__grid, .ind-approach__grid, .ind-faq__grid, .ind-summary__grid { grid-template-columns: 1fr; gap: 32px; }
  .ind-cta__grid { gap: 40px; grid-template-columns: 1fr; }
  .ind-cta__portrait { display: flex; gap: 15px; align-items: center; max-width: none; transform: none; }
  .ind-cta__portrait img { width: 68px; height: 68px; border-radius: 50%; }
  .ind-cta__portrait > span { background: transparent; padding: 0; color: var(--paper); font-size: 18px; }
  .ind-cta__portrait > span > span { color: #c4d0bd; font-size: 11px; }
  .ind-directory__head { grid-template-columns: 1fr; gap: 26px; padding-block: 20px 44px; }
  .ind-directory__contact { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .industry-page { --margin: 20px; }
  .industry-page :where(section, article, nav)[id] { scroll-margin-top: calc(var(--header-h, 68px) + 70px); }
  .ind-breadcrumb { font-size: 10px; gap: 7px; padding-block: 18px; }
  .industry-page .ind-kicker { font-size: 10px; letter-spacing: .08em; margin-bottom: 18px; }
  .ind-hero h1 { font-size: clamp(38px, 10.2vw, 54px); }
  .ind-hero__copy { align-items: stretch; text-align: left; padding-bottom: 28px; }
  .ind-hero__industry { font-size: 12px; padding: 7px 12px; margin-bottom: 20px; }
  .ind-hero h1 { max-width: none; }
  .ind-hero__tagline { font-size: 16px; margin-top: 20px; }
  .ind-actions { gap: 14px; margin-top: 24px; }
  .ind-hero .ind-actions { justify-content: flex-start; }
  .ind-actions .button { width: 100%; }
  .ind-hero__signal { justify-content: flex-start; }
  .ind-hero__steps li { font-size: 12px; }
  .ind-trust { gap: 22px 28px; padding-block: 36px 40px; }
  .ind-trust > p { flex: 0 0 100%; }
  .ind-trust__logos { gap: 28px; }
  .ind-trust__logos img { max-width: 110px; height: 22px; }
  .ind-trust__logos img[alt="Melitta"], .ind-trust__logos img[alt="jpc"] { height: 28px; }
  .ind-trust__logos img[alt="KACO"] { height: 24px; }
  .ind-trust__logos img[alt="Siblik"], .ind-trust__logos img[alt="ROTH"], .ind-trust__logos img[alt="MöllerGroup"] { height: 20px; }
  .ind-trust__proof strong { font-size: 30px; }
  .ind-head { margin-bottom: 30px; }
  .ind-head > h2 { font-size: 34px; }
  .ind-head__lead { font-size: 15px; }
  .ind-pains { padding-block: 56px; }
  .ind-pains__grid { grid-template-columns: 1fr; gap: 22px; }
  .ind-pains__index { margin-bottom: 14px; }
  .ind-pains h3 { font-size: 23px; }
  .ind-cases { padding-block: 56px 40px; }
  .ind-roles { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .ind-case { padding-block: 36px 40px; }
  .ind-case h3 { font-size: 28px; }
  .ind-window--inline { margin-top: 20px; }
  .ind-case__pair { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .ind-case__pair p { font-size: 14px; }
  .ind-case__result strong { font-size: 14px; }
  .ind-case__foot { flex-direction: column; align-items: flex-start; }
  .scene { border-radius: 8px; }
  .ind-window { border-radius: 8px; }
  .sc-extract { grid-template-columns: 1fr; }
  .sc-dash__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
  .ind-shift { padding-block: 56px; }
  .ind-shift__row { grid-template-columns: 1fr; gap: 8px; padding-block: 18px; }
  .ind-shift__row--head span:last-child { display: none; }
  .ind-shift__row span { font-size: 16px; }
  .ind-proof { padding-block: 48px; }
  .ind-proof__number { font-size: 56px; }
  .ind-proof__logos { gap: 22px; }
  .ind-proof__logos img { max-width: 105px; height: 28px; }
  .ind-approach { padding-block: 56px; }
  .ind-steps li { gap: 14px; padding-block: 22px; }
  .ind-steps li > span { flex-basis: 30px; height: 30px; font-size: 10px; }
  .ind-steps h3 { font-size: 23px; }
  .ind-systems { padding: 20px; }
  .ind-faq { padding-block: 56px; }
  .ind-faq__item summary { font-size: 17px; gap: 14px; }
  .ind-faq__item > p { padding-right: 0; font-size: 14px; }
  .ind-cta { padding-block: 52px; }
  .ind-cta h2 { font-size: 37px; }
  .ind-cta__grid > div > p:not(.ind-kicker) { font-size: 15px; }
  .ind-summary h2 { font-size: 22px; }
  .ind-related { flex-direction: column; gap: 6px; }
  .ind-directory h1 { font-size: 46px; }
  .ind-directory__grid { grid-template-columns: 1fr; gap: 20px; }
  .industry-card { min-height: 440px; padding: 22px; }
  .industry-card__body h2 { font-size: 32px; }
  .industry-card__line { font-size: 16px; margin-top: 10px; }
  .ind-directory__contact { padding: 24px; margin-top: 32px; gap: 22px; }
  .ind-directory__contact .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .industry-page *, .industry-page *::before, .industry-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js [data-fx], .js [data-fx-group] > *, .js .scene .anim { opacity: 1; transform: none; }
  .js .scene .sc-dash__track i { transform: none; }
  .js .scene .sc-doc__line.is-hl > span { background: #d6f5e3; box-shadow: inset .25em 0 0 #2eb872; }
  .sc-chat__typing, .sc-think { display: none; }
  .js .scene .sc-stream { clip-path: none; }
}
@media print {
  .ind-hero { color: var(--ink); background: #fff; }
  .ind-hero__backdrop, .ind-roles, .ind-story__stage, .ind-cta { display: none !important; }
  .ind-story .ind-window--inline { display: block !important; }
  .ind-story.is-sticky .ind-story__blocks { grid-column: 1 / -1; }
  .ind-story.is-sticky .ind-case.is-dim { opacity: 1; }
  .ind-hero__tagline, .ind-hero__steps li, .ind-breadcrumb, .ind-hero h1 > span, .ind-trust > p, .ind-hero__industry { color: var(--ink); }
  .ind-trust__logos img { filter: none; }
  .js [data-fx], .js [data-fx-group] > *, .js .scene .anim { opacity: 1; transform: none; }
  details::details-content { display: block; content-visibility: visible; }
}