/* =========================================================
   0) GINTO FONT + MATERIAL VARRIABLES
   ========================================================= */

@font-face {
  font-family: "Ginto";
  src: url("ginto-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --md-text-font: "Ginto";
  --md-code-font: "Ginto";
}

/* global ohne Helvetica */
html, body, .md-content, .md-typeset {
  font-family: "Ginto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

code, pre {
  font-family: "Ginto", monospace !important;
}


/* =============================== */
/* 1) HINTERGRUND & HEADER-FARBEN  */
/* =============================== */

.md-main {
  background: #E3E3E3 !important;
}

.md-header,
.md-header-nav,
.md-header__inner {
  background: #FFFFFF !important;
}

.md-header a,
.md-header .md-icon,
.md-header__button {
  color: #000 !important;
  fill: currentColor !important;
}

.md-header a:hover,
.md-header__button:hover,
.md-header .md-icon:hover {
  color: #FF1D25 !important;
  fill: #FF1D25 !important;
}


/* =============================== */
/* 2) NAVIGATION                  */
/* =============================== */

.md-nav__link {
  color: #000 !important;
}

.md-nav__link:hover {
  color: #FF1D25 !important;
}

.md-nav__link--active {
  color: #FF1D25 !important;
  font-weight: 700 !important;
}


/* =============================== */
/* 3) LINKS                       */
/* =============================== */

.md-content a,
.md-typeset a {
  color: #FF1D25 !important;
  text-decoration: none !important;
}

.md-content a:hover,
.md-typeset a:hover {
  color: #FF0000 !important;
}


/* =============================== */
/* 4) BUTTONS                     */
/* =============================== */

.md-typeset a.tag-btn,
.tag-btn {
  display: inline-block;
  width: 260px;
  padding: 10px;
  margin: 6px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  background-color: #C3C3C3 !important;
  color: #000 !important;
  transition: 0.2s;
}

.tag-btn:hover {
  background-color: #FF1D25 !important;
  color: #fff !important;
}


/* =============================== */
/* 5) FILTER LAYOUT              */
/* =============================== */

.filter-columns {
  display: flex;
  gap: 40px;
}

.filter-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =============================== */
/* 6) SEARCH                     */
/* =============================== */

.md-search__scrollwrap,
.md-search-result {
  background: #FFFFFF !important;
}

.md-search-result__item {
  background: #E3E3E3 !important;
}

.md-search-result__link {
  color: #FF1D25 !important;
}


/* =============================== */
/* HEADER EXTRA                   */
/* =============================== */

.md-header__title {
  color: #444 !important;
}

.md-nav__title {
  display: none !important;
}