/* Elektro Schattenkirchner – Vorschlag Website, hell mit Dunkelmodus.
   Stil, Farben, Bauteile und Technik 1:1 aus Batumi Investment Club v2: Farben #000000, #4686B7, #88C1ED, #FFFFFF,
   Schrift Geist, Geist Mono und Geist Pixel (vercel.com/font), Glasmenue, Lichtkacheln, Seitenuebergang, alle Ecken 8 px.
   Das Logo behaelt sein Blau #0085CF. Bilder und Filme: die eigenen Aufnahmen des Unternehmens. */

:root {
  --bg: #ffffff;
  --bg-2: #f2f5f8;
  --ink: #0a0e13;
  --ink-2: #4a5866;
  --ink-3: #c3ccd5;
  --line: #dde4ea;
  --line-strong: #b7c3ce;
  --accent: #4686b7;
  --accent-2: #88c1ed;
  --accent-ink: #2b6593;
  --btn: #0a0e13;
  --btn-ink: #ffffff;
  --btn-hover: #2a3744;
  --ui-bg: #ffffff;
  --ui-line: #dbe3ea;
  --ui-field: #f4f7fa;
  --ui-ink-2: #5b6b7a;
  --bar: #4686b7;
  --bar-max: #0a0e13;
  --header-bg: rgb(255 255 255 / 0.72);
  --glass-page: rgb(255 255 255 / 0.55);
  /* die Fotos: gleich in beiden Designs, oder je eine Fassung fuer Tag und Nacht */
  --fig-veil: 16 56 98;
  --fig-glass: linear-gradient(160deg, rgb(255 255 255 / 0.10), rgb(14 46 82 / 0.42));
  --img-cta: url("../img/foto/patchfeld.jpg");
  --img-faq: url("../img/foto/schutzleiter.jpg");
  --logo-type: #8b8c8e;

  --fs-display: clamp(3rem, 1.4rem + 5.6vw, 8rem);
  --fs-h2: clamp(2.125rem, 1.45rem + 2.5vw, 4rem);
  --fs-statement: clamp(1.625rem, 1.12rem + 1.75vw, 2.875rem);
  --fs-lead: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
  --fs-number: clamp(2.75rem, 1.85rem + 3.1vw, 5rem);
  --fs-h3: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  --margin: clamp(20px, 4vw, 64px);
  --gutter: clamp(16px, 2vw, 32px);
  --section: clamp(96px, 11vw, 192px);
  --radius: 8px;
  --top-h: 72px;
  --blur: blur(18px) saturate(1.5);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* subpages */
  --fs-page: clamp(2.75rem, 1.55rem + 4.3vw, 6.25rem);
  --tb-bg: #f1f4f7; --tb-ink: #0a1f33; --tb-hover: #0a1f33; --tb-hover-ink: #ffffff;
  --mt-ground: radial-gradient(90% 70% at 100% 0%, rgb(255 255 255 / 0.3) 0%, rgb(200 228 250 / 0.13) 30%, rgb(160 205 240 / 0) 62%), linear-gradient(165deg, #21568a 0%, #295f90 50%, #2f699b 100%);
  --mt-muted: linear-gradient(165deg, #edf2f6, #e3eaf0);
  --lx-glow-c: rgb(255 255 255 / 0.55); --glow-a: rgb(255 255 255 / 0.38);
  --orb1: rgb(255 255 255 / 0.3); --orb2: rgb(200 230 252 / 0.3); --orb-core: rgb(255 255 255 / 0.7); --orb-core2: rgb(225 242 253 / 0.62);
  --boat-in: rgb(255 255 255 / 0.5); --boat-mid: rgb(190 225 250 / 0.22); --boat-glow: rgb(255 255 255 / 0.45);
  --b1: rgb(255 255 255 / 0.06); --b2: rgb(255 255 255 / 0.1); --b3: rgb(255 255 255 / 0.16); --b4: rgb(255 255 255 / 0.26); --sweep: rgb(255 255 255 / 0.34);

  /* the menu */
  --nb-w: clamp(9rem, 7.923077rem + 5.384615vw, 16rem);
  --nb-h: clamp(2.5rem, 2.346154rem + 0.769231vw, 3.5rem);
  --nb-px: clamp(1.125rem, 1.105769rem + 0.096154vw, 1.25rem);
  --nb-glass: rgb(17 62 100 / 0.6);
  --nb-glass-hover: rgb(17 62 100 / 0.78);
  --nb-glass-solid: rgb(17 62 100 / 0.86);
  --mn-gap: clamp(1.125rem, 1.105769rem + 0.096154vw, 1.25rem);
  --mn-indent: clamp(1.5rem, 1.461538rem + 0.192308vw, 1.75rem);
  --mn-link: clamp(2.125rem, 1.9rem + 0.865385vw, 3.25rem);
  --mn-num: clamp(10rem, 8.557692rem + 7.211538vw, 19.375rem);
  --mn-btn-h: clamp(4.25rem, 3.75rem + 2.5vw, 7.5rem);
  --mn-veil: rgb(35 94 140 / 0.4);
  --mn-panel: #ffffff; --mn-ink: #0a1f33; --mn-line: #c9d3dc;
  --mn-btn: #f2f5f8; --mn-btn-hover: #0a1f33; --mn-btn-hover-ink: #ffffff;

  /* light tiles by day: blue sky, white light (night values in the dark blocks) */
  --lx-edge: transparent;
  --lx-ink: #ffffff; --lx-ink-2: rgb(255 255 255 / 0.92); --lx-ink-3: rgb(255 255 255 / 0.84);
  --lx-line: rgb(255 255 255 / 0.34); --lx-spark: #ffffff; --lx-spark-glow: rgb(255 255 255 / 0.9);
  --lx-num: linear-gradient(100deg, rgb(255 255 255 / 0.7) 0%, #ffffff 62%);
  --lx-title: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgb(255 255 255 / 0.84) 100%);
  --lx-head: radial-gradient(72% 64% at 50% 106%, #ffffff 0%, #eef7fd 8%, #cfe7f9 18%, rgb(168 211 243 / 0.9) 30%, rgb(122 178 222 / 0.7) 44%, rgb(90 154 204 / 0.45) 60%, rgb(70 134 183 / 0.2) 76%, rgb(70 134 183 / 0) 92%),
    linear-gradient(180deg, #1d4f7c 0%, #24598a 45%, #2f6898 100%);
  --lx-free: radial-gradient(80% 62% at 100% 0%, #ffffff 0%, #dff0fc 10%, #b2d9f6 22%, #7fb6e2 38%, #4f8fc2 56%, #3473a5 74%, #2a6292 90%, #255a88 100%);
  --lx-focus: radial-gradient(92% 88% at 50% 36%, #f2f9fe 0%, #d9edfb 18%, #b4daf6 36%, #93c7ee 54%, #74afdc 72%, #60a0d1 88%, #5797cb 100%);
  --lx-focus-ink: #061019; --lx-focus-ink-2: rgb(6 16 25 / 0.9); --lx-focus-mark: #07121c; --lx-focus-glow: drop-shadow(0 0 0 transparent);
  --lx-slit: linear-gradient(180deg, #24598a 0%, #2f6898 50%, #3a76a8 100%);
  --lx-spill: radial-gradient(44% 100% at 50% 100%, rgb(255 255 255 / 0.95) 0%, rgb(232 245 253 / 0.78) 12%, rgb(190 224 248 / 0.52) 30%, rgb(150 202 240 / 0.28) 52%, rgb(136 193 237 / 0.1) 74%, rgb(136 193 237 / 0) 92%);
  --lx-box: linear-gradient(180deg, #0c2a45 0%, #0a2239 40%, #081c30 100%);
  --lx-down: radial-gradient(56% 100% at 50% 0%, rgb(255 255 255 / 0.3) 0%, rgb(220 238 252 / 0.16) 32%, rgb(200 228 250 / 0.05) 62%, rgb(200 228 250 / 0) 86%);
  --lx-flare: rgb(255 255 255 / 0.55); --lx-line-glow: rgb(255 255 255 / 0.65); --lx-line-glow-2: rgb(205 232 252 / 0.4);
  --lx-beam-bg: linear-gradient(100deg, #1b4a76 0%, #23578a 45%, #2b6294 100%);
  --beam: #ffffff; --beam-hot: #ffffff; --lx-haze: rgb(255 255 255 / 0.18);
  --lx-market: radial-gradient(50% 80% at 98% 14%, rgb(255 255 255 / 0.22) 0%, rgb(226 241 252 / 0.14) 24%, rgb(180 216 244 / 0.08) 48%, rgb(150 200 238 / 0.03) 70%, rgb(150 200 238 / 0) 90%),
    linear-gradient(160deg, #1f5182 0%, #2a6292 55%, #3672a4 100%);
  --lx-cta: radial-gradient(55% 75% at 50% 0%, #ffffff 0%, #dff0fc 9%, #b2d9f6 20%, #7fb6e2 36%, #4f8fc2 54%, #3473a5 72%, #2a6292 88%, #255a88 100%);
  --cv-a: #ffffff; --cv-b: #ffffff; --cv-fill: 0.26; --cv-ring: rgb(255 255 255 / 0.34); --cv-label: #ffffff; --cv-halo-stroke: rgb(22 66 110 / 0.75);
  color-scheme: light;
}

:root[data-esk-theme="dark"] {
  --bg: #05080c; --bg-2: #0b1219; --ink: #edf2f7; --ink-2: #9aadbf; --ink-3: #2a3846; --line: #18232f; --line-strong: #2d3d4d;
  --accent: #88c1ed; --accent-2: #4686b7; --accent-ink: #88c1ed;
  --btn: #88c1ed; --btn-ink: #05080c; --btn-hover: #a9d3f3;
  --ui-bg: #0c141c; --ui-line: #1f2d3b; --ui-field: #08111a; --ui-ink-2: #8fa3b6;
  --bar: #4686b7; --bar-max: #88c1ed;
  --header-bg: rgb(5 8 12 / 0.66); --glass-page: rgb(12 20 28 / 0.55);
  --mn-veil: rgb(2 8 14 / 0.55);
  --mn-panel: #0b1219; --mn-ink: #edf2f7; --mn-line: #24323f;
  --mn-btn: #121d28; --mn-btn-hover: #88c1ed; --mn-btn-hover-ink: #05080c;
  --tb-bg: #0f1923; --tb-ink: #edf2f7; --tb-hover: #88c1ed; --tb-hover-ink: #05080c;
  --mt-ground: radial-gradient(90% 70% at 100% 0%, rgb(70 134 183 / 0.3) 0%, rgb(40 90 140 / 0.13) 34%, rgb(20 50 85 / 0) 66%), linear-gradient(165deg, #050b12 0%, #03070c 60%, #060f18 100%);
  --mt-muted: linear-gradient(165deg, #0b1219, #0a1016);
  --lx-glow-c: rgb(136 193 237 / 0.6); --glow-a: rgb(70 134 183 / 0.45);
  --orb1: rgb(70 134 183 / 0.5); --orb2: rgb(136 193 237 / 0.42); --orb-core: rgb(170 215 247 / 0.8); --orb-core2: rgb(120 180 230 / 0.7);
  --boat-in: rgb(136 193 237 / 0.55); --boat-mid: rgb(70 134 183 / 0.25); --boat-glow: rgb(136 193 237 / 0.5);
  --b1: rgb(136 193 237 / 0.07); --b2: rgb(136 193 237 / 0.12); --b3: rgb(136 193 237 / 0.18); --b4: rgb(136 193 237 / 0.28); --sweep: rgb(150 205 245 / 0.4);
  --fig-veil: 6 20 36; --fig-glass: linear-gradient(160deg, rgb(255 255 255 / 0.12), rgb(10 30 50 / 0.16));
  --img-cta: url("../img/foto/schrank-blau.jpg"); --img-faq: url("../img/foto/phasen.jpg"); --logo-type: #f7fbfd;
  --lx-edge: rgb(255 255 255 / 0.07);
  --lx-line: rgb(255 255 255 / 0.16); --lx-spark: #eaf5ff; --lx-spark-glow: rgb(136 193 237 / 0.95);
  --lx-num: linear-gradient(100deg, rgb(255 255 255 / 0.58) 0%, #ffffff 62%);
  --lx-title: radial-gradient(70% 150% at 50% 120%, #ffffff 0%, #d2eafc 28%, #94c4ea 58%, #5f90b9 100%);
  --lx-head: radial-gradient(72% 64% at 50% 106%, #f0f8ff 0%, #c4e2f9 6%, rgb(150 202 242 / 0.88) 15%, rgb(100 165 215 / 0.62) 28%, rgb(60 120 172 / 0.38) 44%, rgb(35 80 125 / 0.18) 62%, rgb(18 42 70 / 0.06) 80%, rgb(18 42 70 / 0) 94%), #010306;
  --lx-free: radial-gradient(90% 70% at 100% 0%, #dff0fd 0%, #9fcff3 8%, #5596c8 20%, #2b628f 36%, #163a5a 54%, #0a1d30 72%, #040b14 88%, #020509 100%);
  --lx-focus: radial-gradient(78% 66% at 50% 36%, #1f4869 0%, #173957 18%, #0f2840 38%, #091a2b 58%, #050f1a 78%, #02060b 100%);
  --lx-focus-ink: #ffffff; --lx-focus-ink-2: rgb(255 255 255 / 0.84); --lx-focus-mark: #d6ebfb; --lx-focus-glow: drop-shadow(0 0 24px rgb(136 193 237 / 0.5));
  --lx-slit: linear-gradient(180deg, #02060b, #010307);
  --lx-spill: radial-gradient(44% 100% at 50% 100%, rgb(220 240 255 / 0.9) 0%, rgb(150 204 242 / 0.66) 10%, rgb(90 155 205 / 0.44) 26%, rgb(55 110 160 / 0.26) 46%, rgb(35 75 115 / 0.12) 66%, rgb(20 45 75 / 0.04) 82%, rgb(20 45 75 / 0) 94%);
  --lx-box: linear-gradient(180deg, #000000 0%, #01040a 100%);
  --lx-down: radial-gradient(62% 100% at 50% 0%, rgb(120 178 225 / 0.6) 0%, rgb(70 125 175 / 0.34) 24%, rgb(35 72 110 / 0.14) 52%, rgb(35 72 110 / 0) 82%);
  --lx-flare: rgb(136 193 237 / 0.5); --lx-line-glow: rgb(170 215 247 / 0.75); --lx-line-glow-2: rgb(70 134 183 / 0.5);
  --lx-beam-bg: linear-gradient(100deg, #010306 0%, #030c16 45%, #081a2b 100%);
  --beam: #8cc4ee; --beam-hot: #ffffff; --lx-haze: rgb(70 134 183 / 0.4);
  --lx-market: radial-gradient(55% 85% at 96% 22%, rgb(136 193 237 / 0.3) 0%, rgb(90 155 205 / 0.2) 22%, rgb(50 105 155 / 0.11) 46%, rgb(30 70 110 / 0.04) 70%, rgb(30 70 110 / 0) 90%),
    linear-gradient(160deg, #03080e 0%, #02060b 55%, #010307 100%);
  --lx-cta: radial-gradient(55% 75% at 50% 0%, #dff0fd 0%, #9fcff3 7%, #5596c8 18%, #2b628f 34%, #163a5a 52%, #0a1d30 70%, #040b14 86%, #020509 100%);
  --cv-a: #4686b7; --cv-b: #88c1ed; --cv-fill: 0.34; --cv-ring: rgb(175 188 202 / 0.36); --cv-label: rgb(255 255 255 / 0.62); --cv-halo-stroke: transparent;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--fs-body); line-height: 1.55; font-weight: 380;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent-2); color: #05080c; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--top-h) + 24px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { top: 12px; }
html.is-switching *, html.is-switching *::before, html.is-switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* between pages the browser holds the last picture of the old page (covered by the dark panel) until the next page has
   drawn its first frame (covered the same way), so no empty frame shows in between; the swap itself is instant */
@view-transition { navigation: auto; }

/* ---------- icons: a straight arrow, and one at 45° like the signet's blade ---------- */
.icon { width: 14px; height: 14px; flex: none; transition: transform 0.3s var(--ease); }
.arrow-link::after, .i-arrow { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; transition: transform 0.3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- glass: translucent surfaces that blur what lies behind them ---------- */
.glass {
  --g-bg: var(--glass-page); --g-line: var(--line); --g-ink: var(--ink); --g-hover: color-mix(in srgb, var(--bg) 80%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--g-line); background: var(--g-bg); color: var(--g-ink);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); cursor: pointer; font-size: var(--fs-small); letter-spacing: 0.005em;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.glass--square { width: 40px; padding: 0; }
.top.is-over .glass, .hero__scene .glass { --g-bg: rgb(255 255 255 / 0.10); --g-line: rgb(255 255 255 / 0.24); --g-ink: #ffffff; --g-hover: rgb(255 255 255 / 0.18); }
@media (hover: hover) and (pointer: fine) { .glass:hover { background: var(--g-hover); } }

/* ---------- shared pieces ---------- */
.section { padding: var(--section) var(--margin) 0; }
.label { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; color: var(--accent-ink); }
.label::before { content: ""; width: 18px; height: 1.5px; background: currentColor; }   /* die Linie aus dem Logo */
.label--lx { color: var(--lx-ink-2); }
.h2 { font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.statement { font-size: var(--fs-statement); line-height: 1.2; letter-spacing: -0.022em; max-width: 24em; text-wrap: pretty; }
p { text-wrap: pretty; }
.note { margin-top: 24px; font-size: var(--fs-small); color: var(--ink-2); max-width: 72ch; }
.text-link { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; color: var(--ink); width: fit-content; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  background: var(--btn); color: var(--btn-ink); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none;
  border: 0; cursor: pointer; white-space: nowrap; transition: background-color 0.25s ease, transform 0.15s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--wide { width: 100%; justify-content: space-between; }
.btn--light { background: #ffffff; color: #0a0e13; }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--glass { background: rgb(255 255 255 / 0.10); color: #ffffff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.26); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-hover); }
  .btn--light:hover { background: #dbe9f5; }
  .btn--outline:hover { background: var(--bg-2); }
  .btn--glass:hover { background: rgb(255 255 255 / 0.18); }
  .btn:hover .icon--ne, a:hover > .icon--ne, .card:hover .icon--ne, .tool__open:hover .icon--ne { transform: translate(2px, -2px); }
  .btn:hover .icon:not(.icon--ne), .arrow-link:hover::after { transform: translateX(3px); }
  .text-link:hover { color: var(--ink); }
}
.lazy-bg { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-color: var(--bg-2); }
.js .lazy-bg:not(.is-near) { background-image: none !important; }
[data-img="cta"] { background-image: var(--img-cta); }
[data-img="faq"] { background-image: var(--img-faq); }

/* ---------- header: white over the film, page colours below it ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--margin) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--ink); transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.top.is-over { color: #ffffff; }
.top:not(.is-over) { background: var(--header-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 var(--line); }
.top__logo { display: block; color: inherit; }
.logo { height: 34px; width: auto; aspect-ratio: 1454 / 240; --lg-mark: #0085cf; --lg-type: var(--logo-type); }
.top.is-over .logo { --lg-type: #f7fbfd; }
.top__end { display: flex; align-items: center; gap: 8px; }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme__moon { fill: currentColor !important; stroke: none !important; }
.theme__sun { display: none; }
:root[data-esk-theme="dark"] .theme__sun { display: block; }
:root[data-esk-theme="dark"] .theme__moon { display: none; }
/* ---------- the menu: a glass box top right, open over the film with three quick links, and a panel ----------
   Box: closed "Menü", open "Menü öffnen" plus quick links (only with a mouse from 992 px; it opens on hover and over the
   film, and closes once the club section reaches the middle of the window). Panel: a blue veil with blur over the page,
   the panel wipes in from the right, the links follow one by one, the big number of the link under the pointer. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
html.menu-lock { overflow: hidden; }
.top__end { display: flex; align-items: flex-start; gap: 8px; height: var(--nb-h); }
.nb-square, .navbox { border: 1px solid rgb(255 255 255 / 0.2); border-radius: var(--radius); background-color: var(--nb-glass); color: #ffffff; -webkit-backdrop-filter: blur(70px); backdrop-filter: blur(70px); }
.nb-square { width: var(--nb-h); height: var(--nb-h); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background-color 0.3s ease; }
.navbox { position: relative; display: flex; flex-direction: column; width: var(--nb-w); height: var(--nb-h); overflow: hidden; transition: height 0.2s ease-out; }
.navbox__top { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; height: calc(var(--nb-h) - 2px); padding: 0 var(--nb-px); border: 0; background: none; color: inherit; cursor: pointer; }
.navbox__icon, .menu__close-icon { display: grid; place-items: center; flex: none; width: 0.875rem; height: 0.875rem; }
.navbox__icon svg, .menu__close-icon svg { width: 100%; height: 100%; }
.navbox__labels { position: relative; display: flex; justify-content: flex-end; align-items: center; flex: 1; }
.navbox__label { font-size: 1rem; line-height: 1.4; white-space: nowrap; letter-spacing: -0.005em; }
.navbox__label--expand { position: absolute; opacity: 0; }
.navbox__links { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding: 0 var(--nb-px) 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; }
.navbox__link { padding: 0.5rem 0; font-size: 1rem; line-height: 1; white-space: nowrap; text-decoration: none; transition: opacity 0.3s ease; }
/* over the page (not the film) the glass is denser, so the white label keeps 4.5 : 1 on a white ground */
.top:not(.is-over) .nb-square, .top:not(.is-over) .navbox { background-color: var(--nb-glass-solid); }
@media (hover: hover) and (pointer: fine) { .nb-square:hover { background-color: var(--nb-glass-hover); } }

.menu { position: fixed; inset: 0; z-index: 60; height: 100dvh; visibility: hidden; opacity: 0; }
.menu__bg { position: absolute; inset: 0; background-color: var(--mn-veil); -webkit-backdrop-filter: blur(70px); backdrop-filter: blur(70px); cursor: pointer; }
.menu__layout { position: relative; display: flex; justify-content: space-between; height: 100%; padding: var(--mn-gap); pointer-events: none; }
.menu__numbers { position: relative; width: 50%; }
.menu__number { position: absolute; left: 0; bottom: -0.11em; opacity: 0; color: #ffffff; font-size: var(--mn-num); font-weight: 200; line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.menu__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 50%; height: 100%; border-radius: var(--radius); background-color: var(--mn-panel); color: var(--mn-ink); pointer-events: auto; overflow: hidden; }
.menu__panel:focus, section[tabindex="-1"]:focus { outline: none; }
.menu__items { display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--mn-gap) + 0.15em); }
.menu__row { display: flex; }
.menu__link-el { display: block; }
.menu__link { display: block; margin-left: var(--mn-indent); padding: 0 0 0.22em; color: var(--mn-ink); font-size: var(--mn-link); line-height: 1.04; letter-spacing: -0.035em; text-decoration: none; transition: opacity 0.3s ease-out; }
.menu__bot { display: flex; flex-direction: column; }
.menu__footer { display: flex; gap: 0.625rem; padding: var(--mn-gap) var(--mn-gap) var(--mn-gap) var(--mn-indent); }
.menu__footer-left, .menu__footer-right { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.55rem; width: 50%; }
.menu__legal { color: var(--mn-ink); font-size: 1rem; line-height: 1.4; text-decoration: none; opacity: 0.55; transition: opacity 0.2s ease; }
.menu__legal:hover, .menu__legal:focus-visible { opacity: 1; }
.menu__btns { display: flex; gap: 0.625rem; padding: var(--mn-gap); border-top: 1px solid var(--mn-line); }
.menu__btn { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; width: 50%; height: var(--mn-btn-h); padding: 1rem; border-radius: var(--radius); background-color: var(--mn-btn); color: var(--mn-ink); font-size: 1rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color 0.3s ease-out, color 0.3s ease-out; }
.menu__btn .icon { width: 12px; height: 12px; margin-bottom: 4px; }
.menu__close { position: absolute; top: var(--mn-gap); right: 0; display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; width: var(--nb-w); padding: 0.35rem var(--nb-px); border: 0; background: none; color: var(--mn-ink); font-size: 1rem; line-height: 1.4; cursor: pointer; }
.menu__close-icon { order: -1; transform: rotate(45deg); transition: transform 0.3s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .menu__btn:hover { background-color: var(--mn-btn-hover); color: var(--mn-btn-hover-ink); }
  .menu__btn:hover .icon--ne { transform: translate(2px, -2px); }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .navbox.is-open .navbox__label, .navbox:has(:focus-visible) .navbox__label { opacity: 0; }
  .navbox.is-open .navbox__label--expand, .navbox:has(:focus-visible) .navbox__label--expand { opacity: 1; }
  .navbox.is-open .navbox__links, .navbox:has(:focus-visible) .navbox__links { opacity: 1; pointer-events: auto; }
  .navbox.is-open, .navbox:has(:focus-visible) { height: 14rem; }
  .navbox__links:has(.navbox__link:hover) .navbox__link:not(:hover) { opacity: 0.5; }
  .menu__close:hover .menu__close-icon { transform: rotate(180deg); }
  .menu__items:has(.menu__link:hover) .menu__link:not(:hover) { opacity: 0.5; }
  .menu__row { transition: transform 0.3s ease-out; }
  .menu__row:hover { transform: translateX(1rem); }
  .menu__number.is-current { opacity: 1; }
}
@media (max-width: 991px), (max-width: 1024px) and (pointer: coarse) {
  .navbox__links { display: none; }
  .navbox__icon { width: 0.625rem; height: 0.625rem; }
  .menu__numbers { display: none; }
  .menu__panel { width: 100%; padding: var(--mn-gap); }
  .menu__items { padding-top: 2.4rem; }
  .menu__link { margin-left: 0; line-height: 1.2; padding-bottom: 0.1em; }
  .menu__footer { padding: var(--mn-gap) 0; }
  .menu__btns { flex-direction: column; padding: var(--mn-gap) 0 0; border-top: 0; }
  .menu__btn { width: 100%; height: 5.5rem; }
}

/* ---------- hero: the film, a little taller than the window; the sentence and the buttons below ---------- */
.hero__scene { --vh: max(560px, 100svh); --rest: clamp(230px, 28svh, 320px); position: relative; height: calc(var(--vh) + var(--rest)); overflow: hidden; background: #05080c; color: #ffffff; isolation: isolate; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scene::after { content: ""; position: absolute; inset: auto 0 0 0; height: 72%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(3 7 12 / 0.76), rgb(3 7 12 / 0.40) 45%, rgb(3 7 12 / 0)); }
/* the scene runs past the window by --rest: title and corner sit on the window's bottom edge,
   the sentence and the buttons wait in the film below it and show with the first scroll */
.hero__title { position: absolute; z-index: 2; left: var(--margin); bottom: calc(var(--rest) + clamp(28px, 4.5vw, 64px)); font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.048em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__corner { position: absolute; z-index: 2; right: var(--margin); bottom: calc(var(--rest) + clamp(28px, 4.5vw, 64px)); display: flex; align-items: center; gap: 16px; }
.hero__coord { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: rgb(255 255 255 / 0.74); }
.hero__pause .icon--play { display: none; }
.hero__pause[aria-pressed="true"] .icon--play { display: block; }
.hero__pause[aria-pressed="true"] .icon--pause { display: none; }
.hero__below { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 0 var(--margin) clamp(32px, 5vw, 64px); color: #ffffff; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; }
.hero__lead { grid-column: 1 / span 7; font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.015em; max-width: 34ch; }
.hero__actions { grid-column: 9 / span 4; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- club ---------- */
.club .statement { margin-top: 28px; }
.js.motion [data-words] .w { color: var(--ink-3); transition: color 0.35s ease; }
.js.motion [data-words] .w.is-lit { color: var(--ink); }
.club__grid { margin-top: clamp(56px, 7vw, 112px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
.club__note { grid-column: 1 / span 4; color: var(--ink-2); max-width: 34ch; }
.card { display: grid; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); text-decoration: none; color: var(--ink); isolation: isolate; }
.card:nth-of-type(1) { grid-column: 5 / span 4; }
.card:nth-of-type(2) { grid-column: 9 / span 4; }
.card__img { display: block; aspect-ratio: 4 / 5; transition: transform 0.9s var(--ease); }
.card__body { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; padding: 20px 22px 22px; background: var(--bg-2); position: relative; z-index: 1; }
.card__title { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.card__text { grid-column: 1; color: var(--ink-2); font-size: var(--fs-small); }
.card__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__img { transform: scale(1.035); } }

/* ---------- figures: glass cards over the sculpture ---------- */
.figures { padding-top: var(--section); }
.figures__head { padding: 0 var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.figures__head .label { grid-column: 1 / -1; }
.figures__head .h2 { grid-column: 1 / span 6; }
.figures__intro { grid-column: 8 / span 4; color: var(--ink-2); }
.figures__stage { position: relative; margin-top: clamp(40px, 5vw, 72px); min-height: max(640px, 104svh); display: grid; align-items: end; overflow: hidden; isolation: isolate; background: #1c3a55; }
.figures__img { position: absolute; inset: 0; z-index: -2; }
/* a deep blue veil keeps white type legible on the light picture, strongest where the cards stand */
.figures__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgb(var(--fig-veil) / 0.64), rgb(var(--fig-veil) / 0.30) 55%, rgb(var(--fig-veil) / 0.08)); }
.figures__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding: 0 var(--margin) clamp(40px, 9svh, 112px); }
.fig {
  min-height: clamp(260px, 44svh, 480px); padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  color: #ffffff; border-radius: var(--radius); background: var(--fig-glass); border: 1px solid rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
}
.fig dt { font-size: var(--fs-number); font-weight: 300; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(100deg, rgb(255 255 255 / 0.66) 0%, #ffffff 60%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.fig dd { padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 0.42); font-size: var(--fs-small); }
.figures__note { margin: 20px var(--margin) 0; }

/* ---------- tools ---------- */
.tools { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.tools__side { grid-column: 1 / span 5; position: sticky; top: calc(var(--top-h) + 32px); display: grid; gap: 20px; }
.tools__intro { color: var(--ink-2); max-width: 40ch; }
.tools__list { grid-column: 7 / span 6; border-bottom: 1px solid var(--line); margin-top: 40px; }
.tools__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.tool { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink-2); }
.tool__no { grid-row: 1 / span 2; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); padding-top: 0.55em; }
.tool__name { font-size: var(--fs-h3); letter-spacing: -0.015em; color: var(--ink-2); transition: color 0.25s ease; }
.tool__text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.tool__text > span { overflow: hidden; font-size: var(--fs-small); color: var(--ink-2); max-width: 46ch; }
.tool.is-on .tool__name { color: var(--ink); }
.tool.is-on .tool__no { color: var(--accent-ink); }
.tool.is-on .tool__text { grid-template-rows: 1fr; }
.tool.is-on .tool__text > span { padding-top: 6px; }
.tool__open { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .tool:hover .tool__name { color: var(--ink); }
  .tool__open:hover { background: var(--bg-2); }
}
.preview { position: relative; margin-top: 16px; min-height: 360px; border-radius: var(--radius); background-color: var(--bg-2); overflow: hidden; }
.preview__item { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.35s ease, transform 0.5s var(--ease); pointer-events: none; }
.preview__item.is-on { opacity: 1; transform: none; }

/* ---------- light: tiles made of light, blue by day (light mode), black at night (dark mode) ----------
   The light is gradients with many stops, kept smooth and clean; the market line is one SVG path. */
.lx { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-edge); }
.lx > * { position: relative; z-index: 2; }
.lx > .lx__visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lx__num, .lx-head__title, .lx .market__figure strong { -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
@media (forced-colors: active) { .lx__num, .lx-head__title, .lx .market__figure strong, .fig dt { background: none; color: CanvasText; } }

/* ---------- membership: five tiles ---------- */
.members { padding: var(--section) var(--margin) 0; }
.members__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.lx--free, .lx--focus, .lx--slit, .lx--beam { --pad: clamp(22px, 2.4vw, 36px); padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.lx--focus, .lx--slit, .lx--beam { grid-column: span 4; min-height: clamp(440px, 58svh, 600px); }
.lx__no { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: var(--lx-ink-2); }
.lx__foot { display: grid; gap: 10px; justify-items: start; }
.lx__foot h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.lx__foot p { font-size: var(--fs-small); color: var(--lx-ink-2); max-width: 38ch; }

/* the heading tile: lines cross like a grid of parallels and meridians, a spark at each crossing, light from below */
.lx--head { grid-column: span 8; --fx: clamp(22px, 6%, 64px); --fy: clamp(30px, 11%, 72px); min-height: clamp(460px, 62svh, 680px);
  display: grid; place-items: center; padding: calc(var(--fy) + 64px) calc(var(--fx) + 20px); background: var(--lx-head); }
.lines i { position: absolute; display: block; }
.lines__h { left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lx-line) 5%, var(--lx-line) 95%, transparent); }
.lines__v { top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--lx-line) 6%, var(--lx-line) 94%, transparent); }
.lines__h--t { top: var(--fy); } .lines__h--b { bottom: var(--fy); }
.lines__v--l { left: var(--fx); } .lines__v--r { right: var(--fx); }
.spark { position: absolute; width: 22px; height: 22px; fill: var(--lx-spark); filter: drop-shadow(0 0 3px var(--lx-spark-glow)) drop-shadow(0 0 9px var(--lx-spark-glow)); }
.spark--tl { left: var(--fx); top: var(--fy); margin: -11px 0 0 -11px; }
.spark--tr { right: var(--fx); top: var(--fy); margin: -11px -11px 0 0; --d: -1.6s; }
.spark--bl { left: var(--fx); bottom: var(--fy); margin: 0 0 -11px -11px; --d: -3.1s; }
.spark--br { right: var(--fx); bottom: var(--fy); margin: 0 -11px -11px 0; --d: -0.8s; }
.lines__tag { position: absolute; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; color: var(--lx-ink-3); white-space: nowrap; }
.lines__tag--n { right: calc(var(--fx) + 20px); top: calc(var(--fy) - 21px); }
.lines__tag--e { left: calc(var(--fx) - 21px); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.lx-head__top { position: absolute; left: calc(var(--fx) + 20px); right: calc(var(--fx) + 20px); top: calc(var(--fy) + 18px); display: flex; justify-content: space-between; align-items: start; gap: 10px 24px; }
.lx-head__aside { font-size: var(--fs-small); color: var(--lx-ink-2); text-align: right; max-width: 24ch; }
.lx-head__title { font-size: clamp(2.25rem, 0.9rem + 4vw, 5.25rem); line-height: 1; letter-spacing: -0.045em; text-align: center; text-wrap: balance; max-width: 10em; background-image: var(--lx-title); }

/* free: the price in light, the signet, the button */
.lx--free { grid-column: span 4; background: var(--lx-free); }
.lx__signet { width: 64px; height: auto; aspect-ratio: 248 / 152; fill: currentColor; }
.lx .lx__num { font-size: var(--fs-number); font-weight: 300; line-height: 1; letter-spacing: -0.045em; background-image: var(--lx-num); color: transparent; }
.lx__text { font-size: var(--fs-small); color: var(--lx-ink-2); max-width: 34ch; }
.lx--free .btn { margin-top: 14px; }

/* a checked circle: the signet comes into focus as it scrolls in */
.lx--focus { --lx-ink: var(--lx-focus-ink); --lx-ink-2: var(--lx-focus-ink-2); background: var(--lx-focus); }
.focus { position: absolute; left: 50%; top: 38%; width: 62%; height: auto; aspect-ratio: 248 / 152; margin: -19% 0 0 -31%; fill: var(--lx-focus-mark); filter: blur(var(--blur, 0px)) var(--lx-focus-glow); }

/* off-market: light under a door, before it opens */
.lx--slit { --cut: 50%; background: var(--lx-slit); }
.slit__spill { position: absolute; left: -10%; right: -10%; top: calc(var(--cut) - 64%); height: 64%; background: var(--lx-spill); transform-origin: 50% 100%; filter: blur(6px); }
.slit__down { position: absolute; left: -10%; right: -10%; top: var(--cut); height: 70%; background: var(--lx-down); filter: blur(6px); }
.slit__box { position: absolute; left: 9%; right: 9%; top: var(--cut); bottom: -2px; background: var(--lx-box); border-radius: 2px 2px 0 0; }
.slit__flare { position: absolute; left: 0; right: 0; top: calc(var(--cut) - 28px); height: 56px; background: radial-gradient(44% 50% at 50% 50%, var(--lx-flare) 0%, transparent 100%); }
.slit__line { position: absolute; left: 9%; right: 9%; top: calc(var(--cut) - 1px); height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.35), #ffffff 12%, #ffffff 88%, rgb(255 255 255 / 0.35));
  box-shadow: 0 0 6px 1px rgb(255 255 255 / 0.85), 0 0 22px 4px var(--lx-line-glow), 0 0 64px 14px var(--lx-line-glow-2); }
.lx--slit .lx__foot { padding: 0 clamp(10px, 3.4%, 18px); }

/* knowledge: a beam of light from the left edge */
.lx--beam { --axis: 36%; background: var(--lx-beam-bg); }
.beam { position: absolute; left: 0; transform-origin: 0 50%; }
.beam--haze { left: 16%; width: 100%; top: calc(var(--axis) - 50%); height: 100%; background: radial-gradient(50% 50% at 50% 50%, var(--lx-haze) 0%, transparent 100%); }
.beam--wide { width: 115%; top: calc(var(--axis) - 75%); height: 150%; filter: blur(9px);
  background: conic-gradient(from 0deg at 0% 50%, transparent 0deg 66deg, color-mix(in srgb, var(--beam) 7%, transparent) 72deg, color-mix(in srgb, var(--beam) 20%, transparent) 79deg,
    color-mix(in srgb, var(--beam) 40%, transparent) 85deg, color-mix(in srgb, var(--beam) 50%, transparent) 90deg, color-mix(in srgb, var(--beam) 40%, transparent) 95deg,
    color-mix(in srgb, var(--beam) 20%, transparent) 101deg, color-mix(in srgb, var(--beam) 7%, transparent) 108deg, transparent 114deg 360deg);
  -webkit-mask: radial-gradient(farthest-side at 0% 50%, #000 0%, rgb(0 0 0 / 0.86) 22%, rgb(0 0 0 / 0.55) 50%, rgb(0 0 0 / 0.2) 78%, transparent 100%);
  mask: radial-gradient(farthest-side at 0% 50%, #000 0%, rgb(0 0 0 / 0.86) 22%, rgb(0 0 0 / 0.55) 50%, rgb(0 0 0 / 0.2) 78%, transparent 100%); }
.beam--core { width: 96%; top: calc(var(--axis) - 35%); height: 70%; filter: blur(4px);
  background: conic-gradient(from 0deg at 0% 50%, transparent 0deg 81deg, color-mix(in srgb, var(--beam-hot) 22%, transparent) 84.5deg, color-mix(in srgb, var(--beam-hot) 66%, transparent) 88deg,
    var(--beam-hot) 90deg, color-mix(in srgb, var(--beam-hot) 66%, transparent) 92deg, color-mix(in srgb, var(--beam-hot) 22%, transparent) 95.5deg, transparent 99deg 360deg);
  -webkit-mask: radial-gradient(farthest-side at 0% 50%, #000 0%, rgb(0 0 0 / 0.8) 22%, rgb(0 0 0 / 0.44) 48%, rgb(0 0 0 / 0.16) 72%, transparent 95%);
  mask: radial-gradient(farthest-side at 0% 50%, #000 0%, rgb(0 0 0 / 0.8) 22%, rgb(0 0 0 / 0.44) 48%, rgb(0 0 0 / 0.16) 72%, transparent 95%); }
.beam__src { position: absolute; left: -30px; top: calc(var(--axis) - 10px); width: 66px; height: 20px; background: radial-gradient(closest-side, #ffffff 0%, rgb(255 255 255 / 0.85) 28%, rgb(255 255 255 / 0) 100%); filter: blur(1px); }

/* the market: the register as a line of light, the glowing point is the latest month */
.market__box.lx { box-shadow: inset 0 0 0 1px var(--lx-edge); background: var(--lx-market); }
.lx .tabs button { color: var(--lx-ink-2); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--lx-line); }
.lx .tabs button[aria-selected="true"] { background: #ffffff; color: #05080c; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .lx .tabs button[aria-selected="false"]:hover { background: rgb(255 255 255 / 0.12); color: #ffffff; } }
.lx .market__figure strong { background-image: var(--lx-num); }
.lx .market__figure span, .lx .market__facts { color: var(--lx-ink-2); }
.lx .market__facts strong { color: var(--lx-ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { min-height: 40px; padding: 0 16px; border-radius: var(--radius); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--fs-small); transition: background-color 0.2s ease, color 0.2s ease; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tabs button[aria-selected="false"]:hover { color: var(--ink); background: var(--bg-2); } }
/* ---------- research ---------- */
.research { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.research__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--top-h) + 32px); display: grid; gap: 20px; justify-items: start; }
.research__intro { color: var(--ink-2); max-width: 32ch; }
.research__img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); margin-top: 8px; }
.posts { grid-column: 6 / span 7; border-bottom: 1px solid var(--line); }
.post { display: grid; gap: 8px; padding: 28px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.post__meta { display: flex; align-items: center; gap: 14px; font-size: var(--fs-label); color: var(--ink-2); }
.tag { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; padding: 5px 10px; border-radius: 6px; background: var(--bg-2); color: var(--ink); }
.tag--accent { background: var(--accent-ink); color: #ffffff; }
:root[data-esk-theme="dark"] .tag--accent { color: #05080c; }
.post__title { font-size: var(--fs-h3); letter-spacing: -0.015em; max-width: 34ch; transition: color 0.2s ease; }
.post__text { color: var(--ink-2); font-size: var(--fs-small); max-width: 60ch; }
@media (hover: hover) and (pointer: fine) { .post:hover .post__title { color: var(--accent-ink); } }

/* ---------- network ---------- */
.network__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.network__head .label { grid-column: 1 / -1; }
.network__head .h2 { grid-column: 1 / span 6; }
.network__intro { grid-column: 8 / span 4; color: var(--ink-2); }
.network__grid { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.offer { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.offer__img { aspect-ratio: 4 / 3; }
.offer__body { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 36px); }
.offer__kicker { font-size: var(--fs-label); font-weight: 500; color: var(--accent-ink); }
.offer h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; max-width: 28ch; }
.offer p:not(.offer__kicker) { color: var(--ink-2); font-size: var(--fs-small); max-width: 52ch; }
.offer .arrow-link { margin-top: 8px; }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__side { grid-column: 1 / span 4; display: grid; gap: 20px; align-content: start; }
.faq__img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: var(--radius); margin-top: 20px; }
.faq__list { grid-column: 6 / span 7; border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa h3 { font-size: inherit; }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: var(--fs-h3); letter-spacing: -0.015em; color: var(--ink); }
.qa__icon { position: relative; flex: none; width: 18px; height: 18px; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.35s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease); }
.js .qa:not(.is-open) .qa__a { grid-template-rows: 0fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 48px 26px 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- call to action ---------- */
.cta { margin: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: clamp(540px, 76vh, 800px); background: var(--lx-cta); }
.cta > .cta__media { grid-column: 7 / -1; grid-row: 1; position: relative; overflow: hidden; }
.cta__img { position: absolute; inset: 0; }
.cta > .cta__content { grid-column: 1 / span 6; grid-row: 1; align-self: end; padding: clamp(32px, 5vw, 72px); display: grid; gap: 20px; }
.cta__title { font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -0.035em; }
.cta__content p { max-width: 40ch; color: var(--lx-ink-2); }
.cta__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.cta .text-link { color: var(--lx-ink); }
.cta__mail { font-size: var(--fs-small); }
.cta__address { color: var(--lx-ink); user-select: all; -webkit-user-select: all; }

/* ---------- subpages: page head, grey tile buttons, motif tiles, lists, table, form ---------- */
/* secondary buttons: grey tiles, the label bottom left, the arrow bottom right */
.tile-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile-btns--1 { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 420px; }
.tile-btns--after { margin-top: 24px; max-width: 760px; }
.tile-btn { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; min-height: clamp(5.25rem, 4.3rem + 2.6vw, 6.75rem); padding: 16px 18px 17px; border-radius: var(--radius); background-color: var(--tb-bg); color: var(--tb-ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; text-decoration: none; transition: background-color 0.3s ease-out, color 0.3s ease-out; }
.tile-btn .icon { width: 18px; height: 18px; margin-bottom: 1px; }
.tile-btn .icon--ne { width: 14px; height: 14px; margin-bottom: 3px; }
.tile-btn .icon--down { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .tile-btn:hover { background-color: var(--tb-hover); color: var(--tb-hover-ink); }
  .tile-btn:hover .icon:not(.icon--ne):not(.icon--down) { transform: translateX(3px); }
  .tile-btn:hover .icon--down { transform: rotate(90deg) translateX(3px); }
}

/* the head of a subpage: title left, sentence and two tiles right, a wide picture below */
.phero { padding: calc(var(--top-h) + clamp(56px, 8vw, 128px)) var(--margin) 0; }
.phero__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; }
.phero__head .label { grid-column: 1 / -1; }
.phero__title { grid-column: 1 / span 7; font-size: var(--fs-page); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.phero__side { grid-column: 8 / span 5; display: grid; gap: 22px; }
.phero__intro { color: var(--ink-2); max-width: 44ch; }
.phero__media { position: relative; margin-top: clamp(40px, 5vw, 80px); aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; background-color: var(--bg-2); }
.phero__img { position: absolute; inset: 0; }
.phero__media--lx { display: grid; place-items: center; background: var(--lx-market); }
.phero__media--lx > .mo { inset: 0; }
.ui--hero { position: relative; z-index: 2; width: min(86%, 420px); box-shadow: 0 30px 90px rgb(0 0 0 / 0.28); }
/* die uebrigen Fotos haengen per data-img direkt am Element (build/esk.css) */

.shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.shead .label { grid-column: 1 / -1; }
.shead .h2 { grid-column: 1 / span 7; }
.shead__intro { grid-column: 8 / span 4; color: var(--ink-2); }
.next { padding-top: clamp(72px, 9vw, 144px); }

/* motif tiles: tiles of light with a drawn motif above the text (lines, rings, layers, glows) */
.mt-grid { display: grid; gap: 12px; }
.mt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt { --pad: clamp(22px, 2.2vw, 32px); min-height: clamp(380px, 46svh, 520px); padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--mt-ground); }
.mt-grid--4 .mt { min-height: clamp(340px, 42svh, 460px); }
.mt .lx__foot p { max-width: 36ch; }
.lx .mt__big { font-size: var(--fs-number); font-weight: 300; line-height: 1; letter-spacing: -0.045em; background-image: var(--lx-num); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; margin-bottom: 4px; white-space: nowrap; }
.lx .arrow-link { color: var(--lx-ink); }
.mt__link { margin-top: 6px; }
.mt--muted { --lx-ink: var(--ink); --lx-ink-2: var(--ink-2); --lx-ink-3: var(--ink-2); background: var(--mt-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lx > .mo { inset: 0 0 44% 0; }
.mo-h, .mo-v { position: absolute; display: block; }
.mo-h { left: 0; right: 0; top: var(--y); height: 1px; background: linear-gradient(90deg, transparent, var(--lx-line) 8%, var(--lx-line) 92%, transparent); }
.mo-v { top: 0; bottom: 0; left: var(--x); width: 1px; background: linear-gradient(180deg, transparent, var(--lx-line) 10%, var(--lx-line) 90%, transparent); }
.mo-spark { left: var(--x); top: var(--y); margin: -11px 0 0 -11px; }
.mo--curve .mo-route { position: absolute; left: 0; top: 22%; width: 86%; height: 62%; overflow: visible; }
.mo-c0 { stop-color: var(--cv-a); stop-opacity: 0.12; } .mo-c1 { stop-color: var(--cv-b); stop-opacity: 0.9; } .mo-c2 { stop-color: #ffffff; }
.mo-dot { position: absolute; left: 82%; top: 33.6%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 22px rgb(255 255 255 / 0.07), 0 0 18px 4px var(--cv-b); }
.mo--rings { background: radial-gradient(circle at 50% 54%, #ffffff 0 3px, var(--lx-glow-c) 4px, transparent 36px), repeating-radial-gradient(circle at 50% 54%, transparent 0 23px, var(--lx-line) 23px 24px, transparent 24px 46px);
  -webkit-mask: radial-gradient(circle at 50% 54%, #000 0 24%, transparent 68%); mask: radial-gradient(circle at 50% 54%, #000 0 24%, transparent 68%); }
.mo--bands { background: linear-gradient(180deg, transparent 0 20%, var(--b1) 20% 31%, transparent 31% 37%, var(--b2) 37% 50%, transparent 50% 56%, var(--b3) 56% 71%, transparent 71% 77%, var(--b4) 77% 96%, transparent 96%);
  -webkit-mask: linear-gradient(90deg, transparent 4%, #000 22%, #000 78%, transparent 96%); mask: linear-gradient(90deg, transparent 4%, #000 22%, #000 78%, transparent 96%); }
.mo--orbs::before, .mo--orbs::after { content: ""; position: absolute; top: 54%; width: clamp(110px, 40%, 180px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.mo--orbs::before { left: 40%; background: radial-gradient(closest-side, var(--orb-core), var(--orb1) 46%, transparent); }
.mo--orbs::after { left: 60%; background: radial-gradient(closest-side, var(--orb-core2), var(--orb2) 46%, transparent); mix-blend-mode: screen; }
.mo--boat::before { content: ""; position: absolute; left: 50%; top: 56%; width: 72%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--boat-in) 0%, var(--boat-mid) 58%, transparent 100%); }
.mo--boat::after { content: ""; position: absolute; left: 50%; top: 56%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #ffffff 0 55%, rgb(255 255 255 / 0.6) 72%, transparent); box-shadow: 0 0 30px 10px var(--boat-glow); }
.mo--path .mo-route { position: absolute; left: 6%; top: 10%; width: 88%; height: 82%; overflow: visible; stroke: var(--lx-ink-3); }
.mo--glow { background: radial-gradient(60% 80% at 84% 12%, var(--glow-a), transparent 72%); }
.mo--soon { inset: 18px 18px 40% !important; border: 1px dashed currentColor; border-radius: 6px; opacity: 0.32; }
.mt--beam, .bulletin__box, .pcard__art--beam { --axis: 46%; }

/* club: the story with a tall picture */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; }
.story__text { grid-column: 1 / span 7; display: grid; gap: 24px; justify-items: start; }
.story__text .tile-btns { width: 100%; max-width: 620px; }
.story__note { color: var(--ink-2); max-width: 52ch; }
.story__img { grid-column: 9 / span 4; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); }

/* club: what happens, a numbered list beside a tile */
.prog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.prog__side { grid-column: 1 / span 5; position: sticky; top: calc(var(--top-h) + 32px); display: grid; gap: 24px; }
.prog__side .shead { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.prog__side .shead .h2, .prog__side .shead__intro { grid-column: 1; }
.prog__tile { min-height: clamp(240px, 32svh, 340px); }
.prog__list { grid-column: 7 / span 6; border-bottom: 1px solid var(--line); }
.prog__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 26px 0; border-top: 1px solid var(--line); }
.prog__no { grid-row: 1 / span 2; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: var(--accent-ink); padding-top: 0.45em; }
.prog__list h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.prog__list p { color: var(--ink-2); max-width: 52ch; }


/* membership: three steps on a line */
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gutter); }
.steps__list li { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 30px; border-top: 1px solid var(--line-strong); }
.steps__list li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.steps__no { font-size: clamp(3.5rem, 2.4rem + 3.6vw, 6rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.06em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.steps__list h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.steps__list p { color: var(--ink-2); max-width: 36ch; }

/* membership: the application, written as an e-mail */
.form-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.form-sec__side { grid-column: 1 / span 5; display: grid; gap: 20px; }
.form-sec__intro, .form-sec__mail { color: var(--ink-2); max-width: 44ch; }
.addr { color: var(--ink); font-weight: 500; user-select: all; -webkit-user-select: all; }
.form { grid-column: 7 / span 6; display: grid; gap: 18px; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius); background: var(--bg-2); }
.form__field { display: grid; gap: 8px; margin: 0; padding: 0; min-width: 0; border: 0; font-size: var(--fs-small); color: var(--ink-2); }
.form__field input[type="text"], .form__field select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.form__choice { display: flex; flex-wrap: wrap; gap: 8px; }
.form__choice legend { width: 100%; margin-bottom: 8px; padding: 0; }
.form__choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font-size: 1rem; cursor: pointer; }
.form__choice label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.form__choice input { accent-color: var(--accent); }
.form__send { justify-self: start; margin-top: 6px; }


/* tools: three groups of tiles */
.tgroup + .tgroup { margin-top: clamp(48px, 6vw, 88px); }
.tgroup__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 32px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tgroup__title { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.tgroup__text { color: var(--ink-2); font-size: var(--fs-small); max-width: 52ch; }

/* research: filters, cards with a motif, the bulletin */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; color: var(--ink-2); font-size: var(--fs-small); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) var(--gutter); }
.pcard[hidden] { display: none; }
.pcard__link { display: grid; gap: 12px; align-content: start; text-decoration: none; color: var(--ink); }
.pcard__art { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--mt-ground); overflow: hidden; }
.pcard__art > .mo { inset: 0; }
.pcard__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-label); color: var(--ink-2); }
.pcard__members { margin-left: auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--accent-ink); }
.pcard__title { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; transition: color 0.2s ease; }
.pcard__text { color: var(--ink-2); font-size: var(--fs-small); }
@media (hover: hover) and (pointer: fine) { .pcard__link:hover .pcard__title { color: var(--accent-ink); } }

/* ---------- legal pages: contents and draft note on the left, the text on the right ---------- */
.legal__stand { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: var(--ink-2); }
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-top: clamp(48px, 6vw, 96px); }
.legal__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--top-h) + 32px); display: grid; gap: 28px; }
.legal__note { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--radius); background: var(--tb-bg); font-size: var(--fs-small); color: var(--ink-2); }
.legal__note strong { color: var(--ink); font-weight: 500; }
.legal__toc-head { margin-bottom: 10px; font-size: var(--fs-label); color: var(--ink-2); }
.legal__toc ol { display: grid; border-left: 1px solid var(--line); }
.legal__toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 1px solid transparent; font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--ink); border-left-color: var(--accent); } }
.legal__body { grid-column: 6 / span 7; display: grid; gap: clamp(32px, 3.5vw, 48px); }
.legal__sec { display: grid; gap: 12px; }
.legal__sec h2 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.legal__sec p, .legal__sec li { color: var(--ink-2); max-width: 68ch; }
.legal__sec ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.legal__sec li::marker { color: var(--accent); }
/* the tint reaches past the letters by a shadow, not by padding, so a placeholder at the end of a line stays inside its paragraph */
.ph { padding: 1px 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal__draft { padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--line-strong); font-size: var(--fs-small); }
.legal__courtesy { font-size: var(--fs-small); color: var(--ink-2); font-style: italic; }

/* ---------- motif tiles in motion: drawn in once, then a quiet loop while in view (paused out of view) ---------- */
.mo-dot::after { content: ""; position: absolute; inset: -9px; z-index: -1; border-radius: 50%; background: var(--cv-ring); }
.mo--rings::after { content: ""; position: absolute; left: 50%; top: 54%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1px solid var(--lx-spark); opacity: 0; }
.mo--bands { --bands-mask: linear-gradient(180deg, transparent 0 20%, #000 20% 31%, transparent 31% 37%, #000 37% 50%, transparent 50% 56%, #000 56% 71%, transparent 71% 77%, #000 77% 96%, transparent 96%); }
.mo--bands::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, var(--sweep) 50%, transparent 65%) 120% 0 / 250% 100% no-repeat; -webkit-mask: var(--bands-mask); mask: var(--bands-mask); }
@keyframes spark-pop { from { opacity: 0; transform: scale(0.2) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes ping { 0% { transform: scale(0.4); opacity: 0.9; } 80%, 100% { transform: scale(7); opacity: 0; } }
@keyframes orb-a { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-28%, -50%); } }
@keyframes orb-b { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-72%, -50%); } }
@keyframes yolk { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.3); } }
@keyframes boat { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
@keyframes march { to { stroke-dashoffset: -18; } }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes glow-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  /* grid: the lines draw themselves, the sparks pop in one after another and twinkle */
  .motion .mo--grid .mo-h { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); }
  .motion .mo--grid .mo-v { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s var(--ease) 0.15s; }
  .motion .mo--grid.is-in .mo-h, .motion .mo--grid.is-in .mo-v { transform: none; }
  .motion .mo .mo-spark { opacity: 0; animation: none; }
  .motion .mo.is-in .mo-spark { animation: spark-pop 0.8s var(--ease) 0.7s both, twinkle 4.8s ease-in-out 1.5s infinite; }
  .motion .mo.is-in .mo-spark:nth-of-type(2) { animation-delay: 1s, 1.8s; }
  .motion .mo.is-in .mo-spark:nth-of-type(3) { animation-delay: 1.3s, 2.1s; }
  .motion .mo.is-in .mo-spark:nth-of-type(4) { animation-delay: 1.6s, 2.4s; }
  /* curve and route: a wipe draws them; the point lands and breathes; the route's dots walk on */
  .motion .mo--curve .mo-route, .motion .mo--path .mo-route { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-io) 0.2s; }
  .motion .mo--curve.is-in .mo-route, .motion .mo--path.is-in .mo-route { clip-path: inset(0 0 0 0); }
  .motion .mo--path.is-in .mo-route { animation: march 1.6s linear 2s infinite; }
  .motion .mo--curve .mo-dot { opacity: 0; transform: scale(0.3); transition: opacity 0.5s ease 1.6s, transform 0.9s var(--ease) 1.6s; }
  .motion .mo--curve.is-in .mo-dot { opacity: 1; transform: none; }
  .motion .mo--curve.is-in .mo-dot::after { animation: halo 3.4s ease-in-out 2.5s infinite; }
  /* rings: they open from the centre, then a ping runs outward through them */
  .motion .mo--rings { opacity: 0; transform: scale(0.75); transition: opacity 1s ease, transform 1.6s var(--ease); }
  .motion .mo--rings.is-in { opacity: 1; transform: none; }
  .motion .mo--rings.is-in::after { animation: ping 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite; }
  /* bands: the layers slide in, a light runs across them */
  .motion .mo--bands { opacity: 0; transform: translateX(-10%); transition: opacity 1.2s ease, transform 1.6s var(--ease); }
  .motion .mo--bands.is-in { opacity: 1; transform: none; }
  .motion .mo--bands.is-in::after { animation: sweep 6.5s ease-in-out 1.4s infinite; }
  /* orbs: two lights that drift together and apart */
  .motion .mo--orbs::before, .motion .mo--orbs::after { opacity: 0; transition: opacity 1.2s ease 0.2s; }
  .motion .mo--orbs.is-in::before, .motion .mo--orbs.is-in::after { opacity: 1; }
  .motion .mo--orbs.is-in::before { animation: orb-a 7s ease-in-out 1s infinite; }
  .motion .mo--orbs.is-in::after { animation: orb-b 7s ease-in-out 1s infinite; }
  /* boat: the glow comes up, the yolk pulses like a small sun */
  .motion .mo--boat::before { opacity: 0; transition: opacity 1.4s ease; }
  .motion .mo--boat::after { opacity: 0; transform: translate(-50%, -50%) scale(0.2); transition: opacity 0.6s ease 0.8s, transform 1s var(--ease) 0.8s; }
  .motion .mo--boat.is-in::before { opacity: 1; animation: boat 6s ease-in-out 1.6s infinite; }
  .motion .mo--boat.is-in::after { opacity: 1; transform: translate(-50%, -50%); animation: yolk 3.8s ease-in-out 2s infinite; }
  /* beam: it reaches out from the edge, the core breathes */
  .motion .mo--beam .beam { opacity: 0; transform: scaleX(0.25); transition: opacity 1.2s ease, transform 2.2s var(--ease); }
  .motion .mo--beam .beam__src { opacity: 0; transform: scale(0.2); transition: opacity 0.8s ease, transform 0.9s var(--ease); }
  .motion .mo--beam.is-in .beam, .motion .mo--beam.is-in .beam__src { opacity: 1; transform: none; }
  .motion .mo--beam.is-in .beam--core { animation: breathe 5.5s ease-in-out 2.4s infinite; }
  /* corner light: it fades up and breathes */
  .motion .mo--glow { opacity: 0; transform-origin: 84% 12%; transition: opacity 1.6s ease; }
  .motion .mo--glow.is-in { opacity: 1; animation: glow-breathe 7s ease-in-out 1.6s infinite; }
  /* out of view everything holds still */
  .motion .mo:not(.is-live), .motion .mo:not(.is-live) *, .motion .mo:not(.is-live)::before, .motion .mo:not(.is-live)::after, .motion .mo:not(.is-live) *::after { animation-play-state: paused !important; }
}

/* ---------- footer ---------- */
.footer { padding: var(--section) var(--margin) 28px; }
.footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; }
.footer__col { grid-column: span 2; display: grid; gap: 8px; align-content: start; font-size: var(--fs-small); }
.footer__col a { text-decoration: none; width: fit-content; }
.footer__head { color: var(--ink-2); font-size: var(--fs-label); margin-bottom: 6px; }
.footer__claim { grid-column: 9 / span 4; text-align: right; color: var(--ink-2); font-size: var(--fs-small); align-self: end; }
.footer__wordmark { display: block; width: 100%; height: auto; aspect-ratio: 1454 / 240; margin-top: clamp(64px, 8vw, 128px); --lg-mark: #0085cf; --lg-type: var(--ink); }
.footer__base { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-size: var(--fs-label); color: var(--ink-2); }
.footer__legal { max-width: 70ch; }
.footer__meta a { margin-left: 14px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover, .footer__meta a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* ---------- entrances (only with motion and a working script) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); }
  .motion .hero__title .line > span { transform: translate3d(0, 105%, 0); }
  .motion .hero__corner { opacity: 0; }
  .motion .focus { --blur: 26px; }
  .motion .lx--slit .slit__line, .motion .lx--slit .slit__flare, .motion .lx--slit .slit__spill, .motion .lx--beam .beam, .motion .lx--beam .beam__src { opacity: 0; }
  .motion .spark { animation: twinkle 4.8s ease-in-out var(--d, 0s) infinite; }
  .motion .cv-ring { animation: halo 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}

@keyframes twinkle { 0%, 100% { opacity: 0.5; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.65; } }

/* ---------- narrower screens ---------- */
@media (max-width: 479px) {
  .navbox { width: 8rem; }
  .navbox__top { padding: 0 1rem; }
  .navbox__label { font-size: 0.8125rem; }
  .menu__layout { padding: 10px; }
  .menu__link { font-size: clamp(1.825rem, 1.759615rem + 0.326923vw, 2.25rem); }
  .menu__close { top: 14px; }
}
@media (max-width: 1100px) {
  .hero__lead { grid-column: 1 / span 8; }
  .hero__title { bottom: calc(var(--rest) + 88px); }
  .hero__corner { left: var(--margin); right: var(--margin); bottom: calc(var(--rest) + 24px); justify-content: space-between; }
  .hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .figures__head .h2, .market__head .h2, .network__head .h2 { grid-column: 1 / span 7; }
  .figures__intro, .market__intro, .network__intro { grid-column: 8 / span 5; }
  .club__note { grid-column: 1 / -1; }
  .card:nth-of-type(1) { grid-column: 1 / span 6; }
  .card:nth-of-type(2) { grid-column: 7 / span 6; }
  .figures__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { min-height: clamp(200px, 26svh, 300px); }
  .tools__side { grid-column: 1 / span 6; }
  .tools__list { grid-column: 7 / span 6; }
  .lx--head { grid-column: 1 / -1; min-height: clamp(420px, 52svh, 560px); }
  .lx--free, .lx--focus, .lx--slit, .lx--beam { grid-column: span 6; }
  .research__side, .faq__side { grid-column: 1 / -1; position: static; }
  .research__img { max-width: 720px; }
  .faq__img { display: none; }
  .posts, .faq__list { grid-column: 1 / -1; margin-top: 40px; }
  .footer__col { grid-column: span 4; }
  .footer__claim { grid-column: 1 / -1; text-align: left; }
  .phero__title { grid-column: 1 / -1; }
  .phero__side { grid-column: 1 / span 9; }
  .shead .h2 { grid-column: 1 / span 9; }
  .shead__intro { grid-column: 1 / span 8; }
  .mt-grid--3, .mt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__text { grid-column: 1 / -1; }
  .story__img { grid-column: 1 / span 7; }
  .prog__side { grid-column: 1 / -1; position: static; }
  .prog__list { grid-column: 1 / -1; margin-top: 32px; }
  .form-sec__side, .form { grid-column: 1 / -1; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulletin__text { grid-column: 1 / span 9; }
  .legal__side { grid-column: 1 / -1; position: static; }
  .legal__body { grid-column: 1 / -1; margin-top: 36px; }
}
@media (max-width: 860px) {
  .tools__side { grid-column: 1 / -1; position: static; }
  .tools__list { grid-column: 1 / -1; }
  .tools__side .preview { display: none; }
  .tools__list .preview { grid-column: 1 / -1; display: block; margin: 0 0 22px 64px; min-height: 0; }
  .tools__list .preview__item { position: relative; inset: auto; display: none; padding: 20px; transform: none; }
  .tools__list .preview__item.is-on { display: grid; }
  .market__figure, .market__facts { grid-column: 1 / span 6; }
  .market__chart { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px) {
  :root { --top-h: 64px; }
  .logo { height: 27px; }
  .hero__scene { --rest: clamp(300px, 46svh, 420px); }
  .hero__scene::after { height: 60%; }
  .hero__lead { grid-column: 1 / -1; }
  .figures__head .h2, .figures__intro, .market__head .h2, .market__intro, .network__head .h2, .network__intro { grid-column: 1 / -1; }
  .club__grid { gap: 16px; }
  .card:nth-of-type(1), .card:nth-of-type(2) { grid-column: 1 / -1; }
  .card__img { aspect-ratio: 16 / 11; }
  .figures__stage { min-height: 0; padding-top: 52svh; }
  .figures__cards { gap: 10px; padding: 0 12px 12px; }
  .fig { min-height: 168px; padding: 16px; gap: 16px; }
  .fig dt { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.5rem); }
  .tools__list .preview { margin-left: 0; }
  .tool { grid-template-columns: 40px minmax(0, 1fr); }
  .members { padding-inline: 12px; }
  .members__grid { gap: 10px; }
  .lx--head { --fx: 16px; --fy: 30px; min-height: 480px; padding: 132px 34px 112px; }
  .lines__tag--e { left: calc(var(--fx) + 6px); }
  .lx-head__top { flex-direction: column; }
  .lx-head__aside { text-align: left; }
  .lx--free, .lx--focus, .lx--slit, .lx--beam { grid-column: 1 / -1; }
  .lx--focus, .lx--slit, .lx--beam { min-height: 440px; }
  .market__figure, .market__facts { grid-column: 1 / -1; }
  .network__grid { grid-template-columns: 1fr; }
  .qa__a p { padding-right: 0; }
  .cta { margin-inline: 12px; min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .cta > .cta__media { grid-column: 1; grid-row: 1; aspect-ratio: 1; }
  .cta > .cta__content { grid-column: 1; grid-row: 2; padding: 32px 22px 36px; }
  .footer__col { grid-column: span 6; }
  .phero__side { grid-column: 1 / -1; }
  .phero__media { aspect-ratio: 4 / 3; }
  .shead .h2, .shead__intro { grid-column: 1 / -1; }
  .mt-grid--3, .mt-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .mt, .mt-grid--4 .mt { min-height: 400px; }
  .story__img { grid-column: 1 / -1; }
  .steps__list, .dates__grid, .pcards { grid-template-columns: minmax(0, 1fr); }
  .tile-btn { min-height: 4.75rem; padding: 14px 14px 15px; font-size: 1rem; }
  .bulletin__box { min-height: 560px; --axis: 34%; }
  .bulletin__box > .mo { inset: 0 0 56% 0; }
  .bulletin__text { grid-column: 1 / -1; }
  .footer__meta a { margin: 0 14px 0 0; }
  .footer__meta { display: flex; flex-wrap: wrap; gap: 6px 0; }
  .footer__meta > :first-child { margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .preview__item, .card__img, .tool__text, .qa__a, .navbox, .navbox *, .menu * { transition: none !important; }
  .spark, .cv-ring { animation: none !important; }
}
/* ---------- the menu on short windows (eight rows): smaller links, buttons side by side, the panel scrolls if it must ---------- */
@media (max-height: 700px) {
  .menu__panel { overflow-y: auto; overscroll-behavior: contain; }
  .menu__link { font-size: min(var(--mn-link), 5.4vh); }
  .menu__items { padding-top: max(2.4rem, calc(var(--mn-gap) + 0.15em)); }
  .menu__btns { flex-direction: row; }
  .menu__btn { width: 50%; height: 3.5rem; align-items: center; }
}
@media (max-height: 600px) {
  .menu__link { font-size: min(var(--mn-link), 4.9vh); }
  .menu__items { padding-top: 2rem; }
  .menu__footer { padding-top: 12px; padding-bottom: 12px; }
  .menu__footer-left, .menu__footer-right { gap: 0.35rem; }
}
/* legal titles hold the longest German words: a size that keeps them whole, with a soft hyphen as the fallback */
.phero--legal .phero__title { grid-column: 1 / span 9; font-size: clamp(2.375rem, 1.3rem + 3.6vw, 5.25rem); }
@media (max-width: 1100px) { .phero--legal .phero__title { grid-column: 1 / -1; } }

/* ---------- page transition: a light and a dark panel wipe up over the page; the next page starts under the dark panel,
   which carries on out of the top. The arriving page is covered from its first frame by html.pt-in::after (same colour,
   same signet) until the script takes over; if the script never runs, the cover lets go after 3 s. ---------- */
:root { --pt-a: #88c1ed; --pt-b: #0a1f33; --pt-mark: #ffffff; --pt-mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 152'%3E%3Cpath fill='%23ffffff' d='M0 151.994V37.9617C0 12.6581 12.6561 0.00634766 37.9684 0.00634766H114.072V37.9617H37.9684V56.9393H85.4289V94.8947H37.9684V113.872H114.072V151.828H0V151.994Z M133.072 95.0611V38.1282C133.072 12.8246 145.728 0.172852 171.04 0.172852H247.144V38.1282H171.04V57.1058H247.144V114.039C247.144 139.342 234.487 151.994 209.175 151.994H133.072V114.039H209.175V95.0611H133.072Z'/%3E%3C/svg%3E"); }
:root[data-esk-theme="dark"] { --pt-a: #4686b7; --pt-b: #0b1a29; --pt-mark: #88c1ed; --pt-mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 152'%3E%3Cpath fill='%2388c1ed' d='M0 151.994V37.9617C0 12.6581 12.6561 0.00634766 37.9684 0.00634766H114.072V37.9617H37.9684V56.9393H85.4289V94.8947H37.9684V113.872H114.072V151.828H0V151.994Z M133.072 95.0611V38.1282C133.072 12.8246 145.728 0.172852 171.04 0.172852H247.144V38.1282H171.04V57.1058H247.144V114.039C247.144 139.342 234.487 151.994 209.175 151.994H133.072V114.039H209.175V95.0611H133.072Z'/%3E%3C/svg%3E"); }
.pt { position: fixed; inset: 0; z-index: 2000; overflow: hidden; pointer-events: none; visibility: hidden; }
.pt__panel { position: absolute; inset: 0; transform: translate3d(0, 100%, 0); will-change: transform; }
.pt__panel--a { background: var(--pt-a); }
.pt__panel--b { display: grid; place-items: center; background: var(--pt-b); }
.pt__signet { width: calc(var(--pt-size) * 1.632); height: var(--pt-size); fill: var(--pt-mark); }
:root { --pt-size: clamp(44px, 4vw, 60px); }
html.pt-in::after { content: ""; position: fixed; inset: 0; z-index: 2001; background: var(--pt-mark-img) 50% 50% / calc(var(--pt-size) * 1.632) var(--pt-size) no-repeat, var(--pt-b); animation: pt-free 0s 3s forwards; }
@keyframes pt-free { to { visibility: hidden; } }

/* ==========================================================================================
   Elektro Schattenkirchner: neue Bauteile im Batumi-System
   ========================================================================================== */
/* ---------- grosse Ziffern in Geist wie bei Batumi (leicht, eng gesetzt) ---------- */
.board__count strong { font-weight: 300; letter-spacing: -0.045em; }
.quick__n { font-weight: 300; }

/* ---------- Filme: Hero und Flug ueber den Hof ---------- */
.figures__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.figures__stage .glass { --g-bg: rgb(255 255 255 / 0.10); --g-line: rgb(255 255 255 / 0.28); --g-ink: #ffffff; --g-hover: rgb(255 255 255 / 0.2); }
.figures__pause { position: absolute; z-index: 3; top: clamp(16px, 2vw, 28px); right: var(--margin); }
.film__pause .icon--play { display: none; }
.film__pause[aria-pressed="true"] .icon--play { display: block; }
.film__pause[aria-pressed="true"] .icon--pause { display: none; }
.hero__coord { white-space: nowrap; }

/* ---------- Leistungen: die Vorschau zeigt das Foto aus der Arbeit ---------- */
.preview { aspect-ratio: 5 / 4; min-height: 0; }
.preview__item { padding: 0; margin: 0; place-items: stretch; }
.preview__img { position: absolute; inset: 0; transform: scale(1.05); transition: transform 1.2s var(--ease); }
.preview__item.is-on .preview__img { transform: none; }
.preview__cap { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 12px; border-radius: 6px; background: rgb(6 14 22 / 0.58); color: #ffffff; font-size: var(--fs-small); line-height: 1.3; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* ---------- Ablauf: im Kopf der Lichtkacheln fliesst Strom ueber Leiterbahnen ---------- */
.strom { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx .arrow-link { margin-top: 4px; }
.lx--free .lx__signet { width: 72px; }

/* ---------- Ihr Projekt: zehn Leitungsschutzschalter auf einer Hutschiene ---------- */
.board__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.board__head .label { grid-column: 1 / -1; }
.board__head .h2 { grid-column: 1 / span 6; }
.board__intro { grid-column: 8 / span 4; color: var(--ink-2); }
.board__box { margin-top: clamp(32px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); background: var(--lx-market); display: grid; gap: clamp(28px, 3vw, 44px); }
.board__box fieldset, .quick__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.board__kind { display: flex; flex-wrap: wrap; gap: 8px; }
.board__kind label { position: relative; display: inline-flex; }
.board__kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.board__kind span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius); font-size: var(--fs-small); color: var(--lx-ink-2); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--lx-line); transition: background-color 0.2s ease, color 0.2s ease; }
.board__kind input:checked + span { background: #ffffff; color: #05080c; box-shadow: none; }
.board__kind input:focus-visible + span { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .board__kind label:hover input:not(:checked) + span { background: rgb(255 255 255 / 0.12); color: #ffffff; } }
.board__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: stretch; }
.board__rail { grid-column: 1 / span 7; }
.board__legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-size: var(--fs-small); color: var(--lx-ink-2); }
.rail { clear: both; position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 22px 12px 16px; border-radius: var(--radius); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--lx-line); }
.rail::before { content: ""; position: absolute; left: 8px; right: 8px; top: calc(22px + 62px); height: 14px; border-radius: 2px; background: rgb(255 255 255 / 0.14); }
.mcb { position: relative; display: grid; justify-items: center; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mcb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.mcb__body { --mcb: linear-gradient(180deg, #ffffff, #e9eff5); position: relative; display: grid; justify-items: center; align-content: start; gap: 9px; width: 100%; max-width: 54px; height: 148px; padding-top: 12px; border-radius: 6px; background: var(--mcb); transition: transform 0.25s var(--ease); }
.mcb__led { width: 8px; height: 8px; border-radius: 50%; background: #c3ccd5; transition: background-color 0.2s ease, box-shadow 0.3s ease; }
.mcb__slot { position: relative; width: 20px; height: 62px; border-radius: 4px; background: #1d2a36; overflow: hidden; }
.mcb__lever { position: absolute; left: 2px; right: 2px; top: 2px; height: 28px; border-radius: 3px; background: linear-gradient(180deg, #f4f7fa, #c9d3dc); transform: translateY(30px); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease; }
.mcb__mark { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; line-height: 1; color: #5b6b7a; }
.mcb__name { font-size: 12.5px; line-height: 1.25; text-align: center; color: var(--lx-ink-2); overflow-wrap: anywhere; transition: color 0.2s ease; }
.mcb input:checked + .mcb__body .mcb__lever { transform: none; background: linear-gradient(180deg, #ffffff, #dfe8f0); }
.mcb input:checked + .mcb__body .mcb__led { background: #4fd17f; box-shadow: 0 0 0 3px rgb(79 209 127 / 0.25), 0 0 10px 2px rgb(79 209 127 / 0.65); }
.mcb input:checked ~ .mcb__name { color: var(--lx-ink); font-weight: 500; }
.mcb input:focus-visible + .mcb__body { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mcb:hover .mcb__body { transform: translateY(-3px); } }
:root[data-esk-theme="dark"] .mcb__body { --mcb: linear-gradient(180deg, #1b2834, #131d27); }
:root[data-esk-theme="dark"] .mcb__mark { color: #8fa3b6; }
:root[data-esk-theme="dark"] .mcb__led { background: #33424f; }
.board__sum { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.board__count { display: flex; align-items: baseline; gap: 14px; font-size: var(--fs-small); color: var(--lx-ink-2); }
.board__count strong { font-size: var(--fs-number); line-height: 1; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.board__list { display: grid; gap: 10px; width: 100%; }
.board__list li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--lx-line); font-size: var(--fs-small); color: var(--lx-ink-2); }
.board__list li strong { font-size: 1rem; font-weight: 500; color: var(--lx-ink); }
.board__empty { font-size: var(--fs-small); color: var(--lx-ink-2); max-width: 34ch; }
.board__alarm { width: 100%; padding: 12px 14px; border-radius: var(--radius); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px var(--lx-line); font-size: var(--fs-small); color: var(--lx-ink); }
.board__alarm a { color: var(--lx-ink); font-weight: 500; }
.board__send { margin-top: auto; }

/* ---------- kleine Kacheln mit Text (Sprungmarken, Gewerke) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius); background: var(--tb-bg); color: var(--tb-ink); font-size: var(--fs-small); text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; }
.chip--small { min-height: 32px; padding: 0 12px; font-size: var(--fs-label); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--tb-hover); color: var(--tb-hover-ink); } }

/* ---------- Haken-Listen ---------- */
.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; }
.checks__i { width: 16px; height: 16px; margin-top: 0.28em; color: var(--accent-ink); }
.lists2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gutter); }
.lists2__head { margin-bottom: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }

/* ---------- Leistungen: Index und die Gewerke als Zeilen mit Foto ---------- */
.sindex__text { max-width: 26em; }
.sindex .chips { margin-top: clamp(28px, 3vw, 44px); max-width: 980px; }
.srows { display: grid; gap: clamp(64px, 8vw, 128px); }
.srow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: center; }
.srow__img { grid-column: 1 / span 6; aspect-ratio: 5 / 4; border-radius: var(--radius); }
.srow__text { grid-column: 8 / span 5; display: grid; gap: 20px; justify-items: start; }
.srow--flip .srow__img { grid-column: 7 / span 6; grid-row: 1; }
.srow--flip .srow__text { grid-column: 1 / span 5; grid-row: 1; }
.srow__title, .proj__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.srow__lead { color: var(--ink-2); max-width: 50ch; }

/* ---------- Ablauf: vier Schritte, dann jede Phase mit Foto ---------- */
.steps__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps__list .arrow-link { margin-top: 4px; }
.phase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.phase__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--top-h) + 32px); }
.phase__img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.phase__text { grid-column: 7 / span 6; display: grid; gap: 20px; }
.phase--flip .phase__media { grid-column: 8 / span 5; grid-row: 1; }
.phase--flip .phase__text { grid-column: 1 / span 6; grid-row: 1; }
.phase__lead { color: var(--ink-2); max-width: 60ch; }
.phase .lists2 { margin-top: 8px; }
.service__box { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--gutter); min-height: clamp(440px, 58svh, 620px); padding: clamp(28px, 4vw, 56px); background: var(--lx-free); }
.service__box > .mo { inset: 0; }
.service__box .lx__signet { position: absolute; top: clamp(28px, 4vw, 56px); left: clamp(28px, 4vw, 56px); width: 80px; }
.service__text { grid-column: 1 / span 7; display: grid; gap: 16px; justify-items: start; }
.service__title { font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -0.035em; }
.service__text > p:not(.lx__num) { color: var(--lx-ink-2); max-width: 46ch; }
.service .text-link { color: var(--lx-ink); }

/* ---------- Projekte: Foto gross, Text daneben, zweites Foto darunter ---------- */
.projs { display: grid; gap: clamp(72px, 9vw, 144px); }
.proj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.proj[hidden] { display: none; }
.proj__img { grid-column: 1 / span 7; grid-row: 1 / span 2; aspect-ratio: 3 / 2; border-radius: var(--radius); }
.proj__text { grid-column: 9 / span 4; grid-row: 1; display: grid; gap: 20px; align-content: start; justify-items: start; }
.proj__img2 { grid-column: 9 / span 3; grid-row: 2; aspect-ratio: 4 / 5; border-radius: var(--radius); }
.proj--flip .proj__img { grid-column: 6 / span 7; }
.proj--flip .proj__text { grid-column: 1 / span 4; }
.proj--flip .proj__img2 { grid-column: 2 / span 3; }
.proj__pair h3 { margin-bottom: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.proj__pair p { max-width: 44ch; }

/* ---------- Unternehmen: Geschaeftsfuehrung, Standort, Bilderreihe ---------- */
.leaders__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) var(--gutter); }
.leader { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto; gap: 20px var(--gutter); margin: 0; }
.leader__img { grid-row: 1 / span 2; aspect-ratio: 4 / 5; border-radius: var(--radius); background-position: 50% 20%; }
.leader__quote { align-self: end; margin: 0; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.35; letter-spacing: -0.012em; }
.leader__who { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.leader__who strong { font-size: 1rem; font-weight: 500; color: var(--ink); }
.standort .story__text { grid-column: 1 / span 6; }
.standort .story__img { grid-column: 8 / span 5; aspect-ratio: 4 / 3; }
.addr-block { font-style: normal; line-height: 1.6; }
.addr-block strong { font-weight: 500; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(40px, 5vw, 72px); }
.gallery__img { aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* ---------- Leiterbahn-Motiv: drei parallele Bahnen mit 45-Grad-Knicken und Loetaugen, Strom laeuft hindurch ---------- */
.mo--trace .mo-route { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; overflow: visible; }
.mo--trace .tr { fill: none; stroke: var(--lx-line); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mo--trace .tr-hot { fill: none; stroke: var(--lx-spark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 91; stroke-dashoffset: 9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--lx-spark-glow)); opacity: 0; }
.mo--trace .tr-pad { fill: none; stroke: var(--lx-ink-2); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
@keyframes current { from { stroke-dashoffset: 9; } to { stroke-dashoffset: -91; } }
@keyframes pad-hit { 0%, 78%, 100% { fill: transparent; } 86% { fill: var(--lx-spark); } }
@media (prefers-reduced-motion: no-preference) {
  .motion .mo--trace .mo-route { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s var(--ease-io) 0.2s; }
  .motion .mo--trace.is-in .mo-route { clip-path: inset(0 0 0 0); }
  .motion .mo--trace.is-in .tr-hot { opacity: 1; animation: current 2.6s cubic-bezier(0.45, 0, 0.55, 1) 1.6s infinite; }
  .motion .mo--trace.is-in .tr-hot--1 { animation-delay: 2s; }
  .motion .mo--trace.is-in .tr-hot--2 { animation-delay: 2.4s; }
  .motion .mo--trace.is-in .tr-pad { animation: pad-hit 2.6s linear 1.6s infinite; }
}

/* ---------- Karriere: Team, Stellen, Schnellbewerbung ---------- */
.team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px; align-items: end; }
.team__text { grid-column: 1 / span 5; display: grid; gap: 20px; }
.team__note { color: var(--ink-2); max-width: 46ch; }
.team__list { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-bottom: 28px; }
.team__img { aspect-ratio: 3 / 4; border-radius: var(--radius); background-position: 50% 30%; }
.team__p:nth-child(even) { transform: translateY(28px); }
.jobs__list { border-bottom: 1px solid var(--line); }
.job button { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center; }
.job__title { grid-column: 1; }
.job__meta { grid-column: 1; grid-row: 2; font-size: var(--fs-small); letter-spacing: 0; color: var(--ink-2); }
.job .qa__icon { grid-column: 2; grid-row: 1 / span 2; }
.job .qa__a p { padding: 0; }
.job__body { display: grid; gap: 26px; justify-items: start; padding: 0 0 34px; }
.job__lead { color: var(--ink-2); max-width: 62ch; }
.job__apply .icon--down { transform: rotate(90deg); }
.jobs__init { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 28px; padding: 20px 22px; border-radius: var(--radius); background: var(--tb-bg); }
.jobs__init strong { font-weight: 500; }

.quick { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: start; }
.quick__side { grid-column: 1 / span 5; display: grid; gap: 20px; position: sticky; top: calc(var(--top-h) + 32px); }
.quick__intro { color: var(--ink-2); max-width: 42ch; }
.person { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; padding: 14px; border-radius: var(--radius); background: var(--tb-bg); }
.person__img { aspect-ratio: 1; border-radius: 6px; background-position: 50% 22%; }
.person__role { font-size: var(--fs-label); color: var(--ink-2); }
.person__name { font-weight: 500; }
.person__text .text-link { margin-right: 12px; font-size: var(--fs-small); }
.quick__form { grid-column: 7 / span 6; display: grid; gap: 22px; align-content: start; min-height: clamp(540px, 66svh, 680px); padding: clamp(22px, 3vw, 40px); background: var(--lx-market); }
.quick__top { display: grid; gap: 12px; }
.quick__step { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: var(--lx-ink-2); }
.quick__bar { height: 2px; border-radius: 1px; background: var(--lx-line); overflow: hidden; }
.quick__bar i { display: block; height: 100%; width: calc(var(--p, 0.1667) * 100%); background: #ffffff; transition: width 0.5s var(--ease); }
.quick__q { display: grid; gap: 18px; }
.quick__legend { float: left; width: 100%; display: flex; gap: 14px; align-items: baseline; padding: 0; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; }
.quick__n { font-size: 1.3em; color: var(--lx-ink-2); }
.quick__opts { display: grid; gap: 8px; }
.opt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 8px 14px 8px 10px; border-radius: var(--radius); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--lx-line); color: var(--lx-ink); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__key { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--lx-line); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--lx-ink-2); }
.opt:has(input:checked) { background: #ffffff; color: #05080c; box-shadow: none; }
.opt:has(input:checked) .opt__key { background: #05080c; color: #ffffff; box-shadow: none; }
.opt:has(input:focus-visible) { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opt:hover:not(:has(input:checked)) { background: rgb(255 255 255 / 0.13); } }
.quick__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qf { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--lx-ink-2); }
.qf input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--lx-line); background: rgb(255 255 255 / 0.08); color: var(--lx-ink); font: inherit; font-size: 1rem; }
.qf input:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-small); color: var(--lx-ink-2); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #ffffff; }
.quick .consent .text-link { color: var(--lx-ink); }
.quick__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.quick__hint { font-size: var(--fs-label); color: var(--lx-ink-3); }
.quick__done, .form__done { padding: 14px 16px; border-radius: var(--radius); background: rgb(255 255 255 / 0.12); font-size: var(--fs-small); }
.form__done { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
/* mit Skript: eine Frage nach der anderen */
.quick__form:not([data-ready]) .quick__top, .quick__form:not([data-ready]) [data-quick-next], .quick__form:not([data-ready]) [data-quick-back], .quick__form:not([data-ready]) .quick__hint { display: none; }
.quick__form[data-ready] .quick__q:not(.is-on) { display: none; }
.quick__form[data-ready] [data-quick-send] { display: none; }
.quick__form[data-ready].is-last [data-quick-send] { display: inline-flex; }
.quick__form[data-ready].is-last [data-quick-next], .quick__form[data-ready].is-last .quick__hint { display: none; }
.quick__form[data-ready].is-first [data-quick-back] { display: none; }
.quick__form[data-ready] .quick__q.is-on { animation: q-in 0.5s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Kontakt: direkte Wege und das Formular ---------- */
.direct { display: grid; gap: 0; margin-top: 8px; border-bottom: 1px solid var(--line); }
.direct div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.direct dt { font-size: var(--fs-small); color: var(--ink-2); }
.direct a:not(.text-link) { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .direct a:not(.text-link):hover { text-decoration: underline; text-underline-offset: 0.22em; } }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__field input[type="email"], .form__field input[type="tel"], .form__field textarea { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.form__field textarea { min-height: 132px; padding: 12px 14px; resize: vertical; }
.form__choice--gewerk label { min-height: 40px; font-size: var(--fs-small); }
.consent--form { color: var(--ink-2); }
.consent--form input { accent-color: var(--accent); }

/* ---------- schmalere Fenster ---------- */
@media (max-width: 1100px) {
  .board__head .h2 { grid-column: 1 / span 7; }
  .board__intro { grid-column: 8 / span 5; }
  .board__rail { grid-column: 1 / -1; }
  .board__sum { grid-column: 1 / -1; }
  .board__send { margin-top: 8px; }
  .srow__img, .srow--flip .srow__img { grid-column: 1 / span 6; grid-row: 1; }
  .srow__text, .srow--flip .srow__text { grid-column: 7 / span 6; grid-row: 1; }
  .steps__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase__media, .phase--flip .phase__media { grid-column: 1 / span 5; grid-row: 1; }
  .phase__text, .phase--flip .phase__text { grid-column: 6 / span 7; grid-row: 1; }
  .proj__img, .proj--flip .proj__img { grid-column: 1 / span 7; }
  .proj__text, .proj--flip .proj__text { grid-column: 8 / span 5; }
  .proj__img2, .proj--flip .proj__img2 { grid-column: 8 / span 4; }
  .leaders__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .team__text, .team__list { grid-column: 1 / -1; }
  .quick__side { grid-column: 1 / -1; position: static; }
  .quick__form { grid-column: 1 / -1; }
  .standort .story__text { grid-column: 1 / -1; }
  .standort .story__img { grid-column: 1 / span 8; }
  .service__text { grid-column: 1 / span 10; }
}
@media (max-width: 860px) {
  .tools__list .preview { aspect-ratio: 16 / 10; }
  .tools__list .preview__item { position: absolute; inset: 0; display: grid; }
  .srow__img, .srow--flip .srow__img, .srow__text, .srow--flip .srow__text { grid-column: 1 / -1; grid-row: auto; }
  .srow__img { aspect-ratio: 16 / 11; }
  .phase__media, .phase--flip .phase__media, .phase__text, .phase--flip .phase__text { grid-column: 1 / -1; grid-row: auto; position: static; }
  .proj__img, .proj--flip .proj__img, .proj__text, .proj--flip .proj__text { grid-column: 1 / -1; grid-row: auto; }
  .proj__img2, .proj--flip .proj__img2 { display: none; }
}
@media (max-width: 700px) {
  .hero__coord { font-size: 11px; }
  .board__head .h2, .board__intro { grid-column: 1 / -1; }
  .board__box { padding: 20px 14px; }
  .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; padding: 18px 10px 14px; }
  .rail::before { display: none; }
  .mcb__body { height: 128px; max-width: 50px; }
  .lists2, .form__row, .quick__fields { grid-template-columns: minmax(0, 1fr); }
  .steps__list--4 { grid-template-columns: minmax(0, 1fr); }
  .leader { grid-template-columns: minmax(0, 1fr); }
  .leader__img { grid-row: auto; max-width: 320px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__img:nth-child(n + 3) { display: none; }
  .team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__p:nth-child(even) { transform: none; }
  .team__p:nth-child(n + 4) { display: none; }
  .standort .story__img { grid-column: 1 / -1; }
  .service__box { min-height: 480px; }
  .service__text { grid-column: 1 / -1; }
  .direct div { grid-template-columns: 80px minmax(0, 1fr); }
  .quick__form { min-height: 0; padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview__img, .mcb__lever, .mcb__body, .quick__bar i { transition: none !important; }
  .quick__form[data-ready] .quick__q.is-on { animation: none; }
}

/* Farbe der Leiterbahnen im WebGL-Strom: r g b / Grundhelligkeit */
:root { --strom: 255 255 255 / 0.3; }
:root[data-esk-theme="dark"] { --strom: 136 193 237 / 0.26; }

/* ---------- Pruefrunde 1 ---------- */
/* der Satz unter "Unternehmen" ist ein Absatz in Satzgroesse; unbeleuchtete Woerter halten 3 : 1 (grosse Schrift) */
:root { --fs-statement: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); --ink-words: #8492a0; }
:root[data-esk-theme="dark"] { --ink-words: #627487; }
.js.motion [data-words] .w { color: var(--ink-words); }
.js.motion [data-words] .w.is-lit { color: var(--ink); }
h2.label { font-weight: 500; }
/* nichts zum Lesen unter 13 px */
.tag, .lines__tag, .mcb__name, .opt__key, .mcb__mark { font-size: 13px; }
.mcb__name { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; min-height: 2.5em; }
.mcb__mark { font-size: 11px; }
/* das geschlossene Menue nimmt keinen Platz und ist fuer niemanden da */
.menu { display: none; }
.menu-open .menu { display: block; }
/* der Verteiler bekommt mehr Schiene */
.board__rail { grid-column: 1 / span 8; }
.board__sum { grid-column: 9 / span 4; padding-left: clamp(0px, 1.5vw, 24px); }
@media (max-width: 1100px) { .board__rail, .board__sum { grid-column: 1 / -1; padding-left: 0; } }
@media (max-width: 700px) { .hide-s { display: none; } .hero__coord { font-size: 13px; } }
/* der Firmenfilm hat helle Bueroszenen: kraeftigerer Schleier unter Titel, Satz und Buttons */
.hero__scene::after { height: 80%; background: linear-gradient(to top, rgb(3 7 12 / 0.84), rgb(3 7 12 / 0.56) 42%, rgb(3 7 12 / 0.16) 78%, rgb(3 7 12 / 0)); }
.hero__scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(3 7 12 / 0.14); }
@media (max-width: 700px) { .hero__scene::after { height: 74%; } }
/* Projekte am Tablet: die Liste zweispaltig, damit die rechte Haelfte nicht leer bleibt */
@media (min-width: 701px) and (max-width: 1100px) { .posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
/* ab vier eingelegten Gewerken nur noch die Namen, zweispaltig */
.board__list.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.board__list.is-many li span { display: none; }
/* Projekte: Titel in zwei Zeilen, Text eine Spalte breiter */
.proj__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); }
@media (min-width: 1101px) {
  .proj__text { grid-column: 8 / span 5; }
  .proj--flip .proj__text { grid-column: 1 / span 5; }
  .proj__img2 { grid-column: 8 / span 3; }
  .proj--flip .proj__img2 { grid-column: 1 / span 3; }
}
/* Platzhalter in den Rechtstexten: die Toenung reicht per Kontur ueber die Buchstaben hinaus, nicht per Schatten */
.ph { box-shadow: none; outline: 3px solid color-mix(in srgb, var(--accent) 14%, transparent); outline-offset: 0; }

/* Einblendungen weit unten: sichtbar, bis sie sich dem Fenster naehern (das Skript nimmt .is-far dann weg) */
.motion [data-reveal].is-far { opacity: 1; transform: none; }

/* ==========================================================================================
   Ablauf: zwei Kacheln aus der Elektrotechnik (Runde 2, 10.11.2026)
   01 Beratung = Messung: Drehstrom L1, L2, L3 wie auf dem Oszilloskop, ein Messpunkt faehrt auf L1 mit.
   02 Planung  = Chip: dunkler Baustein mit leuchtender Oberkante vor einem Lichthof, Licht laeuft ueber die Pins,
   Impulse kommen ueber Leiterbahnen herein. Tag: blaue Flaechen mit weissem Licht. Nacht: schwarz mit blauem Licht.
   ========================================================================================== */
:root {
  --lx-wave-bg: radial-gradient(110% 62% at 50% 0%, rgb(255 255 255 / 0.34) 0%, rgb(214 236 252 / 0.16) 34%, rgb(160 205 240 / 0.04) 62%, rgb(160 205 240 / 0) 80%),
    linear-gradient(180deg, #3170a3 0%, #24598a 48%, #1b4a76 100%);
  --wave-c: #ffffff; --wave-dim: rgb(255 255 255 / 0.18);
  --lx-chip-bg: radial-gradient(46% 34% at 50% 29%, rgb(255 255 255 / 0.62) 0%, rgb(224 241 253 / 0.34) 26%, rgb(160 208 244 / 0.14) 52%, rgb(120 180 230 / 0) 82%),
    linear-gradient(175deg, #2a6292 0%, #20537f 55%, #1a4672 100%);
  --chip-body: #0a1d30; --chip-die: #10294a; --chip-rim: #ffffff; --chip-mark: rgb(255 255 255 / 0.3); --chip-notch: rgb(255 255 255 / 0.35);
  --pin: rgb(255 255 255 / 0.42); --pin-hot: #ffffff; --chip-line: rgb(255 255 255 / 0.3);
}
:root[data-esk-theme="dark"] {
  --lx-wave-bg: radial-gradient(110% 62% at 50% 0%, rgb(136 193 237 / 0.3) 0%, rgb(70 134 183 / 0.13) 36%, rgb(30 70 110 / 0.04) 64%, rgb(30 70 110 / 0) 82%),
    linear-gradient(180deg, #050d16 0%, #02060b 60%, #010307 100%);
  --wave-c: #88c1ed; --wave-dim: rgb(136 193 237 / 0.16);
  --lx-chip-bg: radial-gradient(46% 34% at 50% 29%, rgb(136 193 237 / 0.5) 0%, rgb(90 155 205 / 0.24) 28%, rgb(40 90 140 / 0.08) 56%, rgb(20 50 85 / 0) 84%),
    linear-gradient(175deg, #03080e 0%, #02060b 60%, #010307 100%);
  --chip-body: #040a12; --chip-die: #0a1a2b; --chip-rim: #88c1ed; --chip-mark: rgb(136 193 237 / 0.38); --chip-notch: rgb(136 193 237 / 0.4);
  --pin: rgb(136 193 237 / 0.38); --pin-hot: #d6ebfb; --chip-line: rgb(136 193 237 / 0.28);
}
.lx--wave, .lx--chip { --pad: clamp(22px, 2.4vw, 36px); grid-column: span 4; min-height: clamp(440px, 58svh, 600px); padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.lx--wave { background: var(--lx-wave-bg); }
.lx--chip { background: var(--lx-chip-bg); }
.lx > .lx__legend { position: absolute; top: var(--pad); right: var(--pad); display: flex; gap: 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; line-height: 1; color: var(--lx-ink); }
.lx__legend b { font-weight: 400; }
.lx__legend b:nth-child(2) { opacity: 0.66; }
.lx__legend b:nth-child(3) { opacity: 0.44; }

/* 01: die drei Phasen */
.lx > .mo--wave { inset: 13% 0 46% 0; }
.wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wave__axis { stroke: var(--wave-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wave__l { fill: none; stroke: var(--wave-c); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wave__l1 { stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--lx-spark-glow)); }
.wave__l2 { opacity: 0.6; }
.wave__l3 { opacity: 0.34; }
.wave__cursor { position: absolute; left: 80%; top: -6%; bottom: -6%; width: 1px; background: linear-gradient(180deg, transparent, var(--wave-dim) 18%, var(--wave-dim) 82%, transparent); }
@property --ph { syntax: '<angle>'; inherits: false; initial-value: 216deg; }
.wave__rider { position: absolute; inset: 0; pointer-events: none; transform: translateY(calc(sin(var(--ph)) * -26%)); }
.wave__dot { position: absolute; left: 80%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 7px rgb(255 255 255 / 0.14), 0 0 18px 5px var(--lx-spark-glow); }
@keyframes wave-flow { from { transform: translateX(0); } to { transform: translateX(-200px); } }
@keyframes wave-ride { from { --ph: 216deg; } to { --ph: 576deg; } }

/* 02: der Chip */
.lx > .mo--chip { inset: 2% 0 42% 0; }
.ic { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }   /* nicht .chip: das sind die kleinen Kacheln */
.chip__tr { fill: none; stroke: var(--chip-line); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chip__hot { fill: none; stroke: var(--pin-hot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 88; stroke-dashoffset: -88; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--lx-spark-glow)); opacity: 0; }
.chip__pad { fill: transparent; stroke: var(--chip-line); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chip__pins rect { fill: var(--pin); }
.chip__body { fill: var(--chip-body); }
.chip__rim { fill: none; stroke-width: 1.5; }
.chip-rim0 { stop-color: var(--chip-rim); stop-opacity: 0.95; }
.chip-rim1 { stop-color: var(--chip-rim); stop-opacity: 0; }
.chip__die { fill: var(--chip-die); }
.chip__notch { fill: var(--chip-notch); }
.chip__mark { fill: var(--chip-mark); }
@keyframes pin-run { 0%, 14%, 100% { fill: var(--pin); } 4% { fill: var(--pin-hot); } }
@keyframes chip-in { from { stroke-dashoffset: -88; } to { stroke-dashoffset: 12; } }
@keyframes pad-glow { 0%, 100% { fill: transparent; } 50% { fill: var(--chip-line); } }
@keyframes halo-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .motion .mo--wave .wave { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-io) 0.15s; }
  .motion .mo--wave.is-in .wave { clip-path: inset(0 0 0 0); }
  .motion .mo--wave .wave__dot, .motion .mo--wave .wave__cursor { opacity: 0; transition: opacity 0.6s ease 1.5s; }
  .motion .mo--wave.is-in .wave__dot, .motion .mo--wave.is-in .wave__cursor { opacity: 1; }
  .motion .mo--wave.is-in .wave__flow { animation: wave-flow 7s linear infinite; }
  .motion .mo--wave.is-in .wave__rider { animation: wave-ride 7s linear infinite; }
  .motion .mo--chip .chip__pkg { opacity: 0; transform: scale(0.92); transform-origin: 200px 150px; transition: opacity 1s ease, transform 1.4s var(--ease); }
  .motion .mo--chip.is-in .chip__pkg { opacity: 1; transform: none; }
  .motion .mo--chip .chip__lines { clip-path: circle(0% at 50% 50%); transition: clip-path 1.8s var(--ease-io) 0.3s; }
  .motion .mo--chip.is-in .chip__lines { clip-path: circle(75% at 50% 50%); }
  .motion .mo--chip.is-in .chip__pins rect { animation: pin-run 2.4s linear calc(1.2s + var(--i) * 0.1s) infinite; }
  .motion .mo--chip.is-in .chip__hot { opacity: 1; animation: chip-in 2.8s cubic-bezier(0.45, 0, 0.55, 1) calc(1.6s + var(--d)) infinite; }
  .motion .mo--chip.is-in .chip__pad { animation: pad-glow 4.8s ease-in-out calc(1.4s + var(--i) * 0.3s) infinite; }
  .motion .lx--chip::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(30% 22% at 50% 29%, rgb(255 255 255 / 0.22), transparent 70%); animation: halo-breathe 5s ease-in-out infinite; }
}
@media (max-width: 1100px) { .lx--wave, .lx--chip { grid-column: span 6; } }
@media (max-width: 700px) { .lx--wave, .lx--chip { grid-column: 1 / -1; min-height: 440px; } }

/* ---------- Menue: das Panel waechst aus der Glasbox, „Schließen“ steht genau dort, wo „Menü öffnen“ stand (Runde 4) ----------
   --mn-top ist der Abstand der Glasbox vom oberen Fensterrand (Kopfzeile mittig). Das Panel schliesst oben und rechts
   mit der Glasbox ab (oben --mn-top, rechts und links --margin wie die Seite, unten wie oben). Der Button liegt
   ausserhalb des Panels, fest zum Fenster, mit derselben Box wie .navbox__top (1 px Rahmen der Glasbox): Symbol links,
   Text rechts, gleiche Groessen. build/menuknopf.mjs misst Ecke, Symbol und Text. */
:root { --mn-top: calc(env(safe-area-inset-top, 0px) + (var(--top-h) - var(--nb-h)) / 2); }
.menu__layout { padding: var(--mn-top) var(--margin) calc(var(--mn-top) - env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); }
.menu__close { position: fixed; z-index: 2; top: calc(var(--mn-top) + 1px); right: calc(var(--margin) + 1px); width: calc(var(--nb-w) - 2px); height: calc(var(--nb-h) - 2px); gap: 1.5rem; padding: 0 var(--nb-px); border-radius: calc(var(--radius) - 1px); }
.menu__close-text { letter-spacing: -0.005em; }
/* Batumi drehte das Kreuz beim Ueberfahren um 180 Grad, das ergab wieder ein Plus; der Zeiger steht nach dem Oeffnen genau hier */
@media (hover: hover) and (pointer: fine) { .menu__close:hover .menu__close-icon { transform: rotate(225deg); } }
@media (max-width: 991px), (max-width: 1024px) and (pointer: coarse) { .menu__close-icon { width: 0.625rem; height: 0.625rem; } }
@media (max-width: 479px) { .menu__close { top: calc(var(--mn-top) + 1px); width: calc(8rem - 2px); padding: 0 1rem; font-size: 0.8125rem; } }

/* ==========================================================================================
   Fuss: Platine (Runde 3, gewaehlt aus drei Varianten; Schaltplan und Typenschild stehen in Version 4 des Artefakts).
   Leiterplatte als Strichzeichnung nach dem Fuss von etched.com (footer.design), gezeichnet von build/platine.py.
   Jede Zeile darunter hat ihre Leiterbahn; Maus oder Fokus laesst sie leuchten, Stromimpulse laufen auf .fa__live.
   ========================================================================================== */
:root {
  --pl-line: rgb(74 88 102 / 0.5); --pl-fine: rgb(74 88 102 / 0.3); --pl-trace: rgb(74 88 102 / 0.44);
  --pl-power: rgb(74 88 102 / 0.36); --pl-pad: rgb(74 88 102 / 0.24); --pl-silk: rgb(52 66 80 / 0.78);
  --pl-mark: #0085cf; --pl-hot: #1f6fae; --pl-halo-c: rgb(70 134 183 / 0.22); --pl-halo: rgb(136 193 237 / 0);
}
:root[data-esk-theme="dark"] {
  --pl-line: rgb(136 193 237 / 0.34); --pl-fine: rgb(136 193 237 / 0.19); --pl-trace: rgb(136 193 237 / 0.3);
  --pl-power: rgb(136 193 237 / 0.26); --pl-pad: rgb(136 193 237 / 0.17); --pl-silk: rgb(154 173 191 / 0.66);
  --pl-mark: #88c1ed; --pl-hot: #b9defa; --pl-halo-c: rgb(136 193 237 / 0.5); --pl-halo: rgb(70 134 183 / 0.16);
}
.fa { container-type: inline-size; margin-top: clamp(72px, 9vw, 144px); padding-top: clamp(36px, 4.4vw, 64px); background: var(--bg-2); }
.fa__board { position: relative; height: max(230px, 25.76cqw); border-bottom: 1px solid var(--line-strong); }  /* 340 / 1320 der Inhaltsbreite */
.fa__board::before { content: ""; position: absolute; left: 50.76%; top: 57.6%; width: 46%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--pl-halo), transparent); pointer-events: none; }
.fa__board > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.fa__art path, .fa__art .pl-t path { vector-effect: non-scaling-stroke; }
.pl-part { fill: none; stroke: var(--pl-line); stroke-width: 1; }
.pl-fine, .pl-ball { fill: none; stroke: var(--pl-fine); stroke-width: 1; }
.pl-pad { fill: var(--pl-pad); }
.pl-mark { fill: none; stroke: var(--pl-mark); stroke-width: 1.3; }
.pl-t path { fill: none; stroke: var(--pl-trace); stroke-width: 1; stroke-linejoin: round; }
.pl-t path.p { stroke: var(--pl-power); stroke-width: 2.4; }
.pl-silk { font-family: "Geist Mono", ui-monospace, monospace; fill: var(--pl-silk); }
.fa__live { pointer-events: none; will-change: transform; }
.pl-hi { fill: none; stroke: var(--pl-hot); stroke-width: 1.6; stroke-linejoin: round; stroke-opacity: 0; vector-effect: non-scaling-stroke; transition: stroke-opacity 0.25s ease; }
.pl-hi.is-on { stroke-opacity: 1; }
.pl-pulse, .pl-pulse-h { fill: none; stroke: var(--pl-hot); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 3; stroke-dashoffset: -1; }
.pl-pulse { stroke-width: 2.2; }
.pl-pulse-h { stroke: var(--pl-halo-c); stroke-width: 9; }
.pl-led { fill: var(--pl-hot); fill-opacity: 0.12; }
.motion .pl-led { animation: pl-led 2.6s steps(1, end) infinite; }
@keyframes pl-led { 0%, 70% { fill-opacity: 0.12; } 71%, 100% { fill-opacity: 1; } }
.fa__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px; padding-top: 30px; }
.fa__col { grid-column: span 3; display: grid; gap: 8px; align-content: start; min-width: 0; font-size: var(--fs-small); font-style: normal; }
.fa__col > a, .fa__col > span { width: fit-content; text-decoration: none; transition: color 0.2s ease; }
.fa__head { margin-bottom: 6px; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); color: var(--ink-2); transition: color 0.2s ease; }
.fa__col.is-hot .fa__head, .fa__col [data-t].is-hot { color: var(--pl-hot); }
@media (hover: hover) and (pointer: fine) { .fa__col a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.fa__sign { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; margin-top: clamp(56px, 6vw, 96px); }
.fa__claim { grid-column: 1 / span 8; font-size: var(--fs-h2); font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.fa__side { grid-column: 9 / span 4; display: grid; gap: 20px; justify-items: start; }
.fa__sub { max-width: 42ch; font-size: var(--fs-small); color: var(--ink-2); }
.fa .footer__base { margin-top: clamp(40px, 5vw, 72px); border-top-color: var(--line-strong); }
@media (max-width: 1100px) {
  .fa__col { grid-column: span 6; }
  .fa__claim, .fa__side { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .fa__cols { row-gap: 28px; } }

/* ---------- die Fotos (aus den Seiten erzeugt) ---------- */
[data-img="a-beratung"] { background-image: url("../img/foto/a-beratung.jpg"); }
[data-img="a-betrieb"] { background-image: url("../img/foto/a-betrieb.jpg"); }
[data-img="a-planung"] { background-image: url("../img/foto/a-planung.jpg"); }
[data-img="a-umsetzung"] { background-image: url("../img/foto/a-umsetzung.jpg"); }
[data-img="azubis"] { background-image: url("../img/foto/azubis.jpg"); }
[data-img="buero"] { background-image: url("../img/foto/buero.jpg"); }
[data-img="flotte"] { background-image: url("../img/foto/flotte.jpg"); }
[data-img="flotte-reihe"] { background-image: url("../img/foto/flotte-reihe.jpg"); }
[data-img="gebaeude-band"] { background-image: url("../img/foto/gebaeude-band.jpg"); }
[data-img="halle"] { background-image: url("../img/foto/halle.jpg"); }
[data-img="haus-front"] { background-image: url("../img/foto/haus-front.jpg"); }
[data-img="k-automaten"] { background-image: url("../img/foto/k-automaten.jpg"); }
[data-img="k-besprechung"] { background-image: url("../img/foto/k-besprechung.jpg"); }
[data-img="k-decke"] { background-image: url("../img/foto/k-decke.jpg"); }
[data-img="k-haus"] { background-image: url("../img/foto/k-haus.jpg"); }
[data-img="k-hof"] { background-image: url("../img/foto/k-hof.jpg"); }
[data-img="k-luft"] { background-image: url("../img/foto/k-luft.jpg"); }
[data-img="k-praesentation"] { background-image: url("../img/foto/k-praesentation.jpg"); }
[data-img="l-elektrotechnik"] { background-image: url("../img/foto/l-elektrotechnik.jpg"); }
[data-img="l-energie"] { background-image: url("../img/foto/l-energie.jpg"); }
[data-img="l-engineering"] { background-image: url("../img/foto/l-engineering.jpg"); }
[data-img="l-gebaeude"] { background-image: url("../img/foto/l-gebaeude.jpg"); }
[data-img="l-industrie"] { background-image: url("../img/foto/l-industrie.jpg"); }
[data-img="l-it"] { background-image: url("../img/foto/l-it.jpg"); }
[data-img="l-kommunikation"] { background-image: url("../img/foto/l-kommunikation.jpg"); }
[data-img="l-schaltanlagen"] { background-image: url("../img/foto/l-schaltanlagen.jpg"); }
[data-img="l-sicherheit"] { background-image: url("../img/foto/l-sicherheit.jpg"); }
[data-img="l-software"] { background-image: url("../img/foto/l-software.jpg"); }
[data-img="markus"] { background-image: url("../img/foto/markus.jpg"); }
[data-img="p-netz"] { background-image: url("../img/foto/p-netz.jpg"); }
[data-img="p-netz-2"] { background-image: url("../img/foto/p-netz-2.jpg"); }
[data-img="p-schrank"] { background-image: url("../img/foto/p-schrank.jpg"); }
[data-img="p-schrank-2"] { background-image: url("../img/foto/p-schrank-2.jpg"); }
[data-img="p-trafo"] { background-image: url("../img/foto/p-trafo.jpg"); }
[data-img="p-trafo-2"] { background-image: url("../img/foto/p-trafo-2.jpg"); }
[data-img="p-trasse"] { background-image: url("../img/foto/p-trasse.jpg"); }
[data-img="p-trasse-2"] { background-image: url("../img/foto/p-trasse-2.jpg"); }
[data-img="p-verteilung"] { background-image: url("../img/foto/p-verteilung.jpg"); }
[data-img="p-verteilung-2"] { background-image: url("../img/foto/p-verteilung-2.jpg"); }
[data-img="schrank-team"] { background-image: url("../img/foto/schrank-team.jpg"); }
[data-img="team-1"] { background-image: url("../img/foto/team-1.jpg"); }
[data-img="team-2"] { background-image: url("../img/foto/team-2.jpg"); }
[data-img="team-3"] { background-image: url("../img/foto/team-3.jpg"); }
[data-img="team-4"] { background-image: url("../img/foto/team-4.jpg"); }
[data-img="team-5"] { background-image: url("../img/foto/team-5.jpg"); }
[data-img="team-einsatz"] { background-image: url("../img/foto/team-einsatz.jpg"); }
[data-img="verteilung"] { background-image: url("../img/foto/verteilung.jpg"); }
[data-img="walter"] { background-image: url("../img/foto/walter.jpg"); }