/*
  AXO3 public — the single stylesheet of the public site (onepager, Impressum,
  Datenschutz). Loaded module-wide via the layoutConfig override.

  TAKEN OVER, not rewritten: this is `showcase/public/axo3.css` from
  Z:\labor\axo3-design, which in turn is the port of the Claude Design project
  "Projekt axo3 Abfrage" (design system `modernist-7111b61c`). The deviation
  list lives there, in docs/02-decisions/onepager-aus-claude-design.md — a
  second list here would drift.

  Two changes were made on the way into this repo, both mechanical:
    - the @font-face URLs point at public/assets/frontend/fonts/gt-walsheim/
    - the image slot lost its interactive states (the prototype could be filled
      by drag-and-drop; here it is a static placeholder until the screenshots
      exist)

  ⚠️ The markup carries the design tool's inline styles, and the breakpoints
  below override them with `!important`. Lifting those into classes would be a
  refactor of an approved design — worth doing, but as its own step, against
  the design source.

  ⚠️ Plain CSS, no Sass step: the source is plain CSS and the project has no
  frontend build. public/assets/ is gitignored and seeded from vendor packages
  only, so this file is copied to public/assets/frontend/css/ by hand — locally
  and on the server (ADR-024).
*/

/* ── Fonts ───────────────────────────────────────────────────────────────
   GT Walsheim, and nothing else — public is the brand's face. Licensed from
   Grilli Type and gitignored; the files are copied from
   assets/fonts/gt-walsheim/. Bold covers 700–900 so a stray `font-weight: 800`
   from the design system still lands on the real cut instead of a synthetic
   bold. Medium carries the uppercase kickers, where Bold closes the counters
   too far — see the h6 rule. */
@font-face { font-family: "GT Walsheim"; src: url("../fonts/gt-walsheim/GT-Walsheim-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Walsheim"; src: url("../fonts/gt-walsheim/GT-Walsheim-Medium.woff2")  format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Walsheim"; src: url("../fonts/gt-walsheim/GT-Walsheim-Bold.woff2")    format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

/* ── Tokens ──────────────────────────────────────────────────────────────
   Design system "Modernist", with the pages' petrol override resolved in.
   Accent-2 equals accent on purpose: the surface has one accent, ochre is
   the warning state and not a second brand colour. */
:root {
  --color-accent: #14646e;
  --color-accent-100: #dceaec;
  --color-accent-200: #bfd9dd;
  --color-accent-300: #aecfd3;
  --color-accent-400: #4fb3c0;
  --color-accent-500: #1a7d89;
  --color-accent-600: #10545d;
  --color-accent-700: #0c434a;
  --color-accent-800: #0a3438;
  --color-accent-900: #082427;
  --color-accent-2: #14646e;
  --color-accent-2-100: #dceaec;
  --color-accent-2-800: #0a3438;

  --color-bg: #f1f3f3;
  --color-surface: #e4e9ea;
  --color-text: #1b2325;
  --color-divider: color-mix(in srgb, #1b2325 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #e4e9ea;
  --color-neutral-300: #ced7d8;
  --color-neutral-400: #b0bcbe;
  --color-neutral-500: #8f9d9f;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* public speaks in GT Walsheim throughout — it is the brand's face, not a
     working surface. Inter belongs to member, where the split earns its keep:
     marketing voice against tool. A heading/body split within one page would
     be convention without a reason. */
  --font-heading: "GT Walsheim", system-ui, sans-serif;
  --font-heading-weight: 700;   /* Bold — the heaviest cut we license */
  --font-body: "GT Walsheim", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Rule weight — one lever for every line on the page: band separators,
     boxes, the hero connector, the menu dividers. The design system draws
     at 2px, which is right at desktop measure and reads heavy once the
     bands are 480px wide; the mobile breakpoint thins it. */
  --rule: 2px;

  /* Height of the sticky header bar. These are fallbacks — axo3.js measures
     the rendered bar and overwrites the value, because the bar is taller than
     its parts suggest (the wordmark's line box exceeds the 36px signet) and
     computing it by hand got it wrong by 8px. */
  --header-h: 78px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* ── Design system base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
/* Display tracking. The source draws its headlines in Archivo at 800; the
   licensed GT Walsheim set stops at Bold (700) — see
   docs/02-decisions/schriftwahl.md. Tightening the large sizes recovers most
   of the density that the missing weight would have given, without faking a
   cut the licence does not cover. Small headings keep the looser default,
   where tight tracking costs legibility rather than buying presence. */
h1 { letter-spacing: -0.032em; }
h2 { letter-spacing: -0.030em; }
h3 { letter-spacing: -0.024em; }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
/* The kicker. Versalien give up the ascenders and descenders the eye reads
   words by, and Bold closes the counters on top of that — at 13px with long
   German compounds ("FÜR IMMOBILIENVERWALTER, BAUTRÄGER, VERMARKTER") the
   line clumps. Medium instead of Bold, a size up, and half again the
   tracking: caps want air. Short kickers ("WAS ES TUT") gain from it too. */
h6 {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: var(--rule) solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── Page scaffolding ────────────────────────────────────────────────────
   The source repeats this grid container inline on every band. One class,
   same output. */
.wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; max-width: 1280px; margin: 0 auto;
}
.band { border-bottom: var(--rule) solid var(--color-divider); }

/* Anchor targets stop below the sticky header instead of behind it.
   `scroll-margin-top` moves only the scroll destination — no box, no paint,
   no hit area changes. The old `padding-top: N; margin-top: -N` trick would
   drag each band's background and click area N pixels upward, which on this
   page means the petrol claim band bleeding over the section above it.

   Four pixels short of the bar rather than past it: the band's own divider
   is the last rule of the section above, so a positive offset parks that
   line just under the header's, reading as one thick double stroke. Tucking
   it behind instead lets the section start clean against the bar. */
section[id] { scroll-margin-top: calc(var(--header-h) - 4px); }

/* Gliding, not jumping — but never against an explicit system preference:
   animated scrolling is a trigger for vestibular disorders. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.muted-55 { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.muted-65 { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.muted-70 { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.kicker { margin: 0 0 16px; color: var(--color-accent-700); }
.num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent-700);
}
.lbl { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* ── Signet — a real cube at the isometric angle, six faces from one accent */
.signet { display: block; width: 36px; height: 36px; --panel: #f1f3f3; }
.cube {
  display: block;
  --edge: 20px;
  width: var(--edge); height: var(--edge);
  margin: 8px 0 0 8px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-35.264deg) rotateY(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cube { animation: cube-turn 16s linear infinite; }
}
@keyframes cube-turn {
  from { transform: rotateX(-35.264deg) rotateY(45deg); }
  to   { transform: rotateX(-35.264deg) rotateY(405deg); }
}
.cube i { position: absolute; inset: 0; }
.f-top    { transform: rotateX(90deg)  translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--color-accent) 30%, var(--panel)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--color-accent) 75%, #000); }
.f-front  { transform: translateZ(calc(var(--edge) / 2));                 background: var(--color-accent); }
.f-back   { transform: rotateY(180deg) translateZ(calc(var(--edge) / 2)); background: var(--color-accent); }
.f-left   { transform: rotateY(-90deg) translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--color-accent) 62%, #10181a); }
.f-right  { transform: rotateY(90deg)  translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--color-accent) 62%, #10181a); }

/* ── Hero diagram — index.html only ─────────────────────────────────────── */
@keyframes axo-flow { 0% { transform: translateY(-6px); opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { transform: translateY(46px); opacity: 0 } }
@keyframes axo-pulse { 0%, 100% { opacity: 0.25 } 50% { opacity: 1 } }
.pipe { height: 44px; position: relative; display: flex; justify-content: center; }
.pipe span { width: var(--rule); height: 100%; background: var(--color-divider); }
.pipe i { position: absolute; top: 0; width: 8px; height: 8px; background: var(--color-accent); animation: axo-flow 2.4s linear infinite; }
.beat { width: 6px; height: 18px; background: #fff; animation: axo-pulse 1.6s ease-in-out infinite; }

/* Source picker — the `opt()` style object from the source, as a class. */
.sw-opt {
  background: transparent; color: var(--color-text);
  border: var(--rule) solid var(--color-divider);
  padding: 8px 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; cursor: pointer; text-align: left;
}
.sw-opt[aria-pressed="true"] {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}

/* ── Image slot — the examples section ───────────────────────────────────
   Placeholder until the three screenshots exist. It names the motif it is
   waiting for, so the section holds its shape and says what is missing.
   The prototype's fill-by-drag states are gone: nothing here is clickable. */
.slot {
  height: 100%; width: 100%; display: grid; place-items: center;
  padding: 16px; text-align: center;
  background: var(--color-surface);
  border: var(--rule) dashed color-mix(in srgb, var(--color-text) 25%, transparent);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ── Mobile navigation ───────────────────────────────────────────────────
   Not in the source — the source has no responsive handling at all. Below
   900px the inline nav and the two header buttons give way to one burger
   that opens a panel holding all of it. Built to grow: further pages are
   one more link in the panel.

   Three bars rather than a three-dot overflow menu: a kebab conventionally
   means "more actions on this object", not "navigation of this site".

   The bars are sheared -30deg onto the same isometric plane the signet's
   cube stands on, so the mark belongs to the brand rather than being a
   stock icon dropped beside it. Still a burger at a glance — the shear is
   the only thing separating it from one. No box: the 44px hit area is
   invisible, the bars align optically with the band's right edge.

   Opening replaces the shear with the X rotation, so the cross comes out
   square rather than as a leaning cross. */
.nav-toggle {
  display: none;                 /* desktop: the inline nav does the work */
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  margin-right: -10px;           /* hit area overhangs; the bars stay on the edge */
  padding: 0; cursor: pointer;
  background: transparent; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars { display: block; position: relative; width: 24px; height: 17px; }
.nav-toggle .bars i {
  position: absolute; left: 0; width: 24px; height: 2.5px;
  background: var(--color-text);
  transform: skewX(-30deg);
  transition: transform 0.2s ease, opacity 0.12s ease;
}
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 7px; }
.nav-toggle .bars i:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .bars i { transition: none; }
}

.nav-panel { display: none; }    /* desktop: never, even if left open */
.nav-panel a.nav-link {
  display: block; padding: 15px 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; color: var(--color-text); text-decoration: none;
  border-bottom: var(--rule) solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.nav-panel a.nav-link:active { color: var(--color-accent); }
.nav-panel .panel-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.nav-panel .panel-actions .btn { font-size: 16px; padding: 14px 20px; justify-content: flex-start; }

/* ── Breakpoints ─────────────────────────────────────────────────────────
   `!important` throughout: the source carries its padding and font sizes as
   inline styles, which otherwise outrank anything declared here. */
@media (max-width: 1100px) {
  .wrap { padding-inline: 32px !important; }
  .hero-title { font-size: 48px !important; }
  .sec-title { font-size: 36px !important; }
  .claim { font-size: 40px !important; }
}
@media (max-width: 900px) {
  :root { --rule: 1px; --header-h: 73px; }

  .wrap { display: block !important; padding-inline: 24px !important; }
  .wrap > * { grid-column: auto !important; margin-bottom: 28px; }
  .wrap > *:last-child { margin-bottom: 0; }

  /* Vertical rhythm. The source's 64–72px band padding is measured against a
     1280px column; on a 480px one it leaves the page looking empty. Scaled to
     roughly half, with two exceptions: `wrap-cont` continues the band above it
     and must not reopen a gap, `wrap-tight` is a tinted strip that was already
     shallow. */
  .wrap { padding-block: 40px !important; }
  .wrap-tight { padding-block: 26px !important; }
  .wrap-cont { padding-top: 0 !important; }
  footer .wrap { padding-block: 34px !important; }
  footer .wrap + .wrap { padding-top: 0 !important; }
  .hero-title { font-size: 36px !important; }
  .sec-title { font-size: 28px !important; }
  .claim { font-size: 28px !important; }
  .site-nav { display: none !important; }
  /* Bare spans become blocks so they stack instead of running together —
     the step numbers and their timings, the price row's note. Spans that
     carry an inline `display` (brand lockup, footer columns) keep it. */
  .wrap > span { display: block; }
  .steps > .num { margin-bottom: 4px !important; }

  /* The header is the one band that must not stack: brand left, burger
     right, on one line. More specific than the `.wrap` rule above, so it
     wins despite both being `!important`. */
  .site-header .wrap {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 14px !important;
  }
  .site-header .wrap > * { margin-bottom: 0 !important; }
  .header-actions { gap: 0 !important; }
  .header-cta { display: none !important; }
  .nav-toggle { display: inline-flex; }

  .nav-panel {
    display: block;
    border-top: var(--rule) solid var(--color-divider);
    background: var(--color-bg);
    padding: 4px 24px 26px;
  }
  .nav-panel[hidden] { display: none; }
}