/* Lufttechnik — Werkhalle live. Bühne „Rohrnetz" (Stil in sim.css, Block rohrnetz),
   darunter ruhige Abschnitte: Fotos still, Bewegung nur in Typografie-Ebenen (.lt-ziffer)
   und im Filterschnitt (Canvas). Tokens aus basis.css, jeder mit Ersatzwert. */

.seite-lufttechnik main { background: var(--grund, #e6e7e5); }

/* --- Abschnittsleiste --------------------------------------------------- */
.lt-index { border-block: 1px solid var(--linie, rgba(18, 24, 29, .15)); background: var(--grund, #e6e7e5); }
.lt-index .huelle { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-block: 14px; }
.lt-index ol { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; margin: 0; padding: 0; }
.lt-index a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 32px; align-items: center; text-decoration: none; color: var(--text-leise, #4f585f); font: 500 var(--t-xs, .8125rem)/1.2 var(--schrift-text, 'Barlow', sans-serif); }
.lt-index a span { font: 500 10px/1 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
.lt-index a:hover { color: var(--text, #12181d); }
.lt-index__live { color: var(--text, #12181d) !important; font-weight: 600 !important; padding-right: 26px; border-right: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-index__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--rot, #e2231a); }
@media (max-width: 700px) { .lt-index__live { border: 0; padding: 0; width: 100%; } .lt-index ol { gap: 2px 18px; } }

/* --- Abschnitte ------------------------------------------------------------ */
.lt-abschnitt { position: relative; padding-block: var(--abstand, 120px); scroll-margin-top: var(--kopf-h, 72px); overflow: clip; }
.lt-abschnitt + .lt-abschnitt { border-top: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-abschnitt h2 { margin: 18px 0 28px; max-width: 18ch; overflow-wrap: break-word; hyphens: auto; }
.lt-marke__nr { color: var(--rot-text, #bd1a12); }
.lt-text, .lt-kopfzeile { position: relative; }
.lt-kopfzeile { margin-bottom: clamp(36px, 5vw, 64px); }
/* Typografie-Ebene: große Abschnittsziffer, nur als Kontur, wandert leicht gegen den Scroll */
.lt-ziffer {
  position: absolute; z-index: 0; right: 0; top: -.32em; pointer-events: none; user-select: none;
  font: 700 clamp(7rem, 17vw, 15rem)/1 var(--schrift-anzeige, 'Barlow Semi Condensed', sans-serif);
  color: transparent; -webkit-text-stroke: 1px var(--linie-stark, rgba(18, 24, 29, .34)); opacity: .55;
  transform: translate3d(0, var(--lt-ziffer-y, 0px), 0);
}
.lt-text .lt-ziffer { right: auto; left: 52%; }
.lt-text > :not(.lt-ziffer), .lt-kopfzeile > :not(.lt-ziffer) { position: relative; z-index: 1; }
.lt-prosa { max-width: 62ch; color: var(--text-leise, #4f585f); font-size: var(--t-md, 1.0625rem); line-height: 1.7; }
.lt-prosa p { margin: 0 0 1.1em; } .lt-prosa p:last-child { margin-bottom: 0; }
p.lt-prosa { margin: 0; }
.lt-duo { align-items: start; }
.lt-duo--umkehr > figure { order: -1; }
@media (min-width: 861px) { .lt-duo--umkehr.duo--getauscht > figure { order: 2; } }
.lt-foto figcaption { display: flex; gap: 12px; padding-top: 12px; font: 500 var(--t-mono, .6875rem)/1.6 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
.lt-abb { color: var(--text, #12181d); white-space: nowrap; }
.lt-foto--hoch img { aspect-ratio: 4 / 5; max-height: 760px; }
.lt-foto--breit img { aspect-ratio: 9 / 4; }

/* Anlagenbau */
.lt-listentitel { margin: 40px 0 14px; font-size: 1.15rem; }
.lt-verfahren { counter-reset: v; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-verfahren li { counter-increment: v; display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); font-size: var(--t-sm, .9375rem); }
.lt-verfahren li::before { content: counter(v, decimal-leading-zero); font: 500 10px/1 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
@media (max-width: 520px) { .lt-verfahren { grid-template-columns: 1fr; } }

/* SPJF */
.lt-spjf { background: var(--flaeche, #f1f2f1); }
.lt-produkt { margin-bottom: clamp(48px, 6vw, 88px); }
.lt-produkt__foto { justify-self: center; max-width: 460px; }
.lt-produkt__foto img { object-fit: contain; background: transparent; }
.lt-zwischentitel { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; padding: 14px 0; border-top: 1px solid var(--text, #12181d); font: 500 var(--t-mono, .6875rem)/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.lt-funktion { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(14px, 2vw, 28px); background: var(--grund, #e6e7e5); border: 1px solid var(--linie, rgba(18, 24, 29, .15)); border-radius: var(--r-2, 4px); }
.lt-funktion > * { min-width: 0; }
.lt-schnitt { position: relative; min-height: 620px; overflow: hidden; isolation: isolate; border-radius: var(--r-1, 2px); }
.lt-ebene--raster { position: absolute; inset: -30px; z-index: 0; opacity: .5; background-image: linear-gradient(var(--linie, rgba(18, 24, 29, .15)) 1px, transparent 1px), linear-gradient(90deg, var(--linie, rgba(18, 24, 29, .15)) 1px, transparent 1px); background-size: 28px 28px; transform: translate(var(--ebene-x, 0px), var(--ebene-y, 0px)); }
.lt-schnitt__kopf { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font: 500 10px/1.3 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
.lt-schnitt__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.lt-nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lt-pos { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linie-stark, rgba(18, 24, 29, .34)); font: 500 9.5px/1 var(--schrift-mono, ui-monospace, monospace); }
.lt-legende { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; list-style: none; padding: 0; margin: 0 0 18px; }
.lt-legende button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); color: var(--text, #12181d); font: 500 .82rem/1.25 var(--schrift-text, 'Barlow', sans-serif); cursor: pointer; }
.lt-legende button:hover, .lt-legende button.ist-aktiv, .lt-legende button[aria-pressed="true"] { color: var(--rot-text, #bd1a12); }
.lt-legende button[aria-pressed="true"] .lt-pos { background: var(--rot, #e2231a); border-color: var(--rot, #e2231a); color: #fff; }
.lt-steuer { padding: 6px 0 20px; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-dp { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; font: 500 10px/1.2 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
.lt-dp__skala { position: relative; display: block; flex: 1; height: 5px; border-radius: 3px; background: var(--mulde, rgba(18, 24, 29, .055)); overflow: hidden; }
.lt-dp__wert { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--dp, 0) * 100%); background: var(--text, #12181d); }
.lt-dp__schwelle { position: absolute; left: 78%; top: 0; height: 100%; width: 2px; background: var(--rot, #e2231a); }
.lt-druckstoss { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border-radius: var(--r-1, 2px); border: 1px solid var(--text, #12181d); background: none; color: var(--text, #12181d); font: 600 .85rem/1 var(--schrift-text, 'Barlow', sans-serif); cursor: pointer; }
.lt-druckstoss:hover, .lt-druckstoss.ist-an { background: var(--rot, #e2231a); border-color: var(--rot, #e2231a); color: #fff; }
.lt-druckstoss__ikon { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.lt-karte { position: relative; padding: 18px 0; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-karte .lt-pos { position: absolute; right: 0; top: 18px; }
.lt-karte h3 { margin: 0 34px 8px 0; font-size: 1.3rem; }
.lt-karte p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-leise, #4f585f); }
.lt-karte.ist-aktiv h3 { color: var(--rot-text, #bd1a12); }
.lt-datenblatt { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.lt-datenblatt > * { min-width: 0; }
.lt-daten__titel { margin: 0 0 14px; font: 500 var(--t-mono, .6875rem)/1.5 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); }
.lt-rollbar { max-width: 100%; overflow-x: auto; }
.lt-daten { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; text-align: left; }
.lt-daten th, .lt-daten td { padding: 12px 10px; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); vertical-align: top; }
.lt-daten thead th { font: 500 9.5px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise, #4f585f); border-bottom-color: var(--text, #12181d); }
.lt-daten .zahl { text-align: right; font-family: var(--schrift-mono, ui-monospace, monospace); font-size: .8rem; }
.lt-daten .typ { font-weight: 600; white-space: nowrap; }
.lt-foto--zeichnung img { object-fit: contain; background: #fff; padding: 14px; box-sizing: border-box; }
@media (max-width: 1000px) { .lt-funktion { grid-template-columns: 1fr; } .lt-schnitt { min-height: 520px; } .lt-datenblatt { grid-template-columns: 1fr; } .lt-foto--zeichnung { max-width: 600px; } }
@media (max-width: 600px) { .lt-schnitt { min-height: 440px; } .lt-legende button { font-size: .75rem; } }

/* Rohrleitungen */
.lt-lager { margin-top: 36px; }
.lt-lager h3 { margin: 0 0 12px; font-size: 1.15rem; }
.lt-werte { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie, rgba(18, 24, 29, .15)); }
.lt-werte li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie, rgba(18, 24, 29, .15)); font-size: var(--t-sm, .9375rem); }
.lt-werte b { font: 500 .78rem/1.3 var(--schrift-mono, ui-monospace, monospace); white-space: nowrap; }
.lt-lager__symbol { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--stahl-tief, #7d878e); box-sizing: border-box; }
.lt-werte li[data-teil="schlauch"] .lt-lager__symbol { border-style: dashed; }
.lt-verweis { display: inline-flex; gap: 10px; align-items: center; margin-top: 28px; min-height: 44px; color: var(--text, #12181d); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rot, #e2231a); text-underline-offset: 5px; }
.lt-verweis span { color: var(--rot, #e2231a); text-decoration: none; }
@media (max-width: 520px) { .lt-werte li { grid-template-columns: 18px minmax(0, 1fr); } .lt-werte b { grid-column: 2; } }

/* Wartung: Halle nach Feierabend — dunkles Band auch im hellen Thema */
.lt-wartung {
  color-scheme: dark; background: var(--fuss-grund, #1a2127); color: #e4e9ec;
  --text: #e4e9ec; --text-leise: #9eaab2; --linie: rgba(228, 233, 236, .13); --linie-stark: rgba(228, 233, 236, .3); --rot-text: #ff6a5e; --mulde: rgba(0, 0, 0, .24);
}
.lt-wartung h2, .lt-wartung h3 { color: #e4e9ec; }
.lt-service { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.lt-service > * { min-width: 0; }
.lt-protokoll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.lt-protokoll__feld { position: relative; padding: 22px 0 22px 46px; border-top: 1px solid var(--linie); }
.lt-protokoll h3 { margin: 0 0 8px; font-size: 1.2rem; }
.lt-protokoll p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-leise); }
.lt-glyphe { position: absolute; left: 0; top: 24px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linie-stark); }
.lt-glyphe::before, .lt-glyphe::after { content: ""; position: absolute; background: var(--text-leise); }
.lt-glyphe--messung::before { left: 8px; right: 8px; top: 14px; height: 1.5px; } .lt-glyphe--messung::after { left: 14px; top: 8px; width: 1.5px; height: 7px; transform-origin: bottom; transform: rotate(40deg); background: var(--rot); }
.lt-glyphe--pruefung::before { left: 9px; top: 15px; width: 6px; height: 1.5px; transform: rotate(45deg); } .lt-glyphe--pruefung::after { left: 12px; top: 13px; width: 10px; height: 1.5px; transform: rotate(-50deg); }
.lt-glyphe--fluegel::before { inset: 7px; border-radius: 50%; background: none; border: 1.5px dashed var(--text-leise); } .lt-glyphe--fluegel::after { left: 13px; top: 13px; width: 3px; height: 3px; border-radius: 50%; }
.lt-glyphe--wuchten::before { left: 7px; right: 7px; top: 14px; height: 1.5px; } .lt-glyphe--wuchten::after { left: 13px; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: var(--rot); }
.lt-glyphe--rohr::before { left: 6px; right: 6px; top: 10px; height: 9px; border-radius: 4px; background: none; border: 1.5px solid var(--text-leise); } .lt-glyphe--rohr::after { left: 14px; top: 8px; width: 1.5px; height: 13px; }
.lt-glyphe--haube::before { left: 8px; right: 8px; bottom: 9px; height: 8px; background: none; border: 1.5px solid var(--text-leise); border-bottom: 0; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); } .lt-glyphe--haube::after { left: 13px; top: 6px; width: 3px; height: 6px; }
.lt-stempel { display: inline-grid; justify-items: center; gap: 2px; margin-top: 36px; padding: 14px 22px; border: 2px solid var(--rot, #e2231a); border-radius: var(--r-2, 4px); color: var(--rot-text, #ff6a5e); font: 500 10px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-4deg); }
.lt-stempel b { font: 700 2.4rem/1 var(--schrift-anzeige, 'Barlow Semi Condensed', sans-serif); letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .lt-stempel { opacity: 0; transform: rotate(-4deg) scale(1.25); transition: opacity .25s ease, transform .35s var(--ease-aus, ease-out); }
  .js .lt-stempel.ist-gestempelt { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@media (max-width: 900px) { .lt-service { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lt-protokoll { grid-template-columns: 1fr; } }

/* Montage */
.lt-montage__layout { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); align-items: stretch; }
.lt-montage__layout.duo--getauscht { flex-direction: column-reverse; }
.lt-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); color: var(--text-leise, #4f585f); line-height: 1.7; }
.lt-zweispaltig p { margin: 0; }
@media (max-width: 760px) { .lt-zweispaltig { grid-template-columns: 1fr; } .lt-foto--breit img { aspect-ratio: 4 / 3; } }
@media (max-width: 860px) { .lt-ziffer, .lt-text .lt-ziffer { left: auto; right: -.05em; font-size: clamp(5.5rem, 26vw, 9rem); } }
@media (prefers-reduced-motion: reduce) { .lt-ziffer { transform: none; } }