/* ==========================================================================
   juscool-inhalt.css — die Lesestrecke der Inhaltsseiten
   --------------------------------------------------------------------------
   Wird von den Seiten unter /rewi-wu/, /glzr-wu/, /pruefschema/ und den
   übrigen Inhaltsverzeichnissen geladen, NACH juscool-ui.css.

   WOZU eine eigene Datei und nicht ein <style>-Block je Seite: Es sind
   fünfzehn Seiten mit demselben Aufbau — Brotkrume, Titel, eine Reihe
   Frage-Antwort-Blöcke, Quellenblock, Datumsstempel. Läge das je Seite
   inline, driftete es nach der dritten Änderung auseinander, und ein
   Kontrastfehler wäre fünfzehnmal zu beheben.

   WORAUS: ausschliesslich aus den Tokens von juscool-ui.css. Keine neue
   Farbe, keine neue Schriftfamilie, kein vierter Schriftgrad, kein Framework.
   Was hier steht, sind Abstände und Lesebreiten für Fliesstext — das eine
   Bauteil, das die bestehenden Seiten nicht haben, weil sie keinen längeren
   Fliesstext tragen.

   Die Kopfleiste, die Fusszeile und die Karten kommen unverändert aus
   juscool-ui.css. Sie werden hier nicht überschrieben.
   ========================================================================== */

/* ============================ 1 · SEITENGERÜST ========================== */

/* Fliesstext braucht eine Lesebreite. Der Rest der Seite (Karten, Raster)
   nutzt weiter die volle Breite von .jc-wrap — deshalb sitzt die Begrenzung
   an den Textbausteinen und nicht am Behälter. 68 Zeichen ist die Mitte des
   Korridors, den die Typografie seit je empfiehlt; darüber verliert das Auge
   beim Zeilenwechsel die Zeile, darunter zerhackt es den Satz. */
.jc-prosa{
  max-width:68ch;
  font-size:17px; line-height:1.72;
  color:var(--jc-ink-2);
}
.jc-prosa > *:first-child{ margin-top:0 }
.jc-prosa p{ margin:0 0 18px; text-wrap:pretty }
.jc-prosa strong,.jc-prosa b{ color:var(--jc-ink); font-weight:600 }

/* Verweise im Fliesstext tragen die Markenfarbe und eine Unterlinie mit
   Abstand. Ohne Unterlinie bliebe die Farbe das einzige Unterscheidungs-
   merkmal — das ist nach WCAG 2.1 (1.4.1) zu wenig, wenn Farbe die einzige
   Auszeichnung ist. */
.jc-prosa a{
  color:var(--jc-accent-edge);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:var(--jc-line-2);
}
.jc-prosa a:hover{ text-decoration-color:currentColor }

.jc-prosa ul,.jc-prosa ol{ margin:0 0 18px; padding-left:1.35em }
.jc-prosa li{ margin:0 0 8px }
.jc-prosa li::marker{ color:var(--jc-ink-3) }

/* Paragrafenangaben sollen im Satz stehen bleiben. `§ 1295 Abs 1 ABGB` über
   zwei Zeilen zu brechen macht die Fundstelle unlesbar, und sie ist der
   Grund, warum der Absatz zitierfähig ist. */
.jc-pp{ white-space:nowrap; font-variant-numeric:tabular-nums }

/* ============================ 2 · BROTKRUME ============================= */

/* Bewusst kein neues Bauteil (§5.5 Punkt 5): eine Zeile aus vorhandenen
   Link- und Metatönen, im Grad der Metazeilen. Der Trenner ist aria-hidden,
   er trägt keine Aussage. */
.jc-krume{
  font-size:var(--text-xs);
  color:var(--jc-ink-3);
  margin:0 0 20px;
  display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline;
}
.jc-krume a{ color:inherit; text-decoration:underline; text-underline-offset:.16em }
.jc-krume a:hover{ color:var(--jc-ink) }
.jc-krume [aria-current="page"]{ color:var(--jc-ink); font-weight:500 }

/* ============================ 3 · SEITENKOPF ============================ */

.jc-kopf{ padding:8px 0 26px }
.jc-kopf .jc-h1{ max-width:20ch }
.jc-kopf .jc-lede{ max-width:56ch; font-size:18px }

/* ========================= 4 · FRAGE-ANTWORT-BLOCK ====================== */

/* Der tragende Baustein aller Inhaltsseiten: Überschrift ist eine Frage,
   direkt darunter steht die Antwort in einem Stück. Der Abstand darüber ist
   grösser als der darunter — so gehört die Antwort sichtbar zur Frage und
   nicht zum vorigen Block. */
.jc-frage{ margin:38px 0 0; scroll-margin-top:80px }
.jc-frage:first-of-type{ margin-top:26px }
.jc-frage > .jc-h2,
.jc-frage > .jc-h3{ margin:0 0 14px; max-width:26ch }

/* ============================== 5 · TAFEL =============================== */

/* Die Schrittfolge eines Prüfschemas. Eine nummerierte Liste im Papierton,
   damit sie sich vom Fliesstext abhebt, ohne eine Karte zu sein — Karten
   stehen auf dieser Seite für Verweise, nicht für Inhalt. */
.jc-tafel{
  margin:0 0 18px; padding:18px 20px;
  background:var(--jc-panel);
  border:1.5px solid var(--jc-line);
  border-radius:var(--jc-r);
  counter-reset:jc-schritt;
  list-style:none;
}
.jc-tafel li{
  position:relative; padding-left:34px; margin:0 0 13px;
  color:var(--jc-ink-2);
}
.jc-tafel li:last-child{ margin-bottom:0 }
.jc-tafel li::before{
  counter-increment:jc-schritt; content:counter(jc-schritt);
  position:absolute; left:0; top:.12em;
  width:23px; height:23px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--jc-accent-soft); color:var(--jc-accent-edge);
  font-size:var(--text-xs); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.jc-tafel b{ color:var(--jc-ink) }

/* ============================== 6 · TABELLE ============================= */

/* Breite Tabellen scrollen in sich selbst. Ohne den Behälter schiebt eine
   Tabelle bei 390 px die ganze Seite seitwärts, und dann scrollt der
   Fliesstext mit. */
.jc-tabelle-rahmen{ overflow-x:auto; margin:0 0 18px; -webkit-overflow-scrolling:touch }
.jc-tabelle{ border-collapse:collapse; width:100%; min-width:420px; font-size:var(--text-sm) }
.jc-tabelle th,.jc-tabelle td{
  text-align:left; vertical-align:top;
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--jc-line);
}
.jc-tabelle th{ color:var(--jc-ink); font-weight:600 }
.jc-tabelle td{ color:var(--jc-ink-2) }
.jc-tabelle tr:last-child td{ border-bottom:0 }

/* ========================= 7 · QUELLEN UND STAND ======================== */

/* Der Quellenblock am Fuss jeder Inhaltsseite. Er kostet Aufmerksamkeit und
   liefert das, was ihn wert macht: die amtliche Stelle ist tatsächlich
   massgeblich, und das auszusprechen ist ehrlicher als es zu verschweigen. */
.jc-quellen{
  margin:44px 0 0; padding:20px 0 0;
  border-top:1.5px solid var(--jc-line);
  font-size:var(--text-sm); color:var(--jc-ink-2);
}
.jc-quellen h2{
  font-family:var(--font-display); font-size:18px; font-weight:600;
  color:var(--jc-ink); margin:0 0 12px; letter-spacing:-.015em;
}
.jc-quellen ul{ margin:0 0 14px; padding-left:1.2em }
.jc-quellen li{ margin:0 0 7px }
.jc-quellen a{ color:var(--jc-accent-edge) }

/* Datumsstempel und Haftungssatz. Derselbe Ton wie .jc-note, aber als Block
   am Seitenfuss statt als Randbemerkung. */
.jc-stand{
  font-size:var(--text-xs); color:var(--jc-ink-3);
  margin:0; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
}

/* ========================== 8 · VERWEISKARTEN =========================== */

/* Die Weiterführung am Seitenende. Nutzt .jc-card aus juscool-ui.css und
   ergänzt nur, was eine Karte mit Textinhalt braucht. */
.jc-weiter{ margin:38px 0 0 }
.jc-weiter .jc-card{ text-decoration:none; color:inherit; display:block }
.jc-weiter .jc-card h3{
  font-family:var(--font-display); font-size:18px; font-weight:600;
  margin:0 0 7px; color:var(--jc-ink); letter-spacing:-.015em;
}
.jc-weiter .jc-card p{ margin:0; color:var(--jc-ink-2); font-size:var(--text-sm) }

/* ============================== 9 · MOBIL =============================== */

/* Die Zielgruppe sitzt in der Bibliothek am Handy (§5.5 Punkt 9). Bei 390 px
   fällt der Fliesstext auf 16 px zurück — 17 px und 1.72 Zeilenhöhe ergeben
   auf schmalen Schirmen zu wenig Zeichen je Zeile. */
@media(max-width:520px){
  .jc-prosa{ font-size:16px; line-height:1.68 }
  .jc-kopf{ padding:4px 0 20px }
  .jc-kopf .jc-lede{ font-size:17px }
  .jc-frage{ margin-top:32px }
  .jc-tafel{ padding:16px 16px }
}