/* So kannst du deine eigene Schriftart angeben. Der Ordner der Schrift muss unter assets/fonts/ liegen */
@font-face {
  font-family: "Nimbus SanL"; /*Name bleibt gleich*/
  font-weight: normal; /* Font weight bleibt gleich*/
  font-display: swap; /* bleibt gleich*/
  src:
    url("../../fonts/Nimbus SanL/NimbusSanL-Regu.woff") format("woff"),
    url("../../fonts/Nimbus SanL/NimbusSanL-Regu.woff2") format("woff2"),
    url("../../fonts/Nimbus SanL/NimbusSanL-Regu.ttf") format("ttf");
}

@font-face {
  font-family: "THAEverett"; /* Name bleibt gleich */
  font-weight: bold; /* Font weight bleibt gleich */
  font-display: swap; /* bleibt gleich*/
  src:
    url("../../fonts/Nimbus SanL/NimbusSanL-Bold.woff") format("woff"),
    url("../../fonts/Nimbus SanL/NimbusSanL-Bold.woff2") format("woff2"),
    url("../../fonts/Nimbus SanL/NimbusSanL-Bold.ttf") format("ttf");
}

/* Normalerweise wird die Schriftart dann überall verändert.*/
/* Die Variablen der Schrift werden in :root werden die Variablen definiert: */
:root {
  --font-family-text:
    "Nimbus SanL", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  --font-family-headline:
    "Nimbus SanL", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  font-weight: bold;
  --font-family-navi:
    "Nimbus SanL", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  font-weight: bold;
}

/* --- Änderung --- */
nav {
  justify-content: space-between;
}

#responsiveNav {
  width: auto !important;
}
/* ---    --    --- */

a.logo>img{
  width: 7rem !important;
}

h1,
h2,
h3,
.nav-item-a {
  text-transform: uppercase;
}

.content-padding h1 {
  line-height: 80% !important;
}

#responsiveNav li a {
  font-size: calc(var(--font-base) * 1.24);
}

.kirbytext p,
p.kirbytext,
.kirbytext ul {
  font-size: calc(var(--font-base) * 0.9);
}

/* Über das Hintergrundbild kannn der Mapbox-Marker verändert werden. Der Marker liegt im gleichen Verzeichnis wie das Custom CSS. */
.mapboxgl-marker {
  background-image: url("./icon_marker.svg");
}

.marquee--wrapper {
  background-color: #7791f0;
}

.sponsorimage img {
  filter: none;
  /* object-fit: unset; */
}

.students-grid a {
  text-decoration: none;
}

.students-grid a:hover {
  color: var(--color-hover);
  text-decoration: none;
}

.bordered .kirbytext .student--content a {
  word-break: break-all;
}

/* .sponsorimage img:hover {
    filter: grayscale();
} */

/* Desktop only */
@media (hover: hover) and (pointer: fine) {
  *,
  *::before,
  *::after {
    cursor:
      url("cursor.svg") 40 40,
      auto !important;
  }
  * Links mit höherer Spezifität */ #responsiveNav li a,
  .students-grid a,
  .kirbytext a {
    cursor:
      url("cursor.svg") 46 16,
      pointer !important;
  }
}

/* Mobil: Deaktiviere */
@media (hover: none) and (pointer: coarse) {
  * {
    cursor: auto !important;
  }
}

/* --- Änderung (line-heights werden jetzt auch angepasst) --- */
@media screen and (min-width: 768px) {
  .logo {
    font-size: calc(var(--font-base) * 1.24);
    line-height: calc(var(--font-base) * 1.24);
  }
  .h1,
  .h2 {
    font-size: calc(var(--font-base) * 1.24);
    line-height: calc(var(--font-base) * 1.24);
  }
  .marquee {
    font-size: calc(var(--font-base) * 0.9);
    line-height: calc(var(--font-base) * 0.9);
  }
}
@media screen and (min-width: 1024px) {
  .logo {
    width: 5rem;
  }
  .h1,
  .h2 {
    font-size: calc(var(--font-base) * 1.24);
    line-height: calc(var(--font-base) * 1.24);
  }
  .marquee {
    font-size: calc(var(--font-base) * 0.9);
    line-height: calc(var(--font-base) * 0.9);
  }
}
@media screen and (min-width: 1400px) {
  .logo {
    width: 4rem;
  }

  .h1,
  .h2 {
    font-size: calc(var(--font-base) * 1.88);
    line-height: calc(var(--font-base) * 1.88);
  }

}