/* ibm-plex-sans-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-v23-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-v23-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans-v23-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Basis */
html { background: #ededed; }
body { background: transparent; font-family: 'IBM Plex Sans'; color: #000; opacity: 0; -webkit-transition: all 1s; transition: all 1s; background-color: #ededed; }
a { color: #000; }
a:hover { color: #000; }
body.loaded { opacity: 1; background-color: #ededed; }
strong { font-weight: 500; }
.massiv { font-weight: 700; }
.uk-button-default { background-color: #ffcb00; border: 1px solid #ffcb00; font-weight: 500; text-transform: none; font-size: 18px; }
.uk-button-default:hover { background-color: #fff; border: 1px solid #ffcb00; }
.uk-button-primary { background-color: #fff; color: #000; border: 1px solid #666; padding: 2px 10px !important; }
.uk-button-primary:hover { background-color: #ffcb00; color: #000; border: 1px solid #ffcb00; }
.vollebreite { min-width: 100%; }
.ru-nachoben { position: fixed; bottom: 30px; right: 40px; background-color: #ffcb00; z-index: 1099; }
a.ru-nohover:hover { text-decoration: none; }

@media (max-width: 639px) {
    .uk-button-default { font-size: 14px; }
    .ru-nachoben { bottom: 15px; right: 15px; }
}

/* Video */
.is-hidden { opacity: 0; pointer-events: none; }
.is-visible { opacity: 1; pointer-events: auto; }
.video-layer { position: absolute; inset: 0; }
main { margin-top: -125px; }

@media (max-width: 639px) {
    main { margin-top: -60px; }
}

/* Hero */
@media (max-width: 639px) {
    .ru-hero { min-height: calc(42vh) !important; }
}

/* Header */
header { height: 125px; z-index: 1; width: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%); }
.ru-logo { width: 125px; }
.ru-navigation { text-align: right; margin-top: 40px; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; }
header.uk-sticky-below .ru-navigation { margin-top: 15px; }
.ru-navigation ul { margin: 0; padding: 0; }
.ru-navigation ul li { display: inline-block; margin-left: 15px; margin-right: 15px; }
.ru-navigation ul li a { color: #fff; text-decoration: none; font-size: 18px; }
.ru-navigation ul li a:hover { color: #ffcb00; }
.ru-navigation ul li.aktiv a { font-weight: 700; }
.ru-mobiltrigger { cursor: pointer; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3); background-color: #fff; padding: 5px 10px 10px 10px; display: inline-block; }

@media (max-width: 639px) {
    header { height: 60px; }
    .ru-logo { width: 60px; }
}

/* Mobilnavi */
#ru-mobilnavi { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffcb00; z-index: 982; text-align: right; }
#ru-mobilnavi ul { margin: 100px 0 0 0; padding: 0; list-style: none; }
#ru-mobilnavi ul li { display: block; }
#ru-mobilnavi ul li a { font-size: 30px; text-decoration: none; }
#ru-mobilnavi ul li.aktiv a { text-decoration: underline; font-weight: 700; }

/* Content */
h1,h2,h3,h4,h5 { font-weight: 500; font-family: 'IBM Plex Sans'; }
h1 { font-size: 34px; }
h2 { font-size: 34px; }
p { font-size: 26px; line-height: 32px; }
p.klein { font-size: 18px; line-height: 24px; }
p.abstand { line-height: 56px; }
.ru-contact-icon { width: 25px; margin: 0 8px 0 10px; }
.ru-mail-icon { width: 18px; margin: 0 10px 0 0; }
.ru-history-card-content p.klein { font-weight: 400; }
main ul { font-size: 18px; line-height: 24px; }
p.schmal { max-width: 80%; }
p.ru-about-center { color: #ffcb00; font-size: 44px; font-weight: 700; text-align: center; margin: auto; max-width: 700px; line-height: 60px; }
.tuerkis { color: #23B9D6; }
.gelb { color: #ffcb00; }
.schwarz { color: #000; }
.grau { color: #888; }

@media (max-width: 639px) {
    h1 { font-size: 22px; }
    h2 { font-size: 22px; }
    p { font-size: 18px; line-height: 26px; }
    p.klein { font-size: 15px; line-height: 20px; }
    p.abstand { line-height: 40px; }
    main ul { font-size: 15px; line-height: 20px; }
    p.schmal { max-width: 100%; }
    p.ru-about-center { font-size: 24px; line-height: 26px; }
}

/* Footer */
footer { background-color: #fff; position: relative; margin-top: 140px; padding-bottom: 80px; z-index: 981; }
footer p { font-size: 14px; margin-top: 0; color: #000; }
footer nav ul { margin: 0; padding: 0; list-style: none; margin-top: 20px; }
footer nav ul li { display: inline-block; margin-left: 20px;}
footer nav ul li a { color: #000; font-size: 14px; }
footer a:hover { text-decoration: underline; }
.ru-footer-box { background-color: #23B9D6; color: #fff; padding: 30px 40px; font-size: 22px; font-weight: 500; display: inline-block; }
.ru-footer-icon { width: 15px; margin-right: 10px; }

@media (max-width: 639px) {
    footer { margin-top: 70px; padding-bottom: 40px; }
    footer nav ul li { margin-left: 0; margin-right: 15px; }
    .ru-footer-box { padding: 20px 30px; font-size: 18px; }
}

/* Cards */
.hoverscale { transform: scale(1.1); -webkit-transition: -webkit-transform .8s; transition: transform .8s, -webkit-transform .8s; }
.hoverscale:hover { transform: scale(1); }
.no-pointer-events { pointer-events: none; }

@media (max-width: 639px) {
    .ru-kachel { aspect-ratio: 5 / 4 !important; }
    .hoverscale { transform: scale(1); }
}

/* Slider */
.ru-dotnav { align-items: center; justify-content: center; margin-top: 25px; }
.ru-slider-margin-right { margin-right: 27px; }
.ru-dotnav.uk-dotnav>* { padding-left: 6px; padding-right: 6px; }
.uk-dotnav>*>* { border: 1px solid #23B9D6; width: 12px; height: 12px; }
.uk-dotnav>.uk-active>* { background-color: #23B9D6; }
.quote { position: absolute; font-size: 50px; margin-left: -27px; margin-top: -6px; }
.quote2 { position: absolute; font-size: 50px; margin-top: 4px; }

@media (max-width: 639px) {
    .ru-slider-margin-right { margin-right: 0; }
    .quote { position: relative; margin-left: 0; margin-top: 0; }
}

/* Akkordeon */
.uk-accordion-title { display: inline-block !important; font-size: 50px !important; font-weight: 500 !important; }
.uk-accordion-title span { width: 25px; height: 25px; margin-left: 15px !important; background-size: 100%; margin-top: 20px; filter: brightness(0); transform: scale(2); }
.uk-accordion-title.tuerkis span { filter: invert(74%) sepia(34%) saturate(2585%) hue-rotate(148deg) brightness(88%) contrast(89%); }
.uk-accordion-title.gelb span { filter: invert(76%) sepia(61%) saturate(1423%) hue-rotate(358deg) brightness(103%) contrast(102%); }
.uk-accordion-title.schwarz span {  }
.uk-accordion-title.grau span { filter: invert(57%) sepia(0%) saturate(0%) hue-rotate(51deg) brightness(94%) contrast(97%); }
.uk-accordion-title { color: #000; }
.uk-accordion-title.tuerkis { color: #23B9D6; }
.uk-accordion-title.gelb { color: #ffcb00; }
.uk-accordion-title.schwarz { color: #000; }
.uk-accordion-title.grau { color: #888; }
.uk-accordion-title:hover { color: #000; }
.uk-accordion-title.tuerkis:hover { color: #23B9D6; }
.uk-accordion-title.gelb:hover { color: #ffcb00; }
.uk-accordion-title.schwarz:hover { color: #000; }
.uk-accordion-title.grau:hover { color: #888; }

@media (max-width: 639px) {
    .uk-accordion-title { font-size: 34px !important; }
    .uk-accordion-title::before { margin-left: 15px; margin-top: 10px; }
}

/* Weltkarte */
.ru-weltkarte-dot { position: absolute; width: 20px; height: 20px; border: none; border-radius: 10px; background-color: #23B9D6; cursor: pointer; }
.ru-weltkarte-dot:hover { background-color: #444; }
.dot1 { left: 26.5%; top: 43.5%; }
.dot2 { left: 49%; top: 29.5%; }
.dot3 { left: 52.5%; top: 32%; }
.dot4 { left: 57.5%; top: 33.5%; }
.ru-weltkarte-drop { background-color: #fff; max-width: 300px !important; }
.ru-weltkarte-drop p { font-size: 16px; line-height: 22px; }

@media (max-width: 639px) {
    .ru-weltkarte-drop { max-width: 200px !important; }
    .ru-weltkarte-drop p { font-size: 14px; line-height: 18px; }
}

/* History */
.ru-history-down { color: #fff; font-weight: 700; }
.ru-history-down span { color: #ffcb00; }
.ru-history-weiter a:hover { text-decoration: none; }
.ru-history-box { background-color: #ffcb00; padding: 10px; width: 800px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3); }
.ru-history-box-text { position: absolute; bottom: 110px; left: 40px; color: #fff; font-size: 54px; font-weight: 500; line-height: 26px; }
.ru-history-box-text span { font-size: 24px; line-height: 8px; }
.ru-history-card { display: flex; }
.ru-history-card-content { display: inline-block; margin-top: 40px; width: 100%; max-height: calc(100vh - 40px); font-weight: 500; font-size: 20px; }
.card1 .ru-history-card-content::before { left: 0; content: '1993 - 2001'; position: absolute; top: 0px; width: calc(25% - 20px); height: 30px; padding: 10px 0 0 40px; background-image: url("../img/reiter-1.webp"); background-repeat: no-repeat; background-position: right; }
.card2 .ru-history-card-content::before { left: 25%; content: '2002 - 2011'; position: absolute; top: 0px; width: calc(25% - 20px); height: 30px; padding: 10px 0 0 40px; background-image: url("../img/reiter-2.webp"); background-repeat: no-repeat; background-position: right; }
.card3 .ru-history-card-content::before { left: 50%; content: '2012 - 2021'; position: absolute; top: 0px; width: calc(25% - 20px); height: 30px; padding: 10px 0 0 40px; background-image: url("../img/reiter-3.webp"); background-repeat: no-repeat; background-position: right; }
.card4 .ru-history-card-content::before { left: 75%; content: '2022 - 2026'; position: absolute; top: 0px; width: calc(25% - 40px); height: 30px; padding: 10px 0 0 40px; background-image: url("../img/reiter-4.webp"); background-repeat: no-repeat; background-position: right; }
.card1 .ru-history-card-content { background-color: #f7f7f7; }
.card2 .ru-history-card-content { background-color: #cccccc; }
.card3 .ru-history-card-content { background-color: #e0e0e0; }
.card4 .ru-history-card-content { background-color: #ffcb00; }
.ru-history-bilder { height: 100%; }

@media (max-width: 639px) {
    .ru-history-box { padding: 0; width: calc(100% - 60px); }
    .card1 .ru-history-card-content::before { top: 0px; width: calc(25% + 10px); height: 30px; padding: 10px 0 0 10px; font-size: 12px; }
    .card2 .ru-history-card-content::before { top: 0px; width: calc(25% + 10px); height: 30px; padding: 10px 0 0 10px; font-size: 12px; }
    .card3 .ru-history-card-content::before { top: 0px; width: calc(25% + 10px); height: 30px; padding: 10px 0 0 10px; font-size: 12px; }
    .card4 .ru-history-card-content::before { top: 0px; width: calc(25%); height: 30px; padding: 10px 0 0 10px; font-size: 12px; }
    .ru-history-bilder { height: 38vh; }
}

/* Kontaktformular */
.ru-kontakt label { font-size: 16px; }
.ru-kontakt input { border: none; background-color: #fff; width: 100%; padding: 10px; box-sizing: border-box; font-family: 'IBM Plex Sans'; font-size: 22px; }
.ru-kontakt textarea { border: none; background-color: #fff; width: 100%; padding: 10px; box-sizing: border-box; font-family: 'IBM Plex Sans'; font-size: 22px; }
.ru-kontakt select { border: none; background-color: #fff; width: 100%; padding: 10px; box-sizing: border-box; font-family: 'IBM Plex Sans'; font-size: 22px; }
.ru-kontakt button { border: none; background-color: #ffcb00; color: #000; font-weight: 700; font-size: 22px; padding: 10px; box-sizing: border-box; width: 100%; cursor: pointer; }

@media (max-width: 639px) {
    .ru-kontakt label { font-size: 16px; }
    .ru-kontakt input { font-size: 18px; }
    .ru-kontakt textarea { font-size: 18px; }
    .ru-kontakt select { font-size: 18px; }
    .ru-kontakt button { font-size: 18px; }
}