/* SaarLuxIT -- Lesetypografie fuer Blogbeitraege.
   Angelegt 15.09.2026. Wirkt ausschliesslich in der Einzelansicht
   (body.view-article), damit Seitenbaukasten und Blogliste unberuehrt bleiben.
   Kern des Problems war nicht die Schriftgroesse, sondern die Zeilenlaenge:
   1290 px Textbreite ergaben rund 143 Zeichen pro Zeile. Lesbar sind 70-80. */

body.view-article .article-details > div:not([class]),
body.view-article .article-details > .article-header,
body.view-article .article-details > .article-info,
body.view-article .article-details > figure.article-full-image {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

body.view-article .article-details > figure.article-full-image {
  margin-bottom: 2.2rem;
}

body.view-article .article-details .article-header h1 {
  font-size: 2.25rem;
  line-height: 1.22;
  margin-bottom: .7em;
}

body.view-article .article-details > div:not([class]) p {
  font-size: 1.1875rem;
  line-height: 1.75;
  margin-bottom: 1.15em;
}

body.view-article .article-details > div:not([class]) li {
  font-size: 1.1875rem;
  line-height: 1.7;
  margin-bottom: .55em;
}

body.view-article .article-details > div:not([class]) ol,
body.view-article .article-details > div:not([class]) ul {
  margin-bottom: 1.3em;
  padding-left: 1.4em;
}

/* Zwischenueberschriften waren mit 42 px fast so gross wie der Titel und
   klebten ohne Abstand am vorherigen Absatz. */
body.view-article .article-details > div:not([class]) h2 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-top: 2.2em;
  margin-bottom: .6em;
}

body.view-article .article-details > div:not([class]) h3 {
  font-size: 1.375rem;
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: .5em;
}

/* Der Aufhaenger traegt den Einstieg -- er darf etwas groesser stehen. */
body.view-article .article-details > div:not([class]) > p:first-of-type {
  font-size: 1.3125rem;
  line-height: 1.62;
  color: #3a3a3a;
}

body.view-article .article-details > div:not([class]) blockquote {
  border-left: 3px solid #0345BF;
  padding: .2em 0 .2em 1.1em;
  margin: 2em 0;
  font-size: 1.25rem;
  line-height: 1.6;
}

body.view-article .article-details .article-info {
  font-size: .8125rem;
  color: #7a7a7a;
}

@media (max-width: 47rem) {
  body.view-article .article-details > div:not([class]) p,
  body.view-article .article-details > div:not([class]) li { font-size: 1.0625rem; }
  body.view-article .article-details > div:not([class]) > p:first-of-type { font-size: 1.1875rem; }
  body.view-article .article-details > div:not([class]) h2 { font-size: 1.5rem; margin-top: 1.8em; }
  body.view-article .article-details .article-header h1 { font-size: 1.75rem; }
}

/* Die Vorlage setzt h1/h2/h3 per !important aus dem Seitenkopf.
   Deshalb hier ebenfalls !important -- nur innerhalb des Beitragstexts. */
body.view-article .article-details > div:not([class]) h2 { font-size: 1.75rem !important; }
body.view-article .article-details > div:not([class]) h3 { font-size: 1.375rem !important; }
body.view-article .article-details .article-header h1 { font-size: 2.25rem !important; }

@media (max-width: 47rem) {
  body.view-article .article-details > div:not([class]) h2 { font-size: 1.5rem !important; }
  body.view-article .article-details .article-header h1 { font-size: 1.75rem !important; }
}

/* Die Vorlage gewinnt mit einer ID-Regel (#sp-main-body h2 !important).
   Deshalb hier dieselbe ID davor -- sonst bleibt die Zwischenueberschrift 42 px. */
body.view-article #sp-main-body .article-details > div:not([class]) h2 { font-size: 1.75rem !important; }
body.view-article #sp-main-body .article-details > div:not([class]) h3 { font-size: 1.375rem !important; }
body.view-article #sp-main-body .article-details .article-header h1 { font-size: 2.25rem !important; line-height: 1.22 !important; }

@media (max-width: 47rem) {
  body.view-article #sp-main-body .article-details > div:not([class]) h2 { font-size: 1.5rem !important; }
  body.view-article #sp-main-body .article-details .article-header h1 { font-size: 1.75rem !important; }
}

/* Kim findet 44rem zu schmal. Jetzt 56rem (rund 900 px, ~92 Zeichen je Zeile).
   Das Beitragsbild darf breiter stehen als der Text -- das wirkt redaktionell
   und nutzt die Seitenbreite, ohne das Lesen zu erschweren. */
body.view-article .article-details > figure.article-full-image { max-width: 68rem; }