/* ============================================================
   LumaLod — website styles

   Palette, type and geometry come from the brand's own sources,
   newest first:
     - Clarity/Resources/Branding/styleguide.html   (v1.0, 2026-08-18)
     - Clarity/Resources/Branding/lumalod-icon.svg  (mark geometry)
     - Clarity/Docs/LumaLod-Design-Language.md      (UI grammar)
   If a value here and a value there disagree, the brand repos win.

   The page speaks the mark's grammar: vertices and edges. Solid
   discs are the physical world, hollow rings are reconstructions,
   and every edge stops short of its vertex — the same rule the
   icon is built on. Sky (#82C6ED) marks activity and interaction
   only, Deep (#2C79B4) is the one brand colour that carries a
   white mark (the CTA band), Ivory (#F5ECDA) appears exactly once,
   as the point of light in the hero's top-left corner. Dark is the
   only mode.
   ============================================================ */

/* ---------- tokens ------------------------------------------------ */

:root {
  /* brand — styleguide v1.0 §01 */
  --sky: #82c6ed;
  --sky-light: #a2d6f2;
  --sky-pressed: #6fb3da;
  --deep: #2c79b4;
  --ivory: #f5ecda;
  --sky-tint: rgba(130, 198, 237, 0.07);
  --sky-tint-edge: rgba(130, 198, 237, 0.45);
  --brand-gradient: linear-gradient(135deg, #f5ecda 0%, #82c6ed 42%, #2c79b4 100%);

  /* cool neutral ramp — 000 deepest, 950 headline */
  --grey-000: #0a0b0c;
  --grey-050: #111214;
  --grey-100: #17181b;
  --grey-150: #1d1f22;
  --grey-200: #232529;
  --grey-250: #2a2d32;
  --grey-300: #32353b;
  --grey-400: #42464d;
  --grey-500: #5a5f67;
  --grey-600: #7a7f88;
  --grey-700: #9aa0a8;
  --grey-800: #c2c6cc;
  --grey-900: #e6e8eb;
  --grey-950: #f4f5f7;

  --bg-app: var(--grey-050);
  --bg-panel: var(--grey-100);
  --bg-inset: var(--grey-150);
  --bg-raised: var(--grey-200);
  --bg-hover: var(--grey-250);
  --bg-viewport: var(--grey-000);

  --border-subtle: var(--grey-300);   /* structure: card outline, panel edge */
  --border-row: var(--grey-200);      /* row divider inside a list — quieter */
  --border-strong: var(--grey-400);

  --fg-primary: var(--grey-950);
  --fg-body: var(--grey-900);
  --fg-secondary: var(--grey-800);
  --fg-tertiary: var(--grey-700);
  --fg-meta: var(--grey-600);
  --fg-muted: var(--grey-500);
  --fg-on-accent: #0a0b0c;

  --state-ok: #8cc888;
  --state-info: var(--sky);

  --font-sans: "Jost", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --radius-micro: 2px;
  --radius: 4px;
  --radius-panel: 6px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* The splash easing — the styleguide's "one justified exception",
     used only for the mark's converge and the travelling frame. */
  --ease-splash: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-slow: 200ms;

  --page: 1120px;
  --gutter: 24px;
}

/* ---------- base -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Muss nach den Komponenten stehen bzw. !important tragen: .btn setzt
   display:inline-flex und wuerde das hidden-Attribut sonst schlagen. */
[hidden] { display: none !important; }

a { color: var(--sky); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--sky-light); }

:focus-visible {
  outline: 2px solid rgba(130, 198, 237, 0.35);
  outline-offset: 2px;
  border-radius: var(--radius-micro);
}

/* Mono is everything a machine reports; Sans is everything a human named. */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bg-raised);
  color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 8px 14px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Panel / section title — Sans 600, wide tracking, uppercase. Never the
   product name (styleguide §05: no LUMALOD in running text). */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin: 0 0 16px;
}
.eyebrow--accent { color: var(--sky); }

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 56ch;
}

.meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--fg-meta);
}

/* ---------- header ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 12, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
  font-size: 14px;
  color: var(--fg-secondary);
  padding: 4px 0;
  border-bottom: 2px solid transparent;   /* the active-step idiom: 2 px bottom edge */
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--fg-primary); }
.nav a[aria-current="true"] { color: var(--fg-primary); border-bottom-color: var(--sky); }

.nav__cta { margin-left: 6px; border-bottom: none; }
.nav a.btn { padding: 0 18px; }          /* .nav a's `padding: 4px 0` would win otherwise */
.nav a.btn--primary { color: var(--fg-on-accent); font-weight: 600; }
.nav a.btn--primary:hover { color: var(--fg-on-accent); }

.nav-toggle {
  display: none;
  margin-left: auto;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--fg-body);
  font: 400 13px/1 var(--font-sans);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--border-row); }
  .nav a[aria-current="true"] { border-bottom-color: var(--sky); }
  .nav__cta { margin: 12px 0 0; border-bottom: none !important; }
}

/* ---------- buttons ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  color: var(--fg-body);
  font: 400 14px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--bg-hover); color: var(--fg-primary); }
.btn:active { background: var(--bg-inset); }   /* pressing deepens, never lightens */

.btn--primary {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--fg-on-accent);
  font-weight: 600;
}
.btn--primary:hover { background: var(--sky-light); border-color: var(--sky-light); color: var(--fg-on-accent); }
.btn--primary:active { background: var(--sky-pressed); border-color: var(--sky-pressed); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg-secondary);
  font-weight: 500;
}
.btn--ghost:hover { background: transparent; border-color: var(--fg-tertiary); color: var(--fg-primary); }
.btn--ghost:active { background: var(--bg-inset); }

/* On Deep, sky has no contrast — white is the documented pairing
   (a white mark on Deep). */
.btn--on-deep {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--deep);
  font-weight: 600;
}
.btn--on-deep:hover { background: var(--ivory); border-color: var(--ivory); color: var(--deep); }
.btn--on-deep:active { background: #e4dcc9; border-color: #e4dcc9; }

.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }

/* ---------- state idioms ------------------------------------------- */

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }

.caps-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- hero -------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-viewport);
  border-bottom: 1px solid var(--border-subtle);
}

/* Ivory is a point of light in the corner, never a surface (§01). The 9 %
   stop from the icon gradient, translated to a page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 34% at 4% 0%, rgba(245, 236, 218, 0.10), transparent 70%),
    radial-gradient(50% 45% at 78% 12%, rgba(130, 198, 237, 0.07), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
  padding-block: 96px 88px;
  /* Fill the first viewport, but never stretch past what the composition
     needs — a rotated monitor should not get 900 px of empty black. */
  min-height: min(820px, calc(100svh - 72px));
}

.hero h1 {
  font-size: clamp(44px, 6.6vw, 82px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
}
.hero h1 em {
  font-style: normal;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede { font-size: 20px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}

/* The mark, at scale, doing what the product does: the hollow reconstruction
   descends, the solid object rises, they lock together. Same choreography as
   the Android splash, same easing (--ease-splash). */
.heromark { display: grid; place-items: center; }
.heromark svg {
  width: min(100%, 420px);
  height: auto;
  overflow: visible;
}
.heromark img {
  width: min(100%, 420px);
  height: auto;
  border-radius: 12px;
}
.heromark .mark-back,
.heromark .mark-front {
  opacity: 0;
  transition: transform 640ms var(--ease-splash), opacity 420ms var(--ease-splash);
}
.heromark .mark-back  { transform: translateY(-34px); transition-delay: 120ms; }
.heromark .mark-front { transform: translateY(34px);  transition-delay: 200ms; }
.heromark.is-in .mark-back  { transform: none; opacity: 0.92; }
.heromark.is-in .mark-front { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .heromark .mark-back  { transform: none; opacity: 0.92; }
  .heromark .mark-front { transform: none; opacity: 1; }
}

.heromark__caption {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- sections ---------------------------------------------- */

.section { padding: 104px 0; border-bottom: 1px solid var(--border-subtle); }
.section--panel { background: var(--bg-panel); }
.section__head { max-width: 68ch; margin-bottom: 56px; }
.section__head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* ---------- the flow ----------------------------------------------
   The pipeline as one drawing in the mark's own vocabulary: stations
   are vertices, connections are edges, and a single frame travels the
   chain. The physical stations carry outline icons; the final one —
   the model — is the hollow L itself: the reconstruction.            */

.flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.station {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.station__icon {
  width: 116px;
  height: 116px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-panel);   /* what shows while the photo loads */
  object-fit: cover;
  margin-bottom: 20px;
}
.station--goal .station__icon { border-color: var(--sky-tint-edge); }
.station__name { font-size: 16px; font-weight: 500; color: var(--fg-body); }
.station__meta {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-meta);
}

/* Hover: der Knoten tritt hervor. Transform statt Breite — sonst
   wandert die Kante, deren Position auf 116 px festgelegt ist. */
@media (hover: hover) {
  .station__icon {
    transition: transform 240ms var(--ease), border-color 240ms var(--ease);
  }
  .station:hover .station__icon {
    transform: scale(1.90);
    border-color: var(--sky-tint-edge);
  }
}
@media (prefers-reduced-motion: reduce) {
  .station__icon { transition: none; }
  .station:hover .station__icon { transform: none; }
}

/* The edge: a hairline that stops short of both vertices, with one frame
   travelling it. Delays are staggered per edge so a single frame appears
   to move through the whole chain. */
.flow__edge { flex: 1; max-width: 160px; position: relative; min-width: 32px; }
.flow__edge::before {
  content: "";
  position: absolute;
  top: 58px;                 /* centre of the 116 px vertex */
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--border-subtle);
}
.flow__edge::after {
  content: "";
  position: absolute;
  top: 55px;
  left: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  opacity: 0;
  animation: frame-travel 3.6s var(--ease-splash) infinite;
}
.flow__edge:nth-child(2)::after { animation-delay: 0s; }
.flow__edge:nth-child(4)::after { animation-delay: 1.2s; }
.flow__edge:nth-child(6)::after { animation-delay: 2.4s; }

@keyframes frame-travel {
  0%   { left: 10px; opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { left: calc(100% - 17px); opacity: 0; }
  100% { left: calc(100% - 17px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__edge::after { animation: none; opacity: 0; }
}

@media (max-width: 860px) {
  .flow { flex-direction: column; align-items: center; }
  .station { width: 100%; max-width: 300px; }
  .flow__edge { min-width: 0; max-width: none; width: 1px; min-height: 56px; align-self: center; }
  .flow__edge::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 1px; height: auto; }
  .flow__edge::after {
    top: 8px; left: -3px;
    animation-name: frame-travel-v;
  }
}
@keyframes frame-travel-v {
  0%   { top: 8px; opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { top: calc(100% - 15px); opacity: 0; }
  100% { top: calc(100% - 15px); opacity: 0; }
}

.flow__foot { margin-top: 56px; text-align: center; }

/* ---------- studio ------------------------------------------------ */

.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.studio__grid .section__head { margin-bottom: 0; }

.studio__points { list-style: none; margin: 34px 0 0; padding: 0; }
.studio__points li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-row);
  font-size: 15.5px;
  color: var(--fg-tertiary);
}
.studio__points li:last-child { border-bottom: none; }
.studio__points .dot { color: var(--fg-muted); }
.studio__points strong { color: var(--fg-body); font-weight: 500; }

@media (max-width: 1000px) {
  .studio__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- the signature surface: a card that fills like a gauge -- */

.fillcard {
  position: relative;
  overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.fillcard__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--sky-tint);
  border-right: 1px solid var(--sky-tint-edge);
  transition: width var(--t-slow) var(--ease);
  pointer-events: none;
}
.fillcard__fill[data-fill="0"] { border-right: none; }
.fillcard > *:not(.fillcard__fill) { position: relative; }

/* mock dashboard */
.mock {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);   /* it floats over the panel section */
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
}
.mock__bar .meta { margin-left: auto; }
.mock__body { padding: 12px; display: grid; gap: 6px; }

.pcard { display: flex; }
.pcard__hit { flex: 1; padding: 9px 8px 10px 10px; display: flex; gap: 12px; min-width: 0; }
.pcard__thumb {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);   /* what shows while the frame loads */
  object-fit: cover;
}
.pcard__col { flex: 1; min-width: 0; }
.pcard__top { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.pcard__name {
  font-size: 14px; font-weight: 500; color: var(--fg-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard__meta { margin-left: auto; font-size: 11.5px; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard--live .pcard__meta { color: var(--fg-secondary); }
.pcard__progress { margin-top: 5px; width: 50%; }        /* half width on purpose */
.pcard__step { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.pcard__step-name { font-size: 12px; color: var(--fg-meta); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard--live .pcard__step-name { color: var(--sky); font-weight: 500; }
.pcard__pct { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-tertiary);
  min-width: 34px; text-align: right; }
.pcard__gear {
  width: 34px; flex: none;
  border-left: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--fg-meta);
}

/* Thin progress bar — one idiom, 3 px, track is structure grey. */
.bar { height: 3px; border-radius: var(--radius-micro); background: var(--border-subtle); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--sky); transition: width var(--t-fast) var(--ease); }
.bar__fill--idle { background: var(--grey-500); }
.bar__fill--done { background: var(--state-ok); }

.mock__status {
  display: flex; align-items: center; gap: 18px;
  height: 26px; padding: 0 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-meta);
}
.mock__status span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-width: 0; overflow: hidden; }
.mock__status .spacer { margin-left: auto; }

/* ---------- team --------------------------------------------------- */

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.person { text-align: center; }
.person__photo {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);   /* what shows if the file is missing */
  margin-bottom: 14px;
}
.person h3 { font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.person .person__role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin: 0;
}
@media (max-width: 720px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ---------- notice (legal pages) ----------------------------------- */

.notice {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--sky);        /* 2 px left edge on notice blocks */
  border-radius: var(--radius);
  padding: 16px 18px;
}
.notice p { font-size: 14.5px; color: var(--fg-tertiary); }
.notice--warm { border-left-color: var(--ivory); }

/* ---------- deep band ---------------------------------------------
   The one saturated surface on the page. Deep is the only brand colour
   that carries a white mark (styleguide §01) — this is its moment.    */

.deep {
  background: var(--deep);
  color: #ffffff;
  text-align: center;
  padding: 116px 0;
  position: relative;
  overflow: hidden;
}
.deep__mark { width: 88px; height: auto; margin: 0 auto 36px; display: block; }
.deep h2 {
  color: #ffffff;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto 18px;
}
.deep p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  max-width: 54ch;
  margin: 0 auto;
}
.deep__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.deep .btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }
.deep .btn--ghost:hover { border-color: #ffffff; color: #ffffff; }
.deep .btn--ghost:active { background: rgba(0, 0, 0, 0.12); }
.deep p.deep__status {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  max-width: none;
}
.deep a:focus-visible { outline-color: rgba(255, 255, 255, 0.6); }

/* ---------- footer ------------------------------------------------ */

.site-footer { background: var(--bg-viewport); padding: 44px 0 52px; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.site-footer .brand img { height: 24px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.site-footer__links a { font-size: 13px; color: var(--fg-tertiary); }
.site-footer__links a:hover { color: var(--fg-primary); }
.site-footer__legal { width: 100%; padding-top: 20px; border-top: 1px solid var(--border-subtle); }

/* ---------- responsive -------------------------------------------- */

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 64px 64px;
    min-height: 0;
  }
  .heromark { order: -1; }
  .heromark svg { width: min(56vw, 300px); }
  .heromark img { width: min(56vw, 300px); }
  .heromark__caption { margin-top: 18px; }
}
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .deep { padding: 84px 0; }
}

/* Motion: colour, border and width only — no transforms, no scale.
   (The mark's converge and the travelling frame are the exceptions,
   both inherited from the splash.) */
.reveal { opacity: 0; transition: opacity 360ms var(--ease); }
.reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; } }

/* ---------- legal pages (Impressum, Datenschutz) -------------------
   Long-form prose. Narrower measure than the marketing sections and a
   quieter type scale — these pages are read, not scanned.             */

.legal { max-width: 760px; }
.legal h1 { font-size: 32px; margin-bottom: 24px; }
.legal h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.legal h3 { font-size: 16px; margin: 24px 0 8px; color: var(--fg-secondary); }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--fg-tertiary); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--fg-secondary); font-weight: 500; }
.legal address { font-style: normal; line-height: 1.9; }

/* ---------- page head (Unterseiten) --------------------------------
   Unterseiten bekommen eine ruhigere Eröffnung als der Hero: keine
   Marke, kein Verlauf, die Überschrift zwei Stufen kleiner.          */

.page-head { padding-bottom: 0; }
.page-head h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* ---------- projekte ------------------------------------------------
   Ein Projekt ist ein Knoten: erst die Prosa, dann das Objekt. Das
   Medium ist das einzige interaktive Element im Block — Sky erscheint
   dort und sonst nirgends (Styleguide §01). Keine Transformationen:
   der Zustandswechsel läuft über Rahmenfarbe und Textfarbe.          */

.projects { display: grid; gap: 88px; }

.project__body { max-width: 68ch; }
.project__body h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.14;
  margin-bottom: 18px;
}
.project__body p { color: var(--fg-tertiary); }
.project__body p.lede { color: var(--fg-secondary); }

.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

/* Der Rahmen ist in beiden Zuständen derselbe — als <a>, wenn das
   Modell steht, als <figure>, solange nicht. So springt die Seite
   beim Umstellen nicht. */
.project__media {
  position: relative;
  display: block;
  margin: 36px 0 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--bg-raised);   /* was zeigt, solange das Foto lädt */
  transition: border-color var(--t-slow) var(--ease);
}
/* Kein erzwungenes Seitenverhaeltnis: die Projektbilder haben sehr
   unterschiedliche Formate (eine Gegenueberstellung ist breit, ein
   Einzelmotiv nicht). width/height im <img> halten den Platz frei,
   height:auto verhindert, dass das height-Attribut als Pixelwert
   gewinnt. */
.project__media img {
  width: 100%;
  height: auto;
}

/* Die Plakette: hohler Ring und Wort, dieselbe Grammatik wie der
   Ziel-Knoten im Workflow. Leise im Ruhezustand, Sky beim Hover. */
/* Rechts unten, nicht links: die Projektbilder tragen links unten
   haeufig eigene, eingebrannte Beschriftungen. */
.project__badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(10, 11, 12, 0.72);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  transition: color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.project__badge .ring {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
}

a.project__media:hover { border-color: var(--sky-tint-edge); }
a.project__media:hover .project__badge { color: var(--sky); border-color: var(--sky); }
a.project__media:focus-visible { outline-offset: 3px; }

/* Noch nicht da: kein Zeiger, kein Sky, kein Versprechen. */
.project__media--soon { cursor: default; }
.project__media--soon .project__badge { color: var(--fg-meta); }

@media (max-width: 720px) {
  .projects { gap: 64px; }
  .project__badge { right: 12px; bottom: 12px; }
}

/* ---------- Vergleich (Projekt-Unterseiten) -------------------------
   Zwei Aufnahmen desselben Objekts nebeneinander. Die Seite hat genau
   eine Aussage, also bekommt sie genau eine große Zahl; alles andere
   ordnet sich darunter. Ivory erscheint hier einmal, an dieser Zahl —
   wie im Hero der Startseite der Lichtpunkt (Styleguide §01).        */

.cmp-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
}
.cmp-stat {
  padding-left: 28px;
  border-left: 1px solid var(--border-subtle);
  max-width: 28ch;
}
.cmp-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ivory);
}
.cmp-stat__num small {
  font-size: 0.3em;
  letter-spacing: 0;
  color: var(--fg-meta);
  margin-left: 10px;
}
.cmp-stat p { margin-top: 12px; font-size: 14.5px; color: var(--fg-tertiary); }

@media (max-width: 860px) {
  .cmp-open { grid-template-columns: 1fr; gap: 28px; }
  .cmp-stat {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-top: 20px;
    max-width: none;
  }
}

/* Zwei Gegenüberstellungen nebeneinander, unter 860 px gestapelt. */
.cmp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 860px) { .cmp-pair { grid-template-columns: 1fr; gap: 32px; } }

.cmp-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-inset);
  overflow: hidden;
}
/* Der geführte Lauf ist das Ergebnis, nicht die Referenz — eine Kante
   in Sky, sonst nichts. Kein Grün, kein Haken, keine Wertung im Text. */
.cmp-card--lumalod { border-color: var(--sky-tint-edge); }

.cmp-card__bar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-row);
  background: var(--bg-panel);
}
.cmp-card__name { font-size: 14px; font-weight: 500; color: var(--fg-body); }
.cmp-card__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-meta);
  white-space: nowrap;
}
/* Beide Screenshots haben leicht verschiedene Seitenverhaeltnisse. Ein
   gemeinsames Fenster mit contain haelt die Karten gleich hoch, ohne
   etwas abzuschneiden — der dunkle Rand faellt nicht auf, die
   Screenshots haben selbst einen. */
.cmp-card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-viewport);
}
/* Die Trichter-Ausschnitte liegen nur in 320 x 280 px vor. Auf volle
   Kartenbreite gezogen wuerden sie sichtbar weich. */
.cmp-card__crop {
  aspect-ratio: auto;
  max-width: 360px;
  margin-inline: auto;
  padding-block: 20px;
}
.cmp-card__body { padding: 18px 16px 20px; }
.cmp-card__verdict {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-primary);
  margin-bottom: 8px;
}
.cmp-card__body p { font-size: 14.5px; color: var(--fg-tertiary); }

/* Kennwerte als Zeilen, nicht als Tabelle: zu wenige Werte für ein
   Raster, und der Name gehört neben die Zahl, nicht darüber. */
.cmp-specs { margin: 18px 0 0; display: grid; gap: 0; }
.cmp-specs div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-row);
}
.cmp-specs div:last-child { border-bottom: none; }
.cmp-specs dt { font-size: 13px; color: var(--fg-meta); }
.cmp-specs dd {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--fg-secondary);
  white-space: nowrap;
}

/* ---------- Kennzahlen-Tabelle --------------------------------------
   Balken je Zeile auf den größten Wert skaliert, Breite steht inline
   im Markup — kein JavaScript, damit die Zahlen auch ohne es stehen. */

.cmp-tablewrap { overflow-x: auto; }
.cmp-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.cmp-table th, .cmp-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border-row);
  vertical-align: top;
}
.cmp-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  border-bottom-color: var(--border-subtle);
}
.cmp-table tbody th { font-weight: 400; width: 38%; }
.cmp-table tbody th span {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.cmp-table td { width: 31%; }
.cmp-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--fg-secondary);
}
.cmp-table .num small { font-size: 12px; color: var(--fg-meta); }
.cmp-table .bar { margin-top: 7px; max-width: 200px; background: var(--grey-200); }

/* Sky an Zahl und Balken markiert den besseren Wert der Zeile, gleich in
   welcher Spalte er steht. Der jeweils andere Wert bleibt grau, damit der
   Unterschied auch ohne Farbe an der Balkenlaenge ablesbar bleibt. */
.cmp-table .is-better .num { color: var(--sky); font-weight: 500; }
.cmp-table .is-better .bar__fill { background: var(--sky); }
.cmp-table .is-neutral .bar__fill { background: var(--grey-500); }

.cmp-table .group th {
  padding-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-meta);
  border-bottom-color: var(--border-subtle);
}

.cmp-sources {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}

/* ---------- 3D-Viewer (Projekt-Unterseiten) -------------------------
   Zwei Fenster, eine Kamera: wer eins dreht, dreht beide. three.js
   liegt unter assets/vendor/ im eigenen Repo — kein CDN, damit die
   Aussage der Datenschutzerklärung stimmt, dass diese Seiten keine
   fremden Inhalte einbetten.
   Geladen wird erst auf Klick: die beiden Modelle sind zusammen rund
   25 MB, das schickt man niemandem ungefragt übers Mobilnetz.       */

.viewer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) { .viewer { grid-template-columns: 1fr; } }

.viewer__pane {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-viewport);
  overflow: hidden;
}
.viewer__pane--lumalod { border-color: var(--sky-tint-edge); }
.viewer__pane canvas { width: 100%; height: 100%; display: block; }

.viewer__lbl {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.viewer__lbl b { font-weight: 500; color: var(--fg-secondary); }
.viewer__lbl span { color: var(--fg-muted); }

.viewer__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-meta);
  background: var(--bg-viewport);
}

.viewer__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}
.viewer__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted); }
.viewer__tools .btn[aria-pressed="true"] { border-color: var(--sky-tint-edge); color: var(--sky); }