/* =====================================================================
   VTS — Schriftordnung «04 Vertrauen»

   Poppins trägt die Überschriften, Source Serif 4 den Lauftext. Sechs
   Grade statt der dreizehn, die sich über die Jahre angesammelt hatten.

   Die Grade selbst stehen weiterhin in den Stildateien des Baukastens,
   pro Element — dort wurden sie auf diese Skala umgestellt. Diese Datei
   regelt, was sich nicht sinnvoll pro Element schreiben lässt: die
   Schriftfamilien und die Zeilenhöhen.

   Der wichtigste Eingriff ist die Zeilenhöhe. Der Baukasten setzt für
   jede Überschrift line-height: 1 — die Zeilen haben dann keinen
   Abstand und stapeln sich. Bei einzeiligen Titeln fällt das nicht auf,
   bei zweizeiligen sehr wohl.

   Skala:  32 · 24 · 20 · 18 · 14,5 · 12,5
   ===================================================================== */

:root {
  --vts-schrift-kopf: "Poppins", system-ui, -apple-system, sans-serif;
  --vts-schrift-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --vts-grad-h1:    32px;
  --vts-grad-h2:    24px;
  --vts-grad-h3:    20px;
  --vts-grad-text:  18px;
  --vts-grad-klein: 14.5px;
  --vts-grad-mini:  12.5px;

  --vts-zeile-kopf:  1.18;
  --vts-zeile-text:  1.7;
  --vts-zeile-klein: 1.5;
}

/* ------------------------------------------------------- Überschriften
   Vier Klassen tief, damit die Regel die elementweiten Angaben des
   Baukastens (ebenfalls vier Klassen) schlägt — plus ein Typselektor. */
.mkw .mkw-element .mkw-widget-container h1.mkw-heading-title,
.mkw .mkw-element .mkw-widget-container h2.mkw-heading-title,
.mkw .mkw-element .mkw-widget-container h3.mkw-heading-title,
.mkw .mkw-element .mkw-widget-container h4.mkw-heading-title {
  font-family: var(--vts-schrift-kopf);
  line-height: var(--vts-zeile-kopf);
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* lange Einzelwörter wie «Versicherungsberatungen» trennen sich mit
     Bindestrich, statt aus ihrer Titelkarte zu laufen */
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --------------------------------------------------------- Untertitel
   Im Markup des Baukastens sind Untertitel und Zusatzangaben <span>,
   Fliesstexte <p>. Daran lässt sich die Rolle sauber ablesen. */
.mkw .mkw-element .mkw-widget-container span.mkw-heading-title {
  font-family: var(--vts-schrift-text);
  line-height: var(--vts-zeile-klein);
  letter-spacing: 0;
}

.mkw .mkw-element .mkw-widget-container p.mkw-heading-title {
  font-family: var(--vts-schrift-text);
  line-height: var(--vts-zeile-text);
  letter-spacing: 0;
}

/* -------------------------------------------------------- Fliesstexte
   Die echten Absätze der Unterseiten. Sie kommen aus dem Seiteninhalt
   beziehungsweise dem Text-Baustein und tragen keine eigene Grösse. */
.mkw .mkw-widget-theme-post-content,
.mkw .mkw-widget-theme-post-content p,
.mkw .mkw-widget-theme-post-content li,
.mkw .mkw-widget-text-editor,
.mkw .mkw-widget-text-editor p,
.mkw .mkw-widget-text-editor li {
  font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-text);
  line-height: var(--vts-zeile-text);
}

/* Zeilenlänge begrenzen: über etwa 85 Zeichen findet das Auge den
   Zeilenanfang nicht mehr zuverlässig. */
.mkw .mkw-widget-theme-post-content p,
.mkw .mkw-widget-text-editor p {
  max-width: 68ch;
}

/* Abstand zwischen Absätzen: das Theme setzt 0.9rem, bei 18 px Schrift
   und 1.7 Zeilen wirkt das gedrängt. */
.mkw .mkw-widget-theme-post-content p,
.mkw .mkw-widget-text-editor p {
  margin-block-end: 1.15em;
}

/* ------------------------------------------------------------ Listen
   Vier Klassen plus Typselektor, damit die Regel die elementweiten
   Angaben des Baukastens schlägt — dort stand Arial in 13 px. */
.mkw .mkw-element .mkw-widget-container .mkw-icon-list-item > .mkw-icon-list-text,
.mkw .mkw-element .mkw-widget-container .mkw-icon-list-item > a {
  font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-klein);
  line-height: var(--vts-zeile-klein);
}

/* ------------------------------------------------- eigene Bausteine
   Fusszeile, Kontaktseite und Anfrage-Assistent liefen bisher auf
   Roboto beziehungsweise der Systemschrift. Die Auffangregel sorgt
   dafür, dass kein Baustein ohne eigene Angabe zurückfällt. */
.vts-seite { font-family: var(--vts-schrift-text); }
.vts-seite h1, .vts-seite h2, .vts-seite h3, .vts-seite h4,
.vts-seite b, .vts-seite strong, .vts-seite button,
.vts-cta-knopf, .vts-link, .vts-seite-marken span {
  font-family: var(--vts-schrift-kopf);
}

.vts-fuss { font-family: var(--vts-schrift-text); }
.vts-fuss .vts-fuss-name,
.vts-fuss .vts-fuss-karte b,
.vts-rueckruf-knopf { font-family: var(--vts-schrift-kopf); }