/* 67 · Röntgen – die Gepäckkontrolle. Bildschirmschwarz, Falschfarben, Bediener-UI. */
:root {
  --bg: #050708;
  --panel: #0a0f11;
  --panel-2: #0e1518;
  --line: #1c292d;
  --line-2: #2a3b40;
  --ink: #e4ece8;
  --mute: #9eb0aa;
  --ui: #62f093;
  --ui-d: #0aa84a;
  --org: #ff9b3d;
  --blu: #4a8dff;
  --grn: #3fc58a;
  --scan: #e6eded;
  --mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --gap: clamp(72px, 9vw, 128px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; position: relative; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); font-stretch: 100%;
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(98, 240, 147, .055), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 760; font-stretch: 116%; line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ui); color: #031; padding: 10px 14px; font: 1rem var(--mono); }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--pad), 1320px); margin-inline: auto; }
.kicker { font: 400 .8125rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ui); }
.lead { color: var(--mute); font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); max-width: 62ch; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ui); border: 1px solid rgba(98,240,147,.45); padding: 5px 8px 4px; white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; background: var(--ui); box-shadow: 0 0 8px var(--ui); }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui); box-shadow: 0 0 10px var(--ui); }

/* ---------- Kopf ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(5,7,8,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.logo { display: block; flex: none; line-height: 0; }
.logo img { width: 64px; height: auto; aspect-ratio: 1510 / 1300; }
.top__sys { font: .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 8px; padding-left: 18px; border-left: 1px solid var(--line); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 500 .9375rem/1 var(--sans); padding: 9px 12px 9px 8px; border: 1px solid transparent; }
.nav kbd { font: .6875rem/1 var(--mono); color: var(--ui); border: 1px solid var(--line-2); padding: 4px 5px 3px; background: var(--panel-2); }
.nav ul a:hover { border-color: var(--line-2); background: var(--panel); }
.nav ul a:hover kbd { background: var(--ui); color: #031; border-color: var(--ui); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.tel { font: .9375rem/1 var(--mono); text-decoration: none; color: var(--ink); white-space: nowrap; }
.tel__l { color: var(--mute); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.tel:hover { color: var(--ui); }
.lang { font: .8125rem/1 var(--mono); letter-spacing: .1em; text-decoration: none; border: 1px solid var(--line-2); padding: 8px 9px 7px; }
.lang:hover { border-color: var(--ui); color: var(--ui); }
.menu { display: none; margin-left: auto; align-items: center; gap: 10px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); padding: 10px 14px; font: .875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.menu__ico { width: 16px; height: 10px; border-block: 2px solid var(--ui); position: relative; }
.menu__ico::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--ui); }
.menu[aria-expanded="true"] .menu__ico { border-color: transparent; }
.menu[aria-expanded="true"] .menu__ico::after { top: 2px; transform: rotate(45deg); box-shadow: none; }
.menu[aria-expanded="true"] .menu__ico::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--ui); transform: rotate(-45deg); }

/* ---------- Monitor-Rahmen ---------- */
.mon { position: relative; margin-top: var(--gap); background: linear-gradient(180deg, var(--panel), rgba(10,15,17,.6)); border: 1px solid var(--line); padding: 0 clamp(18px, 3vw, 44px) clamp(28px, 3.4vw, 52px); }
.mon::before, .mon::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid var(--ui); pointer-events: none; opacity: .8; }
.mon::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.mon::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.osd { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 calc(-1 * clamp(18px, 3vw, 44px)); padding: 11px clamp(18px, 3vw, 44px) 10px; border-bottom: 1px solid var(--line); font: .75rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.osd > span { display: inline-flex; align-items: center; gap: 8px; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.osd__bars { gap: 3px !important; }
.osd__bars i { width: 5px; height: 12px; background: var(--ui); opacity: .85; }
.osd__bars i:last-child { opacity: .25; }
.sec-head { padding-top: clamp(32px, 4vw, 56px); margin-bottom: clamp(32px, 4vw, 52px); display: grid; gap: 16px; }
.sec-head h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); max-width: 22ch; }
.sec-head--split { grid-template-columns: 1fr 1fr; align-items: end; column-gap: clamp(24px, 5vw, 80px); }
.sec-head--split > div { display: grid; gap: 16px; }

/* ---------- Röntgenbilder ---------- */
.screen { margin: 0; }
.screen__img { position: relative; overflow: hidden; background: var(--scan); border: 1px solid var(--line-2); box-shadow: 0 0 0 4px #020303, 0 0 0 5px var(--line); isolation: isolate; }
.xr { display: block; width: 100%; height: auto; }
.xr-bg { fill: var(--scan); }
.xr .o, .xr .p, .xr .m, .xr .d { mix-blend-mode: multiply; transition: opacity .35s ease; }
.xr-grain { filter: url(#xrn); opacity: .35; pointer-events: none; }
.xr-belt { opacity: .9; }
.xr-tags rect { fill: none; stroke: var(--ui-d); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.xr-tags .xr-lbl rect { fill: #0a0f11; stroke: none; }
.xr-lbl text { font: 13px var(--mono); letter-spacing: .06em; fill: var(--ui); }
[data-only="o"] .xr .p, [data-only="o"] .xr .m, [data-only="o"] .xr .d,
[data-only="p"] .xr .o, [data-only="p"] .xr .m, [data-only="p"] .xr .d,
[data-only="m"] .xr .o, [data-only="m"] .xr .p, [data-only="m"] .xr .d,
[data-only="d"] .xr .o, [data-only="d"] .xr .p, [data-only="d"] .xr .m { opacity: .07; }
[data-neg] .xr { filter: invert(1) hue-rotate(180deg); }
.screen__img .xr { transition: filter .4s ease; }
.screen__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; font: .8125rem/1.3 var(--mono); letter-spacing: .08em; color: var(--mute); }
.screen__cap { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend button { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); padding: 7px 10px 6px; font: .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.legend button:hover { border-color: var(--mute); }
.legend button[aria-pressed="true"] { border-color: var(--ui); color: var(--ui); background: rgba(98,240,147,.08); }
html:not(.js) .legend button { pointer-events: none; }
html:not(.js) .legend button[data-mat="neg"] { display: none; }
.sw { width: 12px; height: 12px; display: inline-block; }
.sw--o { background: var(--org); } .sw--p { background: var(--grn); } .sw--m { background: var(--blu); }
.sw--d { background: #16191e; outline: 1px solid #5a6b70; } .sw--n { background: linear-gradient(90deg, #fff 50%, #000 50%); outline: 1px solid #5a6b70; }
.cross { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(var(--ui-d), var(--ui-d)) 50% 50% / 1px 26px no-repeat,
  linear-gradient(var(--ui-d), var(--ui-d)) 50% 50% / 26px 1px no-repeat; opacity: .55; mix-blend-mode: multiply; }

/* Scanner-Durchlauf im Hero (nur mit Bewegung) */
.sweep { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .screen--hero .sweep { display: block; position: absolute; inset: 0 0 0 auto; width: 0; -webkit-backdrop-filter: grayscale(1) contrast(.85) brightness(1.04); backdrop-filter: grayscale(1) contrast(.85) brightness(1.04); border-left: 2px solid var(--ui); box-shadow: -18px 0 36px -10px rgba(98,240,147,.55), inset 14px 0 18px -12px rgba(98,240,147,.4); pointer-events: none; }
  .js .screen--hero.run .sweep { animation: sweep 3.4s .35s cubic-bezier(.45, 0, .35, 1) both; }
  @keyframes sweep { from { width: 100%; } 96% { width: 0; border-left-color: var(--ui); } to { width: 0; border-left-color: transparent; box-shadow: none; } }
}

/* Seiten-Scanner (per JS eingefügt) */
.pveil { position: absolute; left: 0; right: 0; z-index: 30; pointer-events: none; -webkit-backdrop-filter: grayscale(1) brightness(.8); backdrop-filter: grayscale(1) brightness(.8); }
.pveil::before { content: ''; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, rgba(98,240,147,.07)); }
.pveil::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ui); box-shadow: 0 0 14px 2px rgba(98,240,147,.6); opacity: .85; }
.pveil__lbl { position: absolute; right: var(--pad); top: -26px; font: .6875rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ui); background: var(--bg); padding: 5px 8px; border: 1px solid rgba(98,240,147,.4); }

/* ---------- Hero ---------- */
.hero { margin-top: clamp(16px, 2.2vw, 28px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); gap: 20px clamp(28px, 4vw, 64px); align-items: end; padding: clamp(24px, 3vw, 40px) 0 clamp(22px, 2.6vw, 34px); }
.hero__head { display: grid; gap: 18px; }
.hero h1 { font-size: clamp(2.2rem, 1rem + 3vw, 3.65rem); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }
.hero__aside { display: grid; gap: 22px; color: var(--mute); font-size: 1rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px; font: 600 .9375rem/1.1 var(--sans); text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); background: var(--panel-2); transition: background .2s, color .2s, border-color .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { border-color: var(--ink); }
.btn--go { background: var(--ui); border-color: var(--ui); color: #03140a; }
.btn--go:hover { background: #8dffb4; border-color: #8dffb4; }
.screen--hero .screen__img { aspect-ratio: 1200 / 330; }
.screen--hero .xr { height: 100%; }

/* ---------- Schwerpunkt ---------- */
.focus__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.screen--focus { position: sticky; top: 100px; }
.finds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.finds li { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 16px; align-items: start; padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.finds__n { font: 1.0625rem/1 var(--mono); color: #06120b; background: var(--ui); padding: 5px 0 4px; text-align: center; margin-top: 2px; }
.finds h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 108%; margin-bottom: 6px; }
.finds p { color: var(--mute); max-width: 46ch; }
.finds .chip { margin-top: 3px; }
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(48px, 6vw, 80px) 0 0; border: 1px solid var(--line); }
.readouts div { padding: 22px 24px 24px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.readouts div + div { border-left: 1px solid var(--line); }
.readouts dt { font: .8125rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.readouts dd { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 3vw, 4.4rem)/1 var(--sans); font-stretch: 120%; color: var(--ui); text-shadow: 0 0 22px rgba(98,240,147,.35); letter-spacing: -.02em; }
.route { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px), var(--panel-2); padding: clamp(20px, 2.6vw, 34px); }
.route__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
.route__codes { font: 1rem/1.2 var(--mono); letter-spacing: .14em; color: var(--mute); }
.legs { list-style: none; margin: 28px 0; padding: 0; display: flex; align-items: center; }
.leg { flex: none; display: grid; gap: 6px; justify-items: center; }
.leg__code { font: 800 clamp(1.6rem, 1rem + 1.6vw, 2.5rem)/1 var(--sans); font-stretch: 122%; border: 2px solid var(--ink); padding: 10px 14px 8px; background: var(--bg); }
.leg--home .leg__code { border-color: var(--ui); color: var(--ui); }
.leg__st { font: .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.leg__via { flex: 1; position: relative; height: 2px; background: var(--ink); margin: 0 6px 20px; display: grid; place-items: center; min-width: 30px; }
.leg__via--car { background: repeating-linear-gradient(90deg, var(--org) 0 8px, transparent 8px 14px); }
.leg__via svg { width: 26px; height: 26px; color: var(--ink); background: var(--panel-2); padding: 0 3px; box-sizing: content-box; }
.leg__via--car svg { color: var(--org); }
.route__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 32px; color: var(--mute); }
.route__foot p:first-child { color: var(--ink); }
.route__note { font: .875rem/1.5 var(--mono); color: var(--org); }

/* ---------- Leistungen ---------- */
.bags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.bag { display: grid; align-content: start; gap: 10px; }
.bag .screen__img { aspect-ratio: 320 / 200; }
.bag__tag { display: flex; justify-content: space-between; align-items: center; font: .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 8px 0 6px; border-bottom: 1px dashed var(--line-2); }
.bag h3 { font-size: 1.4rem; margin-top: 4px; }
.bag p:last-child { color: var(--mute); }

/* ---------- Ablauf ---------- */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.pipe li { position: relative; padding: 0 clamp(14px, 2vw, 28px) 34px; border-left: 1px solid var(--line); display: grid; align-content: start; gap: 10px; }
.pipe li:first-child { border-left: 0; padding-left: 0; }
.pipe__n { font: .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ui); display: flex; align-items: center; gap: 10px; }
.pipe h3 { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
.pipe p:last-child { color: var(--mute); max-width: 30ch; }
.belt { height: 30px; border-block: 2px solid #2a3437; background: repeating-linear-gradient(90deg, #121a1c 0 22px, #050708 22px 24px); background-size: 48px 100%; margin: 0 calc(-1 * clamp(18px, 3vw, 44px)) calc(-1 * clamp(28px, 3.4vw, 52px)); }
@media (prefers-reduced-motion: no-preference) { .belt { animation: belt 2.4s linear infinite; } @keyframes belt { to { background-position: 48px 0; } } }

/* ---------- Über uns ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(32px, 4vw, 56px); }
.neg { margin: 0; cursor: crosshair; outline-offset: 6px; }
.neg__frame { position: relative; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 0 0 4px #020303, 0 0 0 5px var(--line); aspect-ratio: 1 / 1; background: #000; }
.neg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) invert(1) contrast(1.25) brightness(.95); transition: filter .6s ease; }
.neg__frame::after { content: ''; position: absolute; inset: 0; background: #2f7fff; mix-blend-mode: color; opacity: .75; transition: opacity .6s ease; pointer-events: none; }
.neg__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(var(--ui), var(--ui)) 50% 50% / 1px 40px no-repeat, linear-gradient(var(--ui), var(--ui)) 50% 50% / 40px 1px no-repeat,
  repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); opacity: .6; transition: opacity .6s; }
.neg:hover img, .neg:focus img { filter: none; }
.neg:hover .neg__frame::after, .neg:focus .neg__frame::after, .neg:hover .neg__frame::before, .neg:focus .neg__frame::before { opacity: 0; }
.neg figcaption { margin-top: 14px; font: .75rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.neg__b { display: none; color: var(--ui); }
.neg:hover .neg__a, .neg:focus .neg__a { display: none; }
.neg:hover .neg__b, .neg:focus .neg__b { display: inline; }
.about__txt { display: grid; gap: 20px; }
.about__txt h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--line); }
.checks li { padding: 14px 0 13px 34px; border-bottom: 1px solid var(--line); position: relative; font-weight: 500; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 16px; height: 9px; border-left: 2px solid var(--ui); border-bottom: 2px solid var(--ui); transform: rotate(-45deg); }

/* ---------- Kontakt ---------- */
.console { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0; border: 1px solid var(--line); }
.cell { padding: clamp(20px, 2.4vw, 32px); display: grid; align-content: start; gap: 12px; border-right: 1px solid var(--line); }
.cell h3, .key span { font: 400 .75rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ui); }
.cell p { font-size: 1.125rem; }
.cell strong { font-weight: 700; }
.cell__geo { font: .875rem var(--mono) !important; color: var(--mute); }
.keys { display: grid; gap: 1px; background: var(--line); }
.key { display: grid; gap: 6px; padding: 18px 22px; text-decoration: none; background: var(--panel); transition: background .2s; }
.key strong { font: 700 1.25rem/1.15 var(--sans); font-stretch: 108%; overflow-wrap: anywhere; }
.key:hover { background: var(--panel-2); }
.key:hover strong { color: var(--ui); }
.key--go { background: var(--ui); color: #03140a; }
.key--go span { color: #0b4a25; }
.key--go strong { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem); font-weight: 800; font-stretch: 116%; }
.key--go:hover { background: #8dffb4; }
.key--go:hover strong { color: #03140a; }

/* ---------- Fuß ---------- */
.foot { margin-top: var(--gap); border-top: 1px solid var(--line); background: #030404; }
.foot__belt { height: 18px; background: repeating-linear-gradient(90deg, #ffcc00 0 18px, #050708 18px 36px); opacity: .85; }
.foot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 40px; align-items: center; padding: 44px 0 90px; }
.logo--foot img { width: 84px; }
.foot__txt { display: grid; gap: 6px; color: var(--mute); font-size: .9375rem; }
.foot__end { font: 1rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ui); }
.foot__txt a { text-decoration: none; }
.foot__txt a:hover { color: var(--ui); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font: .8125rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.foot__nav a { text-decoration: none; color: var(--ink); }
.foot__nav a:hover { color: var(--ui); }
.foot__copy { grid-column: 1 / -1; font: .75rem/1.4 var(--mono); letter-spacing: .08em; color: var(--mute); border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- Rechtsseiten ---------- */
.legal { margin-top: clamp(16px, 2.2vw, 28px); }
.legal .back { display: inline-flex; margin-top: 28px; font: .8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ui); border: 1px solid rgba(98,240,147,.4); padding: 9px 12px; }
.legal .back:hover { background: rgba(98,240,147,.08); }
.legal-head { display: grid; gap: 14px; padding: 36px 0 34px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.legal-head h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 800; hyphens: auto; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 70ch) minmax(240px, 340px); justify-content: space-between; gap: 48px; align-items: start; }
.legal-body { max-width: 70ch; }
.legal-aside { position: sticky; top: 100px; display: grid; gap: 12px; }
.legal-aside .keys { border: 1px solid var(--line); margin-top: 6px; }
.legal-aside .key--go strong { font-size: 1.5rem; }
.legal-aside__addr { font: .8125rem/1.6 var(--mono); color: var(--mute); }
@media (max-width: 1024px) { .legal-grid { grid-template-columns: 1fr; } .legal-aside { position: static; max-width: 420px; } }
.legal-body h2 { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-stretch: 110%; margin: 2.2em 0 .6em; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 1em; color: #cbd6d1; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: .45em; }
.legal-body li::marker { color: var(--ui); }
.legal-body a { color: var(--ui); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body p, .legal-body li { overflow-wrap: break-word; hyphens: auto; }
.legal-note { font: .9375rem/1.5 var(--mono); color: var(--org) !important; border: 1px solid rgba(255,155,61,.45); padding: 14px 16px; margin-bottom: 2em !important; }
.legal-note a { color: var(--org) !important; }
.legal-address { font: 1rem/1.7 var(--mono); border-left: 3px solid var(--ui); padding: 4px 0 4px 18px; margin-top: 2em !important; }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .top__sys { display: none; }
  .tel__l { display: none; }
}
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 18ch; }
  .hero__aside { max-width: 62ch; }
  .focus__grid { grid-template-columns: 1fr; }
  .screen--focus { position: static; max-width: 640px; }
  .bags { grid-template-columns: 1fr 1fr; }
  .console { grid-template-columns: 1fr 1fr; }
  .keys { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .cell:nth-child(2) { border-right: 0; }
  .cell { border-bottom: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .menu { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #070a0b; border-bottom: 1px solid var(--line-2); padding: 12px var(--pad) 22px; flex-direction: column; align-items: stretch; gap: 16px; }
  .top.open .nav { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .nav__end { justify-content: space-between; }
  .tel { font-size: 1.0625rem; }
}
@media (max-width: 760px) {
  .sec-head--split { grid-template-columns: 1fr; }
  .screen--hero .screen__img { aspect-ratio: 16 / 10; }
  .screen--hero .xr { width: 100%; height: 100%; }
  .hero h1 { font-size: clamp(1.75rem, 1rem + 3.4vw, 2.6rem); font-stretch: 104%; }
  .readouts { grid-template-columns: 1fr; }
  .readouts div + div { border-left: 0; border-top: 1px solid var(--line); }
  .legs { flex-direction: column; align-items: stretch; margin: 22px 0; }
  .leg { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 14px; }
  .leg__via { width: 30px; height: 46px; min-width: 0; margin: 0 0 0 22px; flex: none; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 2px 100% no-repeat; }
  .leg__via--car { background: repeating-linear-gradient(180deg, var(--org) 0 8px, transparent 8px 14px) 50% 0 / 2px 100% no-repeat; }
  .leg__via svg { width: 22px; height: 22px; transform: rotate(90deg); }
  .pipe { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .pipe li:nth-child(3) { border-left: 0; padding-left: 0; }
  .about__grid { grid-template-columns: 1fr; }
  .neg { max-width: 460px; }
  .checks { grid-template-columns: 1fr; }
  .console { grid-template-columns: 1fr; }
  .cell { border-right: 0; }
  .keys { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .bags { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr; }
  .pipe li { border-left: 0; padding-left: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .pipe li:last-child { border-bottom: 0; }
  .finds li { grid-template-columns: 40px 1fr; }
  .finds .chip { grid-column: 2; justify-self: start; }
  .osd > span:nth-child(n+3) { display: none; }
  .legend button { padding: 7px 8px 6px; }
  .top__in { min-height: 62px; }
  .logo img { width: 52px; }
}