/* Was Startseite und Unterseiten teilen: Schrift, Palette, Satz, Knopf,
   Fusszeile. Steht einmal hier, damit die Unterseiten nicht mit einer
   zweiten Palette auseinanderlaufen (Regel 2). Die Buehne der Startseite
   liest die Farben weiter per `getComputedStyle` von :root. */

/* Die Schrift kommt aus derselben Sippe wie die Wortmarke (Archivo Black).
   Eine einzige Familie ueber die ganze Seite ist die Entscheidung, die am
   staerksten darueber entscheidet, ob eine Seite teuer wirkt -- teurer als
   jede Animation. `font-display: swap` und eine Systemkette daneben, damit
   die erste Zeile nicht auf 34 KB wartet. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Die Palette steht hier und nur hier. Die Buehne liest dieselben Werte per
   `getComputedStyle` -- eine zweite Farbtabelle in JavaScript waere genau
   die Drift, gegen die Regel 2 steht, und bei Farbe sieht man sie sofort. */
:root {
  --paper: #00020a;        /* der Grund des Films, gemessen */
  --paper-2: #060a14;      /* ein Hauch heller: Felder, Leisten */
  --ink: #ece7dd;          /* die Farbe der Buchstaben in der Wortmarke */
  --muted: #8c93a2;        /* Fliesstext: 6.6:1 auf dem Grund */
  --faint: #6f7789;        /* Beschriftung: 4.5:1, die Untergrenze */
  --rule: rgba(236, 231, 221, 0.13);
  --rule-2: rgba(236, 231, 221, 0.07);
  --accent: #d9a441;       /* Messing, sparsam: Ziffern, Achsen, ein Strich */
  /* Nur fuer die Szene. Der Plan kommt als weisses Blatt mit schwarzer
     Tusche (Auftraggeber, 22.09.2026: der Werkplan des Herstellers), und
     sobald die Waende steigen, dunkelt es zu `--sheet` ab -- der Grund, auf
     dem das Modell steht. Hell ist der Bildschirm also nur, solange das
     Blatt ein Blatt ist. */
  --blank: #f4f1ea;
  --line: #1b1e26;
  --brass: #8a6a2c;
  --sheet: #1b2333;
  --wall: #e9e3d7;
  --sun: #ffc98a;
  --sky: #4a5e80;
  --bounce: #141a26;
  --font: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vh: 100svh;
  /* Ein Mass fuer den Seitenrand, das von 20 px auf dem Telefon bis 80 px
     auf dem Schreibtisch laeuft -- und nur eines, damit nichts auseinander
     laeuft. */
  --rand: clamp(1.25rem, 5.5vw, 5rem);
  /* Der Blauverlauf der Marke: oben ihr Nachtschwarz, unten ihr Boden.
     Startseite (#grund) und Unterseiten (body.mit-leiste::before) lesen
     denselben Wert. */
  --verlauf:
    radial-gradient(90% 55% at 22% 108%, rgba(0, 42, 76, 0.55), transparent 70%),
    linear-gradient(to bottom, #00020a 0%, #00040e 48%, #000c1d 74%, #001428 100%);
}

/* Unterseiten stehen auf dem Verlauf. Als festes Pseudo-Element und nicht
   als `background-attachment: fixed`, das iOS Safari ignoriert -- dort
   zoege sich der Verlauf ueber die ganze Seitenhoehe. Unten ist der Grund
   heller (#00203c am hellsten Punkt), `--faint` haette dort nur 3.7:1;
   #808899 haelt 4.6:1 ueberall. */
body.mit-leiste { --faint: #808899; }
body.mit-leiste::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--verlauf);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* -------------------------------------------------------------- Bahnen */

.bahn { width: min(100% - 2 * var(--rand), 1180px); margin-inline: auto; }
.schmal { max-width: 46rem; }
section { position: relative; }
.block { padding-block: clamp(4.5rem, 11vh, 10rem); }

h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(2.7rem, 7.6vw, 6.4rem);
  letter-spacing: -0.04em; line-height: 0.94;
}
h2 { font-size: clamp(1.85rem, 4.4vw, 3.3rem); letter-spacing: -0.032em; line-height: 1.04; }
h3 { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.3; }
p {
  font-size: clamp(1.0125rem, 0.42vw + 0.92rem, 1.1875rem);
  line-height: 1.64; color: var(--muted); margin: 0;
  text-wrap: pretty;
}
p + p { margin-top: 0.85em; }
strong { color: var(--ink); font-weight: 600; }
a { color: inherit; }

.marke {
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 0.8rem;
  margin: 0 0 1.4rem;
}
.marke::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.marke.kurz::after { display: none; }

.knopf {
  display: inline-block; margin-top: 2.2rem; padding: 0.95rem 1.7rem;
  border: 1px solid var(--accent); border-radius: 2rem; color: var(--ink);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.knopf:hover { background: var(--accent); color: var(--paper); }

.fuss-zeile { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { color: var(--ink); }
.fuss {
  border-top: 1px solid var(--rule-2); padding-block: 2.6rem 3.4rem;
  font-size: 0.75rem; color: var(--faint);
}

/* -------------------------------------------------------------- Leiste */

/* Die Kopfleiste (Auftraggeber, 29.09.2026: "unauffaellig, aber
   auffindbar", auf jeder Seite). Duenn, gedaempfte Versalien, keine
   Flaeche -- nur ein Verlauf, damit die Schrift ueber hellem Grund lesbar
   bleibt. Auf der Startseite kommt sie mit dem letzten Glanzlicht der
   Wortmarke von links nach rechts herein (index.html setzt `.an`); auf den
   Unterseiten steht `.an` schon im Markup. */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3rem;
  display: flex; align-items: center; pointer-events: none;
  background: linear-gradient(rgba(0, 2, 10, 0.62), rgba(0, 2, 10, 0));
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1s cubic-bezier(0.45, 0, 0.25, 1), mask-position 1s cubic-bezier(0.45, 0, 0.25, 1);
}
.leiste.an { -webkit-mask-position: 0 0; mask-position: 0 0; }
.leiste .bahn { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.leiste a {
  pointer-events: auto; color: var(--faint); text-decoration: none;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding-block: 0.6rem; transition: color 0.2s;
}
.leiste a:hover, .leiste a:focus-visible, .leiste a[aria-current="page"] { color: var(--ink); }
.leiste .heim { color: var(--muted); font-weight: 700; letter-spacing: 0.16em; }
.leiste nav { display: flex; gap: clamp(1.1rem, 2.6vw, 2.2rem); }
/* Unterseiten: die Leiste liegt ueber dem Inhalt, der Inhalt ruecksichtsvoll darunter. */
.mit-leiste { padding-top: 3rem; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

/* -------------------------------------------------------------- Recht */

/* Impressum und Datenschutz. Der Text kommt von der IT-Recht Kanzlei
   (legal/README.md) und wird nicht umformuliert; hier steht nur, wie er
   gesetzt wird: eine schmale Spalte fuer langen Text, Ueberschriften eine
   Stufe kleiner als auf den anderen Seiten, Links unterstrichen, weil sie
   im Fliesstext stehen. Eigene Ergaenzungen stehen abgesetzt darunter
   (`.recht-zusatz`), damit klar bleibt, was von der Kanzlei kommt. */
.recht { max-width: 46rem; padding-block: 0 clamp(2rem, 5vh, 3.5rem); }
.recht h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; margin: 2.6rem 0 0.9rem; }
.recht h3 { margin: 1.8rem 0 0.6rem; }
.recht p:not(.marke), .recht li { font-size: 1rem; line-height: 1.7; }
.recht ul, .recht ol { color: var(--muted); padding-left: 1.2rem; margin: 0.8rem 0; }
.recht li + li { margin-top: 0.35rem; }
.recht a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.recht a:hover { text-decoration-color: var(--accent); }
.recht-offen {
  border: 1px dashed var(--rule); border-radius: 0.6rem; padding: 1.4rem 1.6rem;
  font-size: 0.9375rem;
}
.recht-zusatz { margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.recht-zusatz .marke { margin-bottom: 1rem; }

/* Ausgedruckt ist ein Rechtstext schwarz auf weiss, ohne Leiste und Verlauf. */
@media print {
  body, body.mit-leiste { background: #fff; color: #000; padding-top: 0; }
  body.mit-leiste::before, .leiste, .fuss nav { display: none; }
  p, li, .recht ul, .recht ol, .fuss, .marke { color: #000; }
  .recht a { color: #000; }
}