/* ============================================
   Zentrales Farbkonzept – Thüringer Schachjugend
   Einmal hier ändern, wirkt überall (in Custom-
   Modulen wie Foto-Slider/Topbar-Icons genauso wie
   unten in diesem File), da CSS-Variablen global
   über die ganze Seite gelten.
   ============================================ */
:root {
  --red: #c0272d;
  --red-dark: #8f1d21;
  --green: #5f9a2a;
  --ink: #2a2a28;
  --ink-soft: #6b6a64;
  --paper: #faf8f4;
  --card: #ffffff;
  --border: #e7e2d8;
}

/* Schmaler roter Markenstreifen über und unter dem
   Header. Ergänzt das Cassiopeia-Farbfeld-Panel, das
   selbst keine "nur ein Streifen"-Option kennt. */
body > header {
  border-top: 5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
}

/* Logo + Tagline nebeneinander statt untereinander.
   !important nötig: Cassiopeia bringt für .navbar-brand
   selbst eine display-Regel mit, die unsere sonst aussticht. */
.navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.navbar-brand > * {
  margin: 0; /* Cassiopeias Abstand fürs Untereinander-Layout entfernen */
}
.navbar-brand img {
  max-height: 80px; /* Logo verkleinert, Original war deutlich größer */
  width: auto;       /* Seitenverhältnis erhalten */
}

/* Tagline-Text ("Thüringer Schachjugend"): Farbe + Größe.
   Zielt bewusst auf "alles in navbar-brand außer dem Bild"
   statt auf .site-description direkt, damit es unabhängig
   von der exakten Klasse funktioniert. font-size an die
   H1-Größe der Seite angeglichen (2rem). !important auch
   hier nötig, gleicher Grund wie oben. */
.navbar-brand > :not(img) {
  color: var(--ink, #2a2a28) !important;
  font-size: 2rem !important;
}

/* Untertitel unter „Thüringer Schachjugend“ (SUBTITLE-THSB).
   Cassiopeia gibt die Site-Beschreibung nur als reinen Text aus,
   daher kommt der Untertitel per ::after. Screenreader lesen ihn mit. */
.site-description { line-height: 1.15 !important; }
.site-description::after {
  content: "im Thüringer Schachbund e.V.";
  display: block; margin-top: 4px;
  font-size: max(.45em, .78rem); line-height: 1.3; font-weight: 400;
  letter-spacing: .01em; color: var(--ink-soft);
}

/* ============================================
   Header-Layout: Topbar oben volle Breite, darunter
   Marke links / Hamburger-Bereich rechts.

   Bewusst OHNE Breiten-Beschränkung (kein @media mehr):
   Da der Hamburger jetzt auf allen Breiten gewünscht ist
   (siehe unten), soll auch die Anordnung überall gleich
   sein - eine Regel statt zwei getrennte für schmal/breit.

   CSS Grid statt Flexbox: Cassiopeia setzt auf ".grid-child"
   (Logo UND Nav sind beide ".grid-child", eine generische,
   mehrfach verwendete Klasse) ein eigenes "width: 100%", das
   in Flexbox jeden flex-basis/flex-Wert übersteuert hat. Bei
   Grid bestimmt die zugewiesene Spalte die tatsächliche
   Breite, nicht die eigene width-Eigenschaft des Kindes.

   ":has(.navbar-brand)" wählt gezielt genau das eine
   grid-child mit dem Logo aus, nicht irgendein anderes -
   Technik aus der offiziellen Joomla Community Magazine
   Anleitung zum Cassiopeia-Header-Umbau.
   ============================================ */
header.container-header {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "top top"
    "logo nav";
  align-items: center;
  padding-left: max(0px, calc((100% - 82.5rem) / 2));
  padding-right: max(0px, calc((100% - 82.5rem) / 2));
}
header.container-header > .container-topbar {
  grid-area: top;
}
header.container-header .grid-child:has(.navbar-brand) {
  grid-area: logo;
}
header.container-header .container-nav {
  grid-area: nav;
  justify-self: end;
}

/* Hamburger-Button einfärben. Nutzt hier tatsächlich
   <span class="icon-menu"> (Icon-Font-Zeichen), NICHT
   Bootstraps .navbar-toggler-icon (SVG-Hintergrund) -
   deshalb greift die Farbe direkt am Button selbst. */
.container-header .navbar-toggler {
  color: var(--red) !important;
  border-color: var(--red) !important;
}

/* ============================================
   2) GRUNDFLAECHEN
   ============================================ */
body { background: var(--paper); color: var(--ink); }
a { color: var(--red); }
a:hover, a:focus { color: var(--red-dark); }

/* ============================================
   3) TOPBAR
   Das Social-Modul bringt eigenes CSS mit und setzt die
   Icon-Farbe mit !important - daher hier hoehere Spezifitaet
   statt einer Aenderung am Modul. Der dunkle Balken entsteht
   als Verlauf am Header, damit er ueber die volle Breite
   laeuft; seine Hoehe muss zur min-height der Topbar passen.
   ============================================ */
header.container-header {
  background: linear-gradient(var(--ink) 0 42px, var(--card) 42px);
}
header.container-header > .container-topbar {
  min-height: 42px; display: flex; align-items: center;
}
.container-topbar .thsj-topbar { gap: 2px; padding: 0; }
.container-topbar .thsj-topbar__link {
  color: var(--paper) !important;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
}
.container-topbar .thsj-topbar__link:hover,
.container-topbar .thsj-topbar__link:focus-visible { color: #fff !important; }

/* ============================================
   4) HAUPTNAVIGATION
   ============================================ */
.container-nav .mod-menu { display: flex; align-items: center; gap: 30px; }
.container-nav .metismenu-item > a {
  color: var(--ink); font-weight: 500; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.container-nav .metismenu-item > a:hover,
.container-nav .metismenu-item.active > a,
.container-nav .metismenu-item.current > a {
  color: var(--red); border-bottom-color: var(--red);
}

/* ============================================
   5) STARTSEITE - AUFMACHER UND KARTEN
   Joomla gibt das Beitragsbild als float aus; hier wird
   daraus ein zweispaltiges Raster.
   ============================================ */
.blog-featured .blog-item {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px; align-items: start;
  background: var(--card); border: 1px solid var(--border);
  padding: 24px; margin-bottom: 24px;
}

/* Beiträge ohne Beitragsbild: Der Text ist dann das einzige Kind und
   würde sonst in der schmalen Bildspalte landen — hier über beide Spalten. */
.blog-featured .blog-item > .item-content:only-child {
  grid-column: 1 / -1;
}
.blog-featured .items-leading .blog-item {
  border-top: 4px solid var(--red); padding: 28px;
}
.blog-featured .item-image {
  float: none !important; margin: 0 !important; width: auto !important;
}
.blog-featured .item-image img { display: block; width: 100%; height: auto; }
.blog-featured .item-content > p:last-child { margin-bottom: 0; }
.blog-item .item-title {
  margin: 0 0 10px; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em;
}
.blog-featured .items-leading .item-title { font-size: 2rem; }
.blog-item .item-title a { color: var(--ink); text-decoration: none; }
.blog-item .item-title a:hover { color: var(--red); }

/* Infozeile: Kategorie als rotes Label, Datum daneben.
   font-size 0 blendet das Wort "Kategorie:" aus, das als
   reiner Text neben dem Link steht. */
.article-info {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; margin: 0 0 14px;
}
.article-info dd { margin: 0; }
.article-info .icon-folder-open,
.article-info .icon-calendar,
.article-info .icon-fw { display: none; }
.article-info .category-name { font-size: 0; }
.article-info .category-name a {
  display: inline-block; background: var(--red); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 4px 9px; text-decoration: none;
}
.article-info .category-name a:hover { background: var(--red-dark); color: #fff; }
/* Datum: .create bei Erstellungsdatum, .published bei Veröffentlichungs-
   datum — die Startseite zeigt letzteres, die Themenseiten ersteres. */
.article-info .create,
.article-info .published { font-size: .82rem; color: var(--ink-soft); }
/* Weiterlesen ist die Zweitmoeglichkeit in den Beitrag — der Titel ist schon
   ein Link dorthin. Deshalb Textlink statt Knopf: das Rot bleibt damit dem
   Kategorie-Label und den Linien. Das padding-block haelt die Tippflaeche bei
   rund 36px; ein nackter Textlink waere am Handy zu knapp zu treffen. */
p.readmore { margin: 14px 0 0; }
p.readmore .btn {
  background: none; border: 0; border-radius: 0;
  padding: 6px 0; display: inline-block; text-align: left;
  color: var(--red); font-size: .92rem; font-weight: 500;
  text-decoration: none;
}
p.readmore .btn:hover,
p.readmore .btn:focus-visible {
  background: none; color: var(--red-dark); text-decoration: underline;
}

/* ============================================
   6) SIDEBAR-KARTEN
   ============================================ */
.container-sidebar-right .card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; margin-bottom: 26px;
}
.container-sidebar-right .card-header {
  background: none; border-bottom: 2px solid var(--red);
  padding: 14px 18px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.container-sidebar-right .card-body { padding: 4px 18px 14px; }

/* ============================================
   7) TERMINE (jEvents)
   Das Modul gibt eine Tabelle aus: Datum, Zeilenumbruch, Titel.
   Zeilen werden zu Bloecken, das Datum steht ueber dem Titel,
   die Icon-Spans entfallen. jEvents setzt per style-Attribut die
   Kategoriefarbe als Rahmenfarbe - die wird mit !important auf die
   neutrale Trennlinie zurueckgesetzt (20.09.2026).
   ============================================ */
.mod_events_latest_table,
.mod_events_latest_table tbody,
.mod_events_latest_table tr { display: block; width: 100%; }
/* jEvents bringt eine zusaetzliche graue Linie an jeder Zeile mit. */
.mod_events_latest_table tr { border: 0 !important; }
.mod_events_latest_table td {
  display: block; padding: 11px 0;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
}
.mod_events_latest_table tr:last-child td { border-bottom: 0 !important; }
.mod_events_latest_table td > br,
.mod_events_latest_table td > .icon-calendar,
.mod_events_latest_table td > .icon-hand-right { display: none; }
.mod_events_latest_date {
  display: block; margin-bottom: 3px;
  font-size: .82rem; font-weight: 700; line-height: 1.3; color: var(--red);
}
.mod_events_latest_content { display: block; }
.mod_events_latest_content a {
  color: var(--ink); text-decoration: none;
  font-weight: 500; font-size: .95rem; line-height: 1.3;
}
.mod_events_latest_content a:hover { color: var(--red); }
/* Link „Ganzen Kalender ansehen“ unter der Liste: abgesetzt durch
   Abstand und Trennlinie, Linkstil wie im Modul Spielbetrieb. */
.mod_events_latest_callink {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border);
}
.mod_events_latest_callink a { color: var(--red); text-decoration: none; }
.mod_events_latest_callink a:hover,
.mod_events_latest_callink a:focus-visible { text-decoration: underline; }

/* ============================================
   8) KONTAKTKARTE
   ============================================ */
.thsj-kontaktkarte { display: flex; flex-direction: column; }
.thsj-kontaktkarte__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #e7e3dc;
	margin: 0 0 4px;
}

.thsj-kontakt-name {
  margin: 8px 0 2px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
}
.thsj-kontakt-funktion { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.thsj-kontakt-text {
  margin: 12px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}
.thsj-kontakt-mail { margin: 14px 0 4px; }
.thsj-kontakt-mail a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; background: var(--red); color: #fff;
  font-weight: 500; text-decoration: none;
}
.thsj-kontakt-mail a:hover { background: var(--red-dark); color: #fff; }

/* ============================================
   9) DOKUMENTENLISTE
   ============================================ */
.thsj-dokumente { list-style: none; margin: 0; padding: 0; }
.thsj-dokumente li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.thsj-dokumente li:last-child { border-bottom: 0; }
.thsj-dokumente a { color: var(--ink); text-decoration: none; font-weight: 500; }
.thsj-dokumente a:hover { color: var(--red); }
.thsj-doc-meta { font-size: .78rem; color: var(--ink-soft); }

/* ============================================
   10) THEMENSEITE (Schulschach und Folgeseiten)
   ============================================ */
/* Die Seitenüberschrift kommt auf umgestellten Themenseiten aus dem
   Einleitungsmodul in main-top (Beitragstitel als H1). Grund: der Titel
   der Blogansicht stünde sonst unter dem Einleitungstext, weil main-top
   im Markup vor der Komponente liegt. Auf den noch nicht umgestellten
   Seiten kommt sie weiter aus der Beitragsansicht — beide sehen gleich aus. */
.com-content-article .page-header h1,
.container-component .main-top .mod-articles-title {
  margin: 0 0 6px; font-size: 2.6rem; line-height: 1.1; font-weight: 700;
  letter-spacing: -.025em; text-wrap: balance;
}
/* Das Einleitungsmodul steht offen im Text, nicht als Karte — Cassiopeia
   gibt Module in main-top sonst mit Rahmen und Innenabstand aus. */
.container-component .main-top.card {
  background: none; border: 0;
  /* Nur margin-bottom, kein Shorthand: Cassiopeia gibt jedem ersten Kind von
     .container-component und den Seitenspalten margin-top: 1em. Ein Shorthand
     würde diesen Kopfabstand mitnehmen, und der Einleitungstext stünde dann
     höher als die erste Karte in der Seitenspalte.
     Die 40px hier plus die 1em, die <main> auf demselben Weg bekommt, machen
     den Abstand zur Beitragsliste. */
  margin-bottom: 40px;
}
.container-component .main-top > .card-body { padding: 0; }
.container-component .main-top .mod-articles-items,
.container-component .main-top .mod-articles-items > li { margin: 0; padding: 0; }
.thsj-lead {
  font-size: 1.15rem; line-height: 1.6; color: #55534e;
  max-width: 58ch; margin-bottom: 28px;
}
.com-content-article__body h2,
.container-component .main-top .mod-articles-item-content h2 {
  margin: 34px 0 14px; padding-bottom: 10px;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  border-bottom: 2px solid var(--red);
}
.com-content-article__body p,
.container-component .main-top .mod-articles-item-content > p:not(.thsj-lead) { max-width: 66ch; line-height: 1.65; color: #55534e; }
.thsj-leistungen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 30px; list-style: none; margin: 0; padding: 0;
}
.thsj-leistungen li {
  position: relative; padding-left: 30px; line-height: 1.5; color: #55534e;
}
.thsj-leistungen li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}

/* ============================================
   11) RUECKBLICK-SLIDER
   ============================================ */
.container-bottom-a .card {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
}
.container-bottom-a .card-body { padding: 12px; }

/* ============================================
   12) FUSSZEILE
   ============================================ */
.container-footer .grid-child {
  align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding-block: 24px;
}
/* Footer-Menü: Links nebeneinander. Cassiopeia setzt .mod-menu auf
   flex-direction: column, deshalb hier ausdrücklich row.
   Social-Media-Icons stehen nur noch in der Topbar (Modul 122
   „Footer: Folgen“ am 20.09.2026 unveröffentlicht). */
.container-footer .mod-menu {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 22px;
  margin: 0; padding: 0; list-style: none;
}
.container-footer .mod-menu > li { margin: 0; padding: 0; }
/* Copyright in derselben Größe wie die Footer-Links. */
.thsj-copyright { margin: 0; font-size: inherit; }

/* ============================================
   13) SCHMALE BILDSCHIRME
   ============================================ */
@media (max-width: 782px) {
  .blog-featured .blog-item { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .thsj-leistungen { grid-template-columns: minmax(0, 1fr); }
  .container-footer .grid-child { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .navbar-brand > :not(img) { font-size: 1.15rem !important; }
  .navbar-brand img { max-height: 54px; }
  .com-content-article .page-header h1,
  .container-component .main-top .mod-articles-title { font-size: 1.9rem; }
  .blog-featured .items-leading .item-title { font-size: 1.5rem; }
}


/* ============================================
   14) SEITENUEBERSCHRIFT DER STARTSEITE
   Die Startseite braucht eine h1, sonst beginnt das
   Dokument mit einem Artikeltitel und der Schriftzug
   im Kopf ist nur ein div. Weil der Schriftzug die
   Information schon sichtbar traegt, wird die
   Ueberschrift hier nur optisch ausgeblendet -
   fuer Screenreader und Suchmaschinen bleibt sie da.
   ============================================ */
body.view-featured .page-header {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================
   15) VERBANDSSEITEN
   Bausteine fuer "Wir stellen uns vor" und
   "Leistungssport". Bewusst allgemein gehalten,
   damit sie auf weiteren Seiten wiederverwendbar
   sind.
   ============================================ */

/* Kennzahlen-Kacheln */
.thsj-zahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; list-style: none; margin: 0 0 34px; padding: 0;
}
.thsj-zahlen li {
  background: var(--card); border: 1px solid var(--border);
  border-top: 3px solid var(--red); padding: 20px 22px;
}
.thsj-zahl {
  display: block; font-size: 2.1rem; font-weight: 700;
  line-height: 1.1; letter-spacing: -.03em;
}
.thsj-zahl-text {
  display: block; margin-top: 6px; font-size: .88rem;
  line-height: 1.4; color: var(--ink-soft);
}

/* Unterzeile direkt unter einer Ueberschrift */
.thsj-sub {
  margin: -6px 0 18px !important;
  color: var(--ink-soft); font-size: .92rem;
}

/* Personenraster: Vorstand, Jugendwarte, Ansprechpartner */
.thsj-personen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; list-style: none; margin: 0 0 10px; padding: 0;
}
.thsj-personen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thsj-personen--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px;
}
/* In der rechten Spalte ist für zwei Karten nebeneinander kein Platz. Das
   Modul kennt selbst nur 2 bis 4 Spalten, deshalb hier auf eine umbrechen
   (Ansprechpartner auf der Leistungssportseite). */
.container-sidebar-right .thsj-personen,
.container-sidebar-right .thsj-personen--zwei {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px; max-width: none;
}
.thsj-personen li {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  padding: 0 0 16px;
}
.thsj-personen img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #e7e3dc; margin: 0 0 12px;
}
.thsj-rolle {
  display: block; margin: 0 16px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--red);
}
.thsj-name {
  display: block; margin: 4px 16px 0;
  font-size: 1.02rem; font-weight: 700; line-height: 1.25;
}
.thsj-personen .thsj-mail { margin: 8px 16px 0; font-size: .85rem; }
.thsj-personen .thsj-mail a { color: var(--ink-soft); text-decoration: none; }
.thsj-personen .thsj-mail a:hover { color: var(--red); text-decoration: underline; }

/* Unbesetzte Stelle: sichtbar lassen, nicht verschweigen */
.thsj-personen li.thsj-vakant {
  background: none; border: 1px dashed var(--border);
  align-items: center; justify-content: center; text-align: center;
  min-height: 170px; padding: 24px;
}
.thsj-vakant .thsj-rolle { margin: 0; }
.thsj-vakant .thsj-name { margin: 4px 0 0; color: var(--ink-soft); }

/* Ordnungen: Dokument mit Aenderungshinweis */
.thsj-ordnungen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; list-style: none; margin: 0; padding: 0;
}
.thsj-ordnungen li {
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--red); padding: 20px 22px;
}
.thsj-ordnungen a {
  font-size: 1.08rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.thsj-ordnungen a:hover { color: var(--red); }
.thsj-ordnungen .thsj-doc-meta { display: block; margin-top: 4px; }
.thsj-aenderung {
  margin: 12px 0 0 !important; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
  max-width: none !important;
}

/* Hervorgehobener Download, zum Beispiel die Kaderliste */
.thsj-kader {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
  margin: 0 0 10px; padding: 24px 26px;
  background: var(--red); color: #fff;
}
.thsj-kader p { margin: 0 !important; max-width: none !important; color: #fff; }
.thsj-kader-titel { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.thsj-kader-meta { margin-top: 4px !important; font-size: .85rem; opacity: .85; }
.thsj-kader a {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 24px; background: #fff; color: var(--red);
  font-weight: 700; text-decoration: none;
}
.thsj-kader a:hover { background: var(--ink); color: #fff; text-decoration: none; }

@media (max-width: 782px) {
  .thsj-zahlen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .thsj-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .thsj-ordnungen { grid-template-columns: minmax(0, 1fr); }
  .thsj-kader { flex-direction: column; align-items: flex-start; }
}


/* Portraetflaeche der Personenkarten.
   Vorhandenes Foto wird auf ein ruhiges Band von 170px
   beschnitten; wo noch kein Foto gepflegt ist, steht ein
   gleich hohes graues Feld, damit das Raster gleichmaessig
   bleibt und sichtbar ist, was noch fehlt. */
.thsj-personen img {
  aspect-ratio: auto; height: 170px; object-position: 50% 22%;
}
.thsj-personen li:not(:has(img)):not(.thsj-vakant)::before {
  content: ""; display: block; height: 170px; margin-bottom: 12px;
  background: #ece8e1;
}

/* ==========================================================
   Beitrags-Anhänge (Custom Fields „Anhänge" und „Anhang")
   Die Download-Karte liefert das Override
   html/plg_fields_media/document.php; die Position direkt
   unter dem Artikeltext setzt html/com_content/article/default.php.
   Mehrere Anhänge kommen aus dem wiederholbaren Feld „Anhänge"
   (Subform). Dessen Rahmen liefert html/plg_fields_subform/subform.php
   als .thsj-attachments. Das alte Einzelfeld „Anhang" läuft weiter
   über Joomlas .fields-container, solange noch Beiträge es nutzen.
   ========================================================== */

.fields-container {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.fields-container > li + li {
  margin-top: 0.75rem;
}

/* Wiederholbares Feld: der Container ersetzt .fields-container. Seine
   direkten Kinder sind die <span class="field-value"> der einzelnen
   Dokumentfelder. Spans sind inline, ein margin-top darauf bleibt also
   wirkungslos, solange sie keine Blöcke sind — daher die erste Regel. */
.thsj-attachments {
  /* Kein eigener Kopfabstand: der Container sitzt immer in Joomlas
     .fields-container, die den Abstand zum Artikeltext schon setzt. */
  margin: 0;
}

.thsj-attachments > .field-value {
  display: block;
}

.thsj-attachments > * + * {
  margin-top: 0.75rem;
}

.thsj-attachment {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  background-color: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.thsj-attachment:hover,
.thsj-attachment:focus-visible {
  background-color: var(--card);
  border-color: var(--red);
  box-shadow: 0 2px 10px rgba(42, 42, 40, 0.08);
  color: var(--ink);
  text-decoration: none;
}

.thsj-attachment:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Icon kommt als Inline-SVG und erbt die Farbe über currentColor. */
.thsj-attachment__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--red);
}

.thsj-attachment__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.thsj-attachment__label {
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.thsj-attachment:hover .thsj-attachment__label {
  color: var(--red-dark);
  text-decoration: underline;
}

/* Zweite Zeile: Dateityp und Größe, bewusst zurückhaltend. */
.thsj-attachment__meta {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

@media (max-width: 575.98px) {
  .thsj-attachment {
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
  }

  .thsj-attachment__label {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thsj-attachment {
    transition: none;
  }
}

/* ==========================================================
   Terminliste (jEvents-Jahresansicht)
   Markup: templates/cassiopeia_extended/html/com_jevents/year/listevents.php
   ========================================================== */

.jev-year-view { color: var(--ink); }

.jev-year-view__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--red);
}

.jev-year-view__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.jev-year-view__headline {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  line-height: 1.1;
  font-weight: 700;
}

.jev-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Nur im Ausdruck sichtbar (Standangabe wie im PDF). */
.jev-print-stand { display: none; }

.jev-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.jev-toolbar__btn svg { width: 18px; height: 18px; color: var(--red); flex: 0 0 auto; }

.jev-toolbar__btn:hover,
.jev-toolbar__btn:focus-visible { border-color: var(--red); color: var(--red-dark); }

.jev-toolbar__btn[disabled] { opacity: 0.6; cursor: progress; }

.jev-filter {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  background-color: var(--card);
}

.jev-filter__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
  flex: 1 1 150px;
}

.jev-filter__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.jev-filter__select {
  height: 44px;
  width: 100%;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.jev-filter__select:focus-visible,
.jev-filter__btn:focus-visible,
.jev-event__ical:focus-visible,
.jev-event__title:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.jev-filter__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 44px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  cursor: pointer;
}

.jev-filter__toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--red); }

.jev-filter__btn {
  height: 44px;
  padding: 0 1.6rem;
  border: 1px solid var(--red);
  background-color: var(--red);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jev-filter__btn:hover { background-color: var(--red-dark); border-color: var(--red-dark); }

.jev-month-block { margin-top: 1.75rem; }

.jev-month-block__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.7rem 1.1rem;
  background-color: var(--red);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.jev-month-block__header::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}

.jev-event-list { border: 1px solid var(--border); border-top: 0; background-color: var(--card); }

.jev-event {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.jev-event:last-child { border-bottom: 0; }

.jev-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  align-self: stretch;
  padding: 0.9rem 0.4rem;
  background-color: var(--paper);
  border-right: 1px solid var(--border);
  text-align: center;
}

.jev-event__day { font-size: 1.55rem; font-weight: 700; line-height: 1; }

.jev-event__weekday {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.jev-event__until { margin-top: 0.2rem; font-size: 0.7rem; color: var(--ink-soft); }

.jev-event__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1.2rem;
  min-width: 0;
}

.jev-event__headline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
}

.jev-event__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.jev-event__title:hover { color: var(--red-dark); text-decoration: underline; }

.jev-event__flag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.jev-event__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.7rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Eigene Kategorien in Verbandsrot, uebernommene Feeds neutral. */
.jev-event__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 24px;
  padding: 0 0.65rem;
  border: 1px solid #e3c7c8;
  background-color: #fbf1f1;
  color: var(--red-dark);
  font-size: 0.78rem;
  font-weight: 500;
}

.jev-event__cat::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--red);
}

.jev-event__cat--extern { border-color: var(--border); background-color: #f4f2ed; color: var(--ink-soft); }

.jev-event__cat--extern::before { background-color: #9c968c; }

.jev-event__actions { padding: 0.9rem 1.2rem; }

.jev-event__ical {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 36px;
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.jev-event__ical svg { width: 15px; height: 15px; color: var(--red); }

.jev-event__ical:hover { border-color: var(--red); color: var(--red-dark); text-decoration: none; }

.jev-event--naechster,
.jev-event--heute { border-left: 3px solid var(--red); }

.jev-event--heute .jev-event__date { background-color: #fbf1f1; }

.jev-event--heute .jev-event__day,
.jev-event--heute .jev-event__weekday { color: var(--red); }

.jev-event--vergangen { opacity: 0.55; }

.jev-empty {
  margin-top: 1.75rem;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--border);
  background-color: var(--card);
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 575.98px) {
  .jev-event { grid-template-columns: minmax(0, 1fr); }

  .jev-event__date {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .jev-event__day { font-size: 1.15rem; }

  .jev-event__body { padding: 0.8rem 1rem; }

  .jev-event__actions { padding: 0 1rem 0.9rem; }

  .jev-event__ical { width: 100%; height: 44px; justify-content: center; }

  .jev-filter__group { flex: 1 1 100%; }

  .jev-filter__btn { width: 100%; }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  /* Nur die Terminliste drucken — Kopf, Menü, Seitenleiste und Fuß entfallen,
     damit das Blatt dem PDF-Export entspricht. */
  body > header.container-header,
  body > footer.container-footer,
  .site-grid > .container-sidebar-right,
  .container-header,
  .container-footer,
  .container-sidebar-right,
  .container-banner,
  .container-top-a,
  .container-top-b,
  .container-bottom-a,
  .container-bottom-b,
  .breadcrumb,
  #back-top {
    display: none !important;
  }

  .site-grid {
    display: block !important;
  }

  .container-component {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body {
    background: #fff !important;
    font-size: 10pt;
  }

  .jev-toolbar,
  .jev-filter,
  .jev-event__actions,
  .jev-event__flag,
  .jev-year-view__eyebrow {
    display: none !important;
  }

  .jev-year-view__head {
    padding-bottom: 2mm;
    border-bottom: 0.6mm solid var(--red);
  }

  .jev-year-view__headline {
    font-size: 18pt;
    color: var(--red);
  }

  .jev-print-stand {
    display: block;
    margin: 2mm 0 0;
    font-size: 7.5pt;
    color: var(--ink-soft);
    text-align: right;
  }

  .jev-month-block {
    margin-top: 6mm;
    break-inside: auto;
    page-break-inside: auto;
  }

  .jev-month-block__header {
    padding: 2mm 3mm;
    font-size: 11pt;
    background-color: var(--red) !important;
    color: #fff !important;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .jev-event-list {
    border: 0 !important;
    background: transparent !important;
  }

  .jev-event {
    grid-template-columns: 18mm minmax(0, 1fr);
    padding: 1.5mm 0;
    border: 0 !important;
    border-bottom: 0.2mm solid var(--border) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .jev-event__date {
    align-self: start;
    justify-content: flex-start;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
  }

  .jev-event__day {
    font-size: 12pt;
  }

  .jev-event__weekday,
  .jev-event__until {
    font-size: 7pt;
  }

  .jev-event__body {
    gap: 0.8mm;
    padding: 0 0 0 2mm;
  }

  .jev-event__title {
    font-size: 10pt;
    color: var(--ink) !important;
    text-decoration: none;
  }

  /* Metazeile wie im PDF: schlichte Angaben, mit Mittelpunkt getrennt. */
  .jev-event__meta {
    gap: 0 1.5mm;
    font-size: 7.5pt;
  }

  .jev-event__cat {
    height: auto;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink-soft) !important;
    font-weight: 400;
  }

  .jev-event__cat::before {
    display: none;
  }

  .jev-event__meta > span + span::before {
    content: "·\00a0";
  }

  .jev-event--vergangen {
    opacity: 1;
  }

  .jev-event--naechster,
  .jev-event--heute {
    border-left: 0 !important;
  }

  .jev-event--heute .jev-event__date {
    background: transparent !important;
  }

  .jev-event--heute .jev-event__day,
  .jev-event--heute .jev-event__weekday {
    color: var(--ink) !important;
  }

  a[href]::after {
    content: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jev-toolbar__btn,
  .jev-filter__btn,
  .jev-event__ical { transition: none; }
}

/* ··········································································
   THEMENSEITEN ALS KATEGORIEBLOG
   Menüpunkt vom Typ „Beiträge » Kategorieblog" auf die Oberkategorie
   „Beiträge", gefiltert nach Schlagwort. Aktuell: Schulschach (Menüpunkt
   221). Dieselben Regeln greifen für Leistungssport und Verband, sobald
   deren Menüpunkte auf denselben Typ umgestellt sind.
   Angelegt am 17.09.2026; ersetzt den Modulblock in main-bottom.

   Die Zeilen sehen aus wie die Aufmacher auf der Startseite: Karte mit
   Rahmen, Vorschaubild links in 320px, Text rechts. Die Regeln stehen
   trotzdem hier und nicht bei .blog-featured, weil die Blogansicht den
   Titel in .page-header ausgibt und nicht in .item-title — die Regeln
   der Startseite greifen deshalb nicht mit.

   Das Layout setzt EINE Spalte voraus (im Menüpunkt: Spalten = 1). Bei
   zwei Spalten gibt Cassiopeia die Klasse masonry-2 auf dem Umschlag aus;
   die 320px-Bildspalte ist dann zu breit und braucht eine eigene Regel.

   Die Seitenüberschrift steht NICHT hier: sie kommt aus dem Modul in
   main-top (Abschnitt 10 dieser Datei), der Titel der Blogansicht ist im
   Menüpunkt abgeschaltet.

   Blätterung, Trefferzahl und die Aufteilung in Anrisse und Restliste
   kommen aus der Blogansicht selbst und stehen im Menüpunkt, nicht hier.
   Die Infozeile (Kategorie als rotes Label, Datum daneben) und der
   Weiterlesen-Knopf sind weiter oben in dieser Datei global geregelt und
   gelten hier mit.

   Gliederung: 1 Zeile | 2 Bild | 3 Titel | 4 Restliste | 5 Blätterung |
               6 Schmale Bildschirme
   ·········································································· */

/* 1 ZEILE -----------------------------------------------------------------
   Gleicher Aufbau wie .blog-featured .blog-item auf der Startseite. */
.com-content-category-blog .blog-item {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px; align-items: start;
  background: var(--card); border: 1px solid var(--border);
  padding: 24px; margin-bottom: 24px;
}
/* Beiträge ohne Einleitungsbild: der Text ist dann das einzige Kind und
   würde sonst in der schmalen Bildspalte landen — hier über beide Spalten. */
.com-content-category-blog .blog-item > .item-content:only-child {
  grid-column: 1 / -1;
}
/* Ein Aufmacher wird, wenn im Menüpunkt einer eingestellt ist, durch die
   rote Linie abgesetzt — wie auf der Startseite. */
.com-content-category-blog .items-leading .blog-item {
  border-top: 4px solid var(--red); padding: 28px;
}

/* 2 BILD ------------------------------------------------------------------
   Joomla gibt das Einleitungsbild als gefloatete figure aus; hier steht es
   als Block in der linken Spalte. Bewusst ohne festen Beschnitt: ein guter
   Teil der Vorschaubilder sind Ausschreibungsgrafiken, deren Text ein
   4:3-Schnitt unten abschneiden würde (zum Beispiel KSM 2026). */
.com-content-category-blog .item-image {
  float: none !important; width: auto !important; margin: 0 !important;
}
.com-content-category-blog .item-image img {
  display: block; width: 100%; height: auto;
}

/* 3 TITEL -----------------------------------------------------------------
   In der Blogansicht steht der Titel in .page-header, nicht in .item-title;
   die Regeln für .blog-item .item-title weiter oben greifen hier also nicht. */
.com-content-category-blog .blog-item .page-header { margin: 0; }
.com-content-category-blog .blog-item .page-header h2 {
  margin: 0 0 10px; font-size: 1.45rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -.01em;
}
.com-content-category-blog .items-leading .page-header h2 { font-size: 2rem; }
.com-content-category-blog .blog-item .page-header h2 a {
  color: var(--ink); text-decoration: none;
}
.com-content-category-blog .blog-item .page-header h2 a:hover { color: var(--red); }
.com-content-category-blog .blog-item .item-content > p:last-child { margin-bottom: 0; }

/* 4 RESTLISTE -------------------------------------------------------------
   Was nach den Anrissen übrig bleibt, gibt Joomla als nackte Linkliste
   aus. Überschrift per ::before, weil im Markup keine steht. */
.com-content-category-blog .items-more { margin: 4px 0 0; }
.com-content-category-blog .items-more::before {
  content: "Weitere Beiträge";
  display: block; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.com-content-category-blog .items-more ol { list-style: none; margin: 0; padding: 0; }
.com-content-category-blog .items-more li {
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.com-content-category-blog .items-more li a {
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.com-content-category-blog .items-more li a:hover { color: var(--red); }

/* 5 BLÄTTERUNG ------------------------------------------------------------
   Nur Abstände und die Trefferzeile; das Aussehen der Seitenzahlen kommt
   aus Bootstrap. */
.com-content-category-blog__navigation { margin-top: 30px; }
.com-content-category-blog__counter { font-size: .82rem; color: var(--ink-soft); }

/* 6 SCHMALE BILDSCHIRME ---------------------------------------------------
   Unter 768px steht das Bild über dem Text. */
@media (max-width: 767.98px) {
  .com-content-category-blog .blog-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px; padding: 18px;
  }
  .com-content-category-blog .items-leading .blog-item { padding: 20px; }
  .com-content-category-blog .blog-item .page-header h2 { font-size: 1.2rem; }
  .com-content-category-blog .items-leading .page-header h2 { font-size: 1.45rem; }
}

/* ==========================================================
   BEITRAGSSEITE: EINE LESESPALTE
   ==========================================================
   Titel, Infozeile, Schlagwörter, Beitragsbild, Text, Anhänge und
   Blätterung stehen bündig in einer gemeinsamen Spalte von 44rem.
   Vorher waren nur die Absätze auf 66ch begrenzt, alles andere lief über
   die volle Spaltenbreite. Die 66ch-Regel weiter oben gilt unverändert für
   den Einleitungstext der Themenseiten (main-top).
   Gilt für Beiträge unter dem Menüeintrag Aktuelles (Itemid 255) sowie für
   die Rechtsseiten Impressum (131) und Datenschutzerklärung (256) —
   Einzelseiten mit eigenem Menüpunkt wie Über uns haben ein eigenes Layout
   ohne Seitenspalte und bleiben voll breit. */
.itemid-255 .com-content-article.item-page,
.itemid-131 .com-content-article.item-page,
.itemid-256 .com-content-article.item-page { max-width: 44rem; }
.itemid-255 .com-content-article.item-page .com-content-article__body p,
.itemid-131 .com-content-article.item-page .com-content-article__body p,
.itemid-256 .com-content-article.item-page .com-content-article__body p { max-width: none; }
/* Die Breadcrumb-Leiste steht über dem Beitrag und bekommt dieselbe Breite,
   damit ihr grauer Hintergrund nicht über die Lesespalte hinausragt.
   Nur Beitragsansicht — die Archivseiten unter /aktuelles sind voll breit. */
.itemid-255.view-article .mod-breadcrumbs__wrapper { max-width: 44rem; }

/* ==========================================================
   SCHLAGWÖRTER
   ==========================================================
   Einheitlich als Umriss-Chips, unabhängig von der Linkklasse, die im
   jeweiligen Schlagwort eingetragen ist (btn-info aus Joomla 4,
   label label-info aus Joomla 3 usw.). Bewusst leiser als die rote
   Kategorie-Plakette. a.btn im Selektor, damit die Bootstrap-Zustände
   (.btn:hover, .btn:active) nicht gewinnen. */
ul.tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 16px; padding: 0;
}
ul.tags .list-inline-item { margin: 0; }
ul.tags a,
ul.tags a.btn {
  display: inline-block;
  padding: 2px 10px;
  font-size: .8rem; font-weight: 500; line-height: 1.5;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid #cfc8bb;
  border-radius: 2px;
  box-shadow: none;
  text-decoration: none;
}
ul.tags a:hover,
ul.tags a:focus-visible,
ul.tags a.btn:hover,
ul.tags a.btn:focus-visible,
ul.tags a.btn:active {
  color: var(--red);
  background: transparent;
  border-color: var(--red);
}

/* ==========================================================
   INFOZEILE AUF DER BEITRAGSSEITE
   ==========================================================
   Eine ruhige Zeile: Kategorie-Plakette · Datum · Autor, alles in der
   kleinen, gedämpften Schrift des Datums. Die Zugriffe sind am Menüeintrag
   Aktuelles ausgeblendet, das Wort "Veröffentlicht:" per Sprach-Override
   COM_CONTENT_PUBLISHED_DATE_ON = "%s". */

/* "Details" ist die Überschrift der Liste: für Screenreader behalten,
   sichtbar überflüssig. Gilt überall, wo die Infozeile vorkommt. */
.article-info .article-info-term {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.com-content-article .article-info { gap: 6px 12px; }
.com-content-article .article-info .category-name { order: -1; }
.com-content-article .article-info .published { order: 0; }
.com-content-article .article-info .createdby { order: 1; }
/* "Geschrieben von:" steht als reiner Text vor dem Namen. font-size 0
   blendet ihn sichtbar aus, Screenreader lesen ihn weiter vor. */
.com-content-article .article-info .createdby { font-size: 0; }
.com-content-article .article-info .createdby > :not(.icon-fw) {
  font-size: .82rem; color: var(--ink-soft);
}
.com-content-article .article-info .createdby > :not(.icon-fw)::before {
  content: "\00B7" / ""; margin-right: 12px;
}

/* ==========================================================
   ERGEBNISTABELLEN IN BEITRÄGEN
   ==========================================================
   Kreuztabellen als echte HTML-Tabellen statt Screenshots (zuerst KEM 2024).
   Aufbau im Beitrag:
   <div class="thsj-tabelle" role="region" aria-label="…" tabindex="0">
     <table class="thsj-ergebnis"><caption>…</caption>…</table>
   </div>
   Der Wrapper scrollt auf schmalen Bildschirmen waagerecht und ist per
   Tastatur erreichbar. Namen stehen als <th scope="row">. */
.thsj-tabelle { overflow-x: auto; margin: 0 0 24px; }
.thsj-tabelle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.thsj-ergebnis {
  border-collapse: collapse; width: 100%;
  font-size: .85rem; line-height: 1.35; font-variant-numeric: tabular-nums;
  background: var(--card);
}
.thsj-ergebnis caption {
  caption-side: top; text-align: left; padding: 0 0 6px;
  font-weight: 700; font-size: 1rem; color: var(--ink);
}
.thsj-ergebnis th,
.thsj-ergebnis td {
  padding: 5px 6px; border: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}
.thsj-ergebnis thead th,
.thsj-ergebnis .nr,
.thsj-ergebnis .zahl { white-space: nowrap; }
.thsj-ergebnis thead th {
  background: #f4f2ed; color: var(--ink-soft);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.thsj-ergebnis tbody th { font-weight: 600; color: var(--ink); }
.thsj-ergebnis .nr { text-align: center; padding-inline: 4px; min-width: 1.8em; }
.thsj-ergebnis .zahl { text-align: right; }
.thsj-ergebnis .selbst { background: #efece6; color: var(--ink-soft); }
.thsj-legende { font-size: .82rem; color: var(--ink-soft); }

/* ==========================================================
   ZWISCHENÜBERSCHRIFTEN IN BEITRÄGEN
   ==========================================================
   Unter Aktuelles (Itemid 255) sowie auf Impressum (131) und
   Datenschutzerklärung (256) sind Zwischenüberschriften bewusst nur
   wenig größer als der Fließtext. Vorher war H2 21,6 px mit roter Linie
   und H3 (Cassiopeia-Standard) sogar 24 px — zu wuchtig, weshalb die
   Redaktion fette Absätze statt Überschriften verwendet hat.
   Reihenfolge: H2 19,2 px > H3 16,8 px > H4 16 px, alle fett.
   Die Themenseiten (Über uns usw.) behalten die H2 mit roter Linie. */
.itemid-255 .com-content-article__body h2,
.itemid-131 .com-content-article__body h2,
.itemid-256 .com-content-article__body h2 {
  margin: 32px 0 8px; padding: 0; border: 0;
  font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  color: var(--ink);
}
.itemid-255 .com-content-article__body h3,
.itemid-131 .com-content-article__body h3,
.itemid-256 .com-content-article__body h3 {
  margin: 24px 0 6px;
  font-size: 1.05rem; font-weight: 700; line-height: 1.35;
  color: var(--ink);
}
.itemid-255 .com-content-article__body h4,
.itemid-131 .com-content-article__body h4,
.itemid-256 .com-content-article__body h4 {
  margin: 20px 0 4px;
  font-size: 1rem; font-weight: 700; line-height: 1.4;
  color: var(--ink);
}