/* =====================================================================
   Gestaltung des Readings – eigene Datei, nicht in die Seite eingebettet.

   Warum als Datei und nicht im Dokument: Die Sicherheitsregeln der Seite
   (CSP) erlauben nur Stile vom eigenen Server. Ein <style>-Block im
   Dokument würde vom Browser verworfen, das Reading käme ohne Gestaltung
   an. Hier steht derselbe Inhalt, nur abholbar.
   ===================================================================== */

:root {
  --papier: #FAF7F2;
  --tinte: #3A3028;
  --leise: #7A6A58;
  --akzent: #B4764A;
  --linie: #E6DCCD;
  --kasten: #F3EDE3;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 1.1rem 3rem;
  background: var(--papier);
  color: var(--tinte);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-text-size-adjust: 100%;
}
main, .kopf, .fuss { max-width: 34rem; margin: 0 auto; }

.kopf { padding: 2.2rem 0 1rem; text-align: center; }
.marke {
  margin: 0 0 .4rem; font-family: system-ui, sans-serif; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--leise);
}
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1.2rem; font-weight: 600; }
.chartbild { margin: 0 auto 1.2rem; max-width: 100%; }
.chartbild svg { max-width: 100%; height: auto; }

button {
  font: inherit; font-family: system-ui, sans-serif; font-size: .95rem;
  padding: .6rem 1.3rem; border: 1px solid var(--akzent); border-radius: 999px;
  background: transparent; color: var(--akzent); cursor: pointer;
}
button:hover { background: var(--akzent); color: var(--papier); }

.kapitel { margin: 2.6rem 0 0; }
.kapitel + .kapitel { border-top: 1px solid var(--linie); padding-top: 2.2rem; }

/* Überschrift eines Paares im Familien-Reading: Sie steht über mehreren
   Kapiteln und muss sich von ihnen abheben. */
.kapitel-paar-kopf { margin-top: 3.4rem; }
.kapitel-paar-kopf h2 {
  font-size: 1.55rem; color: var(--akzent);
  border-bottom: 2px solid var(--akzent); padding-bottom: .4rem;
}
.kapitel-paar-kopf + .kapitel { border-top: 0; padding-top: 0; }

/* Breite Tabellen rollen in ihrem eigenen Rahmen, nicht die ganze Seite.
   Die erste Spalte bleibt dabei stehen: Sonst weiss man beim Rollen
   nicht mehr, in welcher Zeile man ist. */
.tabelle-rollt { overflow-x: auto; margin: 0 0 1.2rem; }
table.breit { font-size: .88rem; }
table.breit th, table.breit td { white-space: nowrap; }
table.breit tbody th[scope="row"] {
  position: sticky; left: 0; background: var(--papier);
  /* Eine feine Kante, damit die stehende Spalte beim Rollen als Rand zu
     erkennen ist und nicht so aussieht, als klebe Text aneinander. */
  box-shadow: 1px 0 0 var(--linie);
}
@media print {
  .tabelle-rollt { overflow: visible; }
  table.breit { font-size: .78rem; }
  table.breit tbody th[scope="row"] { position: static; }
}
h2 { font-size: 1.3rem; margin: 0 0 .5rem; font-weight: 600; }
h3 { font-size: 1.02rem; margin: 1.7rem 0 .35rem; font-weight: 600; }
p { margin: 0 0 .95rem; }
.kapitel-einleitung, .beischrift {
  color: var(--leise); font-style: italic; font-size: .95rem; margin-bottom: 1rem;
}
.erklaerung { font-size: .97rem; }
.kurz { font-weight: 600; }

/* Begriffsliste in der Lesehilfe des gemeinsamen Readings */
.begriffe { margin: 0 0 1rem; }
.begriffe dt { font-weight: 600; margin: .9rem 0 .1rem; }
.begriffe dd { margin: 0; }

.uebersicht { width: 100%; border-collapse: collapse; margin: 1rem 0 .5rem; font-size: .95rem; }
.uebersicht th, .uebersicht td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top;
}
.uebersicht thead th { font-family: system-ui, sans-serif; font-size: .78rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--leise); }
.uebersicht tbody th { font-weight: 600; width: 40%; }

ul.alltag, ol.tipps { margin: 0 0 1rem; padding-left: 1.25rem; }
ul.alltag li, ol.tipps li { margin-bottom: .4rem; }
.alltag-titel { margin-bottom: .35rem; font-weight: 600; }
ol.tipps { font-size: 1.02rem; }

.merksatz, .frage, .tipp {
  background: var(--kasten); border-left: 3px solid var(--akzent);
  padding: .7rem .9rem; margin: 1rem 0; font-size: .97rem;
}
.frage { border-left-color: var(--leise); }

.kapitel-hinweis { font-size: .9rem; color: var(--leise); }
.nachsatz { margin-top: 1.4rem; font-style: italic; color: var(--leise); }
.fuss {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  text-align: center; font-family: system-ui, sans-serif; font-size: .8rem; color: var(--leise);
}

/* Nur in der Leseprobe: die Links zurück zur Seite. */
.leseprobe-weiter { margin: .6rem 0 0; }
.leseprobe-weiter a { color: var(--akzent); }

@media (min-width: 40rem) {
  body { font-size: 18px; padding: 0 2rem 4rem; }
  h1 { font-size: 2.1rem; }
}

@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; font-size: 11.5pt; padding: 0; }
  .no-print { display: none !important; }
  main, .kopf, .fuss { max-width: none; }
  .kopf { padding-top: 0; }
  .kapitel { page-break-inside: auto; margin-top: 1.6rem; }
  .kapitel + .kapitel { border-top: none; padding-top: 0; }
  h2 { page-break-after: avoid; break-after: avoid; margin-top: 1.4rem; }
  h3 { page-break-after: avoid; break-after: avoid; }
  /* Kleine Kästen bleiben zusammen. Ein ganzer .block ist bei Typ,
     Autorität, Profil und Definition das halbe Kapitel – ihn am Umbruch
     zu hindern ließ halbe Seiten leer (bis 6. Oktober 2026). */
  .merksatz, .frage, .tipp, .uebersicht { page-break-inside: avoid; }
  .chartbild svg { max-width: 72mm; }
  a { color: inherit; text-decoration: none; }
}

/* Der Link zum Bewerten am Ende eines gekauften Readings. Beim Drucken weg. */
.bewerten-hinweis {
  margin: 1.4rem 0 0; padding: .9rem 1rem; background: var(--kasten);
  border-radius: 8px; font-family: system-ui, sans-serif; font-size: .95rem;
}
.bewerten-hinweis a { color: var(--akzent); font-weight: 600; }