/**
 * Speedsport Magazine — Markenfarbe und eigene Bausteine.
 *
 * Markenfarbe #073bcf: Links, aktive Zustände, Linien, Knöpfe.
 */

:root {
  --ssm-blau: #073bcf;
  --ssm-blau-dunkel: #052c9c;
  --ssm-blau-hell: #e8eefb;
  /* Gelb aus dem Logo: Hover auf dunkelblauem Grund (Kopfleiste, Fußzeile) */
  --ssm-gelb: #ecf447;

  /* Martex/Bootstrap-Hauptfarbe (theme.css: #4a90e2) */
  --main-color: var(--ssm-blau);
  --main-color-soft: var(--ssm-blau-hell);

  /* Hervorhebungen in Tabellen (Karriere, Wertungen): ruhige Zeilenfarbe für
     die Hauptserie einer Saison, Bernstein für besondere Leistungen (Siege,
     Platz 1–6). */
  --ssm-zeile-haupt: #eaeef6;
  --ssm-gold: #fdf0c8;
  --ssm-gold-dunkel: #6b5300;
}

/* --------------------------------------------------------------------------
   Martex-Farbschema (theme.css §37, dort #1680fb / #185abd)
   -------------------------------------------------------------------------- */

.bg--theme,
.shape--blue-400:after {
  background-color: var(--ssm-blau);
}

.btn--theme {
  border-color: var(--ssm-blau) !important;
  background-color: var(--ssm-blau) !important;
}

.hover--theme:hover,
.white-scroll .scroll .hover--theme:hover,
.black-scroll .scroll .hover--theme:hover {
  border-color: var(--ssm-blau-dunkel) !important;
  background-color: var(--ssm-blau-dunkel) !important;
}

.color--theme,
.color--theme h1, .color--theme h2, .color--theme h3,
.color--theme h4, .color--theme h5, .color--theme h6,
.color--theme p, .color--theme a, .color--theme li,
.color--theme i, .color--theme span,
.color--white .color--theme {
  color: var(--ssm-blau) !important;
}

/* --------------------------------------------------------------------------
   Navigation und Pager (style.css: fest #3f78e0 / #4a90e2)
   -------------------------------------------------------------------------- */

.navbar {
  --bs-navbar-hover-color: var(--ssm-blau);
  --bs-navbar-active-color: var(--ssm-blau);
}

.nav {
  --bs-nav-link-hover-color: var(--ssm-blau);
}

.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--ssm-blau);
  --bs-dropdown-link-active-color: var(--ssm-blau);
}

.page-link {
  color: var(--ssm-blau);
}

.page-link:hover {
  color: var(--ssm-blau-dunkel) !important;
}

.active > .page-link,
.page-link.active {
  color: #fff;
  background-color: var(--ssm-blau);
  border-color: var(--ssm-blau);
}

/* --------------------------------------------------------------------------
   Einheitlicher Seitenaufbau aller eigenen Seiten
   Martex style.css: section > div[class*="container"]:not([class*="space-"])
   gibt jedem Container je 4rem Innenabstand oben und unten — unter dem Kopf
   entstand so eine Lücke von fast 190 px. Abstände nur über die Sektionen
   (pb-40, pb-60, pt-80 …). Der Selektor muss spezifischer sein (0,2,3 gegen
   0,2,2).
   -------------------------------------------------------------------------- */
article.ssm-artikel > section > div.container,
article.ssm-galerie > section > div.container,
article.ssm-strecken > section > div.container,
article.ssm-strecke > section > div.container,
article.ssm-motorsport > section > div.container,
article.ssm-serie > section > div.container,
article.ssm-saison > section > div.container,
article.ssm-datenbank > section > div.container,
article.ssm-eintrag > section > div.container,
article.ssm-suche > section > div.container,
article.ssm-kalender-seite > section > div.container,
article.ssm-start > section > div.container,
article.ssm-infoseite > section > div.container {
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Motorsport: Welt, Ebenen, Serien, Saisons (ssm_motorsport)
   Gemeinsame Bausteine (Brotkrumen, Reiter, Chips, Karte, Tabellen) stehen
   im Abschnitt Rennstrecken weiter unten.
   -------------------------------------------------------------------------- */

.ssm-motorsport__text {
  max-width: 46rem;
  margin-bottom: 1.5rem;
  color: #4a5162;
}

.ssm-leiter,
.ssm-ebenen {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-ebenen {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
}

.ssm-ebene-kachel {
  padding: 1.25rem 1.5rem;
  border: 1px solid #e3e7ef;
  border-left: 4px solid var(--ssm-blau);
  border-radius: 14px;
  background: #fff;
}

.ssm-ebene-kachel__kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.ssm-ebene-kachel h3 {
  margin: 0;
}

.ssm-ebene-kachel h3 a,
.ssm-serie-kachel h3 a {
  color: var(--main-heading-color, #1d2330);
}

.ssm-ebene-kachel h3 a:hover,
.ssm-serie-kachel h3 a:hover {
  color: var(--ssm-blau) !important;
}

.ssm-ebene-kachel .ssm-zahlen {
  margin: 0.15rem 0 0;
}

.ssm-ebene-kachel .ssm-chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-leiter__nr {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ssm-blau);
  border-radius: 50%;
  color: var(--ssm-blau);
  font-size: 1.1rem;
  font-weight: 700;
}

.ssm-serien-kacheln {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.ssm-serie-kachel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 14px;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ssm-serie-kachel:hover {
  border-color: var(--ssm-blau);
  box-shadow: 0 10px 28px rgba(7, 59, 207, 0.1);
}

.ssm-serie-kachel__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ssm-serie-kachel__text {
  padding: 1.1rem 1.25rem 1.25rem;
}

.ssm-serie-kachel h3 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}

.ssm-serie-kachel__zeile {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
}

.ssm-serie-kachel__zeile span {
  color: #6b7385;
}

/* Abzeichen Berichterstattung: vollständig = gefüllt, eingeschränkt = Rand,
   Basis = grau. */
.ssm-typ {
  display: inline-block;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--ssm-blau);
  border-radius: 999px;
  color: var(--ssm-blau);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.ssm-typ--1 {
  background: var(--ssm-blau);
  color: #fff;
}

.ssm-typ--3 {
  border-color: #aab1c0;
  color: #6b7385;
}

a.ssm-typ:hover {
  border-color: var(--ssm-blau-dunkel);
  background: var(--ssm-blau-dunkel);
  color: #fff !important;
}

.ssm-offiziell {
  margin: 0.5rem 0 0;
  color: #4a5162;
  font-size: 1.05rem;
}

.ssm-serie__offiziell {
  display: block;
  color: #6b7385;
}

.ssm-saison-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: #4a5162;
}

.ssm-wechsler {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.25rem;
  font-weight: 500;
}

.ssm-wechsler a {
  color: var(--ssm-blau);
}

.ssm-abschnitt {
  margin-bottom: 2.5rem;
  scroll-margin-top: 120px;
}

.ssm-abschnitt h2 {
  margin-bottom: 1rem;
}

.ssm-abschnitt:target h2 {
  color: var(--ssm-blau);
}

.ssm-kalender td:first-child {
  width: 3rem;
  color: #6b7385;
  font-variant-numeric: tabular-nums;
}

.ssm-kalender td:nth-child(2) {
  white-space: nowrap;
}

.ssm-kalender td:last-child {
  color: #6b7385;
  font-size: 0.9rem;
}

.ssm-kalender__abgesagt td:nth-child(2),
.ssm-kalender__abgesagt td:nth-child(3) {
  color: #8a93a6;
  text-decoration: line-through;
}

.ssm-karte--saison {
  height: clamp(320px, 55vh, 520px);
}

@media (min-width: 992px) {
  .ssm-saison__kalender > div:last-child {
    position: sticky;
    top: 110px;
  }
}

.ssm-marker-ort {
  border-radius: 13px;
  padding: 0 4px;
}

.ssm-klassen {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.ssm-klasse {
  margin: 0;
}

.ssm-klasse__bild img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.ssm-klasse figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.ssm-klasse figcaption small {
  color: #6b7385;
}

/* Klassenfotos einer Saison: Seitenleiste bzw. unter dem Kopf. */
.ssm-klassen--oben {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.ssm-saison-fotos .ssm-klasse + .ssm-klasse {
  margin-top: 1.25rem;
}

.ssm-saison-fotos .ssm-klasse__bild img {
  border-radius: 8px;
}

/* Ganze Tabellenzeile klickbar: der Link der Zeile wird über die Zeile gezogen. */
.ssm-zeilenlink tbody tr {
  position: relative;
}

.ssm-zeilenlink tbody tr a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ssm-zeilenlink tbody tr:hover > * {
  background-color: #f3f6fc;
}

.ssm-zeilenlink tbody tr:hover a {
  text-decoration: underline;
}

/* Serienseite: Vorschau des Saisonfotos in der Tabelle. */
.ssm-tabelle .ssm-serie__foto {
  width: 136px;
}

.ssm-serie__foto img {
  display: block;
  width: 120px;
  height: auto;
  border-radius: 6px;
}

.ssm-typen {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.ssm-typ-kachel {
  padding: 1.5rem;
  border: 1px solid #e3e7ef;
  border-top: 3px solid var(--ssm-blau);
  border-radius: 14px;
  background: #fff;
  scroll-margin-top: 120px;
}

.ssm-typ-kachel h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.ssm-typ-kachel ul {
  padding-left: 1.1rem;
}

.ssm-typ-kachel__hinweis {
  color: #6b7385;
  font-size: 0.9rem;
}

/* Jahresmatrix der Berichterstattung: Serien × Jahre, Farbe = Stufe */
.ssm-jahresmatrix {
  --jm-zelle: 0.95rem;
  --jm-spalte: 1.2rem;
  margin-top: 4rem;
}

.ssm-jahresmatrix__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin: 1.25rem 0 1rem;
}

.ssm-jahresmatrix__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.ssm-jahresmatrix__legende li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ssm-jahresmatrix__ebenen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ssm-jahresmatrix__ebenen a {
  padding: 0.15rem 0.7rem;
  border: 1px solid #e3e8f1;
  border-radius: 999px;
  color: inherit;
  font-size: 0.85rem;
  text-decoration: none;
}

.ssm-jahresmatrix__ebenen a:hover {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau);
}

.ssm-jahresmatrix__rahmen {
  overflow-x: auto;
  border: 1px solid #e3e8f1;
  border-radius: 12px;
}

.ssm-jahresmatrix__tabelle {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.ssm-jahresmatrix__tabelle th,
.ssm-jahresmatrix__tabelle td {
  padding: 0;
  border: 0;
}

.ssm-jahresmatrix__tabelle td {
  width: var(--jm-spalte);
  min-width: var(--jm-spalte);
  height: 1.55rem;
  text-align: center;
  vertical-align: middle;
}

/* Erste Spalte fest beim waagerechten Scrollen */
.ssm-jahresmatrix__tabelle tr > th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 13.5rem;
  max-width: 13.5rem;
  padding: 0 0.75rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 1px 0 0 #e3e8f1;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssm-jahresmatrix__tabelle tbody tr:not(.ssm-jahresmatrix__gruppe):hover > * {
  background-color: var(--ssm-blau-hell);
}

.ssm-jahresmatrix__tabelle a {
  color: inherit;
}

.ssm-jahresmatrix__tabelle tr.is-frueher > th a {
  color: #6b7385;
}

.ssm-jahresmatrix__gruppe > * {
  padding-top: 1.25rem !important;
  border-bottom: 1px solid #e3e8f1 !important;
  background: #fff;
  vertical-align: bottom;
}

.ssm-jahresmatrix__gruppe > th:first-child {
  color: var(--ssm-blau);
  font-weight: 700;
}

.ssm-jahresmatrix__gruppe th[scope="col"] {
  padding-bottom: 0.2rem !important;
  color: #8a93a6;
  font-size: 0.68rem;
  font-weight: 500;
  text-align: center;
}

.ssm-jahresmatrix__gruppe th.is-jahrzehnt {
  color: var(--main-heading-color, #1c2436);
  font-weight: 700;
}

.ssm-jahresmatrix__gruppe abbr {
  text-decoration: none;
}

.ssm-jm-zelle {
  display: inline-block;
  width: var(--jm-zelle);
  height: var(--jm-zelle);
  border-radius: 3px;
  vertical-align: middle;
  transition: transform 0.1s;
}

a.ssm-jm-zelle:hover,
a.ssm-jm-zelle:focus-visible {
  transform: scale(1.3);
  outline: 2px solid var(--ssm-gelb);
  outline-offset: 1px;
}

.ssm-jm-zelle--1 { background: var(--ssm-blau); }
.ssm-jm-zelle--2 { background: #7d9bec; }
.ssm-jm-zelle--3 { background: #fff; box-shadow: inset 0 0 0 2px #aab8dc; }

/* Säulen „Saisons je Jahr“ über den Jahresspalten */
.ssm-jahresmatrix__balken > * {
  padding-top: 0.75rem !important;
  vertical-align: bottom !important;
}

.ssm-jahresmatrix__balken > th:first-child {
  color: #6b7385;
  font-size: 0.8rem;
  vertical-align: bottom;
}

.ssm-jm-balken {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  width: var(--jm-zelle);
  height: 4.5rem;
  margin: 0 auto;
}

.ssm-jm-balken span:last-child {
  border-radius: 3px 3px 0 0;
}

.ssm-jm-balken--1 { background: var(--ssm-blau); }
.ssm-jm-balken--2 { background: #7d9bec; }
.ssm-jm-balken--3 { background: #d3dcf2; }

@media (max-width: 767.98px) {
  .ssm-jahresmatrix__tabelle tr > th:first-child {
    width: 9.5rem;
    max-width: 9.5rem;
  }
}

/* Strecke: Rennen nach Jahren */
.ssm-rennjahre {
  display: grid;
  gap: 0.5rem;
}

.ssm-rennjahr {
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
}

.ssm-rennjahr summary {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.ssm-rennjahr[open] summary {
  border-bottom: 1px solid #e3e7ef;
}

.ssm-rennjahr ul {
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  list-style: none;
}

.ssm-rennjahr li {
  padding: 0.2rem 0;
}

.ssm-rennjahr time {
  display: inline-block;
  min-width: 6.5rem;
  color: #6b7385;
  font-variant-numeric: tabular-nums;
}

.ssm-rennjahr small {
  color: #6b7385;
}

article.ssm-artikel > section.inner-page-hero,
article.ssm-galerie > section.inner-page-hero {
  padding-bottom: 40px;
}

/* Kennung: durchgehende Linie in Markenfarbe am oberen Seitenrand. */
header.wrapper {
  border-top: 4px solid var(--ssm-blau);
}

::selection {
  color: #fff;
  background: var(--ssm-blau);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ssm-blau);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Blog: Artikel (node--ssm-artikel)
   -------------------------------------------------------------------------- */

/* Autor in der Meta-Zeile — Artikel und Kachel. */
.ssm-artikel .post-meta-list li:first-child p,
.ssm-kachel .post-meta-list li:first-child p {
  color: var(--ssm-blau);
}

/* Aufmacher nie über die eigene Breite hinaus strecken: custom.css setzt
   Artikelbilder auf width: 100 %, kleine Quellen wurden dadurch unscharf. */
.ssm-artikel .ssm-aufmacher .field--name-field-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
}

.ssm-artikel .single-post-txt a {
  color: var(--ssm-blau);
  text-underline-offset: 3px;
}

/* theme.css setzt a:hover mit !important auf Dunkelgrau. */
.ssm-artikel .single-post-txt a:hover {
  color: var(--ssm-blau-dunkel) !important;
}

.ssm-artikel .single-post-txt blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--ssm-blau);
}

.ssm-artikel .single-post-txt table th {
  border-bottom: 2px solid var(--ssm-blau);
}

/* --------------------------------------------------------------------------
   Blog: Kacheln und „Weitere Artikel“
   -------------------------------------------------------------------------- */

.ssm-kachel h2 a {
  color: var(--main-heading-color);
}

.ssm-kachel h2 a:hover {
  color: var(--ssm-blau) !important;
}

.ssm-kachel .ssm-sprachhinweis {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 1rem;
  background: var(--ssm-blau-hell);
  color: var(--ssm-blau-dunkel);
  font-weight: 500;
}

.ssm-weitere .section-title h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: var(--ssm-blau);
}

/* --------------------------------------------------------------------------
   Galerien (node--ssm-galerie)
   -------------------------------------------------------------------------- */

.ssm-eyebrow {
  margin-bottom: 0.75rem;
  color: var(--ssm-blau);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ssm-galerie__beschreibung {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* Raster: Titelbild über die volle Breite, darunter gleich große Kacheln. */
.ssm-galerie__fotos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.ssm-foto {
  margin: 0;
}

.ssm-foto--titel {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

.ssm-foto a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
}

.ssm-foto img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.ssm-foto--titel img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}

.ssm-foto--titel a {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.ssm-foto:not(.ssm-foto--titel) a:hover img {
  transform: scale(1.03);
}

.ssm-foto a:focus-visible {
  outline: 3px solid var(--ssm-blau);
  outline-offset: 2px;
}

/* Ein über eine alte Foto-URL angesteuertes Bild markieren. */
.ssm-foto:target a {
  box-shadow: 0 0 0 4px var(--ssm-blau);
}

.ssm-foto figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.ssm-foto--titel figcaption {
  text-align: center;
}

/* Lightbox: das native <dialog> bringt Fokusfalle, Escape und Abdunklung selbst
   mit. Gestaltet wird nur, was es nicht kann. */
.ssm-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 3.5rem 4.5rem 1rem;
  border: 0;
  background: transparent;
  color: #fff;
}

.ssm-lightbox::backdrop {
  background: rgba(6, 12, 32, 0.95);
}

.ssm-lightbox__buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 0.75rem;
  height: 100%;
  margin: 0;
}

.ssm-lightbox__buehne img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ssm-lightbox figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.ssm-lightbox__quelle,
.ssm-lightbox__zaehler {
  color: #aab4c8;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ssm-lightbox button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}

.ssm-lightbox button:hover,
.ssm-lightbox button:focus-visible {
  background: var(--ssm-blau);
}

.ssm-lightbox button[hidden] {
  display: none;
}

.ssm-lightbox__zu {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.8rem;
}

.ssm-lightbox__blatt {
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 2.2rem;
  transform: translateY(-50%);
}

.ssm-lightbox__blatt--zurueck {
  left: 1rem;
}

.ssm-lightbox__blatt--vor {
  right: 1rem;
}

/* Auf dem Telefon nehmen die Knöpfe zu viel Bild weg — dort wird gewischt. */
@media (max-width: 640px) {
  .ssm-lightbox {
    padding: 3.5rem 0.5rem 1rem;
  }

  .ssm-lightbox__blatt {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.8rem;
  }

  .ssm-lightbox__blatt--zurueck {
    left: 0.35rem;
  }

  .ssm-lightbox__blatt--vor {
    right: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   Rennstrecken (ssm_motorsport: ssm-strecken, node--ssm-strecke)
   Blau nur für Linien, aktive Zustände und Marker — keine Flächen.
   -------------------------------------------------------------------------- */

.ssm-strecken [hidden],
.ssm-strecke [hidden] {
  display: none !important;
}

/* (Rennstrecken: Container-Abstand siehe Abschnitt „Einheitlicher Seitenaufbau“ oben.) */

.ssm-steckbrief h2 {
  margin-bottom: 1.25rem;
}

.ssm-strecken__chips-titel {
  margin: 3rem 0 1.25rem;
}

.ssm-brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.ssm-brotkrumen li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: #8a93a6;
}

.ssm-brotkrumen a {
  color: var(--ssm-blau);
}

.ssm-brotkrumen [aria-current] {
  color: #6b7385;
}

.ssm-strecken__einleitung {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.ssm-flagge {
  display: inline-block;
  width: 20px;
  height: 15px;
  margin-right: 0.45rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  vertical-align: -2px;
}

.ssm-flagge--gross {
  width: 28px;
  height: 21px;
  vertical-align: -3px;
}

.ssm-flagge--titel {
  width: 40px;
  height: 30px;
  margin-right: 0.75rem;
  border-radius: 3px;
  vertical-align: 0;
}

/* Reiter der Kontinente: auf dem Telefon waagerecht wischen. */
.ssm-reiter {
  display: flex;
  justify-content: safe center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0.1rem 0.5rem;
  scrollbar-width: thin;
}

.ssm-reiter a {
  flex: 0 0 auto;
  padding: 0.45rem 0.95rem;
  border: 1px solid #d8dde8;
  border-radius: 999px;
  background: #fff;
  color: var(--main-heading-color, #1d2330);
  font-weight: 500;
  white-space: nowrap;
}

.ssm-reiter a span {
  margin-left: 0.4rem;
  color: #6b7385;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.ssm-reiter a:hover {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau) !important;
}

.ssm-reiter a[aria-current="page"] {
  border-color: var(--ssm-blau);
  background: var(--ssm-blau);
  color: #fff !important;
}

.ssm-reiter a[aria-current="page"] span {
  color: rgba(255, 255, 255, 0.8);
}

.ssm-reiter a[aria-current="true"] {
  border-color: var(--ssm-blau);
  box-shadow: inset 0 0 0 1px var(--ssm-blau);
  color: var(--ssm-blau) !important;
}

/* Karte */
.ssm-karte {
  height: clamp(320px, 58vh, 560px);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #e9edf3;
}

.ssm-karte--strecke {
  height: clamp(340px, 62vh, 600px);
}

.ssm-karte__hinweis {
  margin: 0.5rem 0 0;
  color: #8a93a6;
  font-size: 0.8rem;
}

.ssm-karte .leaflet-control-attribution a,
.ssm-karte .leaflet-popup-content a {
  color: var(--ssm-blau);
}

.ssm-karte .leaflet-bar a:hover {
  color: #1d2330 !important;
}

.ssm-marker-punkt {
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ssm-blau);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.ssm-marker-punkt:hover {
  box-shadow: 0 0 0 4px rgba(7, 59, 207, 0.3), 0 1px 5px rgba(0, 0, 0, 0.45);
}

.ssm-marker-buendel {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ssm-blau);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px rgba(7, 59, 207, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ssm-marker-start svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Kurvennummer: auf der Karte und in der Liste gleich. */
.ssm-marker-kurve,
.ssm-nr {
  display: grid;
  place-items: center;
  border: 2px solid var(--ssm-blau);
  border-radius: 50%;
  background: #fff;
  color: var(--ssm-blau);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ssm-marker-kurve {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.ssm-nr {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.ssm-nr--start {
  background: var(--ssm-blau);
  color: var(--ssm-blau);
}

/* Übersicht: Kontinent-Kacheln */
.ssm-kontinente {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.ssm-kontinent-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid #e3e7ef;
  border-top: 3px solid var(--ssm-blau);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ssm-kontinent-kachel:hover {
  border-color: var(--ssm-blau);
  box-shadow: 0 10px 28px rgba(7, 59, 207, 0.1);
}

.ssm-kontinent-kachel h3 {
  margin: 0;
}

.ssm-kontinent-kachel h3 a {
  color: var(--main-heading-color, #1d2330);
}

/* Die ganze Kachel ist klickbar. */
.ssm-kontinent-kachel h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ssm-kontinent-kachel:hover h3 a {
  color: var(--ssm-blau) !important;
}

.ssm-zahlen {
  margin: 0;
  color: #6b7385;
}

.ssm-flaggen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.ssm-flaggen .ssm-flagge {
  margin-right: 0;
}

/* Übersicht: A–Z */
.ssm-az__filter input {
  width: 100%;
  max-width: 28rem;
  padding: 0.7rem 1rem;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  font-size: 1rem;
}

.ssm-az__filter input:focus {
  border-color: var(--ssm-blau);
  outline: 2px solid var(--ssm-blau-hell);
}

.ssm-az {
  columns: 4 14rem;
  column-gap: 2.5rem;
}

.ssm-az__gruppe {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

.ssm-az h3 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--ssm-blau-hell);
  color: var(--ssm-blau);
  font-size: 1.1rem;
}

.ssm-az ul,
.ssm-strecken-liste,
.ssm-kurven,
.ssm-naehe {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-az li,
.ssm-strecken-liste li {
  padding: 0.2rem 0;
  line-height: 1.4;
}

.ssm-az small,
.ssm-strecken-liste small {
  color: #6b7385;
}

/* Chips: Länder, Strecken in der Nähe */
.ssm-chips,
.ssm-naehe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ssm-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid #e3e7ef;
  border-radius: 999px;
  background: #fff;
  color: var(--main-heading-color, #1d2330);
  font-size: 0.95rem;
}

.ssm-chip:hover {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau) !important;
}

.ssm-chip[aria-current] {
  border-color: var(--ssm-blau);
  box-shadow: inset 0 0 0 1px var(--ssm-blau);
}

.ssm-anzahl {
  margin-left: 0.45rem;
  color: #6b7385;
  font-size: 0.85em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Kontinent: Länderblöcke */
.ssm-laender {
  columns: 3 18rem;
  column-gap: 2.5rem;
}

.ssm-land-block {
  margin-bottom: 2rem;
}

.ssm-land-block--kurz {
  break-inside: avoid;
}

.ssm-land-block h2 {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--ssm-blau-hell);
  font-size: 1.25rem;
}

.ssm-land-block h2 a {
  color: var(--main-heading-color, #1d2330);
}

.ssm-land-block h2 a:hover {
  color: var(--ssm-blau) !important;
}

/* Land: Tabelle */
.ssm-tabelle thead th {
  border-bottom: 2px solid var(--ssm-blau);
}

/* Martex färbt Tabellenlinks grau — als Link erkennbar machen. */
.ssm-tabelle td a {
  color: var(--main-heading-color, #1d2330);
  font-weight: 500;
}

.ssm-tabelle td a:hover {
  color: var(--ssm-blau) !important;
}

/* Strecke */
.ssm-strecke__ort {
  color: #4a5162;
}

.ssm-strecke__raster {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  align-items: start;
}

@media (max-width: 991px) {
  .ssm-strecke__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ssm-steckbrief {
  padding: 1.5rem;
  border: 1px solid #e3e7ef;
  border-top: 3px solid var(--ssm-blau);
  border-radius: 14px;
  background: #fff;
}

.ssm-steckbrief dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1rem;
  margin: 0;
}

.ssm-steckbrief dt {
  color: #6b7385;
  font-weight: 500;
}

.ssm-steckbrief dd {
  margin: 0;
}

.ssm-kurven {
  columns: 3 15rem;
  column-gap: 2rem;
}

.ssm-kurven li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0;
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   Fahrer, Teams, Fahrzeuge (ssm_motorsport: ssm-datenbank, node--ssm-datenbank)
   Brotkrumen, Reiter, Steckbrief, A–Z-Liste und Chips: Abschnitt Rennstrecken.
   -------------------------------------------------------------------------- */

.ssm-datenbank [hidden],
.ssm-eintrag [hidden] {
  display: none !important;
}

/* Übersicht: Kacheln der Anfangsbuchstaben, ganze Kachel klickbar. */
.ssm-buchstaben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-buchstabe-kachel {
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid #e3e7ef;
  border-radius: 14px;
  background: #fff;
}

.ssm-buchstabe-kachel:hover,
.ssm-buchstabe-kachel:focus-within {
  border-color: var(--ssm-blau);
}

.ssm-buchstabe-kachel a {
  display: flex;
  align-items: baseline;
  color: var(--main-heading-color, #1d2330);
}

.ssm-buchstabe-kachel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ssm-buchstabe-kachel__b {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.ssm-buchstabe-kachel small {
  display: block;
  margin-top: 0.45rem;
  color: #6b7385;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Buchstabenseite: Leiste und Liste. */
.ssm-buchstaben-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.ssm-buchstaben-leiste a {
  min-width: 2.4rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #e3e7ef;
  border-radius: 8px;
  background: #fff;
  color: var(--main-heading-color, #1d2330);
  font-weight: 600;
  text-align: center;
}

.ssm-buchstaben-leiste a:hover {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau) !important;
}

.ssm-buchstaben-leiste a[aria-current] {
  border-color: var(--ssm-blau);
  box-shadow: inset 0 0 0 1px var(--ssm-blau);
  color: var(--ssm-blau);
}

.ssm-az--datenbank {
  columns: 4 15rem;
}

.ssm-az--datenbank h2 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--ssm-blau-hell);
  color: var(--ssm-blau);
  font-size: 1.1rem;
}

/* Detailseite */
.ssm-eintrag__raster {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 56rem;
  margin: 0 auto;
}

.ssm-eintrag__raster--bild {
  grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
}

@media (max-width: 767px) {
  .ssm-eintrag__raster--bild {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Porträt im festen quadratischen Rahmen, nie hochskaliert: kleine Fotos
   stehen auf dunklem Grund. scale-down statt contain — contain vergrößert. */
.ssm-portraet {
  margin: 0;
}

.ssm-portraet img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  border-radius: 14px;
  background: #1c1a17;
}

.ssm-portraet figcaption {
  margin-top: 0.4rem;
  color: #6b7385;
  font-size: 0.8rem;
}

.ssm-alte-portraets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 10rem));
  gap: 1rem;
}

.ssm-steckbrief__zwischentitel {
  margin: 1.25rem 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.ssm-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-links li {
  padding: 0.2rem 0;
}

.ssm-links span {
  display: inline-block;
  min-width: 5.5rem;
  color: #6b7385;
}

.ssm-beziehungen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.ssm-beziehungen div {
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--ssm-blau);
  background: #fff;
}

.ssm-beziehungen dt {
  color: #6b7385;
  font-weight: 500;
}

.ssm-beziehungen dd {
  margin: 0;
  font-weight: 500;
}

/* Karriere-, Team- und Fahrzeugtabelle. */
.ssm-karriere td,
.ssm-karriere th {
  vertical-align: top;
}

.ssm-karriere tbody.ssm-karriere__jahr {
  border-top: 2px solid #d5dbe6;
}

/* Saisonspalte immer hellblau, auch in der hervorgehobenen Zeile. */
.ssm-karriere .ssm-karriere__saison,
.ssm-karriere tr.ssm-karriere__haupt > th.ssm-karriere__saison {
  width: 5.5rem;
  background: var(--ssm-blau-hell);
  color: var(--ssm-blau);
  font-weight: 700;
  white-space: nowrap;
}

.ssm-karriere__ebene {
  width: 2.5rem;
  white-space: nowrap;
}

.ssm-karriere__ebene a {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1px solid #cfd6e3;
  border-radius: 4px;
  color: #4a5162 !important;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Hauptserie der Saison: ganze Zeile hinterlegt. */
.ssm-karriere tr.ssm-karriere__haupt > td,
.ssm-karriere tr.ssm-karriere__haupt > th {
  background: var(--ssm-zeile-haupt);
}

.ssm-karriere__muster {
  display: inline-block;
  width: 1.4rem;
  height: 0.85rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  background: var(--ssm-zeile-haupt);
  vertical-align: middle;
}

/* Besondere Leistungen: Siege und Platz 1–6 in Bernstein. */
.ssm-top {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--ssm-gold);
  color: var(--ssm-gold-dunkel);
  font-weight: 700;
  white-space: nowrap;
}

.ssm-karriere__zeile + .ssm-karriere__zeile {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dotted #cfd6e3;
}

.ssm-karriere small {
  color: #6b7385;
}

.ssm-karriere__a {
  display: block;
}

.ssm-karriere__frei {
  color: #4a5162;
  font-style: italic;
}

.ssm-karriere tr.ssm-karriere__gruppe td {
  border-top: 1px solid #e3e7ef;
}

.ssm-karriere__fotos {
  width: 5.5rem;
}

.ssm-karriere__fotos img {
  display: block;
  width: 72px;
  height: 48px;
  margin-bottom: 0.25rem;
  border-radius: 5px;
  object-fit: cover;
}

.ssm-laufend {
  margin-right: 0.3rem;
  color: var(--ssm-blau);
  font-weight: 700;
}

/* Videos: Vorschaltlayer, erst der Klick lädt das Video. */
.ssm-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.5rem;
}

.ssm-video {
  margin: 0;
}

.ssm-video__start {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #1c1a17;
  overflow: hidden;
  cursor: pointer;
}

.ssm-video__start img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ssm-video__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: #fff;
  font-size: 0.95rem;
}

.ssm-video__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(20, 20, 20, 0.75);
  transform: translate(-50%, -50%);
  transition: color 0.15s;
}

.ssm-video__start:hover .ssm-video__knopf,
.ssm-video__start:focus-visible .ssm-video__knopf {
  color: #c4302b;
}

.ssm-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

.ssm-video figcaption {
  margin-top: 0.5rem;
  font-weight: 500;
  line-height: 1.4;
}

.ssm-video figcaption small {
  display: block;
  margin-top: 0.15rem;
  color: #6b7385;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Saisonseiten: Meldeliste, Punktestand, Ergebnisse, Rennseiten
   (ssm-saison-seite und Bausteine)
   -------------------------------------------------------------------------- */

.ssm-saison [hidden] {
  display: none !important;
}

.ssm-hinweis {
  color: #6b7385;
}

/* Umschalter (Sortierung, Klassen): erscheinen erst mit JavaScript. */
.ssm-sortierung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.ssm-sortierung span {
  margin-right: 0.25rem;
  color: #6b7385;
}

.ssm-sortierung button {
  padding: 0.3rem 0.8rem;
  border: 1px solid #e3e7ef;
  border-radius: 999px;
  background: #fff;
  color: var(--main-heading-color, #1d2330);
  font-size: 0.9rem;
  font-weight: 500;
}

.ssm-sortierung button:hover {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau);
}

.ssm-sortierung button[aria-pressed="true"] {
  border-color: var(--ssm-blau);
  background: var(--ssm-blau);
  color: #fff;
}

/* Startnummer (nicht .ssm-nr: das ist die runde Kurvennummer der Strecken). */
.ssm-tabelle .ssm-startnr {
  width: 3.5rem;
  color: #4a5162;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ssm-startnr abbr {
  color: var(--ssm-blau);
  text-decoration: none;
}

.ssm-tabelle .ssm-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ssm-tabelle .ssm-datum {
  color: #6b7385;
  white-space: nowrap;
}

.ssm-tabelle .ssm-person {
  white-space: nowrap;
}

.ssm-teamname {
  color: #6b7385;
}

.ssm-meldeliste td {
  vertical-align: middle;
}

.ssm-meldeliste tr.ssm-neues-team td {
  border-top: 2px solid #d5dbe6;
}

.ssm-meldeliste tr:target td {
  background: var(--ssm-blau-hell);
}

.ssm-saison [id^="m-"] {
  scroll-margin-top: 120px;
}

.ssm-reifen {
  padding: 0.05rem 0.35rem;
  border: 1px solid #cfd6e3;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

/* Meldelistenfoto: feste Vorschau 3:2, die Lightbox zeigt den ganzen Zuschnitt. */
.ssm-tabelle .ssm-meldung-foto {
  width: 6.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.ssm-meldung-foto img {
  display: block;
  width: 96px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
}

.ssm-fussnote {
  margin-top: 0.75rem;
  color: #6b7385;
  font-size: 0.9rem;
}

/* Ergebnismatrix: erste Spalte fest, waagerecht scrollbar. */
.ssm-matrix-rahmen {
  overflow-x: auto;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
}

.ssm-matrix {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.ssm-matrix th,
.ssm-matrix td {
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid #eef1f6;
  background: #fff;
  text-align: center;
  white-space: nowrap;
}

.ssm-matrix thead th {
  border-bottom: 2px solid var(--ssm-blau);
  vertical-align: bottom;
}

.ssm-matrix__rennen span {
  display: inline-block;
  max-height: 9.5rem;
  overflow: hidden;
  font-weight: 500;
  text-align: left;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.ssm-matrix__rennen a {
  color: var(--main-heading-color, #1d2330);
}

.ssm-matrix__rennen a:hover {
  color: var(--ssm-blau) !important;
}

.ssm-matrix .ssm-matrix__fahrer,
.ssm-matrix .ssm-matrix__kopf {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 #e3e7ef;
  font-weight: 500;
  text-align: left;
}

.ssm-matrix__fahrer .ssm-startnr {
  display: inline-block;
  min-width: 2.2rem;
  color: #6b7385;
  font-variant-numeric: tabular-nums;
}

.ssm-matrix__fahrer a {
  color: var(--main-heading-color, #1d2330);
}

.ssm-matrix__stand {
  color: #4a5162;
  font-variant-numeric: tabular-nums;
}

.ssm-matrix .ssm-stark {
  color: var(--main-heading-color, #1d2330);
  font-weight: 700;
}

.ssm-matrix td small {
  margin-right: 0.2rem;
  color: #8a93a6;
  font-size: 0.75rem;
}

.ssm-matrix td b {
  font-weight: 700;
}

.ssm-matrix .ssm-matrix__va {
  border-left: 1px solid #d5dbe6;
}

.ssm-matrix .ssm-matrix__team th {
  background: #f6f8fb;
  font-weight: 600;
  text-align: left;
}

.ssm-matrix .ssm-matrix__team th span {
  position: sticky;
  left: 0.45rem;
}

.ssm-matrix .ssm-matrix__klasse th {
  background: var(--ssm-blau-hell);
  color: var(--ssm-blau);
  font-weight: 700;
  text-align: left;
}

.ssm-matrix tbody tr:hover > * {
  background: #f3f6fc;
}

.ssm-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: #4a5162;
  font-size: 0.9rem;
}

.ssm-legende b {
  margin-right: 0.3rem;
  color: var(--main-heading-color, #1d2330);
}

/* Punktestand: Fahrer- und Teamwertung nebeneinander ab Desktop. */
.ssm-wertungen {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 992px) {
  .ssm-wertungen--zwei {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.ssm-wertung td {
  vertical-align: middle;
}

.ssm-wertung .ssm-zahl:first-child {
  width: 3.5rem;
}

.ssm-wertung__erster td {
  font-weight: 700;
}

.ssm-siege {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--ssm-gold);
  color: var(--ssm-gold-dunkel);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.ssm-punktesystem th {
  color: #6b7385;
  font-weight: 500;
  white-space: nowrap;
}

.ssm-punktesystem td {
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.ssm-punktesystem td span {
  display: block;
  color: #8a93a6;
  font-size: 0.72rem;
}

/* Rennseite: Rennergebnis breiter, Startaufstellung daneben. */
.ssm-rennen__ort {
  margin-bottom: 2rem;
  color: #4a5162;
  font-weight: 500;
  text-align: center;
}

.ssm-rennen__abgesagt {
  text-align: center;
}

.ssm-rennblock {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 992px) {
  .ssm-rennblock {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.ssm-rennergebnis td {
  vertical-align: top;
}

.ssm-rennergebnis .ssm-rennergebnis__gruppe th {
  padding-top: 1rem;
  border-bottom: 1px solid #d5dbe6;
  background: #f6f8fb;
  font-weight: 600;
}

.ssm-rennergebnis__pos {
  width: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ssm-rennergebnis__nr {
  display: inline-block;
  min-width: 2.6rem;
  color: #8a93a6;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ssm-rennergebnis__team {
  display: block;
  margin-left: 2.6rem;
  color: #6b7385;
}

.ssm-rennergebnis__team a {
  color: #4a5162 !important;
  font-weight: 400 !important;
}

/* Übersicht einer Saison: Top 10 neben Veranstaltungen und Siegern. */
.ssm-saison-stand {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 992px) {
  .ssm-saison-stand {
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
  }
}

.ssm-saison-stand__seite {
  display: grid;
  gap: 1.5rem;
}

.ssm-veranstaltung {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-veranstaltung li {
  padding: 0.35rem 0;
  border-top: 1px solid #eef1f6;
}

.ssm-veranstaltung li:first-child {
  border-top: 0;
}

.ssm-veranstaltung span {
  display: inline-block;
  min-width: 5.5rem;
  color: #6b7385;
}

.ssm-veranstaltung small {
  display: block;
  margin-left: 5.5rem;
  color: #4a5162;
}

.ssm-sieger-liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

.ssm-sieger-liste dt {
  color: #6b7385;
  font-weight: 500;
  white-space: nowrap;
}

.ssm-sieger-liste dd {
  margin: 0;
}

.ssm-mehr {
  color: var(--ssm-blau);
  font-weight: 600;
}

.ssm-kalender .ssm-kalender__sieger span {
  display: block;
  white-space: nowrap;
}

.ssm-kalender__sieger small {
  color: #6b7385;
}

.ssm-starterfeld {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-starterfeld img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  object-fit: cover;
}

.ssm-starterfeld small {
  display: block;
  margin-top: 0.4rem;
  color: #6b7385;
  line-height: 1.35;
}

.ssm-tag {
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border: 1px solid var(--ssm-blau);
  border-radius: 4px;
  color: var(--ssm-blau);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Seite „nicht gefunden“: 404 mit Reifen als Null
   -------------------------------------------------------------------------- */

.ssm-404__zahl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  color: var(--ssm-blau);
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Reifen: dunkle Flanke, blaue Felge, drehende Speichen */
.ssm-404__rad {
  position: relative;
  width: 0.78em;
  height: 0.78em;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 12%, var(--ssm-blau) 13% 20%, transparent 21%),
    repeating-conic-gradient(var(--ssm-blau) 0 8deg, #dfe6f7 8deg 36deg),
    #1d2230;
  box-shadow: inset 0 0 0 0.11em #1d2230, inset 0 0 0 0.14em #3a4152;
  animation: ssm-404-rollen 6s linear infinite;
}

@keyframes ssm-404-rollen {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ssm-404__rad { animation: none; }
}

.ssm-404__treffer,
.ssm-404__bereiche {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-404__bereiche {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.ssm-404__treffer a,
.ssm-404__bereiche a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ssm-404__treffer a:hover,
.ssm-404__bereiche a:hover,
.ssm-404__treffer a:focus-visible,
.ssm-404__bereiche a:focus-visible {
  border-color: var(--ssm-blau);
  box-shadow: 0 6px 20px rgba(7, 59, 207, 0.1);
}

.ssm-404__treffer strong,
.ssm-404__bereiche strong {
  color: var(--ssm-blau);
}

.ssm-404__treffer small,
.ssm-404__bereiche small,
.ssm-404__art {
  color: #6b7385;
}

.ssm-404__art {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Namenssuche: Suchfeld, Vorschläge, Trefferliste, Lupe im Kopf
   -------------------------------------------------------------------------- */

.ssm-suchfeld {
  position: relative;
  display: flex;
  gap: 0.5rem;
}

.ssm-suchfeld input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
}

.ssm-suchfeld input[type="search"]:focus {
  border-color: var(--ssm-blau);
  outline: 2px solid var(--ssm-blau-hell);
}

.ssm-suchfeld button {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ssm-blau);
  border-radius: 10px;
  background: var(--ssm-blau);
  color: #fff;
  font-weight: 600;
}

.ssm-suchfeld button:hover,
.ssm-suchfeld button:focus-visible {
  border-color: var(--ssm-blau-dunkel);
  background: var(--ssm-blau-dunkel);
}

ul.ssm-vorschlaege {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 70vh;
  margin: 0;
  padding: 0.35rem 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  text-align: left;
}

.ssm-vorschlaege li {
  margin: 0;
}

.ssm-vorschlaege a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.45rem 1rem;
  color: inherit;
  text-decoration: none;
}

.ssm-vorschlaege li.is-gewaehlt a,
.ssm-vorschlaege a:hover {
  background: var(--ssm-blau-hell);
  color: var(--ssm-blau);
}

.ssm-vorschlag__titel {
  font-weight: 600;
}

.ssm-vorschlag__zusatz,
.ssm-treffer__zusatz {
  color: #6b7385;
  font-size: 0.875rem;
}

.ssm-suche__anzahl,
.ssm-suche__hinweis {
  color: #6b7385;
}

.ssm-suche__gruppe {
  margin-bottom: 2.5rem;
}

.ssm-suche__gruppe h2 {
  margin-bottom: 0.75rem;
}

ul.ssm-treffer {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e3e8f1;
}

.ssm-treffer li {
  margin: 0;
  border-bottom: 1px solid #e3e8f1;
}

.ssm-treffer a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.6rem 0.5rem;
  color: inherit;
  text-decoration: none;
}

.ssm-treffer a:hover,
.ssm-treffer a:focus-visible {
  background: var(--ssm-blau-hell);
}

.ssm-treffer__titel {
  font-weight: 600;
}

.ssm-treffer a:hover .ssm-treffer__titel {
  color: var(--ssm-blau);
}

.ssm-suche__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* Lupe in der Kopfleiste (Region navigation_other, neben dem Menü) */
.region-navigation-other {
  display: flex;
  align-items: center;
}

.ssm-kopfsuche {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.ssm-kopfsuche__knopf {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 50%;
  color: inherit;
}

.ssm-kopfsuche__knopf:hover,
.ssm-kopfsuche__knopf:focus-visible,
.ssm-kopfsuche.is-offen .ssm-kopfsuche__knopf {
  border-color: var(--ssm-blau);
  color: var(--ssm-blau);
}

.ssm-kopfsuche__feld {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.65rem);
  right: 0;
  width: 26rem;
  padding: 0.75rem;
  border: 1px solid #e3e8f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.ssm-kopfsuche__feld[hidden] {
  display: none;
}

.ssm-kopfsuche .ssm-suchfeld input[type="search"],
.ssm-kopfsuche .ssm-suchfeld button {
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
}

/* Mobil: Lupe und Sprachumschalter sichtbar in der Kopfleiste.
   Reihenfolge: Logo · Lupe · DE|EN · Menü. */
@media (max-width: 991.98px) {
  .navbar .navbar-brand.d-flex {
    display: contents !important;
  }

  .navbar .navbar-brand > .d-lg-none {
    order: 3;
    margin-left: 0.5rem !important;
  }

  /* Martex style.css blendet navbar-other unter 990 px mit !important aus. */
  .navbar.navbar-expand-lg .navbar-other {
    display: flex !important;
    order: 2;
    width: auto !important;
    margin-left: auto;
  }

  .navbar .ssm-sprache ul {
    margin-left: 0.25rem;
  }
}

@media (max-width: 767.98px) {
  .ssm-kopfsuche {
    position: static;
  }

  .ssm-kopfsuche__feld {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Rennsport-Kalender
   -------------------------------------------------------------------------- */

.ssm-kalender-jahre {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

/* Martex-Abstandsklassen (mb-20 = 185 px) hier nicht verwenden. */
.ssm-kalender-jahrzehnt {
  margin: 0 0 1rem;
}

.ssm-kalender-jahre a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.ssm-kalender-jahre a:hover,
.ssm-kalender-jahre .is-aktuell a {
  border-color: var(--ssm-blau);
}

.ssm-kalender-jahre__jahr {
  display: block;
  color: var(--ssm-blau);
  font-size: 1.35rem;
  font-weight: 700;
}

.ssm-kalender-jahre small {
  color: #6b7385;
}

.ssm-wochenende {
  margin-bottom: 2.5rem;
  scroll-margin-top: 6rem;
}

.ssm-wochenende__titel {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.ssm-wochenende__titel span {
  color: #6b7385;
  font-size: 1rem;
  font-weight: 500;
}

.ssm-wochenende__titel em {
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--ssm-blau);
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  vertical-align: middle;
}

.ssm-wochenende.is-aktuell .ssm-wochenende__tabelle {
  box-shadow: inset 3px 0 0 var(--ssm-blau);
}

.ssm-wochenende__tabelle td:first-child {
  width: 30%;
}

.ssm-wochenende__land {
  width: 22%;
  white-space: nowrap;
}

.ssm-wochenende__serien {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-wochenende__serie--abgesagt a {
  color: #8a93a6;
  text-decoration: line-through;
}

.ssm-stand {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  vertical-align: baseline;
}

.ssm-stand--ergebnis { background: #1f9d55; }
.ssm-stand--eingeschraenkt { background: #fff; box-shadow: inset 0 0 0 2px #1f9d55; }
.ssm-stand--quali { background: #e3a008; }
.ssm-stand--offen { background: #fff; box-shadow: inset 0 0 0 2px #c3cad8; }
.ssm-stand--abgesagt { border-radius: 2px; background: #8a93a6; }

.ssm-kalender-seite .ssm-legende {
  margin-top: 2.5rem;
}

.ssm-kalender-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Rahmen: Kopfleiste in dunklem Markenblau, Hauptmenü, Sprache, Fußzeile
   Martex-Einstellung theme_menu = menu_dark (navbar-dark navbar-bg-dark).
   -------------------------------------------------------------------------- */

.navbar.navbar-bg-dark,
.navbar.navbar-bg-dark.navbar-stick {
  background: var(--ssm-blau-dunkel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand img {
  width: auto;
  max-height: 3.5rem;
}

.navbar-bg-dark .ssm-hauptmenue .nav-link,
.navbar-bg-dark .ssm-kopfsuche__knopf,
.navbar-bg-dark .ssm-sprache a {
  color: rgba(255, 255, 255, 0.88);
}

.navbar-bg-dark .ssm-hauptmenue .nav-item.active > .nav-link {
  color: #fff;
}

/* Martex (custom.css, style.css) färbt .nav-link:hover mit !important. */
.navbar-bg-dark .ssm-hauptmenue .nav-link:hover,
.navbar-bg-dark .ssm-hauptmenue .nav-link:focus-visible,
.navbar-bg-dark .ssm-hauptmenue .dropdown.show > .nav-link,
.navbar-bg-dark .ssm-sprache a:hover,
.navbar-bg-dark .ssm-sprache a:focus-visible {
  color: var(--ssm-gelb) !important;
}

.ssm-hauptmenue .nav-item.active > .nav-link {
  text-decoration: underline;
  text-decoration-color: var(--ssm-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.navbar-bg-dark .ssm-kopfsuche__knopf:hover,
.navbar-bg-dark .ssm-kopfsuche__knopf:focus-visible,
.navbar-bg-dark .ssm-kopfsuche.is-offen .ssm-kopfsuche__knopf {
  border-color: var(--ssm-gelb);
  color: var(--ssm-gelb);
}

/* Martex öffnet Dropdowns nur bei Hover; auch mit Tastatur (focus-within)
   und Tippen (Bootstrap setzt .show) öffnen. */
@media (min-width: 992px) {
  .navbar-expand-lg .ssm-hauptmenue .dropdown:focus-within > .dropdown-menu,
  .navbar-expand-lg .ssm-hauptmenue .dropdown-menu.show {
    top: 100%;
    pointer-events: all;
    visibility: visible;
    opacity: 1;
  }
}

/* Motorsport: breites Menü mit Ebenen und Serien */
.ssm-hauptmenue .dropdown-menu a {
  white-space: nowrap;
}

@media (min-width: 992px) {
  .ssm-hauptmenue .ssm-mega {
    position: static;
  }

  .ssm-hauptmenue .ssm-mega__menue {
    left: 50%;
    width: min(64rem, calc(100vw - 2rem));
    padding: 1.25rem 1.5rem 0.75rem;
    transform: translateX(-50%);
  }
}

.ssm-mega__gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem 1.5rem;
}

.ssm-mega__titel {
  display: block;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e3e8f1;
  color: var(--ssm-blau) !important;
  font-weight: 700;
}

.ssm-mega__gruppe ul,
.ssm-mega__fuss {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-mega__gruppe .dropdown-item {
  padding: 0.25rem 0;
  white-space: normal;
}

.ssm-mega__menue .ssm-mega__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e3e8f1;
}

.ssm-mega__menue .ssm-mega__fuss .dropdown-item {
  padding: 0.35rem 0;
  font-weight: 600;
}

/* Sprachumschalter */
.ssm-sprache {
  flex-shrink: 0;
}

.ssm-sprache ul {
  display: flex;
  white-space: nowrap;
  gap: 0.35rem;
  margin: 0 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
}

.ssm-sprache li + li::before {
  content: "|";
  margin-right: 0.35rem;
  color: rgba(255, 255, 255, 0.4);
}

.ssm-sprache span[aria-current] {
  color: #fff;
}

/* Fußzeile */
.ssm-footer {
  padding: 3.5rem 0 1.5rem;
  background: var(--ssm-blau-dunkel);
  color: rgba(255, 255, 255, 0.8);
}

.ssm-footer a {
  color: rgba(255, 255, 255, 0.88);
}

.ssm-footer a:hover,
.ssm-footer a:focus-visible {
  color: var(--ssm-gelb) !important;
}

.ssm-footer__spalten {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 767.98px) {
  .ssm-footer__spalten {
    grid-template-columns: 1fr 1fr;
  }

  .ssm-footer__kennung {
    grid-column: 1 / -1;
  }
}

.ssm-footer__marke {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.ssm-footer h2 {
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ssm-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-footer li {
  padding: 0.2rem 0;
}

.ssm-footer__copyright {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
}

/* Infoseiten */
.ssm-infoseite__service {
  justify-content: center;
  margin-top: 3rem;
}

.ssm-infoseite__text h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.5rem;
}

.ssm-infoseite__text::after {
  display: block;
  clear: both;
  content: "";
}

.ssm-ueber__autor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.ssm-ueber__autor img {
  border-radius: 50%;
}

.ssm-ueber__zitat {
  font-size: 1.1rem;
}

.ssm-ueber__bild {
  max-width: 45%;
  margin: 0.35rem 0 1rem;
}

.ssm-ueber__bild--links {
  float: left;
  clear: left;
  margin-right: 1.5rem;
}

.ssm-ueber__bild--rechts {
  float: right;
  clear: right;
  margin-left: 1.5rem;
}

.ssm-ueber__bild img {
  height: auto;
  border: 1px solid #e3e8f1;
}

.ssm-infoseite__text p {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .ssm-ueber__bild {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem;
  }
}

/* Inhaltsverzeichnis */
.ssm-verzeichnis__gruppe {
  margin-bottom: 2rem;
}

.ssm-verzeichnis ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ssm-verzeichnis__spalten {
  columns: 3 14rem;
  column-gap: 2rem;
}

.ssm-verzeichnis li {
  padding: 0.15rem 0;
  break-inside: avoid;
}

/* Startseite */
/* Martex gibt jeder Sektion z-index 3: ohne Anheben lägen die Suchvorschläge
   unter der folgenden Sektion. */
.ssm-start__einstieg {
  position: relative;
  z-index: 10;
  padding: 9.5rem 0 3rem;
  background: linear-gradient(180deg, var(--ssm-blau-hell), #fff);
  text-align: center;
}

.ssm-start__einstieg .p-lg {
  max-width: 44rem;
  margin: 0.75rem auto 1.75rem;
}

.ssm-suchfeld--start {
  max-width: 40rem;
  margin: 0 auto;
}

.ssm-start__zahlen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  color: #6b7385;
}

.ssm-start__zahlen strong {
  color: var(--ssm-blau);
  font-size: 1.25rem;
}

.ssm-start__band,
.ssm-start__abschnitt {
  padding: 3rem 0;
}

.ssm-start__band,
.ssm-start__abschnitt--bereiche {
  background: #f6f8fc;
}

.ssm-start__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 2.5rem;
}

@media (max-width: 991.98px) {
  .ssm-start__spalten {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ssm-start__haupt > h2,
.ssm-start__abschnitt h2 {
  margin-bottom: 1.25rem;
}

.ssm-start__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.ssm-start__kopfzeile a {
  font-weight: 600;
}

.ssm-geburtstage ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-geburtstage li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  color: inherit;
}

.ssm-geburtstage img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.ssm-geburtstage span {
  display: flex;
  flex-direction: column;
}

.ssm-geburtstage small {
  color: #6b7385;
}

.ssm-werbung {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e8f1;
}

.ssm-werbung--oben {
  margin: 0 0 2rem;
  padding: 0 0 1rem;
  border-top: 0;
  border-bottom: 1px solid #e3e8f1;
}

.ssm-werbung img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 50px;
}

.ssm-werbung small {
  color: #8a93a6;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.ssm-start__bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-start__bereiche::before,
.ssm-start__bereiche::after {
  content: none;
}

.ssm-start__bereiche a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid #e3e8f1;
  border-radius: 12px;
  background: #fff;
  color: inherit;
}

.ssm-start__bereiche a:hover {
  border-color: var(--ssm-blau);
}

.ssm-start__bereiche strong {
  color: var(--ssm-blau);
  font-size: 1.15rem;
}

.ssm-start__bereiche span {
  color: #6b7385;
}


/* --------------------------------------------------------------------------
   Rennfahrer und Teams nach Ländern
   -------------------------------------------------------------------------- */

.ssm-flagge--gross {
  width: 40px;
  height: 30px;
  margin-right: 0.75rem;
  vertical-align: 0.1em;
}

.ssm-laender-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ssm-laender-chips .ssm-anzahl,
.ssm-land-verweise .ssm-anzahl {
  margin-left: 0.45rem;
}

.ssm-laender-alle {
  margin: 1.25rem 0 0;
  font-weight: 600;
}

.ssm-land-verweise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ssm-land-verweise .ssm-chip[aria-current] {
  border-color: var(--ssm-blau);
  background: var(--ssm-blau);
  color: #fff !important;
}

.ssm-land-verweise .ssm-chip[aria-current] .ssm-anzahl {
  color: #fff;
}

.ssm-aktive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssm-aktive li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  background: #fff;
}

.ssm-aktive img {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #1c1a17;
  object-fit: cover;
}

.ssm-aktive span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ssm-aktive__name {
  color: var(--main-heading-color, #1d2330);
  font-weight: 600;
}

.ssm-aktive__saison {
  overflow: hidden;
  color: #6b7385;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssm-aktive a:hover {
  color: var(--ssm-blau) !important;
}

.ssm-aktive__mehr {
  margin: 0.75rem 0 0;
  color: #6b7385;
}

.ssm-erfolgreichste td:not(:first-child),
.ssm-erfolgreichste thead th:nth-child(n+3) {
  text-align: right;
  white-space: nowrap;
}

.ssm-erfolgreichste td:first-child {
  width: 3rem;
  color: #6b7385;
}

.ssm-erfolgreichste__quote {
  font-weight: 700;
}

.ssm-erfolgreichste th[scope="row"] {
  font-weight: 600;
}