
@font-face {
  font-family: 'Bradford';
  src: url('../fonts/bradford/BradfordLL-Regular.woff') format('woff'),
    url('../fonts/bradford/BradfordLL-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bradford';
  src: url('../fonts/bradford/BradfordLL-Italic.woff') format('woff'),
    url('../fonts/bradford/BradfordLL-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Bradford';
  src: url('../fonts/bradford/BradfordLL-Bold.woff') format('woff'),
    url('../fonts/bradford/BradfordLL-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}


@font-face {
  font-family: 'Faktum';
  src: url('../fonts/faktum/faktum-regular.woff') format('woff'),
    url('../fonts/faktum/faktum-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "ss02", "ss01";
}
@font-face {
  font-family: 'Faktum';
  src: url('../fonts/faktum/faktum-regular-italic.woff') format('woff'),
    url('../fonts/faktum/faktum-regular-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-feature-settings: "ss02", "ss01";
}
@font-face {
  font-family: 'Faktum';
  src: url('../fonts/faktum/faktum-semibold.woff') format('woff'),
    url('../fonts/faktum/faktum-semibold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "ss02", "ss01";
}


html {
  font-family: Faktum, Bradford, sans-serif;
  letter-spacing: 0.02em;
}

html.uk-light img {
  /* filter: brightness(.8) contrast(1.2); */
}

.uk-background-secondary {
  background: #121212;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
  font-family: Faktum, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/*=== Animierte Wechsel der Wörter. Per Javascript ===*/

.text-changer-dud{
color:#6e6e6e;
}
html.uk-dark .text-changer-dud {
color:#cdcdcd;
}

.text-changer {
padding-right: 30%;
}


/*=== Icon Rotate and Transition ===*/

.icon-rotate {
transform: rotate(180deg);
}	

.animate-rotate {
transition: transform 300ms cubic-bezier(.46,.88,.86,.57);
}


/*=== ACCORDION ===*/

.uk-accordion> :nth-child(n+2) {
  margin-top: 10px;
}

.uk-accordion-content {
  margin-top: 10px;
}

.uk-accordion-title {
  font-size: 18px;
  line-height: 1.1;
}

.uk-accordion-title::before {
  width: 1em;
  height: 1em;
  background-size: 70%;
}



/* === 
Inside Accordion special Textstyles
=== */


.text-about-me > p.lead {
  color: rgb(255, 255, 255) ;
}
html.uk-dark .text-about-me > p.lead {
  color: #333 ;
}



/* ===
Style for viewports greater than 320px wide. 
=== */

@media (min-width: 320px) {

  .uk-accordion-title {
    /* https://kulturbanause.de/blog/fliessend-skalierende-texte-und-schriftgroessen-mit-css-calc/ */
    font-size: calc(18px + (80 - 18) * ((100vw - 320px) / (1600 - 320)));
    line-height: 1.1;

    display: inline;
  }
  
  .text-about-me > p {
    font-size: clamp(1.00rem, calc(0.88rem + 0.63vw), 1.50rem);
    line-height: clamp(1.42rem, calc(1.25rem + 0.89vw), 2.14rem);
  }
  .text-about-me > p.lead {
    font-size: clamp(1.2rem, 0.9652rem + 1.1739vi, 1.875rem);
    line-height: clamp(1.44rem, 1.1257rem + 1.5717vi, 2.3438rem);
  }
}


