/* ZeroLog homepage — "blueprint".
 *
 * The conceit: the page is a technical drawing of the product. Dashed hairlines, sheet numbers,
 * figure labels and caliper marks, on a dot grid. It earns its place because the product's own
 * claim is that you can see exactly what it did and exactly what it cost — a drawing is the form
 * that says "here is the mechanism", where a marketing page says "trust us".
 *
 * Monochrome by brand: one near-black, one warm off-white, three greys. No accent, no gradient
 * fills, no rounded corners anywhere except the caret dot. Everything that would normally be done
 * with colour is done with weight, space and the hairline.
 *
 * Type is Barlow (already self-hosted for the app) and Geist Mono. The mono is not decoration: it
 * is what the product's own output looks like, so every number, path and command on this page is
 * set in the face it appears in inside the app.
 */

/* Geist Mono ships in /fonts but was never declared — the app referenced it through the `--mono`
   stack and quietly fell through to the system monospace. */
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0a0a0a;
  --paper: #f2f2f0;
  --g1: #b3b3af;
  --g2: #8a8a86;
  --g3: #6b6b67;
  --rule: rgba(255, 255, 255, .3);
  --rule-soft: rgba(255, 255, 255, .18);
  --dash: rgba(255, 255, 255, .4);
  --pad: clamp(16px, 4vw, 52px);
  --sheet: 1140px;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
}

.hp {
  background: var(--ink);
  /* The drawing grid. Fixed so the page reads as ink laid ON paper rather than a texture that
     scrolls with the content. */
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--paper);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hp * { box-sizing: border-box; }
.hp a { color: inherit; }

/* ---------- shared drawing furniture ---------- */
.hp-sheet { max-width: var(--sheet); margin-inline: auto; }
/* The small caps label above every heading: sheet number and subject, like a drawing's title block. */
.hp-kicker {
  margin: 0 0 14px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--g2);
}
.hp h1 {
  margin: 0; font-size: clamp(32px, 6.8vw, 74px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em; max-width: 16ch; text-wrap: pretty;
}
.hp h2 {
  margin: 0; font-size: clamp(24px, 3.8vw, 42px); font-weight: 600;
  line-height: 1.12; letter-spacing: -.01em; text-wrap: pretty;
}
.hp-lede { margin: 18px 0 0; max-width: 54ch; color: var(--g1); font-size: 16px; }
.hp-sec { padding: clamp(48px, 7vw, 80px) var(--pad) clamp(64px, 9vw, 110px); border-top: 1px solid var(--rule); }
.hp-sec:first-of-type { border-top: 0; }

/* A figure: the dashed frame with its number floating on the rule, as on a drawing. */
.hp-fig { max-width: 920px; margin-inline: auto; position: relative; padding-top: 26px; }
.hp-fig-no {
  position: absolute; top: 0; left: 0; font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g3);
}
.hp-frame { border: 1px dashed var(--dash); background: rgba(10, 10, 10, .9); }

/* The caliper: two tick marks with a measurement between them. Used to annotate a figure with the
   one fact worth carrying away from it. */
.hp-caliper { margin-top: 10px; }
.hp-caliper i {
  display: block; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 8px, transparent 8px 16px);
}
.hp-caliper div {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--g3);
}

/* ---------- nav ---------- */
.hp-nav {
  display: flex; align-items: center; gap: 24px;
  padding: 16px var(--pad); border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.hp-brand {
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; font-weight: 500;
  /* A finger-sized tap target. The nav row is already ~44px tall (the CTA button sets it), so
     centring the wordmark in that height grows the hit area without changing the visible layout —
     the mobile sweep flags anything under 28px, and a bare text link was ~20px. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.hp-navlinks { display: flex; gap: 20px; }
.hp-navlinks a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--g2); text-decoration: none;
}
.hp-navlinks a:hover { color: var(--paper); }
.hp-navcta { margin-left: auto; display: flex; gap: 14px; align-items: center; }
/* §ZL-0052 Die Sprungmarke. Nicht `display:none` und nicht `visibility:hidden` -- beides nimmt sie
   aus der Tabreihenfolge, und dann ist sie kein Weg mehr, sondern nur unsichtbar. Sie sitzt
   ausserhalb des Bildes und kommt beim Fokus zurueck. */
/* VORLAUNCH — der Stempel ganz oben.
   Kein farbiges Warnband: die Seite hat keine Akzentfarbe, und ein gelber Balken laese sich als
   Defekt statt als Zustand. Eine Haarlinie und eine Mono-Zeile in Grau sind dieselbe Sprache wie
   die Beschriftungen ueberall sonst -- eine Angabe ueber die Zeichnung, nicht in ihr.
   Zentriert, weil sie als einzige Zeile der Seite nicht zum Inhalt gehoert. */
.hp-stamp {
  margin: 0;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g2);
  text-align: center;
  text-wrap: balance;
}
.hp-stamp b { color: var(--paper); font-weight: 500; }
@media (max-width: 560px) { .hp-stamp { font-size: 10.5px; letter-spacing: .06em; } }

.hp-skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 20px; text-decoration: none;
}
.hp-skip:focus-visible { transform: translateY(0); outline: 2px solid var(--ink); outline-offset: -6px; }
/* Ein Fokusziel darf keinen eigenen Rahmen ziehen: der Sprung ist die Rueckmeldung, nicht ein
   Kasten um den halben Bildschirm. */
.hp-main:focus { outline: none; }

/* §ZL-0035 Das "Sign in" IN der Linkliste ist das Telefon-Exemplar. Auf dem Telefon wird die Liste
   zum Menue, und dort muss es stehen; auf dem Desktop stuende es zweimal nebeneinander, weil die
   Knopfgruppe rechts ihr eigenes traegt. Geloescht wird es nicht -- ein Anmeldelink, den man im
   Telefonmenue nicht findet, waere der schlechtere Fehler. */
.hp-navlink-signin { display: none; }

.hp-signin {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--g2); text-decoration: none;
}
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper); padding: 12px 26px; text-decoration: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--paper); cursor: pointer; min-height: 44px;
}
.hp-btn:hover { background: var(--paper); color: var(--ink); }
.hp-btn-sm { padding: 8px 18px; font-size: 12px; min-height: 38px; }
.hp-quiet {
  font-family: var(--mono); font-size: 13px; color: var(--g2); text-decoration: none;
  /* Same reasoning as the brand: it sits beside the hero button (min-height 44), so matching that
     height aligns it and makes it a real tap target instead of a 20px sliver. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.hp-quiet:hover { color: var(--paper); }

/* The overflow menu: same checkbox mechanism the other pages use, so it needs no script and cannot
   be broken by a Content-Security-Policy. */
.hp-nav .hp-menu-cb {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  appearance: none; -webkit-appearance: none;
  width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; margin: 0;
  opacity: 0; pointer-events: none;
}
.hp-menu-btn {
  display: none; order: 1; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--dash);
  color: var(--g1); cursor: pointer; background: transparent;
}
.hp-menu-btn svg { width: 18px; height: 18px; display: block; }
.hp-menu-cb:focus-visible + .hp-menu-btn { outline: 2px solid var(--paper); outline-offset: 2px; }
.hp-menu-btn .hp-x { display: none; }
.hp-menu-cb:checked + .hp-menu-btn .hp-x { display: block; }
.hp-menu-cb:checked + .hp-menu-btn .hp-bars { display: none; }

/* ---------- hero ---------- */
.hp-hero { padding: clamp(64px, 10vw, 130px) var(--pad) clamp(44px, 6vw, 80px); }
.hp-hero .hp-lede { margin-top: 24px; }
.hp-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; }

/* ---------- the chat figure (an ordinary exchange, no commands) ---------- */
.hp-chat { padding: 20px 18px; font-size: clamp(12px, 1.5vw, 13.5px); }
.hp-turn { margin: 0 0 14px; }
.hp-turn:last-child { margin-bottom: 0; }
.hp-who { font-family: var(--mono); color: var(--g3); }
.hp-said { color: var(--paper); }
.hp-file {
  font-family: var(--mono); border-bottom: 1px solid rgba(255, 255, 255, .5); color: var(--paper);
}

/* ---------- the terminal figure ---------- */
.hp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.hp-tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; min-height: 38px; cursor: pointer;
  border: 1px dashed var(--dash); background: transparent; color: var(--g2);
}
.hp-tab[aria-selected="true"] { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); }
.hp-termhead {
  display: flex; gap: 8px; align-items: center; padding: 11px 18px;
  border-bottom: 1px dashed var(--dash); font-family: var(--mono); font-size: 11.5px; color: var(--g2);
}
.hp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); flex: none; }
.hp-termhead .hp-host { margin-left: auto; color: var(--g3); }
.hp-term {
  padding: 22px 18px 26px; font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.75;
  min-height: 260px; overflow-x: auto;
}
.hp-line { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.hp-line.hp-cost { border-top: 1px dashed var(--rule); margin-top: 10px; padding-top: 8px; }
.hp-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--paper); vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .hp-caret { animation: hp-blink 1.1s step-end infinite; }
}
@keyframes hp-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- two-column sheets ---------- */
.hp-two {
  max-width: var(--sheet); margin-inline: auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.hp-list { list-style: none; margin: 0; padding: 0; }
.hp-list li { border-top: 1px dashed var(--rule); padding: 16px 0; }
.hp-list li:last-child { border-bottom: 1px dashed var(--rule); }
.hp-name { font-family: var(--mono); font-size: 13px; color: var(--paper); }
.hp-provider { font-family: var(--mono); font-size: 11.5px; color: var(--g3); }
.hp-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }

/* things that finish */
/* Hairlines are drawn BY THE CARDS, not by a gap showing the container's background through.
   The gap trick is the usual way to do this and it is wrong the moment the last row is short: five
   cards in a four-column grid leave three empty cells, and those cells painted the container colour
   as a solid grey slab beside the final card — it read as a broken panel, not as empty space.
   box-shadow draws the rules without occupying layout, so it lands on the neighbouring pixel and
   overlaps the container border at the edges instead of doubling it, and an empty cell paints
   nothing at all. */
.hp-cards {
  max-width: var(--sheet); margin-inline: auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0; background: var(--ink); border: 1px solid var(--rule-soft);
}
.hp-card {
  background: var(--ink); padding: 26px 22px;
  box-shadow: 1px 0 0 var(--rule-soft), 0 1px 0 var(--rule-soft);
}
.hp-card h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.hp-card p { margin: 0; color: var(--g1); font-size: 14.5px; }

/* ---------- close + foot ---------- */
.hp-close { padding: clamp(64px, 10vw, 130px) var(--pad); border-top: 1px solid var(--rule); text-align: left; }
.hp-close h2 { max-width: 22ch; font-size: clamp(26px, 4.6vw, 50px); }
.hp-foot {
  padding: 26px var(--pad) 60px; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--g3);
}
.hp-foot a { color: var(--g2); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.hp-foot a:hover { color: var(--paper); }
.hp-foot-links { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
/* The language you are reading. Marked with aria-current="page" as well, so it is not colour alone
   telling you which of the two you are on. */
.hp-foot-links .hp-cur { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reveal ---------- */
/* Set by home.js only when the browser can animate and motion is welcome, so nothing is ever left
   invisible by a script that failed to run. */
/* Only hidden when a script is present to un-hide it — see /js/hp-head.js. Without the guard a
   failed script leaves a page of invisible sections and nothing to explain it. */
.hp-js .hp-reveal { opacity: 0; }
.hp-js .hp-reveal.hp-x { transform: translateX(-26px); }
.hp-js .hp-reveal.hp-y { transform: translateY(18px); }
.hp-js .hp-reveal.hp-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .hp-js .hp-reveal,
  .hp-js .hp-reveal.hp-x,
  .hp-js .hp-reveal.hp-y { opacity: 1; transform: none; transition: none; }
}

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .hp-navlinks { display: none; }
  .hp-menu-btn { display: inline-flex; }
  .hp-signin { display: none; }
  .hp-navlink-signin { display: block; }
  /* Opened, the same link list becomes a panel under the bar — every link stays in the DOM at
     every width, so none is unreachable on a phone and none is hidden from a crawler. */
  .hp-menu-cb:checked ~ .hp-navlinks {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--ink); border-bottom: 1px solid var(--rule);
    padding: 6px var(--pad) 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .hp-menu-cb:checked ~ .hp-navlinks a {
    padding: 14px 0; font-size: 14px; border-bottom: 1px dashed var(--rule-soft);
  }
  .hp-menu-cb:checked ~ .hp-navlinks a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  .hp-nav { gap: 12px; }
  .hp-btn { padding: 10px 16px; font-size: 12px; }
  .hp-term { padding: 18px 14px 22px; }
}


/* ---------- Druck ----------
   §ZL-0049 Ein Browser druckt Hintergrundfarben standardmaessig NICHT, behaelt aber die
   Vordergrundfarbe. Auf einer dunklen Seite heisst das hellgrau auf weiss: lesbar auf dem
   Bildschirm, leer auf dem Papier. Gedruckt werden hier vor allem Rechtstexte und Preise, also
   genau die Seiten, bei denen ein leeres Blatt am meisten kostet.

   Die Farben werden umgekehrt statt erzwungen. `print-color-adjust: exact` waere die andere
   Loesung und verbraucht eine Tonerpatrone je Seite. Bedienelemente, die auf Papier nichts tun
   koennen, fallen weg, und Verweise bekommen ihre Adresse dahinter -- ein "siehe hier" ohne
   Adresse ist gedruckt wertlos. */
@media print {
  :root, .hp, body {
    --ink: #ffffff; --paper: #111111;
    --g1: #333333; --g2: #444444; --g3: #555555;
    --rule: rgba(0, 0, 0, .35); --rule-soft: rgba(0, 0, 0, .18);
    --panel: #f4f4f2;
    background: #fff !important; color: #111 !important;
  }
  .hp-nav, .hp-skip, .hp-menu-btn, .hp-menu-cb, .hp-navcta, .hp-foot-cta { display: none !important; }
  /* Der Stempel bleibt: ein Ausdruck ohne ihn behauptet einen Betrieb, den es nicht gibt. */
  .hp-stamp { display: block !important; border-bottom: 1px solid #999; color: #111 !important; }
  .hp-sec, .hp-hero { break-inside: avoid; padding-top: 18px; padding-bottom: 18px; }
  a { color: #111 !important; text-decoration: underline; }
  /* Die Adresse hinter den Verweis, aber nur bei echten Zielen: ein Sprungziel auf derselben
     Seite als "(#preise)" auszudrucken ist Laerm. */
  main a[href^="http"]::after,
  main a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .82em; color: #444; }
  h1, h2, h3 { break-after: avoid; }
  table, figure, pre { break-inside: avoid; }
}