@font-face {
  font-family: 'MessinaSansWeb';
  src: url('fonts/MessinaSansWeb-Regular.woff2') format('woff2'),
    url('fonts/MessinaSansWeb-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+000D-FB04;
}

@font-face {
  font-family: 'MessinaSansSerif';
  src: url('fonts/MessinaSerifWeb-SemiBold.woff') format('woff'),
    url('fonts/MessinaSerifWeb-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+000D-FB04;
}

:root {
  --maincolor1: #FFFFFF;
  --maincolor2: #1a1a1a;
}

* {
  font-family: 'MessinaSansWeb';
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--maincolor1);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -moz-font-feature-settings: "kern" 1;
  -ms-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  
  font-feature-settings: "liga" off;
  font-feature-settings: "dlig" off;
  font-feature-settings: "tnum" off;
  font-feature-settings: "onum" off;
  font-feature-settings: "ss01" off;
}

.head_link,
.head_link:visited,
.head_link:hover,
.head_link:active {
  text-decoration: none;
}

button:focus,
button:active {
  outline: none;
}

h1 {
  font-size: 52px;
  line-height: 1.35em;
  font-family: 'MessinaSansSerif';
}

.navleft h1 {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h2 {
  font-size: 30px;
  font-family: 'MessinaSansSerif';
}

h3,
.portfolio-grid-item h3 a {
  font-size: 13px;
  line-height: 1.2em;
}

h4 {
  font-size: 30px;
  padding-bottom: 20px;
  line-height: normal;
  font-family: 'MessinaSansSerif';
}

.mobile-menu-list li a {
  font-size: 32px;
}

.grayedout {
  color: #AFAFAF;
}

.text {
  line-height: 1.8em;
}

a {
  text-decoration: none;
  color: inherit;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
}

.article_titel_hr {
  margin-bottom: 30px;
  margin-top: 20px;
  width: 50px;
  border: 0px;
  height: 5px;
  background: currentColor;
}

/* ----- TRANSITION & ANIMATIONS ----- */
.easeout {
  opacity: 1;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.easeout:hover {
  opacity: .80;
}

.selected {
  border-bottom: 2px solid currentColor;
}

.highlighth2 {
  border-bottom: 3px solid;
  padding-bottom: 3px;
  font-size: 40px;
}

.underline:hover,
.underline_filter:hover {
  border-bottom: 2px solid currentColor;
}

.underline_circle {
  position: relative;
  text-decoration: none;
  /* Kein Underlining */
}

.underline_circle::before {
  content: "";
  position: absolute;
  left: -25px;
  /* Abstand zum Text */
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  /* Größe des Kreises */
  height: 7px;
  background-color: currentColor;
  /* Nimmt die Textfarbe */
  border-radius: 50%;
  opacity: 0;
  /* Unsichtbar am Anfang */
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-50%) scale(0.5);
  /* Startet kleiner */
}

.underline_circle:hover::before,
.underline_circle.active::before {
  opacity: 1;
  /* Sichtbar beim Hover oder wenn aktiv */
  transform: translateY(-50%) scale(1);
  /* Normale Größe */
}


/* ----- KONTAKT ----- */
.contact-page .underline_circle::before { background-color: currentColor; }

.contact-page .selected { border-bottom: 2px solid currentColor; }

.contact-page .footer_content { color: inherit; }

.contact-page .about_2_trivia div,
.contact-page .about_2_trivia span { color: inherit; }

.contact-page .menuitems a,
.contact-page .menu_bottom_link a {
  color: var(--maincolor1);
  /* Blau für die Links im Menü */
}

/* Burger-Menü ohne Hintergrund und weißes SVG */
.contact-page svg,
.contact-page svg rect {
  fill: var(--maincolor2);
  /* Weiß für das Burger-Symbol */
  stroke: var(--maincolor2);
}

/* Invertierte Farben für Text auf der Kontaktseite */
.contact-page .contact_background h1,
.contact-page .contact_background h2,
.contact-page .contact_background p,
.contact-page .contact_background a {
  color: var(--maincolor2);
  /* Weiß */
}

.contact-page .underline:hover,
.contact-page .underline_filter:hover {
  border-bottom: 2px solid var(--maincolor2);
  transition: 100ms;
}

/* ----- KONTAKT ----- */
@media screen and (max-width: 2070px) {
  h1 {
    font-size: 42px;
  }

  .about_1_h2 {
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 20px;
  }

  .about_1_h2 {
    font-size: 18px;
  }

  h3,
  .portfolio-grid-item h3 a {
    font-size: 9px;
    line-height: 1.2em;
  }

  .contact-page .menuitems a,
  .contact-page .menu_bottom_link a {
    color: var(--maincolor1);
    /* Blau */
  }

  /* X-Symbol im mobilen Menü bleibt Blau */
  .contact-page .menuclose .icon_settings {
    fill: var(--maincolor1);
    stroke: var(--maincolor1);
  }

  .selected_nav,
  .selected_filter {
    border-bottom: 0px solid;
    padding-bottom: 0px;
  }

  .underline:hover {
    border-bottom: 0px solid;
    padding-bottom: 0px;
    transition: 0ms;
  }

  .highlighth2 {
    border-bottom: 2px solid;
    padding-bottom: 3px;
    font-size: 30px;
  }
}