/* ============================================================
   [s:ystribution] — Designsystem „Archiv"
   Für Spactral wird ausschliesslich der Marken-Block getauscht.
   ============================================================ */

/* ---- Schrift --------------------------------------------------
   Eine Schrift für alles: Inter, Variable Font, SIL Open Font License.
   Selbst gehostet — kein Google-Fonts-CDN, das die Besucher-IP in die
   USA überträgt. Lizenztext liegt in assets/fonts.

   Zwei Achsen tragen die gesamte Hierarchie:
     wght 100–900  Gewicht
     opsz 14–32    optische Größe. Über font-optical-sizing:auto schaltet
                   der Browser bei großen Graden auf den Display-Schnitt:
                   engere Weißräume, feinere Details. Genau dafür braucht
                   ein Ein-Schrift-System sonst eine zweite Schrift.
   latin-ext lädt nur nach, wenn ein Zeichen daraus vorkommt.
   --------------------------------------------------------------- */
@font-face{font-family:"Inter";src:url("assets/fonts/inter-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---- Marke: austauschbar ------------------------------- */
  --gold:#9d7f3d;        /* Grafik: Linien, Punkte, Wortmarke */
  --gold-text:#846a30;   /* Schrift: 5,01:1 auf Papier. #9d7f3d schafft
                            als Text nur 3,69:1 und faellt unter WCAG AA. */
  --gold-soft:#b9995a;

  /* ---- Flächen und Schrift ------------------------------- */
  --bg:#fcfcfb;
  --bg-2:#efeeea;
  --ink:#0f0f0e;
  --ink-2:#6e6b64;
  /* --ink-3 entfernt: 2,94:1 gegen Papier, unter der WCAG-Schwelle. */
  --rule:#dcd9d1;

  /* Eine Familie. Die Fallbacks greifen nur, solange die Webfont laedt. */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--sans);   /* Altlast-Alias, damit nichts still auf Times faellt */

  /* ---- Typo-Skala ----------------------------------------
     Fuenf Grade auf einem festen Verhaeltnis von 1,235 —
     11 · 14 · 17 · 21 · 26 px. Keine freien Zwischenwerte.
     Die Schlagzeile steht bewusst ausserhalb der Skala: ein
     Display-Grad folgt keinem Textverhaeltnis, er setzt eines.

       --t-mark   11   gesperrte Versalien. Registerlasche, kein Satz.
       --t-small  14   Material zum Ueberfliegen: Aufzaehlungen,
                       Tabellenwerte, Kurzzeilen unter einem Titel, Fuss.
       --t-base   17   Text, den man liest. Jeder Absatz.
       --t-lead   21   Deck unter der Schlagzeile und Titel dritter Ebene.
       --t-h2     26–32 jede Unterueberschrift, gleich welcher Ebene.
       --t-h1     43–84 die eine Schlagzeile der Seite.

     Die Trennlinie zwischen 17 und 14 ist eine inhaltliche, keine
     gestalterische: gelesen oder ueberflogen. Danach richtet sich
     auch die Farbe — Gelesenes steht dunkel, Ueberflogenes zurueck.
     -------------------------------------------------------- */
  --t-mark:.6875rem;
  --t-small:.875rem;
  --t-base:1.0625rem;
  --t-lead:1.3125rem;
  --t-h2:clamp(1.625rem,2.5vw,2rem);
  --t-h1:clamp(2.7rem,7.2vw,5.25rem);

  /* ---- Zeilenabstaende -----------------------------------
     Je kleiner der Grad, desto kuerzer die Zeile, desto weniger
     Durchschuss braucht sie. */
  --lh-body:1.7;    /* 17 Fliesstext */
  --lh-scan:1.55;   /* 14 Unterpunkt-Texte, Aufzaehlungen, Tabellen */
  --lh-lead:1.5;    /* 21 Deck */
  --lh-head:1.14;   /* Ueberschriften */

  /* ---- Laufweiten ---------------------------------------- */
  --track-label:.24em;  /* Abschnittsmarken */
  --track-micro:.16em;  /* alle uebrigen Versalien */
  --track-nav:.16em;

  /* ---- Vertikalraster ------------------------------------ */
  --s-0:.25rem;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem;  --s-6:4rem; --s-7:6rem;   --s-8:8rem;

  --measure:62ch;
  --max:1220px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;font-synthesis:none;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s-5)}
@media(max-width:900px){.wrap{padding:0 var(--s-3)}}

.label{
  font-size:var(--t-mark);letter-spacing:var(--track-label);text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
}

/* ---------------- Kopf ---------------- */
/* Padding hier ausgeschrieben: sonst ueberschreibt .bar das .wrap-Padding
   und die Kopfzeile faellt aus der Vertikalachse des Inhalts. */
header .bar{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5)}
header img{height:17px;width:auto}
nav a{color:var(--ink-2);font-size:var(--t-mark);letter-spacing:var(--track-nav);text-transform:uppercase;margin-left:var(--s-3)}
nav a:hover{color:var(--ink)}
@media(max-width:900px){header .bar{padding:var(--s-4) var(--s-3)}nav{display:none}}

/* ---------------- Raster ---------------- */
section{padding:var(--s-6) 0}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-3)}
.c-label{grid-column:1/3}
.c-main{grid-column:3/10}
.c-wide{grid-column:3/13}
.c-label .label{position:sticky;top:var(--s-4)}
/* Auszeichnungsebene: dieselbe Schrift, Display-Schnitt ueber opsz.
   Grosse Grade brauchen negative Laufweite, sonst zerfaellt die Zeile. */
/* Abschnittskopf und Unterueberschrift teilen den Grad. Der Vorrang
   entsteht ueber das Gewicht: 500 gegen 400. */
h2{font-size:var(--t-h2);font-weight:500;letter-spacing:-.022em;line-height:var(--lh-head);max-width:24ch;margin-bottom:var(--s-3)}
.body{color:#3d3b36;max-width:var(--measure);font-weight:380}
.body + .body{margin-top:var(--s-2)}
.body b{font-weight:500;color:var(--ink)}
@media(max-width:900px){
  .c-label,.c-main,.c-wide{grid-column:1/13}
  .c-label .label{position:static;display:block;margin-bottom:var(--s-2)}
  section{padding:var(--s-5) 0}
}

/* ---------------- Tabellen ---------------- */
.facts{border-collapse:collapse;width:100%;font-size:var(--t-small);line-height:var(--lh-scan)}
.facts th,.facts td{text-align:left;padding:var(--s-2) 0;vertical-align:top;font-weight:400}
.facts th{color:var(--ink-2);border-bottom:1px solid var(--rule);width:15rem}
.facts td{border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media(max-width:760px){
  .facts th{width:auto;border:0;padding-bottom:0;padding-top:var(--s-2)}
  .facts th,.facts td{display:block}
}

.note{background:var(--bg-2);padding:var(--s-3);margin-top:var(--s-3);font-size:var(--t-small);line-height:var(--lh-scan);color:#4a4741;max-width:var(--measure)}
.todo{background:rgba(157,127,61,.14);border:1px dashed var(--gold);border-radius:2px;padding:1px 8px;color:var(--gold-text);font-size:var(--t-small)}
.mailto{border-bottom:1px solid var(--ink);padding-bottom:1px}

/* ---------------- Fuss ---------------- */
footer{border-top:1px solid var(--ink);padding:var(--s-3) 0 var(--s-6);font-size:var(--t-small);line-height:var(--lh-scan);color:var(--ink-2);margin-top:var(--s-4)}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2)}
.fbar a:hover{color:var(--ink)}
.fbar span a{margin-left:var(--s-3)}

/* ---------------- Rechtstexte ---------------- */
.doc{max-width:780px;margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-7)}
/* Der Display-Grad skaliert mit der Spalte, nicht mit dem Fenster.
   Die Rechtstexte stehen in 780 px — 84 px Schlagzeile traegt diese
   Spalte nicht. Gleiche Rolle, gleiche Zeichnung, kleinerer Rahmen. */
.doc h1{font-size:clamp(2.2rem,5.2vw,3.25rem);font-weight:400;letter-spacing:-.03em;line-height:1.04}
.doc .sub{color:var(--ink-2);margin-top:var(--s-2);font-size:var(--t-base);max-width:52ch}
.doc h2{font-size:var(--t-mark);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-text);font-weight:600;margin:var(--s-5) 0 var(--s-2);max-width:none}
.doc h3{font-size:var(--t-lead);font-weight:500;letter-spacing:-.012em;margin:var(--s-4) 0 var(--s-1)}
.doc p{margin-bottom:var(--s-2);color:#3d3b36;font-weight:380}
.doc ul{margin:0 0 var(--s-2) 1.1rem}
.doc li{margin-bottom:var(--s-1);color:#3d3b36;font-weight:380}
.doc strong{font-weight:500;color:var(--ink)}
.hint{border-left:1px solid var(--rule);padding-left:var(--s-2);color:var(--ink-2);font-size:var(--t-small);line-height:var(--lh-scan)}
.stand{margin-top:var(--s-5);color:var(--ink-2);font-size:var(--t-small)}
@media(max-width:900px){.doc{padding:var(--s-5) var(--s-3) var(--s-6)}}