/* reset */
body { background: #eee }
img { margin: 0 }

footer.footer { background: #eee; padding: 250px 0 25px 0 }

.logo { display: block; margin-top: 30px }
.logo svg { width: 200px; color: #fff }
.navi { display: block; color: #fff; background: rgba(0,0,0,0.3); padding: 20px }
.navi:hover { background: rgba(0,0,0,0.5) }

/* hero */
.hero .title { padding-bottom: 10px }
.header-img { max-width: 660px ! important; width: 100% }

/* text */
p { margin-bottom: 20px }
.italic { font-style: italic }
.center { text-align: center; margin: 0 auto }
.bold { font-weight: bold }
.text-white { color: #fff }
.text-cyan { color: #00a1b3 }
.text-purple { color: #7f35b2 }

/* background */
.bg-white { background: #fff }
.bg-light { background: #eee }
.bg-header { padding:30px 20px 0 20px; background: #ddd; background: radial-gradient(circle at 40% 60%, rgba(250, 250, 250, 1) 0%, rgba(50, 50, 50, 1) 66%) }
.bg-dark { background: linear-gradient(#ccc, #bbb) }
.bg-cyan { background-color: #00a1b3; color: #fff }
.bg-blue-light { background-color: #0191da; color: #fff }
.bg-blue-dark { background-color: #1e428a; color: #fff }
.bg-purple { background-color: #7f35b2; color: #fff }


/* box */
.box figure.image img { width:auto; height:100%; margin: 0 auto }
.box h4.title.is-4 { margin: 0 0 10px 0}
.box p { margin-bottom: 15px }

.bg-box {
  background: white;
  border-left: 5px solid; /* Breite der Linie */
  border-image: linear-gradient(to bottom, #00a1b3, #7f35b2) 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 25px 25px 25px
}

.desk-box { position: relative }
.desk-text { }
.desk-text strong {font-size: 200px; line-height: 100% }
.desk-text .name { font-size: 90%; margin-top: 10px }


/* padding & margin */
.pad-0 { padding: 0 ! important }
.pad-15 { padding: 15px 25px 25px 25px }
.bottom-15 { padding-bottom:0; margin-bottom: 5px ! important }
.no-bottom {
    padding-bottom: 0 ! important;
    margin-bottom: 0 ! important
}
.no-top {
    padding-top: 0 ! important;
    margin-top: 0 ! important
}
.rounded-top-10 { border-top-left-radius: 10px; border-top-right-radius: 10px }
.rounded-15 { border-radius: 15px }


.shadow { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) }
.max-450 { max-width: 260px; max-height: 260px }

.max-24 { height: 18px }

/* button */
.is-ocean {
  background-color: #00a1b3 ! important;
  border-color: transparent;
  color: #fff ! important
}
.is-ocean:hover, .button.is-ocean.is-hovered {
  background-color: #106187;
  border-color: transparent;
  color: #fff
}
.is-ocean:focus, .button.is-ocean.is-focused {
  border-color: transparent;
  color: #fff
}
.button.is-ocean:focus:not(:active), .button.is-ocean.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25)
}

.is-purple {
  background-color: #7f35b2 ! important;
  border-color: transparent;
  color: #fff ! important
}
.is-purple:hover, .button.is-purple.is-hovered {
  background-color: #652abc;
  border-color: transparent;
  color: #fff
}
.is-purple:focus, .button.is-purple.is-focused {
  border-color: transparent;
  color: #fff
}
.button.is-purple:focus:not(:active), .button.is-purple.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(101, 42, 140, 0.25)
}


@media (max-width: 767px){
    .mobile-center {
        text-align: center;
        margin: 0 auto
    }
    .buttons.mobile-center {
        display: inline-block
    }
}

@media (max-width: 1023px){
    .pad-mobile { padding: 0 20px }
}

@media (min-width: 768px){
    body { font-size: 110% }
    .navbar { min-height: 5rem }
    .bg-header { padding-top: 0; background: #ddd; background: radial-gradient(circle at 70% 30%, rgba(250, 250, 250, 1) 0%, rgba(50, 50, 50, 1) 66%) }
}

@media (min-width: 1024px){
    .bg-header { padding:0; background: #ddd; background: radial-gradient(circle at 70% 30%, rgba(250, 250, 250, 1) 0%, rgba(50, 50, 50, 1) 66%) }
    .desk-text { position: absolute; top: 50px; right: 50px; background: #fff; max-width:400px; border-radius: 15px; padding: 25px }
}

@media (min-width: 1410px){
    .pad-contact { padding: 15px 25px 25px 100px }
}

/* steps */
.steps-container {
  display: flex;
  flex-direction: column; /* Mobile: vertical */
  align-items: center;
  position: relative;
  padding: 2rem 1rem;
  background: #fff
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
  width:100%
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1;
  font-weight: bold
}

.title {
  font-weight: bold;
  margin-top: 0.5rem;
}

.desc {
  max-width: 90%
}

/* Desktop horizontal */
@media(min-width:768px){
  .steps-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .line-horizontal {
    position: absolute;
    top: 60px; /* Höhe der Kreise / Linie mittig */
    left: 12%;
    right: 12%;
    height: 3px;
    background: linear-gradient(to right, #00a1b3, #7f35b2);
    z-index: 0;
  }

  .step {
    margin: 0;
  }

  /* Keine vertikalen Linien mehr */
  .step::after {
    display: none;
  }
}