/* ==========================================================================
   TSG Oberschöneweide – user.css für das Child-Template Cassiopeia_tsg
   Ablage: media/templates/site/cassiopeia_tsg/css/user.css (wird von Cassiopeia
   automatisch nach template.css geladen).
   Umsetzung des Claude-Design-Entwurfs "TSG Schach Startseite":
   Creme-Hintergrund, Nachtblau, Akzent Rot, Schriften Bricolage Grotesque + DM Sans.
   Die Startseiten-Abschnitte kommen aus eigenen Modulen (Ordner module/ im Projekt),
   alle Klassen dafür beginnen mit "tsg-".
   ========================================================================== */

/* ---- Schriften (selbst gehostet, SIL Open Font License) -------------------
   Dateien liegen in media/templates/site/cassiopeia_tsg/fonts/ */
@font-face {
  font-family: "TSG Display";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "TSG Text";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "TSG Text";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-opsz-italic.woff2") format("woff2-variations");
}

/* ---- Farben und Maße ----------------------------------------------------- */
:root {
  --tsg-navy: #0B2545;          /* Überschriften, Flächen */
  --tsg-navy-2: #12305A;        /* Schachbrettmuster auf Navy */
  --tsg-navy-linie: #1D3C68;
  --tsg-nacht: #08162A;         /* Fußzeile */
  --tsg-tinte: #0E1B2E;         /* Fließtext */
  --tsg-text-2: #34445A;
  --tsg-grau: #5B6B80;          /* Datum, Nebentexte */
  --tsg-hellblau: #B7C6DA;
  --tsg-creme: #F5F2EC;         /* Seitenhintergrund */
  --tsg-creme-2: #EAE4D9;
  --tsg-creme-3: #E0D8CA;
  --tsg-linie: #E3DCCF;
  --tsg-linie-2: #DCD3C4;
  --tsg-rand: #D6CDBD;
  --tsg-akzent: #E1263A;        /* Vereinsrot */
  --tsg-akzent-dunkel: #B0122A;
  --tsg-rosa: #FCE8EA;
  --tsg-rosa-hell: #FF8A98;
  --tsg-chip-blau: #E3EAF4;
  --tsg-chip-beige: #EFE9DF;

  --tsg-display: "TSG Display", "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --tsg-schrift: "TSG Text", "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tsg-breite: 1200px;
  --tsg-rand-seite: max(20px, calc((100% - var(--tsg-breite)) / 2));
  --tsg-schatten: 0 1px 2px rgba(14, 27, 46, 0.06), 0 8px 24px rgba(14, 27, 46, 0.06);
  --tsg-schatten-gross: 0 1px 2px rgba(14, 27, 46, 0.06), 0 12px 32px rgba(14, 27, 46, 0.08);
  --tsg-schach: repeating-conic-gradient(var(--tsg-navy-2) 0 25%, transparent 0 50%);
  --tsg-schach-hell: repeating-conic-gradient(var(--tsg-creme-3) 0 25%, transparent 0 50%);
  --tsg-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  --cassiopeia-color-primary: var(--tsg-navy);
  --cassiopeia-color-hover: var(--tsg-akzent);
  --cassiopeia-color-link: var(--tsg-navy);
  --link-color: var(--tsg-navy);
  --link-hover-color: var(--tsg-akzent);
  --template-bg-light: var(--tsg-creme);
  --body-bg: var(--tsg-creme);
  --body-color: var(--tsg-tinte);
  --body-font-family: var(--tsg-schrift);
}

body.site {
  background: var(--tsg-creme);
  color: var(--tsg-tinte);
  font-family: var(--tsg-schrift);
}
a { color: var(--tsg-navy); }
a:hover, a:focus { color: var(--tsg-akzent); }

/* Inhaltsbreite 1200 px wie im Entwurf (statt 4 × 19,875 rem) */
@supports (display: grid) {
  .site-grid {
    column-gap: 0;
    grid-template-columns: [full-start] minmax(20px, 1fr) [main-start] repeat(4, minmax(0, calc(var(--tsg-breite) / 4))) [main-end] minmax(20px, 1fr) [full-end];
  }
}
@media (min-width: 992px) {
  .container-sidebar-left { padding-right: 2rem; }
  .container-sidebar-right { padding-left: 2rem; }
}

/* ==========================================================================
   Kopfbereich: Wappen + Name links, Menü mittig, Instagram + "Mitglied werden" rechts
   ========================================================================== */
.container-header {
  background: var(--tsg-creme);
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid var(--tsg-linie);
  color: var(--tsg-navy);
}
.container-header > .grid-child { max-width: none; margin: 0; padding: 0; width: auto; }

/* Marke: Wappen (aus images/template) + Titel + Beschreibung */
.container-header .navbar-brand {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: var(--tsg-navy);
}
.container-header .navbar-brand::before {
  content: "";
  grid-row: 1 / 3;
  width: 40px;
  height: 47px;
  background: url("../../../../../images/template/tsg-wappen-klein.svg") center / contain no-repeat;
}
.container-header .navbar-brand a,
.container-header .navbar-brand a:hover {
  grid-column: 2;
  align-self: center;
  color: var(--tsg-navy);
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(22px, 1.8vw, 26px);   /* 26 px ab ca. 1440 px Breite */
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.container-header .navbar-brand a::after { content: ""; position: absolute; inset: 0; }   /* ganzes Wappen klickbar */
/* Unterzeile ("Schach · seit 1927") ausgeblendet, dafür größerer Schriftzug */
.container-header .site-description { display: none; }
.container-header .navbar-brand::before { grid-row: 1; }

/* Menü */
.container-header .mod-menu { color: var(--tsg-navy); }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button.mod-menu__heading {
  color: var(--tsg-navy);
  font-family: var(--tsg-schrift);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.container-header .mod-menu > li > button { color: var(--tsg-navy); }
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > button:hover,
.container-header .mod-menu > li.active > a { color: var(--tsg-akzent); text-decoration: none; }
.container-header .mod-menu > li.item-101 { display: none; }   /* Wappen-Eintrag "Home": die Marke verlinkt schon auf die Startseite */
/* kleiner Winkel statt des großen Dreiecks an Menüpunkten mit Untermenü */
.container-header .mod-menu .mm-toggler::after {
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}
.container-header .mod-menu .mm-toggler[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Aufklappmenüs */
.container-header .metismenu.mod-menu .mm-collapse {
  min-width: 250px;
  padding: 8px;
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid var(--tsg-linie);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(14, 27, 46, 0.14);
}
.container-header .metismenu.mod-menu .mm-collapse > li { padding: 0; }
.container-header .metismenu.mod-menu .mm-collapse > li > a {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--tsg-navy);
  font-size: 15px;
  text-decoration: none;
}
.container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
.container-header .metismenu.mod-menu .mm-collapse > li.active > a { background: var(--tsg-creme); color: var(--tsg-akzent); }

/* Instagram als runder Knopf mit Linien-Symbol */
.container-header .mod-menu > li.item-215 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  color: var(--tsg-navy);
}
.container-header .mod-menu > li.item-215 > a img { display: none; }
.container-header .mod-menu > li.item-215 > a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.8' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.8' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.container-header .mod-menu > li.item-215 > a:hover { border-color: var(--tsg-navy); }

/* Termine (Menüpunkt 475) als runder Knopf mit Kalender-Symbol, wie Instagram; der Text bleibt für Screenreader */
.container-header .mod-menu > li.item-475 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  color: var(--tsg-navy);
  font-size: 0;
}
.container-header .mod-menu > li.item-475 > a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3Ccircle cx='8.5' cy='14.5' r='0.9' fill='black'/%3E%3Ccircle cx='12' cy='14.5' r='0.9' fill='black'/%3E%3Ccircle cx='15.5' cy='14.5' r='0.9' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3Ccircle cx='8.5' cy='14.5' r='0.9' fill='black'/%3E%3Ccircle cx='12' cy='14.5' r='0.9' fill='black'/%3E%3Ccircle cx='15.5' cy='14.5' r='0.9' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.container-header .mod-menu > li.item-475 > a:hover,
.container-header .mod-menu > li.item-475.active > a { border-color: var(--tsg-navy); color: var(--tsg-akzent); }

/* "Mitglied werden" als roter Knopf */
.container-header .mod-menu > li.item-107 > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--tsg-akzent);
  color: #ffffff;
  font-weight: 700;
}
.container-header .mod-menu > li.item-107 > a:hover { background: var(--tsg-akzent-dunkel); color: #ffffff; }

/* Leiste für Angemeldete (Modul "Special Menu" an Position topbar, Zugriff Special):
   Beitrag schreiben, Administration, Einstellungen, Abmelden – Gäste sehen sie nicht */
.container-header .container-topbar {
  order: -1;
  width: 100%;
  background: var(--tsg-navy);
  box-shadow: 0 0 0 100vmax var(--tsg-navy);   /* Fläche bis an den Fensterrand, ohne die Breite zu ändern */
  clip-path: inset(0 -100vmax);
  font-size: 13px;
}
.container-header .container-topbar .mod-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.container-topbar .mod-menu > li,
.container-topbar .metismenu.mod-menu .metismenu-item { padding: 0; margin: 0; font-size: 13px; line-height: 34px; white-space: nowrap; }
.container-header .container-topbar .mod-menu > li > a { color: var(--tsg-hellblau); font-size: 13px; font-weight: 500; text-decoration: none; }
.container-header .container-topbar .mod-menu > li > a:hover,
.container-header .container-topbar .mod-menu > li.active > a { color: #ffffff; }
.container-header .container-topbar .mod-menu > li::after { display: none; }
.container-header .container-topbar .mod-menu > li { margin-left: 0; }   /* Abstände kommen vom gap, nicht von der Hauptmenü-Regel */
/* Reihenfolge der Leiste; übrige Einträge des Special Menu (Beispielseite, alter "Log out", Aliase)
   bleiben als Adressen erhalten, erscheinen hier aber nicht */
.container-topbar .mod-menu > li.item-108 { order: 1; }   /* Beitrag schreiben */
.container-topbar .mod-menu > li.item-487 { order: 2; }   /* Anleitung für die Redaktion (Beitrag 623) */
.container-topbar .mod-menu > li.item-507 { order: 2; }   /* Statistik (Beitrag 636) – steht im Menü direkt hinter der Anleitung */
.container-topbar .mod-menu > li.item-110 { order: 3; }   /* Administration */
.container-topbar .mod-menu > li.item-116 { order: 4; }   /* Website-Einstellungen (Super User) */
.container-topbar .mod-menu > li.item-117 { order: 5; }   /* Template-Einstellungen (Super User) */
.container-topbar .mod-menu > li.item-111 { order: 6; }   /* Passwort ändern */
.container-topbar .mod-menu > li.item-105 { order: 7; }   /* Abmelden */
.container-topbar .mod-menu > li:not(.item-105, .item-108, .item-110, .item-111, .item-116, .item-117, .item-487, .item-507) { display: none; }
.container-topbar .mod-menu::before {    /* kleiner Hinweis links: Angemeldet */
  content: "Angemeldet";
  margin-right: auto;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--tsg-rosa-hell);
}

/* Suche (Smart-Search-Modul 117, Position search): am Desktop runder Lupen-Knopf zwischen Instagram und
   "Mitglied werden", der ein Suchfeld unter dem Kopf aufklappt (Knopf und Menüpunkt baut js/user.js); im ☰-Menü steht das Suchfeld direkt über den Menüpunkten */
.container-header .mod-finder { margin: 0; }
.container-header .mod-finder__search { display: flex; flex-wrap: nowrap; gap: 8px; }
.container-header .mod-finder .form-control,
.com-finder__form .form-control {
  min-width: 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px !important;
  background: #ffffff;
  color: var(--tsg-tinte);
  font: inherit;
  box-shadow: none;
}
.container-header .mod-finder .form-control:focus,
.com-finder__form .form-control:focus { border-color: var(--tsg-navy); outline: 2px solid var(--tsg-navy); outline-offset: 1px; }
.container-header .mod-finder .btn,
.com-finder__form .btn-primary {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px !important;
  background: var(--tsg-navy);
  color: #ffffff;
  font-weight: 700;
}
.container-header .mod-finder .btn:hover,
.com-finder__form .btn-primary:hover { background: var(--tsg-akzent); color: #ffffff; }
.container-header .mod-finder .btn .icon-search,
.com-finder__form .btn .icon-search { display: none; }
.tsg-suche__knopf {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  background: transparent;   /* wie Termine und Instagram */
  color: var(--tsg-navy);
  cursor: pointer;
}
.tsg-suche__knopf::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tsg-suche__knopf:hover,
.tsg-suche__knopf[aria-expanded="true"] { border-color: var(--tsg-navy); color: var(--tsg-akzent); }
@media (min-width: 1200px) {
  .container-header .container-nav { flex-wrap: nowrap; }   /* Lupe nie unter das Menü umbrechen */
  .container-header .container-search { position: static; margin: 0; }   /* Suchfeld richtet sich am Kopf aus */
  .tsg-suche__knopf { display: flex; }
  .container-header .container-search search { display: none; }
  .container-header .container-search.ist-offen search {
    display: block;
    position: absolute;
    top: 100%;   /* direkt unter dem Kopf, rechts bündig mit dem Inhalt */
    right: var(--tsg-rand-seite);
    z-index: 30;
    width: min(440px, calc(100vw - 40px));
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--tsg-schatten-gross);
  }
}
@media (max-width: 1199.98px) {
  .container-header .container-nav { display: flex; flex-direction: column; }
  .container-header .container-search { display: none; order: -1; margin: 0; padding: 14px 0 4px 0; }
  .container-header .mod-menu > li.tsg-suche__punkt { display: none; }   /* im ☰-Menü steht das Suchfeld oben */
  .container-header .container-nav:has(.navbar-collapse.show) .container-search { display: block; }
}

/* Handy-Menüknopf */
.container-header .navbar-toggler {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  background: #ffffff;
  color: var(--tsg-navy);
}

/* Menü in einer Zeile erst ab 1200 px, darunter ☰-Knopf (bei 992–1199 px passt es nicht) */
@media (min-width: 1200px) {
  .container-header {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    min-height: 88px;
    padding: 0 var(--tsg-rand-seite);
    flex-wrap: wrap;
    row-gap: 0;
  }
  .container-header > .grid-child { min-height: 88px; display: flex; align-items: center; }
  .container-header .container-topbar { flex: 0 0 100%; }
  /* Marke darf schrumpfen (lange Titel/Beschreibung werden abgeschnitten), das Menü nicht */
  .container-header > .grid-child:not(.container-nav):not(.container-below-top) { flex: 0 1 auto; min-width: 0; }
  .container-header .navbar-brand { grid-template-columns: auto minmax(0, 1fr); }
  .container-header .navbar-brand a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .container-header .container-nav { flex: 1 1 0%; min-width: 0; padding: 0; }   /* Basis 0: Marke und Menü bleiben in einer Zeile, nur die Leiste für Angemeldete bricht um */
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button.mod-menu__heading { white-space: nowrap; }
  .container-header nav { flex: 1; margin: 0; }
  .container-header .mod-menu { align-items: center; }
  .container-header .metismenu.mod-menu .metismenu-item.level-1 { padding: 0; flex-wrap: nowrap; }
  .container-header .metismenu.mod-menu .metismenu-item.level-1 > .mm-toggler { padding: 0 0 0 4px; color: var(--tsg-navy); }
  .container-header .mod-menu > li + li { margin-left: clamp(16px, 2vw, 24px); }   /* enger als im Entwurf (34 px): Platz für Termine-Knopf, Lupe und größeren Schriftzug */
  .container-header .mod-menu > li.item-102 { margin-left: auto; }          /* Menü mittig */
  .container-header .mod-menu > li.item-475 { order: 1; margin-left: auto; } /* rechte Gruppe: Termine, Instagram, Mitglied werden */
  .container-header .mod-menu > li.item-215 { order: 2; margin-left: 8px; }
  .container-header .mod-menu > li.tsg-suche__punkt { display: flex; order: 3; margin-left: 8px; }   /* Lupe (js/user.js) */
  /* Cassiopeia gibt Knöpfen im Menü eine Unterstreichung als ::before – hier soll die Lupe stehen */
  .container-header .mod-menu > li.tsg-suche__punkt > .tsg-suche__knopf::before { position: static; width: 20px; height: 20px; background: currentColor; transform: none; opacity: 1; }
  .container-header .mod-menu > li.tsg-suche__punkt > .tsg-suche__knopf::after { content: none; }
  .container-header .mod-menu > li.item-107 { order: 4; margin-left: 12px; }
  .container-header .mod-menu > li.item-475::after,
  .container-header .mod-menu > li.item-215::after,
  .container-header .mod-menu > li.tsg-suche__punkt::after,
  .container-header .mod-menu > li.item-107::after { display: none; }
  .container-header .mod-menu > li.active::after,
  .container-header .mod-menu > li:hover::after { background: var(--tsg-akzent); bottom: -6px; }
}
/* 992–1199 px: Bootstrap klappt das Menü hier schon auf (navbar-expand-lg) – wir bleiben beim ☰-Knopf
   und heben die Desktop-Regeln von Cassiopeia auf */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .navbar-expand-lg .navbar-toggler { display: flex; }
  .container-header .navbar-expand-lg .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
  .container-header .navbar-expand-lg .navbar-collapse.show { display: block !important; }
  .container-header .mod-menu { display: block; }
  .container-header .mod-menu > li + li { margin-left: 0; }
  .container-header .mod-menu > li::after { display: none; }
}
@media (max-width: 1199.98px) {
  .container-header { position: relative; padding: 12px 20px; }
  .container-header .container-topbar { margin: -12px 0 12px 0; }
  .container-header .container-topbar .mod-menu { justify-content: flex-start; gap: 18px; }
  .container-header .container-topbar .mod-menu::before { display: none; }
  .container-header:has(.container-topbar) .navbar-toggler { top: 58px; }   /* 34 px Leiste + 12 px + 12 px */
  .container-header > .grid-child:not(.container-nav):not(.container-below-top) { min-height: 44px; display: flex; align-items: center; }
  .container-header .navbar-brand::before { width: 30px; height: 35px; }
  /* Rechts Platz für den ☰-Knopf lassen; Schriftzug wächst mit der Breite (≈ 16 px bei 320, 21 px ab ca. 380 px),
     "…" nur als letzter Notnagel auf ganz schmalen Geräten */
  .container-header > .grid-child:not(.container-nav):not(.container-below-top) { padding-right: 60px; min-width: 0; }
  .container-header .navbar-brand { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .container-header .navbar-brand a,
  .container-header .navbar-brand a:hover { font-size: clamp(15px, calc((100vw - 140px) / 11.5), 21px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .container-header .container-nav { padding: 0; }
  .container-header nav { margin: 0; width: 100%; position: static; }
  .container-header .navbar-toggler { position: absolute; top: 12px; right: 20px; display: flex; align-items: center; justify-content: center; }
  .container-header .navbar-toggler .icon-menu { display: none; }
  .container-header .navbar-toggler::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .container-header .navbar-collapse { padding: 12px 0 4px 0; }
  .container-header .metismenu.mod-menu .metismenu-item.level-1 { padding: 10px 0; border-top: 1px solid var(--tsg-linie); }
  .container-header .metismenu.mod-menu .mm-collapse { position: static; margin: 8px 0 0 0; box-shadow: none; }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button.mod-menu__heading { font-size: 17px; }
  .container-header .metismenu.mod-menu .metismenu-item.level-1.item-475,
  .container-header .metismenu.mod-menu .metismenu-item.level-1.item-215,
  .container-header .metismenu.mod-menu .metismenu-item.level-1.item-107 { border-top: 0; display: inline-flex; vertical-align: middle; margin-right: 12px; }
}

/* ==========================================================================
   Bausteine der Startseiten-Module
   ========================================================================== */
.tsg-modul { font-family: var(--tsg-schrift); color: var(--tsg-tinte); }
.tsg-modul *, .tsg-modul *::before, .tsg-modul *::after { box-sizing: border-box; }
.tsg-modul h1, .tsg-modul h2, .tsg-modul h3, .tsg-modul p { margin: 0; }
.tsg-modul a { text-decoration: none; }
.tsg-modul img { max-width: 100%; }

/* Sicherheitsnetz, falls ein Modul doch mit Karten-Stil ausgegeben wird */
.card:has(> .card-body > .tsg-modul) { background: none; border: 0; box-shadow: none; }
.card:has(> .card-body > .tsg-modul) > .card-body { padding: 0; }
.card:has(> .card-body > .tsg-modul) > .card-header { display: none; }

/* Dachzeile + große Überschrift */
.tsg-kopf { display: flex; flex-direction: column; gap: 10px; }
.tsg-kopf--mit-link { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tsg-kopf--mit-link > div { display: flex; flex-direction: column; gap: 10px; }
/* Kopf mit rundem Abzeichen rechts (Startseite Nachwuchs: Qualitätssiegel TOP-Verein der DSJ) */
.tsg-kopf--siegel { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.tsg-kopf--siegel > div { display: flex; flex-direction: column; gap: 10px; }
.tsg-siegel { flex: 0 0 auto; display: block; width: 104px; border-radius: 50%; box-shadow: 0 6px 18px rgba(20, 30, 60, 0.18); transition: transform 0.3s ease; }
.tsg-siegel:hover { transform: rotate(-6deg) scale(1.05); }
.tsg-siegel img { display: block; width: 100%; height: auto; }
.tsg-dachzeile {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsg-akzent);
}
.tsg-dachzeile--hell { color: var(--tsg-rosa-hell); }
.tsg-modul .tsg-titel {
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tsg-navy);
}
.tsg-modul .tsg-titel--mittel { font-size: clamp(32px, 3.4vw, 48px); }
.tsg-modul .tsg-titel--gross { font-size: clamp(34px, 4.2vw, 60px); line-height: 0.98; }
.tsg-modul .tsg-titel--hell { color: #ffffff; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.02; }

/* Link mit Pfeil */
.tsg-mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--tsg-navy);
  white-space: nowrap;
}
.tsg-mehr::after, .tsg-knopf--pfeil::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--tsg-pfeil) center / contain no-repeat;
          mask: var(--tsg-pfeil) center / contain no-repeat;
  transition: transform 0.15s ease;
}
.tsg-mehr:hover::after, .tsg-knopf--pfeil:hover::after { transform: translateX(3px); }

/* Knöpfe */
.tsg-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.tsg-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tsg-knopf--klein { height: 50px; padding: 0 24px; font-size: 15px; }
.tsg-knopf--akzent, .tsg-knopf--akzent:hover, .tsg-knopf--akzent:focus { background: var(--tsg-akzent); color: #ffffff; }
.tsg-knopf--akzent:hover { background: var(--tsg-akzent-dunkel); }
.tsg-knopf--weiss, .tsg-knopf--weiss:focus { background: #ffffff; color: var(--tsg-navy); }
.tsg-knopf--weiss:hover { background: var(--tsg-creme); color: var(--tsg-navy); }
.tsg-knopf--rahmen, .tsg-knopf--rahmen:focus { border: 2px solid var(--tsg-navy); color: var(--tsg-navy); }
.tsg-knopf--rahmen:hover { background: var(--tsg-navy); color: #ffffff; }

/* Kennzeichen */
.tsg-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.tsg-chip--blau { background: var(--tsg-chip-blau); color: var(--tsg-navy); }
.tsg-chip--rot { background: var(--tsg-rosa); color: var(--tsg-akzent-dunkel); }
.tsg-chip--beige { background: var(--tsg-chip-beige); color: #5A4A2E; }

/* ---- Titelbild (Position banner, volle Breite) --------------------------- */
.container-banner { margin: 0; }
.tsg-hero { position: relative; height: 680px; overflow: hidden; color: #ffffff; background: var(--tsg-navy); }
.container-banner .tsg-hero__bild,
.tsg-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 38%;
}
.tsg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 22, 42, 0) 25%, rgba(8, 22, 42, 0.55) 60%, rgba(8, 22, 42, 0.92) 100%);
}
.tsg-hero__inhalt {
  position: absolute;
  z-index: 2;
  left: var(--tsg-rand-seite);
  right: var(--tsg-rand-seite);
  bottom: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.tsg-hero__text { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.tsg-badge {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tsg-modul .tsg-hero__titel {
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(46px, 6.2vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.tsg-hero__absatz { max-width: 600px; font-size: 20px; line-height: 1.5; color: #E6ECF4; }
.tsg-hero .tsg-knoepfe { margin-top: 6px; }
.tsg-hero__karte {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--tsg-tinte);
  transition: transform 0.15s ease;
}
.tsg-hero__karte:hover { color: var(--tsg-tinte); transform: translateY(-2px); }
.tsg-hero__karte-dach { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsg-akzent); }
.tsg-hero__karte-titel { font-family: var(--tsg-display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.tsg-hero__karte-info { font-size: 14px; color: var(--tsg-grau); }

/* ---- Kennzahlen auf Schachbrettmuster ------------------------------------ */
.tsg-zahlen {
  padding: 0 var(--tsg-rand-seite);
  background-color: var(--tsg-navy);
  background-image: var(--tsg-schach);
  background-size: 56px 56px;
}
.tsg-zahlen__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--tsg-navy);
  border-left: 1px solid var(--tsg-navy-linie);
  border-right: 1px solid var(--tsg-navy-linie);
}
.tsg-zahl { display: flex; flex-direction: column; gap: 6px; padding: 34px 32px; }
.tsg-zahl + .tsg-zahl { border-left: 1px solid var(--tsg-navy-linie); }
.tsg-zahl strong { font-family: var(--tsg-display); font-weight: 800; font-size: 52px; line-height: 1; color: #ffffff; }
.tsg-zahl > span { font-size: 15px; color: var(--tsg-hellblau); }

/* ---- Überschrift über den News (Position main-top) ----------------------- */
.tsg-kopf--mit-link { margin: 104px 0 40px 0; }
body.itemid-101.view-category .mod-breadcrumbs__wrapper { display: none; }
/* Beiträge, die von der Startseite aus geöffnet werden (/tsg/<beitrag>), laufen unter derselben
   Menü-ID wie Home (itemid-101) und bekämen sonst alle Startseiten-Module mit. Die Module
   erscheinen deshalb nur in der Listenansicht (view-category). */
body:not(.view-category) :is(.tsg-hero, .tsg-zahlen, .tsg-kopf--mit-link, .tsg-termine-training, .tsg-nachwuchs, .tsg-mitmachen, .tsg-meistgelesen) { display: none; }
body.itemid-101.view-category .container-component { padding-top: 0; }

/* ==========================================================================
   Beitragslisten als Kacheln (Startseite = Kategorieblog News, /neues)
   Aufmacher ("# Führende") breit mit Foto links, darunter Karten.
   Die ganze Kachel ist klickbar (Titel-Link wird über die Kachel gespannt).
   ========================================================================== */
.blog-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin: 0 0 28px 0;
}
/* Joomla-Optionen "# Spalten" / Anordnung (columns-N, masonry-N) überstimmen – immer unser Raster */
.blog-items[class*="masonry-"],
.blog-items[class*="columns-"] {
  display: grid;
  column-count: auto;
  margin-left: 0;
  margin-right: 0;
}
.blog-items[class*="masonry-"] > .blog-item,
.blog-items[class*="columns-"] > .blog-item { display: flex; width: auto; max-width: none; margin-bottom: 0; }

.blog-items .blog-item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 0;
  border-radius: 24px;
  box-shadow: var(--tsg-schatten);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-items .blog-item:hover { box-shadow: var(--tsg-schatten-gross); transform: translateY(-3px); }

/* Foto */
.blog-items .blog-item > figure {
  float: none !important;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  background: var(--tsg-navy);
}
.blog-items .blog-item > figure img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.4s ease;
}
.blog-items .blog-item:hover figure img { transform: scale(1.04); }
.blog-items .blog-item > figure figcaption { display: none; }

/* Ohne Einleitungsbild: Schachbrett-Fläche mit Wappen, im Wechsel Navy / Rot / Creme */
.blog-items .blog-item:not(:has(> figure))::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 200px;
  background: url("../../../../../images/template/tsg-wappen-klein.svg") center / auto 96px no-repeat,
              var(--tsg-schach) 0 0 / 56px 56px,
              var(--tsg-navy);
}
.blog-items .blog-item:nth-child(3n+2):not(:has(> figure))::before {
  background: url("../../../../../images/template/tsg-wappen-klein.svg") center / auto 96px no-repeat,
              var(--tsg-akzent);
}
.blog-items .blog-item:nth-child(3n):not(:has(> figure))::before {
  background: url("../../../../../images/template/tsg-wappen-klein.svg") center / auto 96px no-repeat,
              var(--tsg-schach-hell) 0 0 / 40px 40px,
              var(--tsg-creme-2);
}

/* Textteil: Kennzeichen (erstes Schlagwort) und Datum in einer Zeile über dem Titel */
.blog-items .blog-item .item-content {
  display: grid;
  grid-template-columns: auto 1fr;
  min-width: 0;
  align-content: start;
  column-gap: 10px;
  row-gap: 12px;
  flex: 1;
  padding: 24px 26px 28px 26px;
}
.blog-items .blog-item .item-content > * { grid-column: 1 / -1; margin: 0; }
.blog-items .blog-item .item-content > .tags { grid-column: 1; order: -2; min-width: 0; overflow: hidden; }   /* langes Schlagwort wird gekürzt, das Datum behält seine Breite */
.blog-items .blog-item .item-content > .article-info { grid-column: 2; order: -1; align-self: center; white-space: nowrap; }
.blog-items .blog-item .item-content:not(:has(> .tags)) > .article-info { grid-column: 1 / -1; }

.blog-items .blog-item .tags { position: relative; z-index: 2; display: flex; margin: 0; padding: 0; list-style: none; }
.blog-items .blog-item .tags li { min-width: 0; margin: 0; }
/* nur das erste Schlagwort als Kennzeichen – das Hilfs-Schlagwort "Gerade passiert" zählt nicht */
.blog-items .blog-item .tags li:not(:has(a[href*="/gerade-passiert"])) ~ li { display: none; }
.blog-items .blog-item .tags a {
  display: inline-block;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tsg-rosa);
  color: var(--tsg-akzent-dunkel);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.blog-items .blog-item .article-info { margin: 0; padding: 0; font-size: 13px; color: var(--tsg-grau); }
.blog-items .blog-item .article-info dd { margin: 0; }
.blog-items .blog-item .article-info .createdby,
.blog-items .blog-item .article-info .category-name,
.blog-items .blog-item .article-info .parent-category-name,
.blog-items .blog-item .article-info .hits,
.blog-items .blog-item .article-info-term,
.blog-items .blog-item .article-info [class^="icon-"] { display: none; }

/* Titel */
.blog-items .blog-item .page-header { padding: 0; margin: 0; border: 0; }
.blog-items .blog-item .page-header h2 {
  margin: 0;
  font-family: var(--tsg-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
}
.blog-items .blog-item .page-header h2 a { color: var(--tsg-navy); text-decoration: none; }
.blog-items .blog-item .page-header h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-items .blog-item:hover .page-header h2 a { color: var(--tsg-akzent); }

/* Anrisstext: nur der erste Absatz, 3 Zeilen, Inline-Formate der Beiträge überstimmen */
.blog-items .blog-item .item-content > p:not(.readmore) {
  font-family: var(--tsg-schrift) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--tsg-text-2);
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-items .blog-item .item-content > p:not(.readmore) * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.blog-items .blog-item .item-content > p:empty,   /* leere Absätze (oft aus eingefügtem Text) überspringen */
.blog-items .blog-item .item-content > p:not(.readmore):not(:empty) ~ p:not(.readmore),
.blog-items .blog-item .item-content > div:not(.page-header),
.blog-items .blog-item .item-content > table,
.blog-items .blog-item .item-content > ul:not(.tags),
.blog-items .blog-item .item-content > ol { display: none; }
.blog-items .blog-item .readmore { display: none; }   /* ganze Kachel ist der Link */
/* Bilder, Grafiken, Tabellen und Videos im Anrisstext gehören nicht in die Kachel – das Kachelfoto ist das
   Einleitungsbild (<figure class="item-image"> direkt in der Kachel) */
.blog-items .blog-item .item-content :is(img, figure, table, iframe, video, object) { display: none !important; }
.blog-items .blog-item .item-content > :is(h1, h2, h3, h4, h5, h6, hr) { display: none; }   /* Zwischenüberschriften des Textes */

/* Startseite: kleine Karten nur mit Datum + Titel wie im Entwurf */
body.itemid-101.view-category .blog-items:not(.items-leading) .blog-item .item-content > p:not(.readmore) { display: none; }
body.itemid-101.view-category .blog-items:not(.items-leading) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.itemid-101.view-category .items-more,
body.itemid-101.view-category .com-content-category-blog__navigation { display: none; }

/* Aufmacher: 7/12 Foto, 5/12 Text */
.blog-items.items-leading { grid-template-columns: 1fr; }
.blog-items.items-leading .blog-item {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-radius: 28px;
  box-shadow: var(--tsg-schatten-gross);
}
.blog-items.items-leading .blog-item > figure,
.blog-items.items-leading .blog-item:not(:has(> figure))::before { height: 460px; }
.blog-items.items-leading .blog-item > figure img { height: 100%; }
.blog-items.items-leading .blog-item .item-content {
  grid-template-rows: auto auto auto 1fr;
  row-gap: 18px;
  padding: 48px;
}
.blog-items.items-leading .blog-item .article-info { font-size: 14px; }
.blog-items.items-leading .blog-item .page-header h2 {
  font-weight: 800;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.blog-items.items-leading .blog-item .item-content > p:not(.readmore) {
  font-size: 17px !important;
  line-height: 1.6 !important;
  -webkit-line-clamp: 6;
}
.blog-items.items-leading .blog-item .item-content::after {
  content: "Zum Bericht \2192";
  grid-column: 1 / -1;
  grid-row: -2;          /* letzte Zeile (1fr) → unten in der Karte */
  align-self: end;
  font-weight: 700;
  font-size: 16px;
  color: var(--tsg-akzent);
}

/* News-Seite (/neues und andere Kategorie-Blogs außer der Startseite): Joomla gibt dort alle Beiträge als
   "führende" aus (Menüpunkt: 10 je Seite) – hier Fotokarten statt Aufmachern. Raster mit 12 Spalten:
   ab Seite 2 zwei Reihen à 3 und eine à 4; auf Seite 1 (tsg-seite-1 aus user.js) großer Aufmacher + 3 × 3 */
body.view-category:not(.itemid-101) .blog-items.items-leading { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: var(--tsg-schatten);
}
body.view-category:not(.itemid-101):not(.tsg-seite-1) .blog-items.items-leading .blog-item:nth-child(n+7) { grid-column: span 3; }
body.view-category:not(.itemid-101):not(.tsg-seite-1) .blog-items.items-leading .blog-item:nth-child(n+7) .page-header h2 { font-size: 19px; }
.blog-items .blog-item .page-header h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }   /* lange Wörter in schmalen Karten */
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item > figure,
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:not(:has(> figure))::before { height: 210px; }
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item .item-content {
  grid-template-rows: auto auto auto 1fr;
  row-gap: 10px;
  padding: 22px 24px 24px 24px;
}
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item .article-info { font-size: 13px; }
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item .page-header h2 {
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
}
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item .item-content > p:not(.readmore) {
  font-size: 15px !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: 3;
}
body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item .item-content::after { font-size: 15px; }

/* Seite 1: neuester Beitrag als Aufmacher über die volle Breite (7/12 Foto, 5/12 Text) */
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-radius: 28px;
  box-shadow: var(--tsg-schatten-gross);
}
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child > figure,
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child:not(:has(> figure))::before { height: 440px; }
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .item-content { row-gap: 18px; padding: 44px; }
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .article-info { font-size: 14px; }
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .page-header h2 {
  font-weight: 800;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .item-content > p:not(.readmore) { font-size: 17px !important; line-height: 1.6 !important; -webkit-line-clamp: 6; }
body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .item-content::after { font-size: 16px; }

/* Blättern (Seite /neues) */
.com-content-category-blog .pagination { justify-content: center; flex-wrap: wrap; row-gap: 6px; }
.com-content-category-blog .page-link { border-radius: 999px; margin: 0 3px; border-color: var(--tsg-linie); color: var(--tsg-navy); }
.com-content-category-blog .active > .page-link { background: var(--tsg-navy); border-color: var(--tsg-navy); color: #ffffff; }

/* ---- Termine + Training (Position bottom-a) ------------------------------ */
/* Module untereinander und in fester Reihenfolge, egal ob auf bottom-a oder bottom-b
   und egal wie die Reihenfolge im Backend steht (mod_custom legt je ein div.mod-custom darum) */
.container-bottom-a:has(.tsg-modul),
.container-bottom-b:has(.tsg-modul) { flex-direction: column; }
.container-bottom-a > *:has(.tsg-termine-training), .container-bottom-b > *:has(.tsg-termine-training) { order: 1; }
.container-bottom-a > *:has(.tsg-nachwuchs), .container-bottom-b > *:has(.tsg-nachwuchs) { order: 2; }
.container-bottom-a > *:has(.tsg-mitmachen), .container-bottom-b > *:has(.tsg-mitmachen) { order: 3; }
.tsg-termine-training {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  margin-top: 120px;
  align-items: start;
}
.tsg-termine { display: flex; flex-direction: column; gap: 28px; }
.tsg-termine__liste { display: flex; flex-direction: column; border-top: 1px solid var(--tsg-linie-2); }
.tsg-termin {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--tsg-linie-2);
  color: var(--tsg-tinte);
}
.tsg-termin:hover { color: var(--tsg-tinte); background: linear-gradient(90deg, rgba(225, 38, 58, 0.05), transparent 60%); }
.tsg-termin__datum { width: 96px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }   /* "27.09." in 34 px braucht gut 90 px */
.tsg-termin__datum span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--tsg-grau); }
.tsg-termin__datum strong { font-family: var(--tsg-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--tsg-navy); }
.tsg-termin__text { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; }
.tsg-termin__text strong { font-size: 18px; font-weight: 700; }
.tsg-termin__text span { font-size: 15px; color: var(--tsg-grau); }
.tsg-termin:hover .tsg-termin__text strong { color: var(--tsg-akzent); }
div.tsg-termin:hover { background: none; }
div.tsg-termin:hover .tsg-termin__text strong { color: inherit; }

/* Blättern (baut js/user.js ein, wenn es mehr als 5 Termine gibt) */
.tsg-termine__blaettern { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tsg-termine__zaehler { font-size: 14px; color: var(--tsg-grau); }
.tsg-termine__knoepfe { display: flex; gap: 10px; }
.tsg-blaettern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  background: #ffffff;
  color: var(--tsg-navy);
  font-family: var(--tsg-schrift);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tsg-blaettern:hover:not(:disabled) { border-color: var(--tsg-navy); }
.tsg-blaettern:disabled { opacity: 0.4; cursor: default; }
.tsg-blaettern--weiter::after, .tsg-blaettern--zurueck::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--tsg-pfeil) center / contain no-repeat;
          mask: var(--tsg-pfeil) center / contain no-repeat;
}
.tsg-blaettern--zurueck::before { transform: scaleX(-1); }

.tsg-training {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: var(--tsg-navy);
  color: #ffffff;
}
.tsg-training__bild { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 35%; }
.tsg-training__inhalt { display: flex; flex-direction: column; gap: 18px; padding: 36px 38px 40px 38px; }
.tsg-training__zeiten { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: 16px; line-height: 1.45; color: #D3DDEA; }
.tsg-training__zeiten > div { display: flex; gap: 14px; }
.tsg-training__zeiten dt { width: 96px; flex-shrink: 0; font-weight: 700; color: #ffffff; }
.tsg-training__zeiten dd { margin: 0; }
.tsg-training .tsg-knopf { align-self: flex-start; margin-top: 6px; }

/* ---- Nachwuchs ------------------------------------------------------------ */
.tsg-nachwuchs { display: flex; flex-direction: column; gap: 36px; margin-top: 120px; }
.tsg-nachwuchs__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tsg-foto { position: relative; display: block; height: 420px; overflow: hidden; border-radius: 24px; color: #ffffff; }
.tsg-foto--breit { grid-column: span 2; }
.tsg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tsg-foto:hover img { transform: scale(1.04); }
.tsg-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 22, 42, 0) 25%, rgba(8, 22, 42, 0.55) 60%, rgba(8, 22, 42, 0.92) 100%);
}
.tsg-foto__text { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.tsg-foto__text strong { font-family: var(--tsg-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.tsg-foto--breit .tsg-foto__text { left: 28px; right: 28px; bottom: 26px; }
.tsg-foto--breit .tsg-foto__text strong { font-size: 30px; }
.tsg-foto__text span { font-size: 15px; color: #E6ECF4; }
.tsg-foto:hover, .tsg-foto:focus { color: #ffffff; }

.tsg-platzierungen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 420px;
  padding: 30px 28px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
a.tsg-platzierungen { color: var(--tsg-navy); transition: box-shadow 0.2s ease, transform 0.2s ease; }
a.tsg-platzierungen:hover { color: var(--tsg-navy); box-shadow: var(--tsg-schatten-gross); transform: translateY(-3px); }
.tsg-platzierungen__kopf { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsg-grau); }
.tsg-platzierungen ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tsg-platzierungen li { display: flex; align-items: baseline; gap: 14px; }
.tsg-platzierungen li strong { font-family: var(--tsg-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--tsg-akzent); }
.tsg-platzierungen li span { font-size: 16px; font-weight: 700; }
.tsg-platzierungen p { margin-top: auto; font-size: 15px; line-height: 1.45; color: var(--tsg-text-2); }

/* ---- Mitmachen + Anfahrt -------------------------------------------------- */
.tsg-mitmachen {
  display: grid;
  grid-template-columns: 7fr 5fr;
  margin: 120px 0;
  overflow: hidden;
  border-radius: 32px;
  background-color: var(--tsg-creme-2);
  background-image: var(--tsg-schach-hell);
  background-size: 40px 40px;
}
.tsg-mitmachen__einladung { display: flex; flex-direction: column; gap: 22px; padding: 64px; background: var(--tsg-creme); }
.tsg-mitmachen__einladung p { max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--tsg-text-2); }
.tsg-mitmachen__anfahrt { display: flex; flex-direction: column; gap: 18px; padding: 56px 52px; background: var(--tsg-navy); color: #ffffff; }
.tsg-adresse { position: relative; padding-left: 38px; font-size: 20px; line-height: 1.4; }
.tsg-adresse::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tsg-tram { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tsg-tram span { font-size: 15px; color: var(--tsg-hellblau); }
.tsg-tram b { min-width: 36px; padding: 4px 8px; border-radius: 6px; background: var(--tsg-akzent); font-size: 14px; text-align: center; }
.tsg-mitmachen__anfahrt .tsg-knopf { align-self: flex-start; margin-top: 8px; }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.container-footer.footer,
.container-footer .footer {
  background: var(--tsg-nacht);
  background-image: none;
  color: var(--tsg-hellblau);
  border: 0;
}
.footer .grid-child { max-width: calc(var(--tsg-breite) + 40px); padding: 64px 20px 48px 20px; box-sizing: border-box; }
.footer a { color: var(--tsg-hellblau); }
.footer a:hover { color: #ffffff; }
.tsg-fuss { width: 100%; display: flex; flex-direction: column; gap: 40px; color: var(--tsg-hellblau); }
.tsg-fuss__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.tsg-fuss__verein { display: flex; flex-direction: column; gap: 14px; }
.tsg-fuss__verein img { width: 40px; height: auto; }
.tsg-fuss__verein strong { font-family: var(--tsg-display); font-weight: 800; font-size: 20px; color: #ffffff; }
.tsg-fuss__verein span { font-size: 14px; line-height: 1.5; }
.tsg-fuss__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.tsg-fuss a { white-space: normal; }
.tsg-fuss__links strong { font-weight: 700; color: #ffffff; }
.tsg-fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--tsg-navy-linie);
  font-size: 13px;
  color: #7F93AE;
}
.tsg-fuss__recht { display: flex; flex-wrap: wrap; gap: 20px; }
.tsg-fuss .tsg-fuss__recht a { color: #7F93AE; }
.tsg-fuss .tsg-fuss__recht a:hover { color: #ffffff; }

/* Startseite: „Meistgelesen“ (Modul 136, Beiträge – Beliebteste, Position footer, nur Home) als Band über den Spalten */
.footer .grid-child:has(.tsg-meistgelesen) { flex-wrap: wrap; }
.footer .grid-child:has(.tsg-meistgelesen) > * { flex: 1 1 100%; }
.footer .tsg-meistgelesen { order: -1; width: 100%; margin: 0 0 40px 0; padding: 0 0 36px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer .tsg-meistgelesen > :is(h2, h3, h4, strong) { margin: 0 0 18px 0; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tsg-rosa-hell); }
.footer .tsg-meistgelesen .mostread { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: meist; }
.footer .tsg-meistgelesen .mostread li { display: flex; align-items: baseline; gap: 12px; counter-increment: meist; font-size: 15px; line-height: 1.4; }
.footer .tsg-meistgelesen .mostread li::before { content: counter(meist); flex: 0 0 auto; font-family: var(--tsg-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--tsg-akzent); }
.footer .tsg-meistgelesen .mostread a { color: #ffffff; }
.footer .tsg-meistgelesen .mostread a:hover { color: var(--tsg-hellblau); }

.back-to-top-link {
  border-radius: 999px;
  background: var(--tsg-navy);
  border-color: var(--tsg-navy);
  color: #ffffff;
}
.back-to-top-link:hover, .back-to-top-link:focus { background: var(--tsg-akzent); border-color: var(--tsg-akzent); color: #ffffff; }

/* ==========================================================================
   Inhaltsbausteine für Beitragsseiten (Mannschafts- und Turnierseiten)
   Die Generatoren (z.B. BMM/ligen_seite_neu.py) schreiben nur Klassen, kein Inline-Style;
   alles steckt in einem <div class="tsg-inhalt">.
   ========================================================================== */
.tsg-inhalt { font-family: var(--tsg-schrift); font-size: 16px; line-height: 1.6; color: var(--tsg-text-2); }
/* Seiten aus den Generatoren brauchen keine Beitragsangaben (Autor, Kategorie, Datum, Zugriffe) und kein
   "Zurück/Weiter" – unabhängig davon, was Menüpunkt oder Beitrag einstellen (der Menüpunkt hat Vorrang) */
.com-content-article:has(.tsg-inhalt) .article-info,
.com-content-article:has(.tsg-inhalt) .pagenavigation { display: none; }
.tsg-inhalt *, .tsg-inhalt *::before, .tsg-inhalt *::after { box-sizing: border-box; }
.tsg-inhalt p { margin: 0 0 14px 0; }
.tsg-inhalt a { color: var(--tsg-navy); font-weight: 600; text-decoration: none; }
.tsg-inhalt a:hover { color: var(--tsg-akzent); }
.tsg-inhalt strong { color: var(--tsg-tinte); }
.tsg-inhalt .tsg-lead { max-width: 780px; font-size: 19px; line-height: 1.55; color: var(--tsg-tinte); }
.tsg-inhalt .tsg-hinweis { font-size: 14px; color: var(--tsg-grau); }
.tsg-inhalt .tsg-hinweis strong { color: var(--tsg-text-2); }
.tsg-inhalt .tsg-hinweis--stand { margin-top: 20px; }
.tsg-inhalt .tsg-notiz { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--tsg-grau); }

/* Zwischenüberschrift */
.tsg-inhalt .tsg-abschnitt {
  margin: 56px 0 14px 0;
  padding: 0;
  border: 0;
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tsg-navy);
}
.tsg-abschnitt__zusatz { margin-left: 8px; font-family: var(--tsg-schrift); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--tsg-grau); }

/* Steckbrief: Karten wie die Kennzahlen der Startseite */
.tsg-steckbrief { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 18px 0; clear: both; }   /* clear: nicht neben ein umflossenes Bild (Wappen auf "Über unseren Verein") */
.tsg-steckbrief__karte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
.tsg-steckbrief__karte--breit { grid-column: span 2; background: var(--tsg-navy); color: #ffffff; box-shadow: none; }
.tsg-steckbrief__titel { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsg-grau); }
.tsg-steckbrief__wert { font-family: var(--tsg-display); font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--tsg-navy); }
.tsg-steckbrief__zeile { font-size: 14px; color: var(--tsg-grau); }
.tsg-steckbrief__karte--breit .tsg-steckbrief__titel { color: var(--tsg-rosa-hell); }
.tsg-steckbrief__karte--breit .tsg-steckbrief__wert { font-size: 26px; color: #ffffff; }
.tsg-steckbrief__karte--breit .tsg-steckbrief__zeile { color: var(--tsg-hellblau); }
.tsg-inhalt .tsg-steckbrief__karte--breit a { color: #ffffff; }
.tsg-inhalt .tsg-steckbrief__karte--breit a:hover { color: var(--tsg-rosa-hell); }
.tsg-inhalt .tsg-steckbrief__zeile a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.tsg-steckbrief--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsg-steckbrief--zwei .tsg-steckbrief__wert { font-size: 30px; }

/* Foto im Inhalt */
.tsg-inhalt .tsg-bild { max-width: 760px; margin: 32px 0 0 0; }
.tsg-inhalt .tsg-bild img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--tsg-schatten); }

/* Linkleiste: externe Seiten als Pillen */
.tsg-linkleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px 0; }
.tsg-linkleiste__titel { margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tsg-akzent); }
.tsg-inhalt .tsg-linkleiste a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--tsg-rand);
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: var(--tsg-navy);
}
.tsg-inhalt .tsg-linkleiste a::after {   /* ↗ externer Link */
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tsg-inhalt .tsg-linkleiste a:hover { border-color: var(--tsg-navy); color: var(--tsg-navy); }

/* Tabellen in weißer Karte, feine Trennlinien wie bei den Terminen */
.tsg-tabellenkarte {
  overflow-x: auto;
  padding: 6px 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
.tsg-tabellenkarte--schmal { max-width: 560px; }
.tsg-inhalt table.tsg-tabelle { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; background: none; }
.tsg-tabelle th {
  padding: 14px 12px 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--tsg-linie-2);
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--tsg-grau);
}
.tsg-tabelle td {
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid var(--tsg-linie);
  background: none;
  vertical-align: middle;
  color: var(--tsg-text-2);
}
.tsg-tabelle tbody tr:last-child td { border-bottom: 0; }
.tsg-tabelle tbody tr:hover td { background: var(--tsg-creme); }
.tsg-tabelle .tsg-tabelle__nr { width: 1%; text-align: center; color: var(--tsg-grau); }
.tsg-tabelle .tsg-tabelle__datum { white-space: nowrap; font-weight: 600; color: var(--tsg-tinte); }
.tsg-tabelle .tsg-tabelle__haupt { font-weight: 600; color: var(--tsg-tinte); }
.tsg-tabelle .tsg-tabelle__zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tsg-tabelle .tsg-tabelle__ergebnis { text-align: center; }
.tsg-titelkurz { font-size: 13px; font-weight: 700; color: var(--tsg-akzent); }
.tsg-chip--klein { padding: 3px 8px; font-size: 11px; vertical-align: 2px; }

.tsg-termine--alle { gap: 0; margin-top: 8px; }
.tsg-termine--alle .tsg-termine__liste { border-top: 0; }
.tsg-termine__suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 20px; }
.tsg-termine__suche label { flex: 1 1 280px; min-width: 0; font-weight: 700; color: var(--tsg-navy); }
.tsg-termine__suchfeld {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--tsg-rand);
  border-radius: 8px;
  background: #fff;
  color: var(--tsg-tinte);
  font: inherit;
  font-weight: 400;
}
.tsg-termine__suchfeld:focus-visible { outline: 2px solid var(--tsg-navy); outline-offset: 2px; }
.tsg-termine__suche-loeschen[hidden] { display: none; }
.tsg-termine__suche .tsg-termine__suchstatus { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--tsg-grau); }
.tsg-inhalt .tsg-termine__monat {
  margin: 36px 0 4px 0;
  padding: 0 0 10px 0;
  border: 0;
  border-bottom: 1px solid var(--tsg-linie-2);
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--tsg-navy);
}
.tsg-inhalt .tsg-termin { font-weight: 400; }

/* Unterüberschrift in Klappboxen */
.tsg-inhalt .tsg-unterabschnitt {
  margin: 28px 0 12px 0;
  padding: 0;
  border: 0;
  font-family: var(--tsg-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--tsg-navy);
}

/* Mannschaftskarten (Übersicht BMM) */
.tsg-teamkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0 8px 0; }
.tsg-teamkarte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
.tsg-teamkarte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tsg-teamkarte__nr { font-family: var(--tsg-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--tsg-navy); }
.tsg-inhalt .tsg-teamkarte__kopf a { font-size: 14px; font-weight: 600; color: var(--tsg-grau); text-align: right; }
.tsg-inhalt .tsg-teamkarte__kopf a:hover { color: var(--tsg-akzent); }
.tsg-teamkarte__zahlen { display: flex; gap: 18px; font-size: 14px; color: var(--tsg-grau); }
.tsg-teamkarte__zahlen strong { font-family: var(--tsg-display); font-size: 22px; font-weight: 800; color: var(--tsg-navy); }
.tsg-teamkarte__leer { font-size: 14px; }
.tsg-teamkarte__naechst { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--tsg-linie); font-size: 15px; line-height: 1.4; color: var(--tsg-tinte); }
.tsg-teamkarte__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tsg-akzent); }
.tsg-teamkarte__ort { font-size: 14px; }
.tsg-inhalt .tsg-teamkarte__ort a { color: var(--tsg-grau); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.tsg-inhalt a.tsg-teamkarte__mehr { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--tsg-navy); }
.tsg-inhalt a.tsg-teamkarte__mehr::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--tsg-pfeil) center / contain no-repeat;
          mask: var(--tsg-pfeil) center / contain no-repeat;
  transform: rotate(90deg);
}
.tsg-inhalt a.tsg-teamkarte__mehr:hover { color: var(--tsg-akzent); }
/* Letzte Ergebnisse in der Mannschaftskarte (BMM): Runde · Ergebnis aus TSG-Sicht · Gegner */
.tsg-teamkarte__ergebnisse { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--tsg-linie); }
.tsg-teamkarte__ergebnisse ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tsg-teamkarte__ergebnisse li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--tsg-tinte); }
.tsg-teamkarte__ergebnisse .tsg-ergebnis { min-width: 52px; padding: 3px 10px; font-size: 13px; }
.tsg-teamkarte__runde { display: block; font-size: 12px; font-weight: 700; color: var(--tsg-grau); }
.tsg-inhalt .tsg-teamkarte__ergebnisse li a { color: var(--tsg-tinte); font-weight: 500; }
.tsg-inhalt .tsg-teamkarte__ergebnisse li a:hover { color: var(--tsg-akzent); }

/* Klappboxen (<details>) je Mannschaft */
.tsg-klappe { margin: 0 0 12px 0; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); scroll-margin-top: 110px; }
.tsg-klappe > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 18px 56px 18px 22px;
  position: relative;
  list-style: none;
  cursor: pointer;
}
.tsg-klappe > summary::-webkit-details-marker { display: none; }
.tsg-klappe > summary::after {      /* Winkel rechts, dreht beim Öffnen */
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--tsg-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.tsg-klappe[open] > summary::after { transform: rotate(180deg); }
.tsg-klappe > summary:hover .tsg-klappe__titel { color: var(--tsg-akzent); }
.tsg-klappe__titel { font-family: var(--tsg-display); font-weight: 800; font-size: 22px; color: var(--tsg-navy); }
.tsg-klappe__staffel { font-weight: 700; color: var(--tsg-tinte); }
.tsg-klappe__stand { font-size: 14px; color: var(--tsg-grau); }
.tsg-klappe__inhalt { padding: 4px 22px 24px 22px; border-top: 1px solid var(--tsg-linie); }
.tsg-klappe__inhalt > .tsg-linkleiste { margin-top: 18px; }
/* Tabellen in der Box brauchen keine eigene Karte */
.tsg-klappe .tsg-tabellenkarte { padding: 0; border-radius: 0; background: none; box-shadow: none; }

/* Ergebnis-Kennzeichen aus Sicht der TSG */
.tsg-ergebnis {
  display: inline-block;
  min-width: 64px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.tsg-ergebnis--sieg { background: #E2F1E6; color: #1E6B34; }
.tsg-ergebnis--niederlage { background: var(--tsg-rosa); color: var(--tsg-akzent-dunkel); }
.tsg-ergebnis--remis { background: var(--tsg-chip-beige); color: #5A4A2E; }
.tsg-ergebnis--offen { color: #A9B3C0; }

/* Turnierergebnisse (Kiebitz, aus TSGschach/kiebitz_neu.py): Monats-Klappboxen mit mehreren Turnieren */
.tsg-inhalt .tsg-aktuell {
  margin: 28px 0 0 0;
  padding: 18px 22px;
  border-left: 4px solid var(--tsg-akzent);
  border-radius: 0 16px 16px 0;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
  color: var(--tsg-tinte);
}
.tsg-turnier { scroll-margin-top: 110px; }   /* Sprungziel unter dem festen Kopf */
.tsg-turnier + .tsg-turnier { margin-top: 32px; border-top: 1px solid var(--tsg-linie); }
.tsg-inhalt .tsg-turnier > .tsg-unterabschnitt { margin: 26px 0 4px 0; }
.tsg-inhalt .tsg-unterabschnitt + .tsg-hinweis { margin-bottom: 12px; }
.tsg-inhalt .tsg-tabellenkarte + .tsg-hinweis { margin-top: 10px; }
.tsg-inhalt .tsg-gruppe { margin: 22px 0 8px 0; font-family: var(--tsg-schrift); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--tsg-tinte); }
.tsg-inhalt .tsg-zusatz { font-weight: 500; color: var(--tsg-grau); }
.tsg-tabelle .tsg-tabelle__titel { width: 1%; }
.tsg-tabelle td.tsg-tabelle__titel { font-size: 13px; font-weight: 700; color: var(--tsg-akzent); }
.tsg-tabelle td.tsg-tabelle__platz { font-weight: 600; color: var(--tsg-tinte); }
.tsg-tabelle .tsg-tabelle__haupt .tsg-notiz { font-weight: 400; }

/* Spielbetrieb-Seiten (Blitz, Rapid, Vereinsturnier, Hall of Fame – aus TSGschach/redesign_neu.py) */
.tsg-inhalt .tsg-intro { display: flow-root; }
.tsg-inhalt .tsg-bild--rechts { float: right; clear: right; width: 45%; max-width: 420px; margin: 4px 0 16px 32px; }   /* clear: folgende Bilder untereinander statt nebeneinander */
/* Größere Variante des rechten Bildes auf breiten Bildschirmen (z. B. Mannschaftsfoto neben der Meldeliste, Seite Frauen);
   nur ab 992 px, damit die Handy-Regel (float: none, volle Breite) nicht überstimmt wird */
@media (min-width: 992px) { .tsg-inhalt .tsg-bild--rechts.tsg-bild--gross { width: 50%; max-width: 620px; } }
.tsg-inhalt .tsg-bild figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--tsg-grau); }
/* Bildrechte im Foto (js/user.js: Bildunterschrift oder Bildtitel beginnt mit "©") */
.tsg-bildrechte { position: relative; display: block; max-width: 100%; }
.tsg-bildrechte > img { display: block; }
.tsg-bildrechte__vermerk {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(8, 22, 42, 0.55);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tsg-inhalt .tsg-bild a { display: block; }
.tsg-inhalt .tsg-kasten {
  margin: 8px 0 28px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--tsg-navy);
  border-radius: 0 16px 16px 0;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
.tsg-inhalt .tsg-kasten p:last-child { margin-bottom: 0; }
.tsg-inhalt .tsg-kasten__titel { margin-bottom: 6px; font-family: var(--tsg-display); font-size: 18px; font-weight: 800; color: var(--tsg-navy); }
.tsg-inhalt .tsg-legende { margin-top: 10px; font-size: 13px; }
.tsg-inhalt .tsg-klappe__inhalt > .tsg-hinweis:first-child { margin-top: 16px; }
.tsg-inhalt .tsg-tabellenkarte + .tsg-klappe { margin-top: 12px; }   /* Rapid: "Plätze 11–32" unter der Wertung */

/* Angaben (Ausschreibung): Schlüssel links, Wert rechts */
.tsg-tabelle--angaben th[scope="row"] {
  width: 1%;
  padding: 13px 28px 13px 12px;
  border-bottom: 1px solid var(--tsg-linie);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: top;
  color: var(--tsg-navy);
}
.tsg-tabelle--angaben td { vertical-align: top; line-height: 1.55; }
.tsg-tabelle--angaben tbody tr:last-child th { border-bottom: 0; }
.tsg-tabelle--angaben tbody tr:hover :is(td, th) { background: none; }

/* Liste mit Jahreszahlen (Hall of Fame) */
.tsg-tabelle--breit td { white-space: nowrap; }
/* Chronik und Erfolgslisten (Jahr + Text, z. B. "Über unseren Verein"): Text bricht um, Links wie Fließtext */
.tsg-tabelle--chronik td { line-height: 1.5; vertical-align: top; }
.tsg-tabelle--chronik td.tsg-tabelle__schluessel { white-space: nowrap; }
.tsg-inhalt .tsg-tabelle--chronik td a { font-weight: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--tsg-rand); text-underline-offset: 3px; }
.tsg-inhalt .tsg-tabelle--chronik td a:hover { color: var(--tsg-akzent); text-decoration-color: currentColor; }
.tsg-tabelle .tsg-tabelle__schluessel { width: 1%; }
.tsg-tabelle td.tsg-tabelle__schluessel { font-weight: 700; color: var(--tsg-navy); }
.tsg-tabelle td.tsg-leer { color: #A9B3C0; text-align: center; }
.tsg-tabelle td.tsg-tabelle__notiz { font-style: italic; color: var(--tsg-grau); text-align: center; }

/* Kreuz- und Fortschrittstabellen: kompakt, Nummer und Name bleiben beim seitlichen Verschieben stehen */
.tsg-inhalt table.tsg-kreuztabelle {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: none;
}
.tsg-kreuztabelle th, .tsg-kreuztabelle td {
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid var(--tsg-linie);
  background: #ffffff;
  text-align: center;
  white-space: nowrap;
  color: var(--tsg-text-2);
}
.tsg-kreuztabelle th {
  padding-top: 12px;
  border-bottom-color: var(--tsg-linie-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tsg-grau);
}
.tsg-kreuztabelle .tsg-kt__datum { font-size: 11px; font-weight: 500; }
.tsg-kreuztabelle tbody tr:nth-child(even) td:not(.tsg-kt__diag):not(.tsg-kt__summe) { background: #FAF8F4; }
.tsg-kreuztabelle tbody tr:last-child td { border-bottom: 0; }
.tsg-kreuztabelle .tsg-kt__nr { position: sticky; left: 0; z-index: 1; width: 48px; min-width: 48px; max-width: 48px; font-weight: 700; color: var(--tsg-navy); }
.tsg-kreuztabelle .tsg-kt__name { position: sticky; left: 48px; z-index: 1; text-align: left; font-weight: 500; color: var(--tsg-tinte); box-shadow: inset -1px 0 0 var(--tsg-linie); }
.tsg-kreuztabelle th.tsg-kt__name { color: var(--tsg-grau); }
.tsg-kreuztabelle .tsg-kt__name strong { font-weight: 700; }
.tsg-kreuztabelle .tsg-kt__wertung { font-size: 13px; color: var(--tsg-grau); }
.tsg-kreuztabelle .tsg-kt__diag { background: var(--tsg-chip-blau); }
.tsg-kreuztabelle .tsg-kt__summe { background: var(--tsg-chip-blau); font-weight: 700; color: var(--tsg-navy); }
.tsg-kreuztabelle .tsg-kt__leer { color: #C3CAD4; }
.tsg-kreuztabelle .tsg-kt__paarung { font-size: 12px; color: var(--tsg-grau); }
.tsg-kreuztabelle .tsg-kt__gp { font-weight: 700; color: var(--tsg-navy); }
.tsg-kreuztabelle td[title] { cursor: help; }

/* Jugend Grand Prix: Gesamtwertung mit aufklappbaren Einzelergebnissen, Turnier-Ranglisten, Archiv */
.tsg-inhalt > .tsg-abschnitt:first-child { margin-top: 8px; }
.tsg-rangliste { max-width: 760px; overflow: hidden; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-rangliste__kopf, .tsg-rang > summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px 96px 16px;
  align-items: center;
  column-gap: 12px;
  padding: 12px 22px;
}
.tsg-rangliste__kopf {
  padding-top: 16px;
  border-bottom: 1px solid var(--tsg-linie-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsg-grau);
}
.tsg-rangliste__kopf > span:nth-child(4) { text-align: right; }
.tsg-rang + .tsg-rang { border-top: 1px solid var(--tsg-linie); }
.tsg-rang > summary { list-style: none; cursor: pointer; }
.tsg-rang > summary::-webkit-details-marker { display: none; }
.tsg-rang > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--tsg-grau);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.tsg-rang[open] > summary::after { transform: rotate(180deg); }
.tsg-rang > summary:hover, .tsg-rang[open] > summary { background: var(--tsg-creme); }
.tsg-rang__platz { font-weight: 800; color: var(--tsg-navy); font-variant-numeric: tabular-nums; }
.tsg-rang__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tsg-tinte); }
.tsg-rang__ak { justify-self: start; padding: 3px 9px; border-radius: 999px; background: var(--tsg-chip-blau); font-size: 12px; font-weight: 700; color: var(--tsg-navy); }
.tsg-rang__punkte { text-align: right; font-size: 14px; color: var(--tsg-grau); white-space: nowrap; }
.tsg-rang__punkte b { font-family: var(--tsg-display); font-size: 18px; font-weight: 800; color: var(--tsg-navy); }
.tsg-rang__einzeln { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 22px 16px 78px; background: var(--tsg-creme); }
.tsg-rang__einzeln > span { padding: 4px 11px; border-radius: 999px; background: #ffffff; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tsg-rang__einzeln > span b { margin-right: 3px; color: var(--tsg-navy); }
.tsg-rang__einzeln > span:last-child { background: var(--tsg-navy); color: #ffffff; }   /* "Gesamt" */
.tsg-rang__einzeln > span:last-child b { color: #ffffff; }

/* Rangliste eines Turniers: Rang · Teilnehmer · TWZ · Punkte · Buchh · SoBerg (Klassen nach Spalte) */
.tsg-tabelle--rangliste :is(th, td):nth-child(1) { width: 1%; text-align: center; color: var(--tsg-grau); }
.tsg-tabelle--rangliste td:nth-child(2) { font-weight: 600; color: var(--tsg-tinte); }
.tsg-tabelle--rangliste :is(th, td):nth-child(n+3) { width: 1%; text-align: right; font-variant-numeric: tabular-nums; }
.tsg-tabelle--rangliste td:nth-child(4) { font-weight: 700; color: var(--tsg-navy); }

/* Archiv: eine große Box, darin Wertung und Turniere flacher */
.tsg-klappe--archiv { margin-top: 40px; }
.tsg-klappe--archiv > .tsg-klappe__inhalt > .tsg-unterabschnitt:first-child { margin-top: 20px; }
.tsg-klappe .tsg-klappe, .tsg-klappe .tsg-rangliste { box-shadow: none; border: 1px solid var(--tsg-linie); }
.tsg-klappe .tsg-klappe > summary .tsg-klappe__titel { font-size: 18px; }

/* Trainingsgruppen (Modul 147, aus TSGschach/trainingszeiten_neu.py): je Trainingszeit links Tag und Uhrzeit,
   rechts die Gruppen als Karten */
.tsg-trainingsgruppen { margin-top: 36px; }
.tsg-tzeit { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--tsg-linie-2); }
.tsg-inhalt .tsg-tzeit__kopf { margin: 0; font-family: var(--tsg-display); font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--tsg-navy); }
.tsg-tzeit__kopf > span { display: block; margin-bottom: 6px; font-family: var(--tsg-schrift); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tsg-akzent); }
.tsg-tzeit__gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tsg-tgruppe { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-inhalt .tsg-tgruppe__name { margin: 0; font-family: var(--tsg-display); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--tsg-navy); }
.tsg-inhalt .tsg-tgruppe__art { margin: 3px 0 0 0; font-weight: 600; color: var(--tsg-tinte); }
.tsg-tgruppe .tsg-chip { margin-top: 10px; }
.tsg-inhalt .tsg-tgruppe__text { margin: 12px 0 0 0; font-size: 15px; line-height: 1.55; }
.tsg-tgruppe__angaben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-self: stretch; margin: auto 0 0 0; padding-top: 14px; font-size: 14px; }
.tsg-tgruppe__angaben::before { content: ""; grid-column: 1 / -1; margin-bottom: 6px; border-top: 1px solid var(--tsg-linie); }
.tsg-tgruppe__angaben dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.9; text-transform: uppercase; color: var(--tsg-grau); }
.tsg-tgruppe__angaben dd { margin: 0; color: var(--tsg-tinte); }

/* Anleitung für die Redaktion (Beitrag 623, inhalte/anleitung.html) */
.tsg-inhalt ul.tsg-inhaltsverzeichnis { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0 0; padding: 0; list-style: none; }
.tsg-inhaltsverzeichnis a { display: inline-block; padding: 8px 14px; border: 1px solid var(--tsg-linie-2); border-radius: 999px; background: #ffffff; font-size: 14px; }
.tsg-inhaltsverzeichnis a:hover { border-color: var(--tsg-navy); }
.tsg-anleitung .tsg-abschnitt, .tsg-anleitung .tsg-unterabschnitt { scroll-margin-top: 110px; }
.tsg-inhalt ol.tsg-schritte { counter-reset: schritt; max-width: 780px; margin: 18px 0 24px 0; padding: 0; list-style: none; }
.tsg-schritte > li { counter-increment: schritt; position: relative; min-height: 32px; margin: 0 0 12px 0; padding: 4px 0 0 46px; }
.tsg-schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tsg-navy); color: #ffffff;
  font-family: var(--tsg-display); font-size: 15px; font-weight: 800;
}
.tsg-inhalt dl.tsg-begriffe { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; max-width: 780px; margin: 18px 0; }
.tsg-begriffe dt { font-weight: 700; color: var(--tsg-navy); }
.tsg-begriffe dd { margin: 0; }
.tsg-inhalt .tsg-bild--screenshot { max-width: 900px; margin: 22px 0 26px 0; }
.tsg-inhalt .tsg-bild--screenshot img { width: auto; max-width: 100%; border: 1px solid var(--tsg-linie-2); border-radius: 14px; }   /* nie über die echte Größe aufziehen */
.tsg-inhalt .tsg-bild--schmal { max-width: 560px; }
.tsg-anleitung .tsg-tabellenkarte { margin-bottom: 18px; }
.tsg-anleitung .tsg-unterabschnitt { margin-top: 32px; }
.tsg-inhalt pre.tsg-code { max-width: 900px; margin: 10px 0 18px 0; padding: 14px 18px; overflow-x: auto; border-radius: 12px; background: var(--tsg-navy); color: #E6ECF4; font-size: 13px; line-height: 1.6; white-space: pre; }
.tsg-inhalt pre.tsg-code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.tsg-anleitung :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: #ffffff; border: 1px solid var(--tsg-linie); font-size: 0.9em; color: var(--tsg-tinte); }
.tsg-anleitung .tsg-kasten { max-width: 780px; }
.tsg-anleitung .tsg-tabellenkarte, .tsg-anleitung > .tsg-tabelle--angaben { max-width: 900px; }

/* Leistungsstützpunkt (Beitrag 11, inhalte/leistungsstuetzpunkt.html) und Jugend-Erfolge (Modul 148) */
/* Auszeichnungen (Kinder und Jugend): gleich breite Bildspalte, damit die Texte untereinander fluchten */
.tsg-inhalt .tsg-stuetzpunkt { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; column-gap: 32px; max-width: 980px; margin-top: 48px; }
.tsg-stuetzpunkt > img { justify-self: center; width: 75px; height: auto; margin-top: 6px; }
.tsg-inhalt .tsg-stuetzpunkt .tsg-abschnitt { margin-top: 0; }
.tsg-stuetzpunkt--siegel > a { display: block; width: 100%; }   /* Plakette TOP-Verein: Bild statt Logo */
.tsg-stuetzpunkt--siegel > a img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--tsg-schatten); }
.tsg-infokarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0 0; }
.tsg-infokarte { padding: 20px 24px; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-inhalt .tsg-infokarte h3 { margin: 0 0 6px 0; padding: 0; border: 0; font-family: var(--tsg-display); font-size: 20px; font-weight: 700; color: var(--tsg-navy); }

/* Wegbeschreibung (Beitrag 49): Adresse + Routenknöpfe, Tram-Verbindungen als Karten, OSM-Karte */
.tsg-weg__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; margin: 28px 0 0 0; }
.tsg-weg__adresse, .tsg-weg__route { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-weg__adresse { border-left: 4px solid var(--tsg-akzent); }
.tsg-inhalt .tsg-weg__adresse p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tsg-text-2); }
.tsg-weg__route .tsg-knoepfe { gap: 10px; }
.tsg-weg .tsg-knopf--klein { height: 44px; padding: 0 18px; font-size: 14px; }
.tsg-weg__verbindungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.tsg-weg__verbindung { overflow: hidden; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-weg__start { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 14px; background: var(--tsg-navy); color: #ffffff; }
.tsg-weg__start strong { font-family: var(--tsg-display); font-size: 19px; font-weight: 700; color: #ffffff; }
.tsg-weg__start span { font-size: 13px; color: var(--tsg-hellblau); }
.tsg-inhalt .tsg-weg__linien { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 20px 18px; list-style: none; }
.tsg-inhalt .tsg-weg__linien li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; font-size: 15px; line-height: 1.4; }
.tsg-weg__linie { padding: 3px 0; border-radius: 6px; background: var(--tsg-akzent); color: #ffffff; font-size: 14px; font-weight: 700; text-align: center; }
.tsg-weg__notiz { display: block; margin-top: 2px; font-size: 13px; color: var(--tsg-grau); }
.tsg-weg__karte { margin-top: 18px; overflow: hidden; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-weg__karte iframe { display: block; width: 100%; height: 420px; border: 0; }
.tsg-inhalt .tsg-weg__karte-link { margin-top: 10px; }

/* Phoca-Galerie ({phocagallery …} in <div class="tsg-galerie">): Die Kachelbilder (phoca_thumb_m) sind seit 20.10.2026
   512 px groß, damit sie auf HiDPI-Bildschirmen scharf sind – angezeigt werden sie wie früher in höchstens 256 × 192 px
   (Querformat 256 breit, Hochformat 192 hoch). Die Großansicht (phoca_thumb_l, 1600 px) bleibt unberührt. */
.tsg-galerie .pg-item-box-image img.pg-image { width: auto; height: auto; max-width: 256px; max-height: 192px; }

/* Rechtstexte (Impressum, Haftungsausschluss, Datenschutzerklärung, DSGVO-Merkblatt): ruhige Lesespalte */
.tsg-rechtstext > :is(p, ul, ol, h2, h3, .tsg-kasten) { max-width: 820px; }
.tsg-inhalt.tsg-rechtstext .tsg-abschnitt { margin-top: 44px; font-size: clamp(22px, 2.2vw, 27px); }
.tsg-inhalt.tsg-rechtstext > .tsg-abschnitt:first-child, .tsg-inhalt.tsg-rechtstext > .tsg-unterabschnitt:first-child { margin-top: 0; }
.tsg-inhalt.tsg-rechtstext .tsg-unterabschnitt { margin-top: 30px; font-size: 19px; }
.tsg-rechtstext .tsg-infokarten { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.tsg-rechtstext .tsg-infokarte p { margin-bottom: 10px; }
.tsg-rechtstext .tsg-infokarte p:last-child { margin-bottom: 0; }
/* Schlagwort "Allgemein" sagt auf Beitragsseiten nichts aus (Rechtstexte, Beiträge und Spenden …) */
.com-content-article .tags li:has(a[href$="/tag/allgemein"]) { display: none; }
.com-content-article .tags:has(> li:only-child > a[href$="/tag/allgemein"]) { display: none; }   /* :has() lässt sich nicht verschachteln */
.tsg-inhalt .tsg-infokarte p { margin: 0; font-size: 15px; line-height: 1.55; }
/* Trägt Modul 148 direkt nach dem Beitrag: Klappboxen etwas vom Hinweis absetzen */
.mod-custom > .tsg-inhalt > .tsg-klappe:first-child { margin-top: 20px; }
.tsg-inhalt ul.tsg-erfolge { margin: 0 0 8px 0; padding: 0; list-style: none; }
.tsg-erfolge > li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--tsg-linie); line-height: 1.5; }
.tsg-erfolge > li:last-child { border-bottom: 0; }
.tsg-erfolge > li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--tsg-akzent); }
.tsg-klappe__inhalt > .tsg-erfolge:first-child { margin-top: 12px; }

/* Tipps für das Training zu Hause (Beitrag 58, aus TSGschach/Lernlinks.html): nummerierte Link-Karten */
/* Hall of Fame: verlinkte Vereinsmeister (Saisonseite oder Endtabelle, gesetzt von TSGschach/vorjahre.py) */
.tsg-inhalt a.tsg-vorjahr { font-weight: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--tsg-rand); text-underline-offset: 3px; }
.tsg-inhalt a.tsg-vorjahr:hover { color: var(--tsg-akzent); text-decoration-color: currentColor; }

.tsg-linkkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.tsg-linkkarte { padding: 22px 24px; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-linkkarte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; margin-bottom: 12px; }
.tsg-linkkarte__nr { font-family: var(--tsg-display); font-size: 22px; font-weight: 800; color: var(--tsg-akzent); }
.tsg-inhalt .tsg-linkkarte__name { flex: 1 1 0; min-width: 10ch; margin: 0; padding: 0; border: 0; font-family: var(--tsg-display); font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--tsg-navy); }
.tsg-inhalt .tsg-linkkarte__kopf > a { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--tsg-grau); }
.tsg-inhalt .tsg-linkkarte__kopf > a:hover { color: var(--tsg-akzent); }
.tsg-inhalt .tsg-linkkarte__titel { margin: 0 0 6px 0; font-weight: 700; }
.tsg-inhalt .tsg-linkkarte p:last-child { margin: 0; font-size: 15px; line-height: 1.55; }
.tsg-inhalt .tsg-linkkarten + .tsg-kasten { margin-top: 32px; }
.tsg-inhalt .tsg-linkkarte__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px 0; }   /* Merkmale: kostenlos, für Kinder … */
.tsg-inhalt .tsg-linkkarte p:not(.tsg-linkkarte__titel):not(.tsg-linkkarte__chips) a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tsg-rand); }
/* Ganze Karte klickbar ("stretched link"): Der Link im Kopf spannt sich über die Karte; Links im Text und im Bild
   liegen darüber und bleiben einzeln klickbar. Karten ohne Kopflink bleiben, wie sie sind. */
.tsg-inhalt .tsg-linkkarte { position: relative; }
.tsg-inhalt .tsg-linkkarte__kopf a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tsg-inhalt .tsg-linkkarte :is(p, figure) a { position: relative; z-index: 1; }
.tsg-inhalt .tsg-linkkarte:has(.tsg-linkkarte__kopf a) { transition: box-shadow 0.2s ease; }
.tsg-inhalt .tsg-linkkarte:has(.tsg-linkkarte__kopf a):hover { box-shadow: 0 1px 2px rgba(14, 27, 46, 0.08), 0 12px 32px rgba(14, 27, 46, 0.12); }
.tsg-inhalt .tsg-linkkarte:hover .tsg-linkkarte__kopf > a,
.tsg-inhalt .tsg-linkkarte:hover .tsg-linkkarte__domain { color: var(--tsg-akzent); }
.tsg-inhalt .tsg-linkkarte__kopf a:focus-visible { outline: none; }
.tsg-inhalt .tsg-linkkarte:has(.tsg-linkkarte__kopf a:focus-visible) { outline: 2px solid var(--tsg-akzent); outline-offset: 3px; }
/* Überschrift als Link (DWZ-Rechner): sieht aus wie die übrigen Namen, die Domain steht als Etikett daneben */
.tsg-inhalt .tsg-linkkarte__name a { color: inherit; font-weight: inherit; text-decoration: none; }
.tsg-inhalt .tsg-linkkarte__domain { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--tsg-grau); }
/* Mitglieder nach DWZ (js/user.js baut die Tabelle aus tsg-dwz.php in .tsg-dwzliste) */
.tsg-dwzliste .tsg-tabellenkarte { margin-top: 16px; }
.tsg-dwzliste__knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.tsg-dwzliste__knopf::after { content: "↕"; font-size: 12px; opacity: 0.35; }
th[aria-sort="ascending"] .tsg-dwzliste__knopf::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .tsg-dwzliste__knopf::after { content: "↓"; opacity: 1; }
th[aria-sort="ascending"] .tsg-dwzliste__knopf, th[aria-sort="descending"] .tsg-dwzliste__knopf { color: var(--tsg-akzent); }
.tsg-dwzliste__knopf:focus-visible { outline: 2px solid var(--tsg-navy); outline-offset: 3px; border-radius: 4px; }
.tsg-dwzliste__tabelle th.tsg-tabelle__zahl .tsg-dwzliste__knopf { flex-direction: row-reverse; }
.tsg-dwzliste__tabelle .tsg-dwzliste__ak { width: 1%; white-space: nowrap; text-align: center; }
.tsg-dwzliste__tabelle td.tsg-tabelle__nr { color: var(--tsg-grau); }
.tsg-inhalt .tsg-dwzliste__tabelle td { padding-top: 9px; padding-bottom: 9px; }   /* 200+ Zeilen: etwas dichter */
.tsg-inhalt .tsg-dwzliste__tabelle td a { color: inherit; font-weight: inherit; }

/* Statistik (nur Redaktion; js/user.js baut die Auswertung aus tsg-statistik.php in .tsg-statistik) */
.tsg-statistik__wahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.tsg-statistik__zeitraum {
  padding: 8px 14px;
  border: 1px solid var(--tsg-linie);
  border-radius: 999px;
  background: #ffffff;
  color: var(--tsg-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tsg-statistik__zeitraum:hover { border-color: var(--tsg-navy); }
.tsg-statistik__zeitraum--aktiv, .tsg-statistik__zeitraum--aktiv:hover { background: var(--tsg-navy); border-color: var(--tsg-navy); color: #ffffff; }
.tsg-statistik__datum { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--tsg-grau); }
.tsg-statistik__datum input { padding: 6px 10px; border: 1px solid var(--tsg-linie); border-radius: 10px; font: inherit; font-size: 14px; color: var(--tsg-navy); background: #ffffff; }
.tsg-statistik__kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tsg-statistik__kennzahl { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--tsg-linie); border-radius: 16px; background: #ffffff; }
.tsg-statistik__kennzahl strong { font-family: var(--tsg-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--tsg-navy); }
.tsg-statistik__kennzahl span { font-size: 13px; color: var(--tsg-grau); }
.tsg-statistik__verlauf { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin-top: 16px; padding: 14px 16px 10px; border: 1px solid var(--tsg-linie); border-radius: 16px; background: #ffffff; }
.tsg-statistik__tag { flex: 1 1 0; min-width: 1px; border-radius: 3px 3px 0 0; background: var(--tsg-akzent); opacity: 0.85; }
.tsg-statistik__tag:hover { opacity: 1; background: var(--tsg-navy); }
.tsg-statistik__achse { display: flex; justify-content: space-between; margin: 6px 16px 0; font-size: 12px; color: var(--tsg-grau); }   /* links heute, rechts Anfang */
.tsg-statistik__achse[hidden] { display: none; }
.tsg-statistik__csv {
  padding: 10px 16px;
  border: 1px solid var(--tsg-navy);
  border-radius: 999px;
  background: transparent;
  color: var(--tsg-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tsg-statistik__csv:hover { background: var(--tsg-navy); color: #ffffff; }
.tsg-statistik .tsg-tabellenkarte { margin-top: 16px; }
.tsg-inhalt .tsg-statistik__tabelle td { padding-top: 9px; padding-bottom: 9px; }
.tsg-statistik__tabelle td.tsg-tabelle__nr { color: var(--tsg-grau); }
.tsg-statistik__pfad { display: block; font-size: 12px; font-weight: 400; color: var(--tsg-grau); word-break: break-all; }
.tsg-statistik__anteil { width: 28%; }
td.tsg-statistik__anteil { white-space: nowrap; }
.tsg-statistik__balken { display: inline-block; height: 8px; max-width: calc(100% - 56px); margin-right: 8px; border-radius: 4px; background: var(--tsg-akzent); vertical-align: middle; }
.tsg-statistik__prozent { font-size: 13px; color: var(--tsg-grau); }
.tsg-inhalt .tsg-dwzliste__tabelle td a:hover { color: var(--tsg-akzent); text-decoration: underline; text-underline-offset: 3px; }

/* Kontakt / Vorstand (Menüpunkt 134, Joomla-Kontakte "Hauptkontakte"): die Kontakttabelle als Kacheln –
   gepflegt wird weiter unter Komponenten → Kontakte, neue Kontakte erscheinen als neue Kachel */
body.com_contact.view-featured .com-contact-featured__table { display: block; margin: 8px 0 48px 0; border: 0; background: none; }
body.com_contact.view-featured .com-contact-featured__table caption,
body.com_contact.view-featured .com-contact-featured__table thead { display: none; }
body.com_contact.view-featured .com-contact-featured__table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
body.com_contact.view-featured .com-contact-featured__table tr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
}
body.com_contact.view-featured .com-contact-featured__table :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
body.com_contact.view-featured .com-contact-featured__table td.item-position {
  order: -1;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsg-akzent);
}
body.com_contact.view-featured .com-contact-featured__table th.list-title a {
  font-family: var(--tsg-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tsg-navy);
  text-decoration: none;
}
body.com_contact.view-featured .com-contact-featured__table th.list-title a:hover { color: var(--tsg-akzent); }
body.com_contact.view-featured .com-contact-featured__table td.item-email { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--tsg-linie); font-size: 15px; overflow-wrap: anywhere; }
body.com_contact.view-featured .com-contact-featured__table td.item-email a { color: var(--tsg-navy); font-weight: 600; text-decoration: none; }
body.com_contact.view-featured .com-contact-featured__table td.item-email a:hover { color: var(--tsg-akzent); }
body.com_contact.view-featured .com-contact-featured__table td.item-phone { font-size: 15px; color: var(--tsg-grau); font-variant-numeric: tabular-nums; }

/* Bankverbindungen mit GiroCode (Seite "Beiträge und Spenden", Beitrag 47) */
.tsg-konten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 8px 0; }
.tsg-konto { display: flex; align-items: flex-start; gap: 20px; padding: 22px 24px; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-konto__text { flex: 1 1 0; min-width: 0; }
.tsg-konto__titel { display: block; margin-bottom: 10px; font-family: var(--tsg-display); font-size: 24px; font-weight: 800; color: var(--tsg-navy); }
.tsg-inhalt .tsg-konto__daten { margin: 0; }
.tsg-inhalt .tsg-konto__daten dt { margin: 10px 0 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tsg-grau); }
.tsg-inhalt .tsg-konto__daten dd { margin: 2px 0 0 0; font-size: 15px; line-height: 1.4; }
.tsg-inhalt .tsg-konto__daten dd.tsg-konto__iban { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; color: var(--tsg-navy); white-space: nowrap; }
.tsg-inhalt .tsg-konto__qr { flex: 0 0 150px; margin: 0; text-align: center; }
.tsg-konto__qr img { display: block; width: 150px; height: auto; image-rendering: pixelated; }
.tsg-konto__qr figcaption { margin-top: 4px; font-size: 12px; color: var(--tsg-grau); }
@media (max-width: 991.98px) {
  .tsg-konten { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .tsg-konto { flex-direction: column; }
  .tsg-inhalt .tsg-konto__qr { align-self: center; }
}

/* Vereinsshop (Seite "Shop", Beitrag 526): Zuschuss-Kasten, Produktkarten mit Rückseite beim Darüberfahren */
.tsg-shop__kopf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.tsg-inhalt .tsg-shop__kopf .tsg-lead { margin-top: 0; }
.tsg-inhalt .tsg-shop__kopf ol.tsg-schritte { margin-bottom: 0; }
.tsg-shop__zuschuss { padding: 24px 26px; border-radius: 20px; background: var(--tsg-navy); color: #ffffff; }
.tsg-shop__zuschuss-titel { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsg-rosa-hell); }
.tsg-inhalt .tsg-shop__zuschuss ul { margin: 0; padding: 0; list-style: none; }
.tsg-inhalt .tsg-shop__zuschuss li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--tsg-navy-linie); color: var(--tsg-hellblau); }
.tsg-inhalt .tsg-shop__zuschuss li:last-child { border-bottom: 0; }
.tsg-shop__zuschuss li strong { min-width: 3.2em; font-family: var(--tsg-display); font-size: 28px; font-weight: 800; color: #ffffff; }
.tsg-shop__zuschuss-zeile { display: block; margin-top: 10px; font-size: 13px; color: var(--tsg-hellblau); }

.tsg-produkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 28px 0; }
.tsg-produkte--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsg-produkt { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.tsg-produkt__bild { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #ffffff; }
.tsg-produkt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.25s ease; }
.tsg-produkte--klein .tsg-produkt { flex-direction: row; }
.tsg-produkte--klein .tsg-produkt__bild { flex: 0 0 40%; aspect-ratio: auto; min-height: 220px; }
.tsg-produkte--klein .tsg-produkt__bild--foto img { object-fit: cover; }   /* Fotos füllen, Produktbilder (contain) bleiben ganz */
.tsg-produkt__bild:focus { outline: none; }
.tsg-produkt__bild:focus-visible { outline: 3px solid var(--tsg-navy); outline-offset: -3px; }
.tsg-produkte--klein .tsg-produkt__text { border-top: 0; border-left: 1px solid var(--tsg-linie); }
.tsg-produkt__bild .tsg-produkt__rueckseite { opacity: 0; }
.tsg-produkt:hover .tsg-produkt__rueckseite, .tsg-produkt__bild:focus-within .tsg-produkt__rueckseite { opacity: 1; }
.tsg-produkt__zuschuss { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--tsg-akzent); color: #ffffff; font-size: 13px; font-weight: 700; }
.tsg-produkt__zuschuss--grau { background: var(--tsg-grau); }
.tsg-produkt__text { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; border-top: 1px solid var(--tsg-linie); }
.tsg-inhalt .tsg-produkt__name { margin: 0; padding: 0; border: 0; font-family: var(--tsg-display); font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--tsg-navy); }
.tsg-inhalt .tsg-produkt__text p { margin: 0; }
.tsg-produkt__art { font-size: 15px; color: var(--tsg-grau); }
.tsg-produkt__groessen { display: flex; flex-wrap: wrap; gap: 6px; }
.tsg-produkt__preis { font-size: 14px; color: var(--tsg-grau); }
.tsg-produkt__preis strong { font-family: var(--tsg-display); font-size: 22px; font-weight: 800; color: var(--tsg-navy); }
.tsg-produkt__bestellung { font-size: 15px; line-height: 1.5; }
.tsg-inhalt .tsg-produkt a.tsg-knopf { align-self: flex-start; margin-top: auto; color: #ffffff; }
.tsg-inhalt .tsg-produkt a.tsg-knopf:hover { color: #ffffff; }
@media (max-width: 991.98px) {
  .tsg-shop__kopf { grid-template-columns: 1fr; gap: 20px; }
  .tsg-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsg-produkte--klein { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .tsg-produkte, .tsg-produkte--klein { grid-template-columns: 1fr; }
  .tsg-produkte--klein .tsg-produkt { flex-direction: column; }
  .tsg-produkte--klein .tsg-produkt__bild { aspect-ratio: 1 / 1; min-height: 0; }
  .tsg-produkte--klein .tsg-produkt__text { border-left: 0; border-top: 1px solid var(--tsg-linie); }
}

/* Foto in einer Karte (Seite Schulschach): klein rechts, Text fließt links */
.tsg-linkkarte { display: flow-root; }
.tsg-inhalt .tsg-linkkarte__bild { float: right; width: 42%; max-width: 230px; margin: 2px 0 10px 18px; }
.tsg-inhalt .tsg-linkkarte__bild img { display: block; width: 100%; height: auto; border-radius: 12px; }
.tsg-inhalt .tsg-linkkarte__bild figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--tsg-grau); }

/* ==========================================================================
   Unterseiten: Beiträge, Seitenleiste, Schlagwörter
   ========================================================================== */
.container-component { padding-top: 1.5rem; }
.breadcrumb { font-size: 0.85rem; background: none; padding: 0; }
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.com-content-category-blog > .page-header h1 {
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tsg-navy);
}
.com-content-article .article-info { color: var(--tsg-grau); font-size: 14px; }
/* Eigenes Feld "Wettkampf (Ort · Datum)" (Feld 3): nur für die Karte "Gerade passiert" (js/user.js liest es aus
   dem Beitrag), im Beitrag und in den News-Kacheln unsichtbar */
.field-entry.tsg-wettkampf-feld { display: none; }
.fields-container:not(:has(> .field-entry:not(.tsg-wettkampf-feld))) { display: none; }

.container-sidebar-right .card,
.container-bottom-b .card {
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
  overflow: hidden;
}
.container-sidebar-right .card-header,
.container-bottom-b .card-header,
.container-sidebar-right .card h3,
.container-bottom-b .card h3 {
  margin: 0;
  padding: 16px 20px 0 20px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsg-akzent);
}
/* Hilfs-Schlagwort für die Karte "Gerade passiert" (js/user.js) nirgends anzeigen */
.tags li:has(a[href*="/gerade-passiert"]),
.tagspopular .tag:has(a[href*="/gerade-passiert"]) { display: none !important; }

.tags .btn-info, .tags a.btn {
  border: 0;
  border-radius: 999px;
  background: var(--tsg-rosa);
  color: var(--tsg-akzent-dunkel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tags .btn-info:hover, .tags a.btn:hover { background: var(--tsg-akzent); color: #ffffff; }
.tagspopular .tag a { color: var(--tsg-navy); }
.tagspopular .tag-count { background: var(--tsg-chip-blau) !important; color: var(--tsg-navy); }

.readmore .btn, .btn-secondary {
  border: 2px solid var(--tsg-navy);
  border-radius: 999px;
  background: transparent;
  color: var(--tsg-navy);
  font-weight: 700;
}
.readmore .btn:hover, .btn-secondary:hover { background: var(--tsg-navy); border-color: var(--tsg-navy); color: #ffffff; }
.btn-primary { border-radius: 999px; background: var(--tsg-akzent); border-color: var(--tsg-akzent); }
.btn-primary:hover { background: var(--tsg-akzent-dunkel); border-color: var(--tsg-akzent-dunkel); }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width: 1199.98px) {
  .tsg-zahl { padding: 28px 24px; }
  .tsg-zahl strong { font-size: 44px; }
  .tsg-nachwuchs__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsg-foto, .tsg-platzierungen { height: 340px; }
  .tsg-mitmachen__einladung { padding: 48px; }
  .tsg-mitmachen__anfahrt { padding: 48px 40px; }
}
@media (max-width: 991.98px) {
  .tsg-hero { height: 600px; }
  .tsg-hero__inhalt { bottom: 40px; }
  .tsg-hero__karte { display: none; }
  .tsg-termine-training, .tsg-mitmachen { grid-template-columns: 1fr; }
  .blog-items.items-leading .blog-item { grid-template-columns: 1fr; }
  .blog-items.items-leading .blog-item > figure,
  .blog-items.items-leading .blog-item:not(:has(> figure))::before { height: 320px; }
  body.itemid-101.view-category .blog-items:not(.items-leading) { grid-template-columns: 1fr; }
  body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item,
  body.view-category:not(.itemid-101):not(.tsg-seite-1) .blog-items.items-leading .blog-item:nth-child(n+7) { grid-column: span 6; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child { grid-column: 1 / -1; grid-template-columns: 1fr; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child > figure, body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child:not(:has(> figure))::before { height: 320px; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .item-content { padding: 28px 30px 32px 30px; }
  .tsg-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsg-statistik__kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsg-statistik__datum { margin-left: 0; }
  .tsg-statistik__anteil { display: none; }
  .footer .tsg-meistgelesen .mostread { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tsg-steckbrief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tsg-nur-breit { display: none !important; }

  /* Lange Wörter ("TSG-Vereinsmeisterschaft", "Mannschaftsmeisterschaften") in großen Überschriften
     trennen statt die Seite zu verbreitern */
  main :is(h1, h2, h3, h4) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

  /* Inhaltsbausteine: Steckbrief kompakter, Spielplan als gestapelte Einträge */
  .tsg-inhalt .tsg-lead { font-size: 17px; }
  .tsg-inhalt .tsg-abschnitt { margin-top: 40px; }
  .tsg-steckbrief { gap: 10px; margin-top: 20px; }
  .tsg-steckbrief__karte { padding: 16px 16px; border-radius: 16px; }
  .tsg-steckbrief__wert { font-size: 28px; }
  .tsg-steckbrief__karte--breit .tsg-steckbrief__wert { font-size: 21px; }
  .tsg-tabellenkarte { padding: 4px 14px; border-radius: 16px; }
  .tsg-tabelle th, .tsg-tabelle td { padding: 11px 8px; }
  .tsg-tabelle--stapeln thead { display: none; }
  .tsg-teamkarten { gap: 10px; }
  .tsg-steckbrief--zwei { grid-template-columns: 1fr; }
  .tsg-teamkarte { padding: 16px 16px; border-radius: 16px; }
  .tsg-klappe { border-radius: 16px; }
  .tsg-klappe > summary { padding: 16px 46px 16px 16px; }
  .tsg-klappe > summary::after { right: 16px; }
  .tsg-klappe__titel { font-size: 20px; }
  .tsg-klappe__inhalt { padding: 4px 14px 18px 14px; }
  .tsg-tabelle--stapeln, .tsg-tabelle--stapeln tbody, .tsg-tabelle--stapeln tr, .tsg-tabelle--stapeln td { display: block; width: auto; }
  .tsg-tabelle--stapeln tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; padding: 14px 2px; border-bottom: 1px solid var(--tsg-linie); }
  .tsg-tabelle--stapeln tbody tr:last-child { border-bottom: 0; }
  .tsg-tabelle--stapeln td { padding: 0; border: 0; text-align: left; }
  .tsg-tabelle--stapeln tbody tr:hover td { background: none; }
  .tsg-tabelle--stapeln td[data-label="Runde"] { display: none; }
  .tsg-tabelle--stapeln .tsg-tabelle__datum { grid-column: 1; grid-row: 1; }
  .tsg-tabelle--stapeln td[data-label="Beginn"] { grid-column: 2; grid-row: 1; color: var(--tsg-grau); }
  .tsg-tabelle--stapeln .tsg-tabelle__ergebnis { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .tsg-tabelle--stapeln .tsg-tabelle__haupt { grid-column: 1 / 3; font-size: 16px; }
  .tsg-tabelle--stapeln td[data-label="Heim/Auswärts"], .tsg-tabelle--stapeln td[data-label="Spielort"] { grid-column: 1 / -1; font-size: 14px; }
  .tsg-tabelle--stapeln td[data-label="Heim/Auswärts"] { display: inline-block; }

  /* Einfache Liste: erste Spalte als Überschrift, übrige Angaben mit " · " dahinter, Chips darunter */
  .tsg-tabelle--liste thead { display: none; }
  .tsg-tabelle--liste, .tsg-tabelle--liste tbody { display: block; }
  .tsg-tabelle--liste tr { display: block; padding: 14px 2px; border-bottom: 1px solid var(--tsg-linie); }
  .tsg-tabelle--liste tbody tr:last-child { border-bottom: 0; }
  .tsg-tabelle--liste tbody tr:hover td { background: none; }
  .tsg-tabelle--liste td { display: inline; padding: 0; border: 0; font-size: 15px; color: var(--tsg-grau); }
  .tsg-tabelle--liste td.tsg-tabelle__haupt { display: block; margin-bottom: 4px; font-size: 16px; color: var(--tsg-tinte); }
  .tsg-tabelle--liste td:not(.tsg-tabelle__haupt) + td:not(:empty):not(:has(.tsg-chip))::before { content: " · "; }
  .tsg-tabelle--liste td:has(.tsg-chip) { display: block; margin-top: 8px; }
  .tsg-tabelle--liste td:empty { display: none; }

  /* Teilnehmer-Tabellen (Turnierergebnisse): je Spieler/Team ein Eintrag –
     Titel + Name, darunter das Ergebnis, darunter klein "Startrang 12 · DWZ 2158 · Elo 2139" */
  .tsg-tabelle.tsg-tabelle--teilnehmer thead { display: none; }
  .tsg-tabelle.tsg-tabelle--teilnehmer, .tsg-tabelle--teilnehmer tbody { display: block; }
  .tsg-tabelle.tsg-tabelle--teilnehmer tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 12px 2px; border-bottom: 1px solid var(--tsg-linie); }
  .tsg-tabelle.tsg-tabelle--teilnehmer tbody tr:last-child { border-bottom: 0; }
  .tsg-tabelle.tsg-tabelle--teilnehmer tbody tr:hover td { background: none; }
  .tsg-tabelle.tsg-tabelle--teilnehmer td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tsg-tabelle.tsg-tabelle--teilnehmer .tsg-tabelle__titel { order: 1; }
  .tsg-tabelle.tsg-tabelle--teilnehmer .tsg-tabelle__haupt { order: 2; flex: 1 1 0; min-width: 0; font-size: 16px; }
  .tsg-tabelle.tsg-tabelle--teilnehmer .tsg-tabelle__platz { order: 3; flex: 0 0 100%; margin-top: 3px; font-size: 15px; }
  .tsg-tabelle.tsg-tabelle--teilnehmer td[data-label] { order: 4; margin-top: 3px; font-size: 13px; color: var(--tsg-grau); }
  .tsg-tabelle.tsg-tabelle--teilnehmer td[data-label]::before { content: attr(data-label) " "; }
  .tsg-tabelle.tsg-tabelle--teilnehmer td[data-label]:not(.tsg-leer) ~ td[data-label]::before { content: "· " attr(data-label) " "; }
  .tsg-tabelle.tsg-tabelle--teilnehmer td.tsg-leer { display: none; }

  /* Spielbetrieb: Bild über den Text statt daneben, Angaben untereinander, Kreuztabellen enger */
  .tsg-inhalt .tsg-bild--rechts { float: none; width: auto; max-width: none; margin: 0 0 20px 0; }
  .tsg-tabelle--angaben, .tsg-tabelle--angaben tbody, .tsg-tabelle--angaben tr { display: block; }
  .tsg-tabelle--angaben tr { padding: 12px 2px; border-bottom: 1px solid var(--tsg-linie); }
  .tsg-tabelle--angaben tbody tr:last-child { border-bottom: 0; }
  .tsg-tabelle.tsg-tabelle--angaben th[scope="row"],
  .tsg-tabelle.tsg-tabelle--angaben td { display: block; width: auto; padding: 0; border: 0; }
  .tsg-tabelle.tsg-tabelle--angaben th[scope="row"] { margin-bottom: 2px; font-size: 14px; }
  .tsg-kreuztabelle th, .tsg-kreuztabelle td { padding: 6px 6px; }
  .tsg-inhalt table.tsg-kreuztabelle { font-size: 13px; }
  .tsg-kreuztabelle .tsg-kt__nr { width: 44px; min-width: 44px; max-width: 44px; }   /* passt "Platz" */
  .tsg-kreuztabelle .tsg-kt__name { left: 44px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .tsg-rangliste__kopf, .tsg-rang > summary { grid-template-columns: 34px minmax(0, 1fr) auto auto 14px; column-gap: 8px; padding: 11px 14px; }
  .tsg-rangliste__kopf { padding-top: 14px; font-size: 11px; letter-spacing: 0.04em; }
  .tsg-rang__name { white-space: normal; line-height: 1.3; }
  .tsg-tzeit { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .tsg-tzeit__gruppen { grid-template-columns: 1fr; gap: 10px; }
  .tsg-tgruppe { padding: 16px 18px; border-radius: 16px; }
  .tsg-inhalt .tsg-stuetzpunkt { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-top: 36px; }
  .tsg-stuetzpunkt > img { justify-self: start; width: 56px; margin-top: 0; }
  .tsg-stuetzpunkt--siegel > a { width: 120px; }
  .tsg-infokarten, .tsg-rechtstext .tsg-infokarten { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .tsg-weg__kopf, .tsg-weg__verbindungen { grid-template-columns: 1fr; gap: 10px; }
  .tsg-weg__adresse, .tsg-weg__route { padding: 16px 18px; border-radius: 16px; }
  .tsg-weg__karte iframe { height: 320px; }
  .tsg-galerie .pg-item-box-image img.pg-image { max-width: calc(50vw - 40px); max-height: 150px; }   /* zwei Kacheln je Zeile */
  .tsg-infokarte { padding: 16px 18px; border-radius: 16px; }
  .tsg-inhalt dl.tsg-begriffe { grid-template-columns: 1fr; gap: 2px; }
  .tsg-begriffe dd { margin-bottom: 10px; }
  .tsg-linkkarten { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .tsg-linkkarte { padding: 18px 18px; border-radius: 16px; }
  .tsg-inhalt .tsg-linkkarte__name { font-size: 20px; }
  .tsg-inhalt .tsg-linkkarte__kopf > a, .tsg-inhalt .tsg-linkkarte__domain { flex-basis: 100%; }
  .tsg-rangliste__kopf > span:nth-child(3) { display: none; }
  .tsg-rangliste__kopf > span:nth-child(4) { grid-column: 4; }
  .tsg-rang__einzeln { padding: 2px 14px 14px 14px; }
  /* Turnier-Rangliste als Einträge: "1  Name  4,5 Pkt.", darunter klein "TWZ 1097 · Buchh. 17,0 · SoBerg 14,75" */
  .tsg-tabelle--rangliste thead { display: none; }
  .tsg-inhalt table.tsg-tabelle--rangliste, .tsg-tabelle--rangliste tbody { display: block; }
  .tsg-tabelle--rangliste tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 11px 2px; border-bottom: 1px solid var(--tsg-linie); }
  .tsg-tabelle--rangliste tbody tr:last-child { border-bottom: 0; }
  .tsg-tabelle--rangliste tr::after { content: ""; order: 3; flex-basis: 100%; }
  .tsg-tabelle.tsg-tabelle--rangliste td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tsg-tabelle--rangliste tbody tr:hover td { background: none; }
  .tsg-tabelle.tsg-tabelle--rangliste td:nth-child(1) { order: 1; flex: 0 0 28px; font-weight: 700; color: var(--tsg-navy); }
  .tsg-tabelle--rangliste td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0; }
  .tsg-tabelle.tsg-tabelle--rangliste td:nth-child(4) { order: 3; text-align: right; }
  .tsg-tabelle--rangliste td:nth-child(4)::after { content: " Pkt."; font-size: 13px; font-weight: 500; color: var(--tsg-grau); }
  .tsg-tabelle.tsg-tabelle--rangliste :is(td:nth-child(3), td:nth-child(5), td:nth-child(6)) { order: 4; margin-top: 2px; font-size: 13px; color: var(--tsg-grau); }
  .tsg-tabelle--rangliste td:nth-child(3) { margin-left: 34px; }
  .tsg-tabelle--rangliste td:nth-child(3):empty { display: none; }
  .tsg-tabelle--rangliste td:nth-child(3):empty ~ td:nth-child(5) { margin-left: 34px; }
  .tsg-tabelle--rangliste td:nth-child(3)::before { content: "TWZ "; }
  .tsg-tabelle--rangliste td:nth-child(5)::before { content: "Buchh. "; }
  .tsg-tabelle--rangliste td:nth-child(3):not(:empty) ~ td:nth-child(5)::before { content: "· Buchh. "; }
  .tsg-tabelle--rangliste td:nth-child(6)::before { content: "· SoBerg "; }
  .tsg-tabelle--breit .tsg-tabelle__schluessel { position: sticky; left: 0; z-index: 1; background: #ffffff; box-shadow: inset -1px 0 0 var(--tsg-linie); }

  /* Alte Tabellen in Beiträgen (feste Breiten, viele Spalten): nie breiter als der Bildschirm,
     sondern innerhalb der Spalte seitlich wischbar; enger gesetzt, Bilder verkleinert */
  main table:not(.tsg-tabelle):not(.tsg-kreuztabelle) {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px !important;
  }
  main table:not(.tsg-tabelle):not(.tsg-kreuztabelle) td,
  main table:not(.tsg-tabelle):not(.tsg-kreuztabelle) th { padding: 5px 7px !important; }
  main table:not(.tsg-tabelle):not(.tsg-kreuztabelle) img { width: auto !important; max-width: 110px !important; height: auto !important; }
  main table:not(.tsg-tabelle):not(.tsg-kreuztabelle):has(img) td { min-width: 9em; }   /* z. B. Shop: sonst quetschen sich die Textspalten zu Handtuchstreifen */

  .tsg-hero__bild { object-position: 45% 40%; }
  .tsg-hero__inhalt { left: 20px; right: 20px; bottom: 28px; }
  .tsg-hero__text { gap: 16px; }
  .tsg-badge { padding: 6px 12px; font-size: 11px; letter-spacing: 0.1em; }
  .tsg-hero__absatz { font-size: 16px; }
  .tsg-hero .tsg-knoepfe, .tsg-hero .tsg-knopf { width: 100%; }
  .tsg-knopf { height: 52px; padding: 0 24px; }
  .tsg-knopf--klein { height: 48px; }

  .tsg-zahlen { padding: 0 20px; }
  .tsg-zahlen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; }
  .tsg-zahl { padding: 22px 18px; gap: 4px; }
  .tsg-zahl + .tsg-zahl { border-left: 0; }
  .tsg-zahl:nth-child(odd) { border-right: 1px solid var(--tsg-navy-linie); }
  .tsg-zahl:nth-child(-n+2) { border-bottom: 1px solid var(--tsg-navy-linie); }
  .tsg-zahl strong { font-size: 36px; }
  .tsg-zahl > span { font-size: 13px; }

  .tsg-dachzeile { font-size: 12px; }
  .tsg-siegel { width: 68px; }
  .tsg-kopf--mit-link { margin: 56px 0 22px 0; }
  .tsg-mehr { font-size: 15px; }

  /* Aufmacher untereinander, kleine Beiträge als Zeilen mit Vorschaubild */
  .blog-items { gap: 12px; }
  .blog-items.items-leading { margin-bottom: 12px; }
  body.view-category:not(.itemid-101) .blog-items.items-leading { gap: 14px; }
  body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item,
  body.view-category:not(.itemid-101):not(.tsg-seite-1) .blog-items.items-leading .blog-item:nth-child(n+7) { grid-column: 1 / -1; }
  body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item > figure,
  body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:not(:has(> figure))::before { height: 200px; }
  body.view-category:not(.itemid-101) .blog-items.items-leading .blog-item { border-radius: 22px; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child > figure, body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child:not(:has(> figure))::before { height: 240px; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .item-content { padding: 20px 20px 24px 20px; row-gap: 10px; }
  body.tsg-seite-1.view-category:not(.itemid-101) .blog-items.items-leading .blog-item:first-child .page-header h2 { font-size: 26px; }
  .blog-items.items-leading .blog-item { border-radius: 22px; }
  .blog-items.items-leading .blog-item > figure,
  .blog-items.items-leading .blog-item:not(:has(> figure))::before { height: 260px; }
  .blog-items.items-leading .blog-item .item-content { padding: 20px 20px 24px 20px; row-gap: 10px; grid-template-rows: none; }
  .blog-items.items-leading .blog-item .page-header h2 { font-size: 26px; line-height: 1.08; }
  .blog-items.items-leading .blog-item .item-content > p:not(.readmore) { font-size: 15px !important; line-height: 1.55 !important; -webkit-line-clamp: 4; }
  .blog-items.items-leading .blog-item .item-content::after { display: none; }
  .blog-items .blog-item .tags a { font-size: 11px; padding: 5px 10px; }

  .blog-items:not(.items-leading) .blog-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
    box-shadow: none;
  }
  .blog-items:not(.items-leading) .blog-item > figure,
  .blog-items:not(.items-leading) .blog-item:not(:has(> figure))::before {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    background-size: auto 44px, 28px 28px, auto;
  }
  .blog-items:not(.items-leading) .blog-item > figure img { height: 76px; }
  .blog-items:not(.items-leading) .blog-item .item-content { padding: 0; row-gap: 4px; }
  .blog-items:not(.items-leading) .blog-item .tags { display: none; }
  .blog-items:not(.items-leading) .blog-item .article-info { grid-column: 1 / -1; font-size: 12px; }
  .blog-items:not(.items-leading) .blog-item .page-header h2 { font-size: 17px; }
  .blog-items:not(.items-leading) .blog-item .item-content > p:not(.readmore) { display: none; }

  .tsg-termine-training { margin-top: 56px; gap: 56px; }
  .tsg-termine { gap: 18px; }
  .tsg-termin { gap: 16px; padding: 14px 0; }
  .tsg-termin .tsg-chip { display: none; }
  .tsg-termine__zaehler { font-size: 13px; }
  .tsg-blaettern { height: 42px; padding: 0 16px; font-size: 14px; }
  .tsg-blaettern--zurueck { width: 42px; padding: 0; justify-content: center; font-size: 0; }   /* nur Pfeil */
  .tsg-termin__datum { width: 66px; }
  .tsg-termin__datum span { font-size: 11px; }
  .tsg-termin__datum strong { font-size: 22px; }
  .tsg-termin__text strong { font-size: 15px; }
  .tsg-termin__text span { font-size: 13px; }
  .tsg-training { border-radius: 24px; }
  .tsg-training__bild { height: 220px; }
  .tsg-training__inhalt { padding: 24px 22px 28px 22px; gap: 14px; }
  .tsg-training__zeiten { font-size: 15px; gap: 10px; }
  .tsg-training__zeiten dt { width: 84px; }
  .tsg-training .tsg-knopf, .tsg-mitmachen .tsg-knopf { align-self: stretch; }
  .tsg-mitmachen .tsg-knoepfe, .tsg-mitmachen .tsg-knoepfe .tsg-knopf { width: 100%; }

  .tsg-nachwuchs { margin-top: 56px; gap: 18px; }
  .tsg-nachwuchs__raster { grid-template-columns: 1fr; gap: 18px; }
  .tsg-foto--breit { grid-column: auto; }
  .tsg-foto { height: 280px; border-radius: 22px; }
  .tsg-foto--breit .tsg-foto__text { left: 20px; right: 20px; bottom: 18px; }
  .tsg-foto--breit .tsg-foto__text strong { font-size: 24px; }
  .tsg-foto__text span { font-size: 13px; }
  .tsg-platzierungen { height: auto; padding: 22px 20px; gap: 14px; border-radius: 22px; box-shadow: none; }
  .tsg-platzierungen ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tsg-platzierungen li { flex-direction: column; gap: 2px; }
  .tsg-platzierungen li strong { font-size: 34px; }
  .tsg-platzierungen li span { font-size: 13px; }

  .tsg-mitmachen { margin: 56px 0; border-radius: 24px; }
  .tsg-mitmachen__einladung { padding: 30px 22px; gap: 16px; background: transparent; }
  .tsg-mitmachen__einladung p { display: none; }
  .tsg-mitmachen__anfahrt { padding: 26px 22px; gap: 14px; }
  .tsg-adresse { padding-left: 0; font-size: 17px; }
  .tsg-adresse::before { display: none; }
  .tsg-tram span { font-size: 13px; }

  .footer .grid-child { padding: 40px 20px 32px 20px; }
  .tsg-fuss { gap: 24px; }
  .tsg-fuss__spalten { gap: 24px 20px; }
  .tsg-fuss__verein { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .tsg-fuss__verein img { width: 30px; }
  .tsg-fuss__verein strong { font-size: 18px; }
  .tsg-fuss__verein span { display: none; }
  .tsg-fuss__links { font-size: 14px; }
  .tsg-fuss__unten { font-size: 12px; }
}

/* ==========================================================================
   Suchergebnisse (Smart Search, Menüpunkt 115 "Suche", /search)
   ========================================================================== */
.com-finder > h1,
body.com_contact.view-featured .com-contact-featured > h1 {
  margin: 0 0 20px 0;
  font-family: var(--tsg-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tsg-navy);
}
.com-finder__form .com-finder__search { margin: 0 0 8px 0 !important; }
.com-finder__form .form-inline > label { display: none; }
.com-finder__form .input-group { display: flex; flex-wrap: nowrap; gap: 8px; max-width: 640px; }
.com-finder__form .input-group > .form-control { flex: 1 1 auto; }
.com-finder__explained { margin: 0 0 20px 0; color: var(--tsg-grau); font-size: 15px; }
.com-finder__explained p { margin: 0; }
.com-finder__explained .query-required { color: var(--tsg-tinte); }
.com-finder__explained a { color: var(--tsg-navy); font-weight: 600; }
.com-finder__results-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.com-finder__results-list .result__item {
  position: relative;
  margin: 0;
  padding: 18px 22px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--tsg-schatten);
  transition: box-shadow 0.15s ease;
}
.com-finder__results-list .result__item:hover { box-shadow: var(--tsg-schatten-gross); }
.com-finder__results-list .result__item + .result__item { border: 0; }   /* Trennlinie von Cassiopeia */
.com-finder__results-list .result__date::after { content: none; }
.com-finder__results-list .result__title { margin: 0 0 6px 0; }
.com-finder__results-list .result__title-link {
  font-family: var(--tsg-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tsg-navy);
  text-decoration: none;
}
.com-finder__results-list .result__title-link::after { content: ""; position: absolute; inset: 0; }   /* ganze Karte klickbar */
.com-finder__results-list .result__item:hover .result__title-link { color: var(--tsg-akzent); }
.com-finder__results-list .result__description { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tsg-tinte); }
.com-finder__results-list .result__date {
  display: block;
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--tsg-grau);
}
.com-finder__results-list mark,
.com-finder__results-list .highlight { padding: 0 2px; border-radius: 3px; background: var(--tsg-rosa); color: inherit; }
.com-finder__empty { padding: 22px; border-radius: 16px; background: #ffffff; box-shadow: var(--tsg-schatten); }
.com-finder__empty h2 { margin: 0 0 6px 0; font-family: var(--tsg-display); font-size: 22px; font-weight: 800; color: var(--tsg-navy); }
.com-finder__empty p { margin: 0; color: var(--tsg-grau); }
.com-finder__navigation { margin-top: 24px; text-align: center; }
.com-finder__navigation .pagination { justify-content: center; flex-wrap: wrap; row-gap: 6px; }
.com-finder__navigation .page-link { border-radius: 999px; margin: 0 3px; border-color: var(--tsg-linie); color: var(--tsg-navy); }
.com-finder__navigation .active > .page-link { background: var(--tsg-navy); border-color: var(--tsg-navy); color: #ffffff; }
.com-finder__counter { margin-top: 8px; font-size: 14px; color: var(--tsg-grau); }
@media (max-width: 575.98px) {
  .com-finder__results-list .result__item { padding: 16px 18px; }
  .com-finder__results-list .result__title-link { font-size: 19px; }
}