/* Zusätzliches Aussehen für die Texte unter /texte/ und /en/essays/.

   Wird **zusammen mit** recht.css geladen, nicht anstelle: Dort stehen die
   Farben, die Schrift und der ruhige Grundsatz — und die Texte sollen genauso
   ruhig aussehen wie die Rechtstexte, nur mit ein paar Bauteilen mehr (Vorspann,
   Merksatz, Aufzählungen, Weiterlesen). Zwei Dateien statt einer Kopie.

   Wichtig: Der Schriftpfad in recht.css ist relativ zum **Stylesheet**, nicht
   zum Dokument. Deshalb funktioniert ../recht.css aus einem Unterordner ohne
   weiteres Zutun. */

/* ══ Kopf ══════════════════════════════════════════════════════════════════ */

/* Datum und Lesezeit. Die Lesezeit ist geschätzt und steht da, weil die
   Alternative — jemand fängt an und merkt nach zwei Bildschirmen, dass es lang
   wird — schlechter ist. */
.kopfzeile{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  color:var(--tinte3);font-size:.88rem;font-weight:700;margin:.5rem 0 0}
.kopfzeile time{font-variant-numeric:tabular-nums}

/* Der Vorspann trägt die Frage des Textes. Größer als der Rest, aber nicht
   fett — er soll einladen, nicht rufen. */
.vorspann{font-size:1.14rem;line-height:1.56;color:var(--tinte);font-weight:700;
  margin:1.5rem 0 1.9rem}

/* ══ Fließtext ═════════════════════════════════════════════════════════════ */

h2{margin-top:2.4rem}
h3{font-size:1rem;font-weight:900;color:var(--tinte);margin:1.6rem 0 .35rem}

ul,ol{margin:0 0 .95rem;padding-left:1.3rem;color:var(--tinte2);font-weight:600}
li{margin-bottom:.4rem}
li::marker{color:var(--tinte3)}
ul.haken{list-style:none;padding-left:0}
ul.haken li{padding-left:1.5rem;position:relative}
ul.haken li::before{content:"–";position:absolute;left:.25rem;color:var(--gruen);
  font-weight:900}

strong,b{color:var(--tinte);font-weight:800}
em{font-style:normal;color:var(--tinte);font-weight:800}

/* Der Merksatz ist der eine Satz, den man behalten soll. Höchstens einer pro
   Text — zwei heben sich gegenseitig auf. */
.merksatz{border-left:3px solid var(--gruen);padding:.15rem 0 .15rem 18px;
  margin:1.7rem 0;font-size:1.1rem;line-height:1.5;color:var(--tinte);
  font-weight:800}

/* Kasten für Gegenüberstellungen (rein/raus, vorher/nachher). */
.kasten{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:20px 22px;margin:1.5rem 0}
.kasten h3{margin-top:0}
.kasten p:last-child,.kasten ul:last-child{margin-bottom:0}
@media (prefers-color-scheme:dark){
  .kasten{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
}

/* Zahlenbeispiele. tabular-nums, damit Spalten untereinander stehen. */
.rechnung{font-variant-numeric:tabular-nums;background:rgba(255,255,255,.45);
  border-radius:16px;padding:16px 20px;margin:1.4rem 0;overflow-x:auto;
  color:var(--tinte);font-weight:700;line-height:1.85;font-size:.96rem}
@media (prefers-color-scheme:dark){ .rechnung{background:rgba(255,255,255,.05)} }

/* ══ Hinweis auf die App ═══════════════════════════════════════════════════ */

/* Bewusst abgesetzt und immer am Ende eines Abschnitts, nie mitten im Argument:
   Die Texte sollen auch mit Zettel und Stift nützlich sein. Wer Werbung im
   Fließtext findet, glaubt dem Fließtext nicht mehr. */
.inderapp{border-top:1px solid color-mix(in srgb,var(--tinte) 12%,transparent);
  margin:1.9rem 0;padding-top:1rem;font-size:.94rem;color:var(--tinte3);
  font-weight:700}
.inderapp b{color:var(--tinte2)}

/* ══ Fuß ═══════════════════════════════════════════════════════════════════ */

/* Weiterlesen: die anderen Texte, als Liste ohne Schmuck. */
.weiter{margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid color-mix(in srgb,var(--tinte) 12%,transparent)}
.weiter h2{margin:0 0 .8rem;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte3)}
.weiter ul{list-style:none;padding:0;margin:0}
.weiter li{margin-bottom:.55rem}
.weiter a{text-decoration:none}
.weiter a:hover{text-decoration:underline}
.weiter span{display:block;color:var(--tinte3);font-size:.9rem;font-weight:600}

/* ══ Übersichtsseite ═══════════════════════════════════════════════════════ */

/* Die Reihenfolge ist eine Aussage („fängt von vorne an"), deshalb sind die
   Nummern sichtbar — aber als leise Randnotiz, nicht als Aufzählungsklotz. */
.liste{list-style:none;padding:0;margin:2rem 0 0;counter-reset:text}
.liste li{margin-bottom:1.7rem;counter-increment:text;position:relative;
  padding-left:2.1rem}
.liste li::before{content:counter(text);position:absolute;left:0;top:.15rem;
  color:var(--tinte3);font-weight:900;font-size:.95rem;
  font-variant-numeric:tabular-nums}
@media (max-width:420px){ .liste li{padding-left:1.6rem} }
.liste h2{margin:0 0 .25rem;font-size:1.16rem}
.liste h2 a{text-decoration:none}
.liste h2 a:hover{text-decoration:underline}
.liste p{margin:0}