/* LUFT 3D-Visualisierung · Styles (Schrift kommt vom Theme) */
.luft3d-host { --l3d-ink: #1A1A19; --l3d-body: #3F3F3E; --l3d-muted: #777776; --l3d-page: #FAF9F7; --l3d-raised: #FFFFFF; --l3d-tint: #F3F2EF; --l3d-hair: #E7E5E1; --l3d-line: #D3D1CC; --l3d-red: #A32026; --l3d-gutter: clamp(20px, 4vw, 56px); --l3d-ease: cubic-bezier(.2, .7, .2, 1); position: relative; width: 100%; font-family: inherit; color: var(--l3d-ink); }
.luft3d-host *, .luft3d-host *::before, .luft3d-host *::after { box-sizing: border-box; }
.l3d { --l3d-top: 0px; position: relative; }
.l3d-stage { position: sticky; top: var(--l3d-top); height: calc(100vh - var(--l3d-top)); height: calc(100svh - var(--l3d-top)); min-height: 520px; overflow: hidden; background: var(--l3d-page); border-top: 1px solid var(--l3d-hair); border-bottom: 1px solid var(--l3d-hair); }
.l3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.l3d-canvas.is-grabbing { cursor: grabbing; }
.l3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l3d-labels { position: absolute; inset: 0; pointer-events: none; }
.l3d-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; will-change: transform; }
.l3d-label[hidden] { display: none; }
.l3d-label-tag { background: var(--l3d-raised); border: 1px solid var(--l3d-ink); padding: 6px 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.l3d-label-tag b { font-weight: 500; color: var(--l3d-muted); margin-right: 4px; }
.l3d-label-stalk { width: 1px; height: 28px; background: var(--l3d-ink); }
.l3d-hint { position: absolute; left: var(--l3d-gutter); top: 20px; font-size: 12px; letter-spacing: .08em; color: var(--l3d-muted); pointer-events: none; }
.l3d-hint[hidden] { display: none; }
.l3d-legend { position: absolute; left: var(--l3d-gutter); bottom: 28px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.l3d-legend-item { display: flex; align-items: center; gap: 8px; }
.l3d-legend-swatch { width: 24px; height: 3px; background: var(--l3d-ink); }
.l3d-index { position: absolute; right: var(--l3d-gutter); bottom: 28px; display: grid; gap: 2px; justify-items: end; }
.l3d-index-item { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-muted); transition: color 160ms var(--l3d-ease); }
.l3d-index-item:hover, .l3d-index-item.is-active { color: var(--l3d-ink); }
.l3d-index-item:focus-visible, .l3d-btn:focus-visible, .l3d-link:focus-visible, .l3d-close:focus-visible { outline: 1px solid var(--l3d-ink); outline-offset: 3px; }
.l3d-index-item .l3d-rhombus { opacity: 0; }
.l3d-index-item.is-active .l3d-rhombus { opacity: 1; }
.l3d-rhombus { display: inline-block; width: 7px; height: 7px; background: var(--l3d-red); transform: rotate(-15deg); flex: none; }
.l3d-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.l3d-btn { all: unset; cursor: pointer; background: var(--l3d-raised); border: 1px solid var(--l3d-ink); padding: 10px 16px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-ink); transition: background 160ms var(--l3d-ease), color 160ms var(--l3d-ease); }
@media (hover: hover) { .l3d-btn:hover { background: var(--l3d-ink); color: #fff; } }
.l3d-reset { position: absolute; right: calc(var(--l3d-gutter) + 200px); top: 14px; }
.l3d-explore { position: absolute; right: var(--l3d-gutter); top: 14px; }
.is-exploring .l3d-steps { visibility: hidden; pointer-events: none; }
.is-exploring .l3d-reset { display: none; }
.l3d-reset[hidden] { display: none; }
.l3d-steps { position: relative; margin-top: calc(-100vh + var(--l3d-top)); margin-top: calc(-100svh + var(--l3d-top)); pointer-events: none; }
.l3d-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; max-width: 1360px; margin: 0 auto; padding: 0 var(--l3d-gutter); }
.l3d-card { pointer-events: auto; max-width: 420px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--l3d-ink); padding: 28px 32px 32px; }
.l3d-card > .l3d-num { font-size: 13px; color: var(--l3d-muted); }
.l3d-card-title { margin: 12px 0 0; font-weight: 300; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; color: var(--l3d-ink); text-transform: none; }
.l3d-card-text { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--l3d-body); text-wrap: pretty; }
.l3d-specs { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.l3d-specs-wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.l3d-spec { padding: 12px 0; border-top: 1px solid var(--l3d-hair); }
.l3d-spec-l { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-muted); }
.l3d-spec-v { margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--l3d-ink); }
.l3d-link { all: unset; cursor: pointer; margin-top: 20px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-ink); }
.l3d-arrow { width: 16px; height: 1px; background: currentColor; position: relative; transition: transform 200ms var(--l3d-ease); }
.l3d-arrow::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.l3d-link:hover .l3d-arrow { transform: translateX(4px); }
.l3d-edit { position: absolute; left: var(--l3d-gutter); top: 48px; display: grid; gap: 8px; max-width: 460px; background: var(--l3d-raised); border: 1px solid var(--l3d-line); padding: 12px 14px; font-size: 12px; }
.l3d-edit code { font-size: 12px; word-break: break-all; }
.l3d-edit-title { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-muted); }
.l3d-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(26, 26, 25, .48); display: flex; align-items: center; justify-content: center; padding: 24px; animation: l3d-fade 220ms var(--l3d-ease); }
.l3d-dialog { width: min(1120px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--l3d-raised); padding: 32px clamp(20px, 3vw, 40px) 36px; box-shadow: 0 24px 64px rgba(26, 26, 25, .18); color: var(--l3d-ink); font-family: inherit; animation: l3d-up 260ms var(--l3d-ease); }
.l3d-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.l3d-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.l3d-dialog-title { margin: 14px 0 0; font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.02em; text-transform: none; }
.l3d-dialog-text { margin: 20px 0 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--l3d-body); }
.l3d-close { all: unset; cursor: pointer; position: relative; width: 40px; height: 40px; flex: none; }
.l3d-close::before, .l3d-close::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--l3d-ink); transform: rotate(45deg); }
.l3d-close::after { transform: rotate(-45deg); }
.l3d-close-fab { display: none; position: fixed; top: 12px; right: 12px; width: 48px; height: 48px; background: var(--l3d-raised); border: 1px solid var(--l3d-ink); z-index: 2; }
.l3d-figure { margin: 28px 0 0; }
.l3d-figure-box { position: relative; aspect-ratio: 16 / 9; background: var(--l3d-tint); border: 1px solid var(--l3d-hair); overflow: hidden; }
.l3d-figure-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.l3d-caption { margin-top: 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l3d-muted); }
.l3d-dialog .l3d-specs { margin-top: 28px; }
.l3d-static { max-width: 1360px; margin: 0 auto; padding: 48px var(--l3d-gutter); display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.l3d-static .l3d-card { max-width: none; }
html.l3d-noscroll { overflow: hidden; }
.l3d-error .l3d-stage { display: none; }
.l3d-error .l3d-steps { margin-top: 0; }
@keyframes l3d-fade { from { opacity: 0; } }
@keyframes l3d-up { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) {
  .l3d-stage { min-height: 420px; }
  .l3d-index { display: none; }
  .l3d-hint { display: none; top: 74px; max-width: calc(100% - 200px); font-size: 11px; line-height: 1.35; letter-spacing: .04em; }
  .is-exploring .l3d-hint { display: block; }
  .l3d-explore { top: 66px; right: 16px; }
  .l3d-explore.l3d-btn { min-height: 0; height: auto; padding: 8px 12px; font-size: 11px; line-height: 1.2; letter-spacing: .1em; margin: 0; width: auto; }
  .l3d-close-fab { display: block; }
  .l3d-dialog-head .l3d-close { display: none; }
  .l3d-legend { top: 14px; bottom: auto; gap: 14px; font-size: 11px; }
  .l3d-step { min-height: 92vh; min-height: 92svh; align-items: flex-end; padding-bottom: 20px; }
  .l3d-card { max-width: none; width: 100%; padding: 18px 20px 20px; background: rgba(255, 255, 255, .88); }
  .l3d-card-title { font-size: 22px; margin-top: 8px; }
  .l3d-card-text { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .l3d-specs { margin-top: 12px; column-gap: 16px; }
  .l3d-spec { padding: 8px 0; }
  .l3d-label-tag { font-size: 11px; padding: 4px 8px; letter-spacing: .1em; }
  .l3d-btn, .l3d-link { min-height: 44px; line-height: 1.2; }
  .l3d-overlay { padding: 0; align-items: flex-end; }
  .l3d-dialog { max-height: 94vh; max-height: 94svh; padding: 64px 18px 28px; }
  .l3d-figure-box { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .l3d-overlay, .l3d-dialog { animation: none; } }