/* ============================================================
   Praxis Krüger — Typografie
   Die HTML-Elemente, so wie sie auf der Website aussehen.
   Keine erfundenen Stilnamen: h1 ist h1, p ist p. Welche Ebene
   Krüger für welchen Zwischentitel nimmt, entscheidet er selbst.

   Regeln, die überall gelten:
   · ein Schnitt — kein Fett, kein Kursiv, keine Simulation
   · kein Versalsatz
   · keine Sperrung (Laufweite nie positiv)
   · nichts kleiner als die Basisgröße
   · Laufweite im Displaygrad und in Überschriften nie enger als −4 %
   · Laufweite im Fließtext, in Bildunterschriften, Listen und Tabellen
     nie enger als −1,5 %

   Werte stehen hier keine. Sie kommen aus tokens.css (Produktion)
   oder zur Entwurfszeit aus dem Regler-Werkzeug (tokens.js).
   Bausteine mit eigener Fläche — Knopf, Karte, Badge, Menü —
   stehen nicht hier, sondern in komponenten.css.
   ============================================================ */

@font-face{
  font-family:'Unica';
  src:url('fonts/NeueHaasUnica-Regular.woff2') format('woff2'),
      url('fonts/NeueHaasUnica-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:block;
}

/* ---- Grundlage ---- */
body{
  font-family:'Unica','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;font-size:var(--fs-read);line-height:var(--lh-body);
  color:var(--fg-base-default);background:var(--bg-base-default);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Ziffern laufen im Satz proportional. Nachgemessen: diese Schrift liefert
   per Vorgabe TABELLENZIFFERN — jede Ziffer 0,562 em breit, auch die Eins.
   Im Fließtext reißt das Löcher: zehn Einsen sind so 1124 px breit, mit
   proportionalen Ziffern 743. Tabellenziffern gehören dorthin, wo Spalten
   untereinander stehen müssen — also in die Tabelle, nicht in den Satz. */
body{font-variant-numeric:proportional-nums}
table{font-variant-numeric:tabular-nums}

/* Ohne das erzeugt der Browser aus dem einen Schnitt einen zweiten. */
h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:400}
body,body *{font-synthesis:none}
code,pre,kbd,samp,textarea,input,select,button{font-family:inherit}

/* ---- Paarschutz ----
   49 Buchstabenpaare bekommen von dieser Schrift zusätzliches Kerning; bei
   rt sind es +12/1000 em. Die negative Laufweite nimmt ihn wieder weg und
   lässt sie zusammenkleben. paarschutz.js markiert sie, hier stehen sie
   wieder auf 0. Ohne das Skript ändert diese Regel nichts. */
body:not([data-paarschutz="0"]) .paar{letter-spacing:0}
/* ---- Ziffern ----
   Nachgemessen trägt in dieser Schrift KEIN einziges der hundert
   Ziffernpaare ein Kerning. Die negative Laufweite des Displaygrads
   schiebt sie deshalb ungebremst zusammen, und bei "04" berühren sich
   Rundung und Balken. Ziffernfolgen laufen darum ohne Enge — die letzte
   Ziffer ausgenommen, denn deren Laufweite ist der Abstand zum folgenden
   Wort. paarschutz.js markiert sie, hier stehen sie auf 0.

   Dazu das Kerning der Schrift AUS: mit proportionalen Ziffern liefert sie
   für Ziffernpaare eigene Werte, und die sind hart — nachgemessen 47 bei
   −70/1000 em, 74 bei −40, 37 bei −27. Bei großem Grad stoßen 4 und 7
   ineinander. Ohne Kerning stehen die Ziffern auf ihrer eigenen Breite. */
body:not([data-paarschutz="0"]) .ziffern{letter-spacing:0;font-kerning:none}

/* ---- Überschriften ----
   Drei Grade, und alle drei kommen auf den Seiten wirklich vor. h1 einmal
   pro Seite, der Rest frei verschachtelt — die Reihenfolge macht die
   Gliederung, nicht der Name. */
/* Drei Ebenen, und sie unterscheiden sich NICHT über die Größe: h2 ist so
   groß wie der Aufmacher, h3 so groß wie der Fließtext. Die Gliederung
   entsteht über Stellung und Abstand, so wie auf den Seiten auch. Wer eine
   vierte Ebene braucht, hat den Text zu tief verschachtelt. */
h1{font-size:var(--fs-lead);line-height:var(--lh-title-lead, var(--lh-body));
   letter-spacing:var(--tracking-lead, var(--tracking-display));margin:0 0 .34em;max-width:22ch}
h2{font-size:var(--fs-lead);line-height:var(--lh-title-lead, var(--lh-body));
   letter-spacing:var(--tracking-lead, var(--tracking-display));margin:2em 0 .5em;max-width:28ch}
h3{font-size:var(--fs-read);line-height:var(--lh-title-read, var(--lh-body));
   letter-spacing:var(--tracking-read, var(--tracking-body));margin:1.6em 0 .5em;max-width:34ch}

/* ---- Fließtext ---- */
p{font-size:var(--fs-read);line-height:var(--lh-body);
  letter-spacing:var(--tracking-read, var(--tracking-body));
  margin:0 0 1em;max-width:calc(var(--zeilenmass) * 1ch)}

/* Kleiner Satz: Bildunterschrift, Sprechzeiten, Impressum.
   Kleinste zugelassene Größe — darunter gibt es nichts. */
.text-small{font-size:var(--fs-caption);line-height:1.4;
  letter-spacing:var(--tracking-caption, var(--tracking-body));margin:0 0 1em;max-width:58ch}
/* Zurückgenommen über den Grauwert, nicht über die Größe. */
.text-muted{font-size:var(--fs-read);line-height:var(--lh-body);
  letter-spacing:var(--tracking-read, var(--tracking-body));
  color:var(--fg-base-muted);margin:0 0 1em;max-width:calc(var(--zeilenmass) * 1ch)}

/* ---- Zitat ----
   Senkrechte Linie, kein Anführungszeichen, keine andere Größe. */
blockquote{font-size:var(--fs-read);line-height:var(--lh-body);
  letter-spacing:var(--tracking-read, var(--tracking-body));
  margin:1.6em 0;padding-left:var(--quote-indent);
  border-left:var(--border-width-strong) solid var(--border-base-strong);
  max-width:calc(var(--zeilenmass) * 1ch)}

/* ---- Listen ----
   Punkt als Marke. Eigenes ::before statt list-style, damit die Marke am
   linken Rand steht und mehrzeilige Einträge darunter bündig einrücken. */
ul,ol{font-size:var(--fs-read);line-height:var(--lh-body);
  letter-spacing:var(--tracking-read, var(--tracking-body));
  margin:0 0 1em;padding:0;list-style:none;max-width:calc(var(--zeilenmass) * 1ch)}
ul li{padding-left:var(--list-indent);position:relative;margin-bottom:.35em}
ul li::before{content:'\2022';position:absolute;left:0;color:var(--fg-base-muted)}
ol{counter-reset:pos}
ol li{padding-left:var(--list-indent-ordered);position:relative;margin-bottom:.35em;counter-increment:pos}
ol li::before{content:counter(pos);position:absolute;left:0;color:var(--fg-base-muted)}

/* Der Verweis hat Zustände und steht deshalb in komponenten.css. */

/* ---- Tabellarische Angaben: Sprechzeiten, Lebenslauf ---- */
table{border-collapse:collapse;width:100%;max-width:calc(var(--zeilenmass) * 1ch);
  font-size:var(--fs-read);line-height:var(--lh-body);
  letter-spacing:var(--tracking-read, var(--tracking-body))}
th,td{text-align:left;padding:var(--space-tight) var(--space-tight) var(--space-tight) 0;
  border-bottom:var(--border-width-hairline) solid var(--border-base-muted);vertical-align:baseline}
th{color:var(--fg-base-muted)}