/* ==========================================================================
   Morningstar IT-Solutions – eigenes Stylesheet
   Ergänzt Bootstrap 4.5.0 (css/bootstrap.min.css), das davor geladen wird.
   Die Reihenfolge der Abschnitte ist Teil der Kaskade: Bootstrap-Verhalten
   (z. B. Display-Schriftgewicht) wird in Abschnitt 3 nachgebildet und muss
   vor den Hilfsklassen in Abschnitt 4 stehen.
   ========================================================================== */


/* 1. Schrift ------------------------------------------------------------ */

@font-face {
  font-family: 'Rubik-Regular';
  font-display: swap;
  src: url('../fonts/rubik-regular.ttf');
}


/* 2. Grundlagen --------------------------------------------------------- */

html,
body {
  height: auto;
  min-height: 100vh;
}

body {
  position: relative;
  z-index: 0;
  font-family: Rubik;
  font-style: normal;
  line-height: 1.5;
  color: #232323;
}

section {
  background-color: #eeeeee;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

section,
.container,
.container-fluid {
  position: relative;
  word-wrap: break-word;
}

:focus {
  outline: none;
}

a {
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  color: #149dcc;
}

a:hover {
  text-decoration: none;
  color: #149dcc;
}

b,
strong {
  font-weight: bold;
}

ul,
ol,
pre,
blockquote {
  margin-bottom: 2.3125rem;
}

blockquote {
  padding: 10px 0 10px 20px;
  position: relative;
  font-style: italic;
  font-size: 1.09rem;
  border-style: none none none solid;
  border-width: 3px;
  border-color: #149dcc;
}

.card {
  background-color: transparent;
  border: none;
}

.card-img {
  text-align: center;
  flex-shrink: 0;
  width: auto;
}


/* 3. Überschriften und Titelgrößen --------------------------------------
   Die Klassen title-xxl, title-xl und text-ui hießen früher display-1,
   display-2 und display-4 und erbten von Bootstrap das Schriftgewicht 300. */

.title-xxl,
.title-xl,
.text-ui {
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title-xxl,
.title-xl,
.text-ui {
  line-height: 1;
  word-break: break-word;
  word-wrap: break-word;
}


/* 4. Hilfsklassen ------------------------------------------------------- */

.white-text {
  color: #ffffff;
}

.bold {
  font-weight: 700;
}

.light {
  font-weight: 300;
}

.normal-weight {
  font-weight: normal;
}

.center-text {
  text-align: center;
}

.body-text {
  font-style: normal;
  line-height: 1.6;
}

.hero-title {
  font-style: normal;
  line-height: 1.2;
}

.contact-intro {
  line-height: 1.3;
}

.content-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: start;
}

@media (min-width: 992px) {
  .content-row {
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .center-text,
  .hero-buttons,
  .hero-title {
    text-align: center;
  }
}

.fullscreen {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.fullscreen .hero-overlay {
  min-height: 100vh;
}


/* 5. Schriftgrößen -------------------------------------------------------
   Unterhalb von 768px skaliert die Schrift flüssig mit der Bildschirmbreite
   (320px = kleinste Größe, 768px = volle Größe). */

.title-xxl {
  font-family: 'Rubik-Regular';
  font-size: 4.25rem;
}

.title-xl {
  font-family: 'Rubik-Regular';
  font-size: 2.5rem;
}

.text-ui {
  font-family: 'Rubik-Regular';
  font-size: 1rem;
}

.text-lg {
  font-family: 'Rubik-Regular';
  font-size: 1.3rem;
}

.text-base {
  font-family: 'Rubik-Regular';
  font-size: 1rem;
}

@media (max-width: 768px) {
  .title-xxl {
    font-size: 3.4rem;
    font-size: calc( 2.1374999999999997rem + (4.25 - 2.1374999999999997) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (2.1374999999999997rem + (4.25 - 2.1374999999999997) * ((100vw - 20rem) / (48 - 20))));
  }
  .title-xl {
    font-size: 2rem;
    font-size: calc( 1.525rem + (2.5 - 1.525) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.525rem + (2.5 - 1.525) * ((100vw - 20rem) / (48 - 20))));
  }
  .text-ui {
    font-size: 0.8rem;
    font-size: calc( 1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20))));
  }
  .text-lg {
    font-size: 1.04rem;
    font-size: calc( 1.105rem + (1.3 - 1.105) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.105rem + (1.3 - 1.105) * ((100vw - 20rem) / (48 - 20))));
  }
}


/* 6. Buttons -------------------------------------------------------------
   Ergänzt Bootstrap-.btn; btn-hero ist die Variante im Kopfbereich. */

.btn {
  font-weight: 500;
  border-width: 2px;
  font-style: normal;
  letter-spacing: 1px;
  margin: .4rem .8rem;
  white-space: normal;
  transition: all .3s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  padding: 1rem 3rem;
  border-radius: 3px;
}

.btn-hero {
  margin: .4rem .8rem !important;
  background: none;
  border-color: #0b566f;
  color: #0b566f;
}

.btn-hero:hover,
.btn-hero:focus,
.btn-hero.focus,
.btn-hero.active {
  color: #ffffff;
  background-color: #149dcc;
  border-color: #149dcc;
}

@media (max-width: 767px) {
  .btn {
    font-size: .75rem !important;
  }
}


/* 7. Kopfbereich (Hero) ------------------------------------------------ */

.hero {
  background-image: url("../img/morningstar-it-willkommen.jpg");
}

.hero-overlay {
  background-color: #000;
  bottom: 0;
  left: 0;
  opacity: .5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.hero .hero-title {
  color: #879a9f;
  text-align: left;
}

.hero .hero-title span {
  color: #ffffff;
}

.hero .hero-subtitle {
  color: #ffffff;
}

.hero .typed-text,
.hero .hero-subtitle {
  letter-spacing: 0.03rem;
}

.hero .typed-words {
  color: #0f7699;
}

.hero .typed-cursor {
  opacity: 1;
  animation: blink 0.7s infinite;
  color: #0f7699;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero .msit-gradient {
  display: inline-block;
  background: radial-gradient(circle farthest-corner at top right, #ffffff, #666666) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.hero-buttons {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  font-size: 0;
  color: #ffffff;
}

.hero-buttons a.btn:hover,
.hero-buttons a.btn:focus {
  box-shadow: none !important;
}

.hero .btn-hero {
  color: white;
  background: #0b566f;
  opacity: 0.6;
  margin-left: 4px !important;
}


/* 8. Überschriftenband (z. B. „Zuverlässigkeit und Erfahrung") --------- */

.heading-band {
  padding-top: 45px;
  padding-bottom: 30px;
  background-color: #073b4c;
}

.heading-band .body-text,
.heading-band blockquote {
  color: #ffffff;
}

.heading-band .body-text {
  text-align: center;
}


/* 9. Leistungen --------------------------------------------------------- */

.services {
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #efefef;
}

.services p {
  margin-bottom: 0;
}

.services .service-box {
  z-index: 1;
  position: relative;
  background-color: rgba(35, 35, 35, 0.8);
  height: 100%;
  width: 100%;
}

.services .content-row {
  word-wrap: break-word;
  word-break: break-word;
  align-items: stretch;
  -webkit-align-items: stretch;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
}

.services .service-wrap {
  position: relative;
  height: 100%;
}

.services .card {
  padding-bottom: 2rem;
}

.services h4 {
  color: #149dcc;
}

.services p {
  text-align: left;
}

@media (min-width: 1500px) {
  .services .col-xl-6 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}


/* 10. Kontakt ----------------------------------------------------------- */

.contact {
  padding-top: 60px;
  padding-bottom: 90px;
  background-color: #efefef;
}

.contact .contact-icon {
  font-size: 48px;
  transition: color .3s;
  color: #767676;
}

.contact .card-img {
  text-align: center;
}

.contact .contact-intro,
.contact .contact-intro div {
  color: #0f7699;
}

.contact .body-text {
  color: #767676;
}

.contact .contact-card {
  border-radius: .25rem;
  background: #ffffff;
  padding: 2.5rem;
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}

@media (max-width: 767px) {
  .contact .card-img,
  .contact .body-text,
  .contact .contact-intro {
    text-align: center !important;
  }
}

@media (max-width: 991px) {
  .contact .contact-card {
    margin-bottom: 2rem;
  }
}


/* 11. Impressum / Datenschutz ---------------------------------------- */

.legal-text {
  padding-top: 75px;
  padding-bottom: 30px;
  background-color: #ffffff;
}

.legal-text .body-text,
.legal-text blockquote {
  color: #767676;
}


/* 12. Fußbereich ------------------------------------------------------- */

.site-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #073b4c;
}

.site-footer .footer-title {
  text-align: center;
  color: #efefef;
}

.site-footer .footer-tagline {
  text-align: center;
}

.site-footer .tagline-text {
  color: #9e9e9e;
}

.site-footer .footer-links {
  text-align: center;
  color: #656565;
}

.site-footer .link-accent:hover,
.site-footer .link-accent:focus {
  color: #0b566f;
}