/* Die Grundlage, die jede Seite von Sort Type Lab lädt: Schriften, Farbwerte,
   Grundgerüst, Kopf- und Fußzeile und die Textseiten (Support, Datenschutz,
   Impressum, Kaufen, Download).

   Was nur auf der Startseite vorkommt, steht in assets/home.css und wird auch
   nur dort geladen. Vorher stand beides hier, und die Textseiten haben das
   ganze Startseiten-Stylesheet mitgeladen, ohne eine Zeile davon zu benutzen.

   Bewusst OHNE externe Schriften: Die Überschriften laufen in den eigenen
   Rasterschriften aus assets/fonts/, der Fließtext im Systemstack. Damit lädt
   keine dieser Seiten etwas von einem fremden Server nach. Das macht die Zusage
   in Abschnitt 3.2 der Datenschutzerklärung erst wahr. */

/* ================= Schriften =================

   Alle Dateien sind WOFF, bis auf NN-F01. Das muss in format() auch so
   dastehen: Die Angabe ist für den Browser die Zusage, was ihn unter der
   Adresse erwartet, und bei „woff2" für eine WOFF-Datei darf er die Schrift
   verwerfen, ohne sie überhaupt anzusehen. */

@font-face{
  font-family:"NN-F01";
  src:url("fonts/nn-f01.woff2") format("woff2"),
      url("fonts/nn-f01.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  /* Diese Schrift hat wirklich nur Großbuchstaben und Umlaute. Ziffern und
     Zeichensetzung fallen durch. */
  unicode-range:U+0020, U+0041-005A, U+0061-007A, U+00C4, U+00D6, U+00DC, U+00E4, U+00F6, U+00FC;
}

/* Die beiden nächsten trugen denselben unicode-range wie NN-F01, aus Versehen
   mitkopiert. Sie bringen aber Ziffern und Zeichensetzung mit, und der Bereich
   hat genau die ausgesperrt: Der Punkt hinter „YOU DRAW THE ALPHABET." lief in
   der Rückfallschrift des Browsers. Ohne die Zeile setzt ihn die Schrift. */

@font-face{
  font-family:"STL-WWW";
  src:url("fonts/stl-www.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"STL-Classic";
  src:url("fonts/stl-classic.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Die drei variablen Schnitte standen als base64 im Stylesheet, zusammen gut
   22 kB, die es aufgebläht haben, obwohl das Stylesheet beim Seitenaufbau als
   Erstes gebraucht wird und so lange nichts erscheint. Als Datei lädt der
   Browser sie nebenher und nur, wenn eine Seite sie auch benutzt. */

@font-face{
  font-family:"STL-Dots";
  src:url("fonts/stl-dots.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"STL-LAB";
  src:url("fonts/stl-lab.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"STL-BB";
  src:url("fonts/stl-bb.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ================= Werte ================= */

:root{
  --blue:#0900ff;
  --light:#fbfbfb;
  --pill:#ececee;
  --ink:#101010;
  --ink-soft:#5b5b60;
  --ink-faint:#8e8e95;
  --rule:#e4e4e8;
  --topbar-h:52px;
  --measure:34rem;
  /* der seitliche Rand, an dem sich alles ausrichtet */
  --gutter:clamp(20px,4vw,64px);
}

/* ================= Grundgerüst ================= */

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--light);
  color:var(--ink);
  font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* damit ein Sprunganker nicht unter der fixierten Kopfzeile klebt */
[id]{scroll-margin-top:calc(var(--topbar-h) + 16px);}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

/* ================= Kopfzeile (alle Seiten) =================

   Durchsichtig und fest oben. Auf der Startseite fährt das Skript die Farbe
   von Weiß auf Tinte, während das Blau darunter weglüftet; auf den Textseiten
   bleibt es bei der Tinte aus dieser Regel. */

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:var(--topbar-h);
  padding:0 var(--gutter);
  color:var(--ink);
  background:transparent;
}
.topbar .brand,
.topbar .download{color:inherit;}
.topbar .brand{
  font-family:"STL-LAB",sans-serif;
  font-size:clamp(13px,1.8vw,38px);
  letter-spacing:.02em;
}
.topbar .download{
  font-family:"NN-F01",sans-serif;
  font-size:clamp(15px,2.6vw,34px);
  letter-spacing:.03em;
  text-decoration:none;
}

/* ================= Textseiten ================= */

.doc{
  padding-top:calc(var(--topbar-h) + clamp(40px,7vh,80px));
  padding-bottom:clamp(48px,8vh,96px);
  padding-inline:var(--gutter);
}

.doc-inner{
  max-width:var(--measure);
  margin:0 auto;
}

.doc .back{
  display:inline-block;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-decoration:none;
  margin-bottom:clamp(20px,3vh,32px);
}
.doc .back:hover{color:var(--blue);}

.doc h1{
  font-family:"NN-F01","Archivo Black",sans-serif;
  font-weight:400;
  font-size:clamp(30px,5.2vw,52px);
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:clamp(20px,3vh,30px);
}

.doc h2{
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.3;
  text-wrap:balance;
  letter-spacing:-.01em;
  margin:2.25rem 0 .6rem;
}

.doc h3{
  font-size:.9375rem;
  font-weight:600;
  line-height:1.35;
  text-wrap:balance;
  margin:1.75rem 0 .4rem;
}

.doc p,
.doc ul,
.doc ol{
  font-size:1rem;
  line-height:1.65;
  margin:0 0 1.1rem;
}

.doc ul,
.doc ol{padding-left:1.2em;}
.doc li{margin-bottom:.35em;}
.doc li::marker{color:var(--ink-faint);}

.doc a{
  color:var(--blue);
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
}
.doc a:hover{text-decoration-thickness:2px;}

.doc strong{font-weight:600;}

.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;
  background:var(--pill);
  padding:.1em .35em;
  border-radius:4px;
}

.doc hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:3rem 0;
}

.lede{
  font-size:1.125rem;
  line-height:1.55;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* Anschriften: hier trägt der Zeilenumbruch Bedeutung */
.address{
  font-style:normal;
  line-height:1.5;
  margin:0 0 1.1rem;
}

.note{
  border-left:2px solid var(--blue);
  padding-left:1rem;
  color:var(--ink-soft);
  font-size:.9375rem;
  margin:0 0 1.1rem;
}

.langbar{
  display:flex;
  gap:1.25rem;
  font-size:.875rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:1.75rem;
}

/* ================= Fußzeile (alle Seiten) ================= */

.site-footer{
  border-top:1px solid var(--rule);
  padding:clamp(24px,4vh,40px) var(--gutter) clamp(32px,5vh,56px);
  font-size:.875rem;
  color:var(--ink-faint);
  background:var(--light);
  position:relative;
  z-index:1;
}

.site-footer .inner{
  max-width:1154px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
}

.site-footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.25rem;
}

.site-footer a{
  color:var(--ink-soft);
  text-decoration:none;
}
.site-footer a:hover{color:var(--blue);text-decoration:underline;}

.site-footer p{margin:0;}

/* Die Profile stehen bei der Urheberzeile, nicht im Seitenmenü: Das eine führt
   durch diese Website, das andere von ihr weg. Bewusst schlichte Links und
   keine eingebetteten Beiträge — ein Instagram- oder Bluesky-Widget lädt beim
   Seitenaufruf Skripte des Anbieters und schickt ihm die IP-Adresse jedes
   Besuchers, bevor der irgendetwas angeklickt hat. Abschnitt 3.2 der
   Datenschutzerklärung verspricht, dass genau das nicht passiert. */
.site-footer .footer-end{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.25rem;
  align-items:baseline;
}

/* Apples App-Store-Badge. Apple verlangt mindestens 40 Pixel Höhe, einen
   Freiraum von einem Viertel der Höhe rundherum und keine Veränderung an der
   Grafik — keine Tönung, kein Schatten, keine Unterstreichung des Verweises. */
.store-badge{
  display:inline-block;
  padding:12px;
  margin:-12px;
  line-height:0;
  text-decoration:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
/* Safari zeigte über Teilen des Bildes den Textcursor statt der Hand. Ohne
   Treffer auf dem Bild selbst landet die Maus immer auf dem Verweis. */
.store-badge img{
  display:block;
  width:auto;
  height:48px;
  pointer-events:none;
}