/* ======================================================================
   Basis — Reset, Typografie, Buttons
   ----------------------------------------------------------------------
   Eigener Nachbau. Die Werte stammen aus der Messung: in die gerenderte
   Seite eingesetzte Testelemente, deren berechnete Stile ausgelesen
   wurden (siehe tools/fingerprint.js).

   Grundmaß der Seite: 17px Schrift auf 25px Zeile. Die Zeilenhöhe steht
   bewusst als Verhältnis (25/17) und nicht als Pixelwert — nur so
   rechnen Überschriften ihre eigene Zeile korrekt aus, statt die 25px
   des Fließtextes zu erben.

   Die Laufweite -0.022em wirkt auf den ersten Blick winzig, macht aber
   den Unterschied zwischen "Systemschrift" und dem ruhigen Satzbild,
   das die ganze Seite trägt.
   ====================================================================== */

:root {
  --pf-schrift-text: -apple-system, "system-ui", "SF Pro Text", Geist,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pf-schrift-display: -apple-system, "system-ui", "SF Pro Display", Geist,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pf-farbe-text: #1d1d1f;
  --pf-farbe-link: #06c;
  --pf-farbe-aktion: #0071e3;

  /* Grundwerte, die die noch nicht ersetzten Stylesheets abfragen.
     Sie stehen hier, weil sie zum Fundament gehoeren und nicht zu
     einem einzelnen Baustein — die Namen bleiben vorerst, damit die
     verbliebenen Dateien sie finden. Wandern spaeter auf pf-*, wenn
     auch der letzte Abnehmer ersetzt ist.

     Die vier Abstandswerte am Ende sind dieselben, die oben in der
     Abstandsmatrix stehen — hier als Wert, dort als Regel. */
  --pf-sk-body-background-color: #fff;
  --pf-sk-body-text-color: var(--pf-farbe-text);
  --pf-sk-body-link-color: var(--pf-farbe-link);
  --pf-sk-headline-text-color: var(--pf-farbe-text);
  --pf-sk-fill: #fff;
  --pf-sk-fill-tertiary: #f5f5f7;
  --pf-sk-focus-color: var(--pf-farbe-aktion);
  --pf-sk-focus-offset: 1px;
  --pf-sk-focus-offset-container: 3px;
  --pf-sk-link-disabled-opacity: 0.42;
  --pf-sk-footnote-font-size: 0.6em;
  --pf-sk-footnote-offset-top: -0.5em;
  --pf-sk-headline-plus-headline-margin: 0.4em;
  --pf-sk-headline-plus-first-element-margin: 0.8em;
  --pf-sk-paragraph-plus-element-margin: 0.8em;
  --pf-sk-paragraph-plus-headline-margin: 1.6em;

  /* Schreibrichtung: die Seite ist links-nach-rechts. Die Werte
     stehen als Variablen, weil fremde Regeln damit rechnen. */
  --pf-sk-start: left;
  --pf-sk-end: right;
  --pf-sk-logical-factor: 1;
  --pf-sk-safe-area-inset-start: 0px;
  --pf-sk-safe-area-inset-end: 0px;
}

html {
  font-family: var(--pf-schrift-text);
  font-size: 17px;
  /* Verhindert, dass iOS im Querformat die Schrift eigenmächtig
     hochskaliert und das ganze Raster verrutscht. */
  -webkit-text-size-adjust: 100%;
}

/* Der Reset: nur Außen- und Innenabstände. Alles Weitere kommt aus
   den Regeln darunter — ein pauschales *{} würde mehr kaputtmachen
   als es aufräumt. */
body,
button,
form,
h1,
h2,
h3,
input,
li,
ol,
p,
ul {
  margin: 0;
  padding: 0;
}
/* Knöpfe rechnen wie alles andere auch: die angegebene Breite meint
   den Inhalt, Innenabstand kommt obendrauf. Browser stellen Knöpfe
   von sich aus auf border-box um. */
button {
  box-sizing: content-box;
}

/* Knöpfe und Eingabefelder erben die Schrift NICHT vom Dokument —
   sie holen sie sich vom Betriebssystem. Deshalb stehen sie hier
   mit im Selektor. */
body,
button,
input {
  font-family: var(--pf-schrift-text);
  font-size: 17px;
  line-height: 1.47059;
  color: var(--pf-farbe-text);
}

body {
  min-width: 320px;
  background: #fff;
  font-weight: 400;
  /* Bewusst nur hier und nicht in der Regel darueber: Knoepfe sollen
     die enge Laufweite NICHT erben, sonst ruecken auch die Symbole
     darin zusammen. */
  letter-spacing: -0.022em;
  /* Keine gerechneten Schnitte: fehlt ein Fett oder Kursiv, soll die
     Schrift lieber normal bleiben als verzerrt zu werden. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* clip statt hidden: schneidet seitliches Überstehen ab, ohne den
   Block zu einem Scrollcontainer zu machen (das bräche das Sticky-
   Verhalten der Bereichsleiste). */
/* Nur die Textseiten: Bezugspunkt fuer absolut liegende Elemente und
   seitliches Abschneiden. clip statt hidden — das macht den Block
   nicht zum Scrollcontainer und bricht damit kein Sticky darin.
   Die Kachel- und Artikelseiten regeln ihren Ueberlauf selbst. */
.pf-page-prose main {
  position: relative;
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-weight: 600;
}

/* Listen tragen ihren Einzug als Außenabstand, nicht als Innenabstand —
   der Reset oben hat das padding entfernt. */
ol,
ul {
  margin-left: 20px;
}
ul ul,
ol ol {
  margin-left: 20px;
}

a {
  color: var(--pf-farbe-link);
  text-decoration: underline;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

/* Abstände zwischen aufeinanderfolgenden Blöcken: nicht als
   margin-bottom am Element, sondern am Nachfolger. So beginnt jeder
   Abschnitt bündig und es bleibt kein Abstand am Ende hängen.

   Die Staffelung folgt der Lesart, nicht der Reihenfolge im Quelltext:
     Überschrift -> Überschrift   0.4em  (gehoert zusammen)
     Überschrift -> Text          0.8em  (normaler Abstand)
     Text        -> Überschrift   1.6em  (neuer Abschnitt beginnt)
     Text        -> Text          0.8em
   Alle Werte in em, also relativ zur Schrift des NACHFOLGERS —
   dadurch skaliert der Abstand mit dem, was danach kommt. */
:is(h1, h2, h3, p, ul, ol) + * {
  margin-top: 0.8em;
}
:is(h1, h2, h3) + :is(h1, h2, h3) {
  margin-top: 0.4em;
}
:is(p, ul, ol) + :is(h1, h2, h3) {
  margin-top: 1.6em;
}

/* --- Knopf ---------------------------------------------------------
   Die 980px Radius sind Absicht statt 50%: bei einer festen, sehr
   großen Zahl bleibt die Rundung auch dann halbkreisförmig, wenn der
   Knopf mal zwei Zeilen hoch wird. */
.button {
  display: inline-block;
  min-width: 28px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 980px;
  background: var(--pf-farbe-aktion);
  font-family: var(--pf-schrift-text);
  font-size: 14px;
  line-height: 1.28577;
  font-weight: 400;
  letter-spacing: -0.016em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
}
.button:hover {
  background: #0077ed;
  text-decoration: none;
}
.button:active {
  background: #006edb;
}

.button-secondary {
  background: transparent;
  border-color: var(--pf-farbe-link);
  color: var(--pf-farbe-link);
}
.button-secondary:hover {
  background: rgba(0, 102, 204, 0.05);
  border-color: var(--pf-farbe-link);
}

/* --- Kleinigkeiten, die alle Seitentypen brauchen ------------------ */

strong {
  font-weight: 600;
}

/* Bewusst OHNE display: das inline-block, das ich hier zuerst stehen
   hatte, war nur die Browser-Vorgabe und keine Regel — es hat den
   Karussell-Pfeilen ihr flex genommen, sobald sie deaktiviert waren. */
button:disabled {
  cursor: default;
}

/* --- Kacheltypografie -----------------------------------------------
   Die Laufweite dreht ueber die Breakpoints das Vorzeichen: grosse
   Grade werden enger gesetzt, kleine brauchen wieder Luft. Deshalb
   -0.005em oben und +0.002em auf dem Handy. */
.pf-schrift-kacheltitel {
  font-family: var(--pf-schrift-display);
  font-size: 56px;
  line-height: 1.07143;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pf-schrift-kachelzeile {
  font-family: var(--pf-schrift-display);
  font-size: 28px;
  line-height: 1.14286;
  font-weight: 400;
  letter-spacing: 0.007em;
}
@media only screen and (max-width: 1068px) {
  .pf-schrift-kacheltitel {
    font-size: 48px;
    line-height: 1.08349;
    letter-spacing: -0.002em;
  }
  .pf-schrift-kachelzeile {
    font-size: 24px;
    line-height: 1.16667;
    letter-spacing: 0.009em;
  }
}
@media only screen and (max-width: 734px) {
  .pf-schrift-kacheltitel {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0.002em;
  }
  .pf-schrift-kachelzeile {
    font-size: 19px;
    line-height: 1.21053;
    letter-spacing: 0.012em;
  }
}

/* --- Knopf auf dunklem Grund ---------------------------------------
   Der Vollknopf bleibt wie er ist; nur der zweitrangige hellt auf,
   weil das Blau #06c auf Dunkel absaeuft. */
/* Auf dunklem Grund saeuft das Link-Blau #06c ab — dort das hellere
   #2997ff. Knoepfe sind ausgenommen: die tragen ihre Farbe selbst,
   und der Vollknopf bleibt weiss auf Blau. */
.theme-dark a {
  color: #2997ff;
}
.theme-dark .button {
  color: #fff;
}

.theme-dark .button-secondary {
  border-color: #2997ff;
  color: #2997ff;
}
.theme-dark .button-secondary:hover {
  background: rgba(41, 151, 255, 0.05);
  border-color: #2997ff;
}

/* --- Große Überschrift ---------------------------------------------
   Wechselt bei den Breakpoints nicht nur die Größe, sondern auch die
   Laufweite: je größer der Grad, desto enger darf gesetzt werden. */
.pf-schrift-schlagzeile {
  font-family: var(--pf-schrift-display);
  font-size: 64px;
  line-height: 1.0625;
  font-weight: 600;
  letter-spacing: -0.009em;
}
@media only screen and (max-width: 1068px) {
  .pf-schrift-schlagzeile {
    font-size: 48px;
    line-height: 1.08349;
    letter-spacing: -0.003em;
  }
}
@media only screen and (max-width: 734px) {
  .pf-schrift-schlagzeile {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}